Ai mode

app/journal/JournalPageContent.tsx

@@ -2,7 +2,7 @@
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { FeedContent } from '@/components/Feed/FeedContent';
-import { FeedSortDropdown } from '@/components/Feed/FeedSortDropdown';
+import { SortMenu } from '@/components/ui/SortMenu';
 import { useFeed } from '@/hooks/useFeed';
 import { JournalV2FeedEntryItem } from '@/components/Journal/JournalV2FeedEntryItem';
 
@@ -56,7 +56,7 @@ export function JournalPageContent() {
       loadMore={loadMore}
       filters={
         <div className="mb-2 mt-2 flex items-center justify-end sm:mt-4">
-          <FeedSortDropdown
+          <SortMenu
             options={JOURNAL_SORT_OPTIONS}
             value={journalSort}
             onChange={(sort) => changeJournalSort(getJournalSort(sort))}

app/layouts/MobileBottomNav.tsx

@@ -13,7 +13,7 @@
   faBars,
 } from '@fortawesome/pro-light-svg-icons';
 import { faXTwitter, faDiscord, faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons';
-import { Sprout, Star } from 'lucide-react';
+import { Sparkles, Sprout, Star } from 'lucide-react';
 import { ChangelogLink } from '@/components/changelog/ChangelogLink';
 import { FundingPowerBar } from '@/components/Funding/FundingPowerBar';
 import { Icon } from '@/components/ui/icons';
@@ -24,6 +24,9 @@
 import { useCurrencyPreference } from '@/contexts/CurrencyPreferenceContext';
 import { useScrollContainer } from '@/contexts/ScrollContainerContext';
 import { isHomeTabPath } from '@/hooks/useFundTabs';
+import { useUser } from '@/contexts/UserContext';
+import { useOptionalAIMode } from '@/components/AIMode/AIModeContext';
+import { isHubEditorOrModerator } from '@/utils/permissions';
 
 interface NavItem {
   label: string;
@@ -32,6 +35,8 @@
   isMore?: boolean;
   requiresAuth?: boolean;
   isHome?: boolean;
+  /** Toggles the AI Mode overlay in place instead of navigating. */
+  isAIMode?: boolean;
 }
 
 // Additional navigation items not in the bottom bar
@@ -74,11 +79,17 @@
   const { executeAuthenticatedAction } = useAuthenticatedAction();
   const { showUSD, toggleCurrency } = useCurrencyPreference();
   const scrollContainerRef = useScrollContainer();
+  const { user } = useUser();
+  const aiMode = useOptionalAIMode();
 
+  // Moderators and hub editors, the only users the assistant admits, get it
+  // in the bar where Peer Review sits for everyone else.
   const mainNavItems: NavItem[] = [
     { label: 'Home', href: '/', iconKey: 'home', isHome: true },
     { label: 'My Funding', href: '/my-funding', iconKey: 'fund', requiresAuth: true },
-    { label: 'Peer Review', href: '/peer-review', iconKey: 'peer-review' },
+    isHubEditorOrModerator(user)
+      ? { label: 'Assistant', iconKey: 'assistant', isAIMode: true }
+      : { label: 'Peer Review', href: '/peer-review', iconKey: 'peer-review' },
     { label: 'Wallet', href: '/researchcoin', iconKey: 'wallet' },
     { label: 'More', isMore: true, iconKey: 'more' },
   ];
@@ -109,6 +120,10 @@
       setIsMoreOpen(true);
       return;
     }
+    if (item.isAIMode) {
+      aiMode?.toggle();
+      return;
+    }
 
     if (item.requiresAuth) {
       executeAuthenticatedAction(() => router.push(item.href!));
@@ -139,6 +154,15 @@
             color={iconColor}
           />
         );
+      case 'assistant':
+        return (
+          <Sparkles
+            size={iconSize}
+            color={iconColor}
+            strokeWidth={isActive ? 2.25 : 2}
+            fill={isActive ? iconColor : 'none'}
+          />
+        );
       case 'peer-review':
         return (
           <Star
@@ -234,9 +258,11 @@
           {mainNavItems.map((item) => {
             const isActive = item.isMore
               ? isMoreActive || isMoreOpen
-              : item.href
-                ? isPathActive(item.href, pathname, item.isHome)
-                : false;
+              : item.isAIMode
+                ? Boolean(aiMode?.isOpen)
+                : item.href
+                  ? isPathActive(item.href, pathname, item.isHome)
+                  : false;
 
             return (
               <button

app/layouts/Navigation.tsx

@@ -8,8 +8,12 @@ import { IconName } from '@/components/ui/icons/Icon';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faHouse as faHouseSolid } from '@fortawesome/pro-solid-svg-icons';
 import { faHouse as faHouseLight } from '@fortawesome/pro-light-svg-icons';
-import { Sprout, Star } from 'lucide-react';
+import { Sparkles, Sprout, Star } from 'lucide-react';
+import { useOptionalAIMode } from '@/components/AIMode/AIModeContext';
+import { AI_MODE_NAME } from '@/components/AIMode/copy';
 import { isHomeTabPath } from '@/hooks/useFundTabs';
+import { useUser } from '@/contexts/UserContext';
+import { isHubEditorOrModerator } from '@/utils/permissions';
 import { cn } from '@/utils/styles';
 
 interface NavIcon {
@@ -30,6 +34,8 @@ interface NavigationItem {
   isLucideStar?: boolean;
   isLucideSprout?: boolean;
   isHome?: boolean;
+  /** Toggles the AI Mode overlay in place instead of navigating. */
+  isAIMode?: boolean;
 }
 
 interface NavigationProps {
@@ -62,6 +68,10 @@ export const Navigation: React.FC<NavigationProps> = ({
   onUnimplementedFeature,
   forceMinimize = false,
 }) => {
+  const { user } = useUser();
+  // The assistant is gated server-side to moderators and hub editors; nobody
+  // else gets a door to a room they cannot enter.
+  const canUseAssistant = isHubEditorOrModerator(user);
   const navigationItems: NavigationItem[] = [
     {
       label: 'Home',
@@ -103,11 +113,16 @@ export const Navigation: React.FC<NavigationProps> = ({
       isLucideSprout: true,
       description: 'Learn about the ResearchHub Endowment',
     },
+    {
+      label: AI_MODE_NAME,
+      href: '#',
+      isAIMode: true,
+      requiresAuth: true,
+      description: 'Chat with the research assistant',
+    },
   ];
 
-  const getButtonStyles = (path: string, isHome?: boolean) => {
-    const isActive = isPathActive(path, isHome);
-
+  const getButtonStyles = (isActive: boolean) => {
     return cn(
       'flex w-full items-center rounded-lg px-3 py-2.5 text-[15px] font-medium transition-colors',
       forceMinimize
@@ -149,8 +164,9 @@ export const Navigation: React.FC<NavigationProps> = ({
   }> = ({ item, onUnimplementedFeature }) => {
     const { executeAuthenticatedAction } = useAuthenticatedAction();
     const router = useRouter();
-    const buttonStyles = getButtonStyles(item.href, item.isHome);
-    const isActive = isPathActive(item.href, item.isHome);
+    const aiMode = useOptionalAIMode();
+    const isActive = item.isAIMode ? Boolean(aiMode?.isOpen) : isPathActive(item.href, item.isHome);
+    const buttonStyles = getButtonStyles(isActive);
 
     const iconColor = isActive ? '#3971ff' : '#404040';
 
@@ -186,6 +202,32 @@ export const Navigation: React.FC<NavigationProps> = ({
       ? 'hidden'
       : 'flex w-full min-w-0 items-center tablet:max-sidebar-compact:!hidden';
 
+    if (item.isAIMode) {
+      // Same row as the links, but it is a toggle: the overlay opens in place
+      // and the URL only gains a query param.
+      return (
+        <button
+          type="button"
+          onClick={() => executeAuthenticatedAction(() => aiMode?.toggle())}
+          className={buttonStyles}
+          aria-pressed={isActive}
+          title={item.description}
+        >
+          <div className={iconContainerClass}>
+            <Sparkles
+              size={22}
+              color={iconColor}
+              strokeWidth={2}
+              fill={isActive ? iconColor : 'none'}
+            />
+          </div>
+          <div className={textContainerClass}>
+            <span className="inline-flex min-w-0 items-center gap-2 truncate">{item.label}</span>
+          </div>
+        </button>
+      );
+    }
+
     return (
       <Link
         href={item.href}
@@ -232,9 +274,11 @@ export const Navigation: React.FC<NavigationProps> = ({
       )}
     >
       <div className="space-y-2">
-        {navigationItems.map((item) => (
-          <NavLink key={item.label} item={item} onUnimplementedFeature={onUnimplementedFeature} />
-        ))}
+        {navigationItems
+          .filter((item) => !item.isAIMode || canUseAssistant)
+          .map((item) => (
+            <NavLink key={item.label} item={item} onUnimplementedFeature={onUnimplementedFeature} />
+          ))}
       </div>
     </nav>
   );

app/layouts/topbar/TopBarSearchButton.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { Suspense, useLayoutEffect, useState } from 'react';
-import { usePathname, useSearchParams } from 'next/navigation';
+import { useLayoutEffect, useState } from 'react';
 import { Search as SearchIcon } from 'lucide-react';
 
 function getSearchShortcutLabel(): string {
@@ -22,12 +21,8 @@
   onClick: () => void;
 }
 
-function TopBarSearchButtonInner({
-  onClick,
-  currentSearchQuery,
-}: TopBarSearchButtonProps & { currentSearchQuery: string | null }) {
+export function TopBarSearchButton({ onClick }: TopBarSearchButtonProps) {
   const shortcutLabel = useSearchShortcutLabel();
-  const displayText = currentSearchQuery || 'Search';
 
   return (
     <div className="relative">
@@ -36,12 +31,7 @@
         className="flex items-center w-full md:!w-60 max-w-md mx-auto h-9 px-4 py-1.5 bg-gray-100 hover:bg-gray-200 rounded-full transition-colors text-left group"
       >
         <SearchIcon className="h-4 w-4 text-gray-600 mr-3 flex-shrink-0" />
-        <span
-          className={`text-sm flex-1 truncate ${currentSearchQuery ? 'text-gray-900' : 'text-gray-500'}`}
-        >
-          <span className="tablet:!hidden">{displayText}</span>
-          <span className="hidden tablet:!inline">{displayText}</span>
-        </span>
+        <span className="text-sm flex-1 truncate text-gray-500">Search</span>
         {shortcutLabel && (
           <div className="hidden md:!flex items-center space-x-1 ml-2 flex-shrink-0">
             <span className="text-[12px] -mr-1 text-gray-600 bg-gray-200 px-2 py-0.5 rounded-full font-medium">
@@ -53,17 +43,3 @@
     </div>
   );
 }
-
-function TopBarSearchButtonWithQuery(props: TopBarSearchButtonProps) {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const currentSearchQuery = pathname === '/search' ? searchParams.get('q') : null;
-
-  return <TopBarSearchButtonInner {...props} currentSearchQuery={currentSearchQuery} />;
-}
-
-export const TopBarSearchButton = (props: TopBarSearchButtonProps) => (
-  <Suspense fallback={<TopBarSearchButtonInner {...props} currentSearchQuery={null} />}>
-    <TopBarSearchButtonWithQuery {...props} />
-  </Suspense>
-);

app/layouts/topbar/pageRoutes.tsx

@@ -4,7 +4,6 @@ import {
   faBookmark as faBookmarkLight,
   faCommentsQuestion,
   faGrid3 as faGrid3Light,
-  faMagnifyingGlass,
 } from '@fortawesome/pro-light-svg-icons';
 import { ChartNoAxesColumnIncreasing, Shield, Hash, Users, Activity, Settings } from 'lucide-react';
 import Image from 'next/image';
@@ -62,13 +61,6 @@ const ROUTE_RULES: RouteRule[] = [
       icon: <Icon name="fund" size={24} className="text-gray-900" />,
     }),
   },
-  {
-    match: (p) => p === '/search',
-    getInfo: () => ({
-      title: 'Search',
-      icon: <FontAwesomeIcon icon={faMagnifyingGlass} fontSize={24} color="#000" />,
-    }),
-  },
   {
     match: (p) => p === '/notifications',
     getInfo: () => ({

app/peer-review/ReviewsPageContent.tsx

@@ -2,7 +2,7 @@
 
 import { BountyFeedItem } from '@/components/Bounty/BountyFeedItem';
 import { FeedContent } from '@/components/Feed/FeedContent';
-import { FeedSortDropdown } from '@/components/Feed/FeedSortDropdown';
+import { SortMenu } from '@/components/ui/SortMenu';
 import { useBounties } from '@/hooks/useBounties';
 
 const SORT_OPTIONS = [
@@ -34,7 +34,7 @@ export function ReviewsPageContent() {
       ordering={sort}
       filters={
         <div className="mb-2 mt-2 flex items-center justify-end sm:mt-4">
-          <FeedSortDropdown options={SORT_OPTIONS} value={sort} onChange={handleSortChange} />
+          <SortMenu options={SORT_OPTIONS} value={sort} onChange={handleSortChange} />
         </div>
       }
       skeletonVariant="proposalWork"