v3: follows, notifications, invite-only registration, unread markers

src/components/AppHeader.tsx

@@ -1,14 +1,14 @@
 import { type ReactNode, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
 import { Link, useNavigate } from "react-router";
 import { useAuth } from "../hooks/useAuth.ts";
 import { DumpCreateModal } from "./DumpCreateModal.tsx";
+import { NotificationBell } from "./NotificationBell.tsx";
 
 export function AppHeader({ centerSlot }: { centerSlot?: ReactNode }) {
   const { user } = useAuth();
   const navigate = useNavigate();
   const headerRef = useRef<HTMLElement>(null);
-  const [showFab, setShowFab] = useState(false);
+  const [_showFab, setShowFab] = useState(false);
   const [createModalOpen, setCreateModalOpen] = useState(false);
 
   useEffect(() => {
@@ -28,7 +28,9 @@ export function AppHeader({ centerSlot }: { centerSlot?: ReactNode }) {
         ref={headerRef}
         className={`app-header${centerSlot ? " app-header--has-center" : ""}`}
       >
-        <Link to="/" className="app-header-brand">🚚 gerbeur</Link>
+        <Link to="/" state={{ tab: "hot" }} className="app-header-brand">
+          🚚 gerbeur
+        </Link>
 
         {centerSlot && <div className="app-header-center">{centerSlot}</div>}
 
@@ -42,9 +44,13 @@ export function AppHeader({ centerSlot }: { centerSlot?: ReactNode }) {
                 >
                   {user.username}
                 </Link>
-                <Link to="/playlists" className="app-header-user">
+                <Link
+                  to={`/users/${user.username}/playlists`}
+                  className="app-header-user"
+                >
                   Playlists
                 </Link>
+                <NotificationBell />
                 <button
                   type="button"
                   className="btn-primary"
@@ -71,7 +77,8 @@ export function AppHeader({ centerSlot }: { centerSlot?: ReactNode }) {
         </nav>
       </header>
 
-      {/* {user && createPortal(
+      {
+        /* {user && createPortal(
         <button
           type="button"
           className={`fab-new${showFab ? " fab-new--visible" : ""}`}
@@ -81,7 +88,8 @@ export function AppHeader({ centerSlot }: { centerSlot?: ReactNode }) {
           + New
         </button>,
         document.body,
-      )} */}
+      )} */
+      }
 
       {createModalOpen && (
         <DumpCreateModal onClose={() => setCreateModalOpen(false)} />