From 5a50b50e674627a4c5faaed79ee3c2bd77906413 Mon Sep 17 00:00:00 2001
From: Kobe Attias <kobeattias@gmail.com>
Date: Wed, 7 Oct 2026 10:56:36 -0400
Subject: [PATCH 1/2] Recently visited shows each document's picture and when
 you were there

The homepage rail's Recently visited rows now carry a 48px picture on the
right and the time of the visit above a two-line title, with no document
type. A row's picture is the cover image (or a paper's first PDF page),
else a drawn title page for papers, else the first author's photo, else
the file icon from My Funding. The list stops at six rows so it fits under
the funding power card on a 900px-tall window; the single Clear stays.

Visits now record the picture, an author photo and the visit time.
Entries saved before this show the file icon and no time until revisited.
A paper and a post with the same id no longer evict each other.

Everything lives in components/RecentlyVisited; FundSidebar, which only
ever showed this list, is now RecentlyVisited.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/RightSidebarContainer.tsx      |  4 +-
 .../RecentlyVisited.tsx}                      |  3 +-
 .../RecentlyVisitedCard.tsx                   | 76 +++++++++++--------
 .../RecentlyVisitedThumbnail.tsx              | 48 ++++++++++++
 components/work/SearchHistoryTracker.tsx      | 13 +++-
 types/search.ts                               |  4 +
 6 files changed, 114 insertions(+), 34 deletions(-)
 rename components/{Funding/FundSidebar.tsx => RecentlyVisited/RecentlyVisited.tsx} (76%)
 rename components/{Funding => RecentlyVisited}/RecentlyVisitedCard.tsx (64%)
 create mode 100644 components/RecentlyVisited/RecentlyVisitedThumbnail.tsx

diff --git a/app/layouts/components/RightSidebarContainer.tsx b/app/layouts/components/RightSidebarContainer.tsx
index 21212e604..31f1a82d6 100644
--- a/app/layouts/components/RightSidebarContainer.tsx
+++ b/app/layouts/components/RightSidebarContainer.tsx
@@ -4,12 +4,12 @@ import { ReactNode, Suspense } from 'react';
 import { cn } from '@/lib/utils';
 import { useWorkTab } from '@/components/work/WorkHeader/WorkTabContext';
 import { SwipeableDrawer } from '@/components/ui/SwipeableDrawer';
-import { FundSidebar } from '@/components/Funding/FundSidebar';
+import { RecentlyVisited } from '@/components/RecentlyVisited/RecentlyVisited';
 import { FundingPowerCard } from '@/components/Funding/FundingPowerCard';
 
 function RightSidebarContent({ rightSidebar }: { rightSidebar: boolean | ReactNode }) {
   if (typeof rightSidebar === 'boolean') {
-    return <FundSidebar />;
+    return <RecentlyVisited />;
   }
 
   return <>{rightSidebar}</>;
diff --git a/components/Funding/FundSidebar.tsx b/components/RecentlyVisited/RecentlyVisited.tsx
similarity index 76%
rename from components/Funding/FundSidebar.tsx
rename to components/RecentlyVisited/RecentlyVisited.tsx
index 29f672dcc..0d03f6783 100644
--- a/components/Funding/FundSidebar.tsx
+++ b/components/RecentlyVisited/RecentlyVisited.tsx
@@ -6,7 +6,8 @@ import {
   useRecentlyVisited,
 } from './RecentlyVisitedCard';
 
-export function FundSidebar() {
+/** The default right sidebar's Recently visited section, once local history is readable. */
+export function RecentlyVisited() {
   const { pages, clear, isHydrated } = useRecentlyVisited();
 
   if (!isHydrated) {
diff --git a/components/Funding/RecentlyVisitedCard.tsx b/components/RecentlyVisited/RecentlyVisitedCard.tsx
similarity index 64%
rename from components/Funding/RecentlyVisitedCard.tsx
rename to components/RecentlyVisited/RecentlyVisitedCard.tsx
index 79445744a..c267cbc30 100644
--- a/components/Funding/RecentlyVisitedCard.tsx
+++ b/components/RecentlyVisited/RecentlyVisitedCard.tsx
@@ -2,21 +2,19 @@
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
-import { getSearchHistory, clearSearchHistory, MAX_HISTORY_ITEMS } from '@/utils/searchHistory';
+import { getSearchHistory, clearSearchHistory } from '@/utils/searchHistory';
 import { buildWorkUrl } from '@/utils/url';
+import { formatTimeAgo } from '@/utils/date';
 import { SearchSuggestion } from '@/types/search';
 import { ContentType } from '@/types/work';
 import { cn } from '@/utils/styles';
-import { FieldLabel } from '@/components/ui/FieldLabel';
+import { RecentlyVisitedThumbnail } from './RecentlyVisitedThumbnail';
 
-const WORK_TYPE_LABELS: Record<string, string> = {
-  paper: 'Paper',
-  post: 'Post',
-  preregistration: 'Proposal',
-  question: 'Question',
-  discussion: 'Discussion',
-  funding_request: 'Request for Proposal',
-};
+/**
+ * Storage keeps more visits than the rail lists (the search modal reads them
+ * too); six rows fit under the funding power card on a 900px-tall window.
+ */
+const MAX_VISIBLE = 6;
 
 const SKELETON_ROWS = [
   { title: ['w-[92%]', 'w-[68%]'], meta: 'w-16' },
@@ -24,12 +22,17 @@ const SKELETON_ROWS = [
   { title: ['w-[90%]', 'w-[72%]'], meta: 'w-20' },
   { title: ['w-[78%]', 'w-[48%]'], meta: 'w-14' },
   { title: ['w-[88%]', 'w-[60%]'], meta: 'w-16' },
+  { title: ['w-[82%]', 'w-[64%]'], meta: 'w-12' },
 ] as const;
 
 interface RecentPage {
   href: string;
   title: string;
-  typeLabel?: string;
+  isPaper: boolean;
+  imageUrl?: string;
+  authorImage?: string;
+  /** ISO time of the visit; entries saved before it was recorded have none. */
+  lastVisited?: string;
 }
 
 export interface RecentlyVisited {
@@ -57,7 +60,10 @@ function toRecentPage(visit: VisitRecord): RecentPage | null {
     return {
       href,
       title,
-      typeLabel: WORK_TYPE_LABELS[contentType],
+      isPaper: contentType === 'paper',
+      imageUrl: visit.imageUrl,
+      authorImage: visit.authorImage,
+      lastVisited: visit.lastVisited,
     };
   }
 
@@ -65,7 +71,7 @@ function toRecentPage(visit: VisitRecord): RecentPage | null {
     return {
       href: visit.url || `/post/${visit.id}`,
       title,
-      typeLabel: WORK_TYPE_LABELS.post,
+      isPaper: false,
     };
   }
 
@@ -82,7 +88,7 @@ function visitsToPages(visits: VisitRecord[]): RecentPage[] {
     if (!page || seen.has(page.href)) continue;
     seen.add(page.href);
     collected.push(page);
-    if (collected.length === MAX_HISTORY_ITEMS) break;
+    if (collected.length === MAX_VISIBLE) break;
   }
 
   return collected;
@@ -128,8 +134,8 @@ interface RecentlyVisitedCardProps extends Omit<RecentlyVisited, 'isHydrated'> {
 }
 
 /**
- * Lightweight browsing history for the Activity sidebar: a plain text list of
- * documents from local visit history, no thumbnails or metrics.
+ * Browsing history for the Activity sidebar: documents from local visit
+ * history, each with its picture and when it was last opened.
  */
 export function RecentlyVisitedCard({ pages, clear, className }: RecentlyVisitedCardProps) {
   if (pages.length === 0) return null;
@@ -137,29 +143,38 @@ export function RecentlyVisitedCard({ pages, clear, className }: RecentlyVisited
   return (
     <aside className={cn('w-[250px]', className)}>
       <div className="flex items-center justify-between gap-2">
-        <FieldLabel className="tracking-wider">Recently visited</FieldLabel>
+        <p className="text-sm font-semibold text-gray-500">Recently visited</p>
         <button
           type="button"
           onClick={clear}
-          className="shrink-0 text-[11px] font-semibold text-gray-400 transition-colors hover:text-gray-700"
+          className="shrink-0 text-xs font-medium text-gray-400 transition-colors hover:text-gray-700"
         >
           Clear
         </button>
       </div>
 
-      <ul className="-mx-2 mt-1.5">
+      <ul className="-mx-2 mt-2 flex flex-col gap-0.5">
         {pages.map((page) => (
           <li key={page.href}>
             <Link
               href={page.href}
-              className="block rounded-md px-2 py-1.5 transition-colors hover:bg-white"
+              className="flex items-start gap-3 rounded-[10px] p-2 transition-colors hover:bg-white"
             >
-              <span className="line-clamp-2 text-[13px] font-medium leading-snug text-gray-700">
-                {page.title}
+              <span className="flex min-w-0 flex-1 flex-col gap-[3px] pt-px">
+                {page.lastVisited && (
+                  <span className="text-[11px] leading-tight text-gray-500">
+                    {formatTimeAgo(page.lastVisited)}
+                  </span>
+                )}
+                <span className="line-clamp-2 text-[13px] font-medium leading-snug text-gray-900">
+                  {page.title}
+                </span>
               </span>
-              {page.typeLabel && (
-                <span className="mt-0.5 block text-[11px] text-gray-400">{page.typeLabel}</span>
-              )}
+              <RecentlyVisitedThumbnail
+                imageUrl={page.imageUrl}
+                authorImage={page.authorImage}
+                isPaper={page.isPaper}
+              />
             </Link>
           </li>
         ))}
@@ -173,17 +188,18 @@ export function RecentlyVisitedCardSkeleton({ className }: { className?: string
   return (
     <aside className={cn('w-[250px] animate-pulse', className)} aria-hidden>
       <div className="flex items-center justify-between gap-2">
-        <div className="h-3 w-28 rounded bg-gray-200" />
+        <div className="h-3.5 w-28 rounded bg-gray-200" />
         <div className="h-3 w-10 rounded bg-gray-200" />
       </div>
-      <ul className="-mx-2 mt-1.5">
+      <ul className="-mx-2 mt-2 flex flex-col gap-0.5">
         {SKELETON_ROWS.map((row) => (
-          <li key={row.meta + row.title[0]} className="px-2 py-1.5">
-            <div className="space-y-1.5">
+          <li key={row.meta + row.title[0]} className="flex items-start gap-3 p-2">
+            <div className="min-w-0 flex-1 space-y-1.5 pt-px">
+              <div className={cn('h-2.5 rounded bg-gray-200', row.meta)} />
               <div className={cn('h-3.5 rounded bg-gray-200', row.title[0])} />
               <div className={cn('h-3.5 rounded bg-gray-200', row.title[1])} />
             </div>
-            <div className={cn('mt-1.5 h-2.5 rounded bg-gray-200', row.meta)} />
+            <div className="h-12 w-12 shrink-0 rounded-[10px] bg-gray-200" />
           </li>
         ))}
       </ul>
diff --git a/components/RecentlyVisited/RecentlyVisitedThumbnail.tsx b/components/RecentlyVisited/RecentlyVisitedThumbnail.tsx
new file mode 100644
index 000000000..0f76f4758
--- /dev/null
+++ b/components/RecentlyVisited/RecentlyVisitedThumbnail.tsx
@@ -0,0 +1,48 @@
+import { Avatar } from '@/components/ui/Avatar';
+import { DocumentThumbnail } from '@/components/Funding/dashboard/DocumentThumbnail';
+import { cn } from '@/utils/styles';
+
+interface RecentlyVisitedThumbnailProps {
+  readonly imageUrl?: string;
+  readonly authorImage?: string;
+  readonly isPaper: boolean;
+}
+
+const TILE = 'flex h-12 w-12 shrink-0 overflow-hidden rounded-[10px]';
+
+/** A small blank first page, standing in for a paper that has no preview image. */
+function TitlePageThumbnail() {
+  return (
+    <span className={cn(TILE, 'items-end justify-center bg-slate-200/70')} aria-hidden="true">
+      <span className="flex h-10 w-8 flex-col gap-0.5 rounded-t-sm bg-white px-1 pt-[5px] shadow-[0_1px_2px_rgba(15,23,42,0.12)]">
+        <span className="block h-0.5 w-full rounded-full bg-gray-800" />
+        <span className="block h-0.5 w-[70%] rounded-full bg-gray-800" />
+        <span className="mt-0.5 block h-px w-1/2 bg-gray-400" />
+        <span className="mt-0.5 block h-px w-full bg-gray-300" />
+        <span className="block h-px w-full bg-gray-300" />
+        <span className="block h-px w-[85%] bg-gray-300" />
+      </span>
+    </span>
+  );
+}
+
+/**
+ * The picture beside a recently visited document: its cover (or a paper's first
+ * page), else a drawn title page for papers, else an author's photo, else a file icon.
+ */
+export function RecentlyVisitedThumbnail({
+  imageUrl,
+  authorImage,
+  isPaper,
+}: RecentlyVisitedThumbnailProps) {
+  if (imageUrl) return <DocumentThumbnail image={imageUrl} size="lg" />;
+  if (isPaper) return <TitlePageThumbnail />;
+  if (authorImage) {
+    return (
+      <span className={cn(TILE, 'items-center justify-center bg-gray-100')}>
+        <Avatar src={authorImage} alt="" size={24} disableTooltip className="ring-2 ring-white" />
+      </span>
+    );
+  }
+  return <DocumentThumbnail image={null} size="lg" />;
+}
diff --git a/components/work/SearchHistoryTracker.tsx b/components/work/SearchHistoryTracker.tsx
index 509459952..6e03542e7 100644
--- a/components/work/SearchHistoryTracker.tsx
+++ b/components/work/SearchHistoryTracker.tsx
@@ -9,6 +9,12 @@ interface SearchHistoryTrackerProps {
   work: Work;
 }
 
+/** Papers and posts number their ids separately, so a visit is keyed by both. */
+function isSameWork(item: SearchSuggestion, work: Work): boolean {
+  if (item.entityType !== 'paper' || item.id !== work.id) return false;
+  return (item.contentType ?? 'paper') === work.contentType;
+}
+
 export function SearchHistoryTracker({ work }: SearchHistoryTrackerProps) {
   useEffect(() => {
     const history = [...getSearchHistory()];
@@ -25,9 +31,14 @@ export function SearchHistoryTracker({ work }: SearchHistoryTrackerProps) {
       isRecent: true,
       slug: work.slug,
       contentType: work.contentType,
+      lastVisited: new Date().toISOString(),
+      imageUrl: work.image || work.figures?.[0]?.url || undefined,
+      authorImage:
+        work.authors.find((a) => a.authorProfile?.profileImage)?.authorProfile.profileImage ||
+        undefined,
     };
 
-    const existingIndex = history.findIndex((item) => item.id === work.id);
+    const existingIndex = history.findIndex((item) => isSameWork(item, work));
     if (existingIndex !== -1) {
       history.splice(existingIndex, 1);
     }
diff --git a/types/search.ts b/types/search.ts
index e5e4c1652..1a7e81836 100644
--- a/types/search.ts
+++ b/types/search.ts
@@ -28,6 +28,10 @@ export interface WorkSuggestion extends BaseSuggestion {
   slug?: string;
   publishedDate?: string;
   contentType?: ContentType;
+  /** Cover image, or a paper's first PDF page, for the Recently visited thumbnail. */
+  imageUrl?: string;
+  /** The first author photo found, the thumbnail's fallback when there is no image. */
+  authorImage?: string;
 }
 
 export interface UserSuggestion extends BaseSuggestion {

From c0820e86eee92a0178368e335bd890ef329f4c3a Mon Sep 17 00:00:00 2001
From: Kobe Attias <kobeattias@gmail.com>
Date: Wed, 7 Oct 2026 10:56:51 -0400
Subject: [PATCH 2/2] The sidebar footer is one "Help & resources" menu

The left sidebar's footer (social icons, the currency select and six text
links) becomes a single row, 53px instead of 143px, so the nav and the
Drafts / Published lists keep that height. The row opens a menu upward
with What's new (tagged New until the changelog is opened; the orange dot
moves onto the row), Docs, Support and About, a USD / RSC switch that
keeps the menu open, and the social icons beside Terms and Privacy.
External links open in a new tab.

The changelog's seen state moves into useChangelogSeen, shared with
ChangelogLink (still used by the phone's More drawer). BaseMenu takes an
optional side so a menu can open above its trigger. FooterLinks is gone.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 app/layouts/LeftSidebar.tsx                |   4 +-
 app/layouts/components/SidebarHelpMenu.tsx | 171 +++++++++++++++++++++
 components/FooterLinks.tsx                 |  83 ----------
 components/changelog/ChangelogLink.tsx     |  21 +--
 components/changelog/useChangelogSeen.ts   |  24 +++
 components/ui/form/BaseMenu.tsx            |   4 +
 6 files changed, 206 insertions(+), 101 deletions(-)
 create mode 100644 app/layouts/components/SidebarHelpMenu.tsx
 delete mode 100644 components/FooterLinks.tsx
 create mode 100644 components/changelog/useChangelogSeen.ts

diff --git a/app/layouts/LeftSidebar.tsx b/app/layouts/LeftSidebar.tsx
index 707f92df2..cf4433875 100644
--- a/app/layouts/LeftSidebar.tsx
+++ b/app/layouts/LeftSidebar.tsx
@@ -2,7 +2,6 @@
 
 import { AlertCircle } from 'lucide-react';
 import { usePathname } from 'next/navigation';
-import { FooterLinks } from '../../components/FooterLinks';
 import { Navigation } from './Navigation';
 import toast from 'react-hot-toast';
 import { PublishMenu } from './PublishMenu';
@@ -11,6 +10,7 @@ import Link from 'next/link';
 import { Icon } from '@/components/ui/icons';
 import { FundingPowerRailButton } from '@/components/Funding/FundingPowerRailButton';
 import { SidebarDocuments } from './components/SidebarDocuments';
+import { SidebarHelpMenu } from './components/SidebarHelpMenu';
 
 interface LeftSidebarProps {
   forceMinimize?: boolean;
@@ -86,7 +86,7 @@ export const LeftSidebar: React.FC<LeftSidebarProps> = ({ forceMinimize = false,
       </div>
 
       <div className={forceMinimize ? '!hidden' : ''}>
-        <FooterLinks />
+        <SidebarHelpMenu />
       </div>
     </div>
   );
diff --git a/app/layouts/components/SidebarHelpMenu.tsx b/app/layouts/components/SidebarHelpMenu.tsx
new file mode 100644
index 000000000..9f6d49248
--- /dev/null
+++ b/app/layouts/components/SidebarHelpMenu.tsx
@@ -0,0 +1,171 @@
+'use client';
+
+import Link from 'next/link';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import {
+  ArrowUpRight,
+  BookOpen,
+  ChevronUp,
+  CircleHelp,
+  Info,
+  LifeBuoy,
+  Megaphone,
+  type LucideIcon,
+} from 'lucide-react';
+import { faXTwitter, faDiscord, faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useChangelogSeen } from '@/components/changelog/useChangelogSeen';
+import { BaseMenu } from '@/components/ui/form/BaseMenu';
+import { RadiatingDot } from '@/components/ui/RadiatingDot';
+import { useCurrencyPreference } from '@/contexts/CurrencyPreferenceContext';
+
+const RESOURCE_LINKS: { label: string; href: string; icon: LucideIcon }[] = [
+  { label: 'Docs', href: 'https://docs.researchhub.com/', icon: BookOpen },
+  {
+    label: 'Support',
+    href: 'https://airtable.com/appuhMJaf1kb3ic8e/pagYeh6cB9sgiTIgx/form',
+    icon: LifeBuoy,
+  },
+  { label: 'About', href: 'https://www.researchhub.com/about', icon: Info },
+];
+
+const SOCIAL_LINKS = [
+  { label: 'X', href: 'https://x.com/researchhub', icon: faXTwitter },
+  { label: 'Discord', href: 'https://discord.com/invite/ZcCYgcnUp5', icon: faDiscord },
+  { label: 'GitHub', href: 'https://github.com/ResearchHub', icon: faGithub },
+  {
+    label: 'LinkedIn',
+    href: 'https://www.linkedin.com/company/researchhubtechnologies',
+    icon: faLinkedin,
+  },
+];
+
+const LEGAL_LINKS = [
+  { label: 'Terms', href: 'https://www.researchhub.com/tos' },
+  { label: 'Privacy', href: 'https://www.researchhub.com/privacy' },
+];
+
+const CURRENCIES = ['USD', 'RSC'] as const;
+
+const MENU_ROW =
+  'flex cursor-pointer items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-gray-700 outline-none transition-colors data-[highlighted]:bg-gray-50';
+
+const SEPARATOR = 'mx-1 my-1.5 h-px bg-gray-100';
+
+/**
+ * The sidebar's footer as a single row. What used to be spread across it (the
+ * changelog, docs, support, currency, socials and legal links) opens from it
+ * in one menu, so the column keeps its height for navigation and documents.
+ */
+export function SidebarHelpMenu() {
+  const { hasSeen: hasSeenChangelog, markSeen: markChangelogSeen } = useChangelogSeen();
+  const { showUSD, toggleCurrency } = useCurrencyPreference();
+  const currency = showUSD ? 'USD' : 'RSC';
+
+  return (
+    <div className="border-t border-gray-100 p-2">
+      <BaseMenu
+        side="top"
+        align="start"
+        sideOffset={6}
+        className="w-56 rounded-xl p-1.5 shadow-lg"
+        trigger={
+          <button
+            type="button"
+            className="group flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-50 data-[state=open]:bg-gray-100"
+          >
+            <CircleHelp className="h-[18px] w-[18px] shrink-0" aria-hidden="true" />
+            <span className="flex-1 text-left">Help & resources</span>
+            {!hasSeenChangelog && <RadiatingDot color="bg-orange-500" size="sm" />}
+            <ChevronUp
+              className="h-3.5 w-3.5 shrink-0 text-gray-400 transition-transform group-data-[state=open]:rotate-180"
+              aria-hidden="true"
+            />
+          </button>
+        }
+      >
+        <DropdownMenu.Item asChild onSelect={markChangelogSeen}>
+          <Link href="/changelog" className={MENU_ROW}>
+            <Megaphone className="h-4 w-4 shrink-0 text-gray-500" aria-hidden="true" />
+            <span className="flex-1">What’s new</span>
+            {!hasSeenChangelog && (
+              <span className="rounded-full bg-orange-50 px-1.5 text-[11px] font-semibold text-orange-700">
+                New
+              </span>
+            )}
+          </Link>
+        </DropdownMenu.Item>
+        {RESOURCE_LINKS.map(({ label, href, icon: Icon }) => (
+          <DropdownMenu.Item key={label} asChild>
+            <a href={href} target="_blank" rel="noopener noreferrer" className={MENU_ROW}>
+              <Icon className="h-4 w-4 shrink-0 text-gray-500" aria-hidden="true" />
+              <span className="flex-1">{label}</span>
+              <ArrowUpRight className="h-3.5 w-3.5 shrink-0 text-gray-400" aria-hidden="true" />
+            </a>
+          </DropdownMenu.Item>
+        ))}
+
+        <DropdownMenu.Separator className={SEPARATOR} />
+
+        <div className="flex items-center justify-between py-1 pl-2.5 pr-1">
+          <span className="text-[13px] text-gray-600">Currency</span>
+          <DropdownMenu.RadioGroup
+            value={currency}
+            onValueChange={(value) => {
+              if (value !== currency) toggleCurrency();
+            }}
+            className="inline-flex rounded-lg bg-gray-100 p-0.5"
+          >
+            {CURRENCIES.map((option) => (
+              <DropdownMenu.RadioItem
+                key={option}
+                value={option}
+                // Keep the menu open so the switch reads as a control, not a link.
+                onSelect={(event) => event.preventDefault()}
+                className="cursor-pointer rounded-md px-2.5 py-0.5 text-xs font-medium text-gray-500 outline-none transition-colors data-[highlighted]:text-gray-900 data-[state=checked]:bg-white data-[state=checked]:font-semibold data-[state=checked]:text-gray-900 data-[state=checked]:shadow-sm"
+              >
+                {option}
+              </DropdownMenu.RadioItem>
+            ))}
+          </DropdownMenu.RadioGroup>
+        </div>
+
+        <DropdownMenu.Separator className={SEPARATOR} />
+
+        <div className="flex items-center px-0.5">
+          {SOCIAL_LINKS.map(({ label, href, icon }) => (
+            <DropdownMenu.Item key={label} asChild>
+              <a
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={label}
+                className="flex h-7 w-7 items-center justify-center rounded-md text-gray-500 outline-none transition-colors data-[highlighted]:bg-gray-50 data-[highlighted]:text-gray-800"
+              >
+                <FontAwesomeIcon icon={icon} className="h-[15px] w-[15px]" />
+              </a>
+            </DropdownMenu.Item>
+          ))}
+          <span className="flex-1" />
+          <span className="flex items-center gap-1 pr-1.5 text-xs text-gray-500">
+            {LEGAL_LINKS.map(({ label, href }, index) => (
+              <span key={label} className="flex items-center gap-1">
+                {index > 0 && <span aria-hidden="true">·</span>}
+                <DropdownMenu.Item asChild>
+                  <a
+                    href={href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="cursor-pointer rounded outline-none hover:text-gray-800 data-[highlighted]:text-gray-800 data-[highlighted]:underline"
+                  >
+                    {label}
+                  </a>
+                </DropdownMenu.Item>
+              </span>
+            ))}
+          </span>
+        </div>
+      </BaseMenu>
+    </div>
+  );
+}
diff --git a/components/FooterLinks.tsx b/components/FooterLinks.tsx
deleted file mode 100644
index b626fe877..000000000
--- a/components/FooterLinks.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-'use client';
-
-import { faXTwitter, faDiscord, faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { ChangelogLink } from '@/components/changelog/ChangelogLink';
-import { useCurrencyPreference } from '@/contexts/CurrencyPreferenceContext';
-
-export const FooterLinks: React.FC = () => {
-  const { showUSD, toggleCurrency } = useCurrencyPreference();
-
-  return (
-    <div className="px-4 py-6 border-t text-sm">
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center space-x-4">
-          <a
-            href="https://x.com/researchhub"
-            className="text-gray-500 hover:text-gray-700"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <FontAwesomeIcon icon={faXTwitter} className="h-5 w-5" />
-          </a>
-          <a
-            href="https://discord.com/invite/ZcCYgcnUp5"
-            className="text-gray-500 hover:text-gray-700"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <FontAwesomeIcon icon={faDiscord} className="h-5 w-5" />
-          </a>
-          <a
-            href="https://github.com/ResearchHub"
-            className="text-gray-500 hover:text-gray-700"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <FontAwesomeIcon icon={faGithub} className="h-5 w-5" />
-          </a>
-          <a
-            href="https://www.linkedin.com/company/researchhubtechnologies"
-            className="text-gray-500 hover:text-gray-700"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <FontAwesomeIcon icon={faLinkedin} className="h-5 w-5" />
-          </a>
-          {/* Currency Dropdown */}
-          <select
-            value={showUSD ? 'USD' : 'RSC'}
-            onChange={() => toggleCurrency()}
-            className="text-xs px-2 py-1 border border-gray-200 rounded-md bg-white text-gray-700 hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent cursor-pointer"
-          >
-            <option value="RSC">RSC</option>
-            <option value="USD">USD</option>
-          </select>
-        </div>
-      </div>
-      <div className="flex flex-wrap gap-3 text-gray-500">
-        <a href="https://www.researchhub.com/about" className="hover:text-gray-700">
-          About
-        </a>
-        <a href="https://docs.researchhub.com/" className="hover:text-gray-700">
-          Docs
-        </a>
-        <ChangelogLink />
-        <a href="https://www.researchhub.com/tos" className="hover:text-gray-700">
-          Terms
-        </a>
-        <a href="https://www.researchhub.com/privacy" className="hover:text-gray-700">
-          Privacy
-        </a>
-        <a
-          href="https://airtable.com/appuhMJaf1kb3ic8e/pagYeh6cB9sgiTIgx/form"
-          className="hover:text-gray-700"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Support
-        </a>
-      </div>
-    </div>
-  );
-};
diff --git a/components/changelog/ChangelogLink.tsx b/components/changelog/ChangelogLink.tsx
index 32af038e8..7bfba313a 100644
--- a/components/changelog/ChangelogLink.tsx
+++ b/components/changelog/ChangelogLink.tsx
@@ -1,10 +1,9 @@
 'use client';
 
-import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { RadiatingDot } from '@/components/ui/RadiatingDot';
-import { CHANGELOG_STORAGE_KEY } from '@/constants/changelog';
 import { cn } from '@/utils/styles';
+import { useChangelogSeen } from './useChangelogSeen';
 
 interface ChangelogLinkProps {
   className?: string;
@@ -12,26 +11,16 @@ interface ChangelogLinkProps {
 
 /**
  * Renders the Changelog link with a "new entry" radiating-dot indicator that
- * persists per-user in localStorage. Centralizes the seen-state logic so
- * desktop and mobile surfaces stay in sync without duplicating it.
+ * persists per-user in localStorage (see useChangelogSeen, shared with the
+ * sidebar's help menu).
  */
 export const ChangelogLink: React.FC<ChangelogLinkProps> = ({ className }) => {
-  const [hasSeenChangelog, setHasSeenChangelog] = useState(true);
-
-  useEffect(() => {
-    const hasSeen = localStorage.getItem(CHANGELOG_STORAGE_KEY);
-    setHasSeenChangelog(!!hasSeen);
-  }, []);
-
-  const handleClick = () => {
-    localStorage.setItem(CHANGELOG_STORAGE_KEY, 'true');
-    setHasSeenChangelog(true);
-  };
+  const { hasSeen: hasSeenChangelog, markSeen } = useChangelogSeen();
 
   return (
     <Link
       href="/changelog"
-      onClick={handleClick}
+      onClick={markSeen}
       className={cn(
         'flex items-center gap-1',
         hasSeenChangelog ? 'hover:text-gray-700' : 'text-orange-500 hover:text-orange-600',
diff --git a/components/changelog/useChangelogSeen.ts b/components/changelog/useChangelogSeen.ts
new file mode 100644
index 000000000..f9494ae0d
--- /dev/null
+++ b/components/changelog/useChangelogSeen.ts
@@ -0,0 +1,24 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { CHANGELOG_STORAGE_KEY } from '@/constants/changelog';
+
+/**
+ * Whether this browser has opened the changelog since its last entry, kept in
+ * localStorage. Starts as seen so the "new" marker never flashes before the
+ * stored value is read after mount.
+ */
+export function useChangelogSeen() {
+  const [hasSeen, setHasSeen] = useState(true);
+
+  useEffect(() => {
+    setHasSeen(!!localStorage.getItem(CHANGELOG_STORAGE_KEY));
+  }, []);
+
+  const markSeen = useCallback(() => {
+    localStorage.setItem(CHANGELOG_STORAGE_KEY, 'true');
+    setHasSeen(true);
+  }, []);
+
+  return { hasSeen, markSeen };
+}
diff --git a/components/ui/form/BaseMenu.tsx b/components/ui/form/BaseMenu.tsx
index 155b596bb..46c8f586a 100644
--- a/components/ui/form/BaseMenu.tsx
+++ b/components/ui/form/BaseMenu.tsx
@@ -9,6 +9,8 @@ import { cn } from '@/utils/styles';
 interface BaseMenuProps {
   children: ReactNode;
   trigger: ReactNode;
+  /** Which side of the trigger the menu opens on; below it unless there is no room. */
+  side?: 'top' | 'right' | 'bottom' | 'left';
   align?: 'start' | 'center' | 'end';
   className?: string;
   withOverlay?: boolean;
@@ -23,6 +25,7 @@ interface BaseMenuProps {
 export const BaseMenu: FC<BaseMenuProps> = ({
   children,
   trigger,
+  side,
   align = 'end',
   className,
   withOverlay = false,
@@ -80,6 +83,7 @@ export const BaseMenu: FC<BaseMenuProps> = ({
 
         <DropdownMenu.Portal>
           <DropdownMenu.Content
+            side={side}
             align={align}
             sideOffset={sideOffset}
             className={cn(