feat: sticky header

Author: ImLunaHey

package-lock.json

@@ -21,6 +21,7 @@
     "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-hover-card": "^1.1.4",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.4",
@@ -53,7 +54,7 @@
     "i18next-browser-languagedetector": "^8.0.2",
     "i18next-pseudo": "^2.2.1",
     "lowlight": "^3.3.0",
-    "lucide-react": "^0.344.0",
+    "lucide-react": "^0.469.0",
     "next-themes": "^0.4.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -72,6 +73,7 @@
     "tailwind-scrollbar-hide": "^2.0.0",
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-safe-area": "^0.6.0",
+    "tailwindcss-view-transitions": "^0.1.1",
     "zod": "^3.24.1",
     "zustand": "^4.5.1"
   },

package.json

@@ -74,7 +74,14 @@ function ExternalLink({ href, children }: { href: string; children: React.ReactN
 
 function Mention({ handle }: { handle: string }) {
   return (
-    <Link to="/profile/$handle" params={{ handle }} className="text-blue-400">
+    <Link
+      to="/profile/$handle"
+      params={{ handle }}
+      className="text-blue-400"
+      onClick={(event) => {
+        event.stopPropagation();
+      }}
+    >
       <span className="text-purple-500 font-semibold">@{handle.replace('.bksy.social', '')}</span>
     </Link>
   );

src/components/FacetedText.tsx

@@ -10,6 +10,12 @@ import { Tab } from './ui/tab';
 import { useQueryClient } from '@tanstack/react-query';
 import { useOfflineStatus } from '@/hooks/useOfflineStatus';
 import { cn } from '@/lib/utils';
+import { StickyHeader } from './sticky-header';
+import AkariLogo from '@/../public/images/logo.svg';
+import { Image } from './ui/Image';
+import { HamburgerMenuIcon } from '@radix-ui/react-icons';
+import { HashIcon } from 'lucide-react';
+import { Button } from './ui/button';
 
 export const FeedSelector = ({ columnNumber = 1 }: { columnNumber: number }) => {
   const isOffline = useOfflineStatus();
@@ -70,26 +76,52 @@ export const FeedSelector = ({ columnNumber = 1 }: { columnNumber: number }) =>
           {/* if there are less than 2 feeds, don't show the selector */}
           {feeds.length >= 2 && (
             <>
-              <TabList label="feed selector" className={cn('sticky bg-background z-50', isOffline ? 'top-[46px]' : 'top-0')}>
-                {data?.map((feed) => {
-                  return (
-                    <Tab
-                      id={feed.uri}
-                      name={feed.displayName}
-                      selectedTab={selectedFeed}
-                      key={feed.uri}
-                      onClick={() => {
-                        // if this tab is already selected we need to invalidate the associated query
-                        if (selectedFeed === feed.uri) {
-                          queryClient.invalidateQueries({
-                            queryKey: ['feed', { feed: selectedFeed }],
-                          });
-                        }
+              <StickyHeader backButton={false} className="p-0 border-none flex flex-col">
+                <div className="w-full flex items-center justify-between px-4 py-2">
+                  <HamburgerMenuIcon className="size-6" />
+                  <Button
+                    onClick={() => {
+                      // scroll to top and invalidate the query
+                      window.scrollTo({ top: 0 });
+                    }}
+                    variant="ghost"
+                    className="hover:bg-transparent active:scale-90"
+                  >
+                    <Image
+                      src={AkariLogo}
+                      alt="Akari"
+                      classNames={{
+                        image: 'size-10',
                       }}
+                      clickable={false}
                     />
-                  );
-                })}
-              </TabList>
+                  </Button>
+                  <HashIcon className="size-6" />
+                </div>
+                <TabList
+                  label="feed selector"
+                  className={cn('sticky bg-background z-40', isOffline ? 'top-[46px]' : 'top-0')}
+                >
+                  {data?.map((feed) => {
+                    return (
+                      <Tab
+                        id={feed.uri}
+                        name={feed.displayName}
+                        selectedTab={selectedFeed}
+                        key={feed.uri}
+                        onClick={async () => {
+                          // if this tab is already selected we need to invalidate the associated query
+                          if (selectedFeed === feed.uri) {
+                            await queryClient.invalidateQueries({
+                              queryKey: ['feed', { feed: selectedFeed }],
+                            });
+                          }
+                        }}
+                      />
+                    );
+                  })}
+                </TabList>
+              </StickyHeader>
               {data?.map((feed) => (
                 <Ariakit.TabPanel key={feed.uri} tabId={feed.uri}>
                   <Timeline columnNumber={columnNumber} />

src/components/FeedSelector.tsx

@@ -6,38 +6,45 @@ import { useBlueskyStore } from '../lib/bluesky/store';
 import { BellIcon, HomeIcon, LogInIcon, MailIcon, SearchIcon, SettingsIcon, UserIcon } from 'lucide-react';
 import { CreatePost } from './CreatePost';
 import { cn } from '@/lib/utils';
-import { appName } from '@/config';
 import { useQueryClient } from '@tanstack/react-query';
 import { useUnreadCount } from '@/lib/bluesky/hooks/useUnreadCount';
 import { useConversations } from '@/lib/bluesky/hooks/useConversations';
+import { useScollVisible } from '@/hooks/useScrollVisible';
+import { Avatar } from './ui/avatar';
+import { useProfile } from '@/lib/bluesky/hooks/useProfile';
 
 const HomeLink = () => {
+  const { t } = useTranslation('app');
   const location = useLocation();
   const queryClient = useQueryClient();
   return (
     <Link
       to="/"
-      onClick={() => {
+      onClick={async () => {
         // if we're on the homepage already we need to invalidate the associated query
         if (location.pathname === '/') {
           // @TODO: we should really be invalidating the query for the current feed not all feeds
-          queryClient.invalidateQueries({
+          await queryClient.invalidateQueries({
             queryKey: ['feed'],
           });
         }
       }}
+      className="flex flex-row items-center gap-2 p-3 rounded-sm hover:no-underline hover:bg-gray-200 dark:hover:bg-gray-700"
     >
-      <HomeIcon className="size-7 xl:hidden" />
-      <h1 className="text-2xl font-bold hidden xl:block">{appName}</h1>
+      <HomeIcon className="size-7 xl:size-6 active:scale-90" />
+      <span className="hidden xl:block">{t('home')}</span>
     </Link>
   );
 };
 
 const SearchLink = () => {
   const { t } = useTranslation('search');
   return (
-    <Link to="/search">
-      <SearchIcon className="size-7 xl:hidden" />
+    <Link
+      to="/search"
+      className="flex flex-row items-center gap-2 p-3 rounded-sm hover:no-underline hover:bg-gray-200 dark:hover:bg-gray-700"
+    >
+      <SearchIcon className="size-7 xl:size-6 active:scale-90" />
       <span className="hidden xl:block">{t('search')}</span>
     </Link>
   );
@@ -48,9 +55,12 @@ const MessagesLink = () => {
   const { data: convos } = useConversations();
   const unreadCount = convos?.map((convo) => convo.unreadCount).reduce((a, b) => a + b, 0) ?? 0;
   return (
-    <Link to="/messages">
-      <div className="relative">
-        <MailIcon className="size-7 xl:hidden" />
+    <Link
+      to="/messages"
+      className="flex flex-row items-center gap-2 p-3 rounded-sm hover:no-underline hover:bg-gray-200 dark:hover:bg-gray-700"
+    >
+      <div className="relative active:scale-90">
+        <MailIcon className="size-7 xl:size-6" />
         {unreadCount > 0 && (
           <span className="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-blue-500 rounded-full transform translate-x-1/2 -translate-y-1/2">
             {unreadCount}
@@ -66,9 +76,12 @@ const NotificationsLink = () => {
   const { t } = useTranslation('notifications');
   const { data: unreadCount } = useUnreadCount();
   return (
-    <Link to="/notifications">
+    <Link
+      to="/notifications"
+      className="flex flex-row items-center gap-2 p-3 rounded-sm hover:no-underline hover:bg-gray-200 dark:hover:bg-gray-700"
+    >
       <div className="relative">
-        <BellIcon className="size-7 xl:hidden" />
+        <BellIcon className="size-7 xl:size-6 active:scale-90" />
         {unreadCount > 0 && (
           <span className="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-blue-500 rounded-full transform translate-x-1/2 -translate-y-1/2">
             {unreadCount}
@@ -92,8 +105,9 @@ const ProfileLink = () => {
       params={{
         handle: session?.handle,
       }}
+      className="flex flex-row items-center gap-2 p-3 rounded-sm hover:no-underline hover:bg-gray-200 dark:hover:bg-gray-700"
     >
-      <UserIcon className="size-7 xl:hidden" />
+      <UserIcon className="size-7 xl:size-6 active:scale-90" />
       <span className="hidden xl:block">{t('profile')}</span>
     </Link>
   );
@@ -102,8 +116,11 @@ const ProfileLink = () => {
 const SettingsLink = () => {
   const { t } = useTranslation('app');
   return (
-    <Link to="/settings">
-      <SettingsIcon className="size-7 xl:hidden" />
+    <Link
+      to="/settings"
+      className="flex flex-row items-center gap-2 p-3 rounded-sm hover:no-underline hover:bg-gray-200 dark:hover:bg-gray-700"
+    >
+      <SettingsIcon className="size-7 xl:size-6 active:scale-90" />
       <span className="hidden xl:block">{t('settings')}</span>
     </Link>
   );
@@ -113,7 +130,7 @@ const LoginButton = () => {
   const { t } = useTranslation('auth');
   return (
     <Link to="/login">
-      <LogInIcon className="size-7 xl:hidden" />
+      <LogInIcon className="size-7 xl:hidden active:scale-90" />
       <span className="hidden xl:block">{t('login.default')}</span>
     </Link>
   );
@@ -122,19 +139,26 @@ const LoginButton = () => {
 export const Navbar = () => {
   const { isAuthenticated } = useAuth();
   const location = useLocation();
+  const isVisible = useScollVisible();
+  const handle = useBlueskyStore((state) => state.session?.handle);
+  const { data: profile } = useProfile({ handle });
 
   return (
     <div
       className={cn(
-        'bg-background text-foreground',
+        'bg-background text-foreground sticky',
         // base
-        'px-4 pt-1 z-50',
+        'px-4 pt-1 z-40',
         // mobile
         'fixed bottom-0 left-0 right-0 pb-safe border-t border-gray-200 dark:border-gray-800',
         // tablet
         'md:top-0 md:right-auto md:border-r md:border-gray-200 md:dark:border-gray-800',
         // desktop
         'xl:bg-inherit xl:sticky xl:h-screen xl:border-none xl:top-0',
+        // transition
+        'transform transition-transform duration-200 ease-in-out',
+        isVisible ? 'translate-y-0' : 'translate-y-full',
+        'md:translate-y-0',
       )}
     >
       <div
@@ -147,6 +171,9 @@ export const Navbar = () => {
           'xl:space-y-0',
         )}
       >
+        <div className="flex flex-row items-center gap-2 p-3">
+          {handle && <Avatar handle={handle} avatar={profile?.avatar} hover={false} />}
+        </div>
         <HomeLink />
         <SearchLink />
         {isAuthenticated && <MessagesLink />}