feat: move utility items from header to sidebar

Move theme toggle, notifications, app switcher, and user profile from
the top header bar into the sidebar. App switcher at the top (scope
switch), utilities at the bottom. Header now only shows on mobile for
the hamburger menu.

components/dashboard/ContentHeader.tsx

@@ -1,102 +1,21 @@
 'use client'
 
-import { useEffect, useState } from 'react'
-import { useRouter } from 'next/navigation'
-import Link from 'next/link'
-import { ThemeToggle, AppLauncher, UserMenu, type CipheraApp, MenuIcon } from '@ciphera-net/ui'
-import { useAuth } from '@/lib/auth/context'
-import { useSettingsModal } from '@/lib/settings-modal-context'
-import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
-import { setSessionAction } from '@/app/actions/auth'
-import { logger } from '@/lib/utils/logger'
-import NotificationCenter from '@/components/notifications/NotificationCenter'
-
-const CIPHERA_APPS: CipheraApp[] = [
-  {
-    id: 'pulse',
-    name: 'Pulse',
-    description: 'Your current app — Privacy-first analytics',
-    icon: 'https://ciphera.net/pulse_icon_no_margins.png',
-    href: 'https://pulse.ciphera.net',
-    isAvailable: false,
-  },
-  {
-    id: 'drop',
-    name: 'Drop',
-    description: 'Secure file sharing',
-    icon: 'https://ciphera.net/drop_icon_no_margins.png',
-    href: 'https://drop.ciphera.net',
-    isAvailable: true,
-  },
-  {
-    id: 'auth',
-    name: 'Auth',
-    description: 'Your Ciphera account settings',
-    icon: 'https://ciphera.net/auth_icon_no_margins.png',
-    href: 'https://auth.ciphera.net',
-    isAvailable: true,
-  },
-]
+import { MenuIcon } from '@ciphera-net/ui'
 
 export default function ContentHeader({
   onMobileMenuOpen,
 }: {
   onMobileMenuOpen: () => void
 }) {
-  const auth = useAuth()
-  const router = useRouter()
-  const { openSettings } = useSettingsModal()
-  const [orgs, setOrgs] = useState<OrganizationMember[]>([])
-
-  useEffect(() => {
-    if (auth.user) {
-      getUserOrganizations()
-        .then((organizations) => setOrgs(Array.isArray(organizations) ? organizations : []))
-        .catch(err => logger.error('Failed to fetch orgs', err))
-    }
-  }, [auth.user])
-
-  const handleSwitchOrganization = async (orgId: string | null) => {
-    if (!orgId) return
-    try {
-      const { access_token } = await switchContext(orgId)
-      await setSessionAction(access_token)
-      sessionStorage.setItem('pulse_switching_org', 'true')
-      window.location.reload()
-    } catch (err) {
-      logger.error('Failed to switch organization', err)
-    }
-  }
-
   return (
-    <div className="shrink-0 flex items-center justify-between border-b border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl px-4 sm:px-6 py-3.5">
-      {/* Left: mobile hamburger */}
-      <div className="flex items-center gap-3">
-        <button
-          onClick={onMobileMenuOpen}
-          className="md:hidden p-2 -ml-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white"
-          aria-label="Open navigation"
-        >
-          <MenuIcon className="w-5 h-5" />
-        </button>
-      </div>
-
-      {/* Right: actions */}
-      <div className="flex items-center gap-3">
-        <ThemeToggle />
-        <AppLauncher apps={CIPHERA_APPS} currentAppId="pulse" />
-        <NotificationCenter />
-        <UserMenu
-          auth={auth}
-          LinkComponent={Link}
-          orgs={orgs}
-          activeOrgId={auth.user?.org_id}
-          onSwitchOrganization={handleSwitchOrganization}
-          onCreateOrganization={() => router.push('/onboarding')}
-          allowPersonalOrganization={false}
-          onOpenSettings={openSettings}
-        />
-      </div>
+    <div className="shrink-0 flex items-center border-b border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl px-4 py-3.5 md:hidden">
+      <button
+        onClick={onMobileMenuOpen}
+        className="p-2 -ml-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white"
+        aria-label="Open navigation"
+      >
+        <MenuIcon className="w-5 h-5" />
+      </button>
     </div>
   )
 }

components/dashboard/Sidebar.tsx

@@ -5,6 +5,10 @@ import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
 import { listSites, type Site } from '@/lib/api/sites'
 import { useAuth } from '@/lib/auth/context'
+import { useSettingsModal } from '@/lib/settings-modal-context'
+import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
+import { setSessionAction } from '@/app/actions/auth'
+import { logger } from '@/lib/utils/logger'
 import { FAVICON_SERVICE_URL } from '@/lib/utils/icons'
 import {
   LayoutDashboardIcon,
@@ -20,7 +24,39 @@ import {
   ChevronUpDownIcon,
   PlusIcon,
   XIcon,
+  ThemeToggle,
+  AppLauncher,
+  UserMenu,
+  type CipheraApp,
 } from '@ciphera-net/ui'
+import NotificationCenter from '@/components/notifications/NotificationCenter'
+
+const CIPHERA_APPS: CipheraApp[] = [
+  {
+    id: 'pulse',
+    name: 'Pulse',
+    description: 'Your current app — Privacy-first analytics',
+    icon: 'https://ciphera.net/pulse_icon_no_margins.png',
+    href: 'https://pulse.ciphera.net',
+    isAvailable: false,
+  },
+  {
+    id: 'drop',
+    name: 'Drop',
+    description: 'Secure file sharing',
+    icon: 'https://ciphera.net/drop_icon_no_margins.png',
+    href: 'https://drop.ciphera.net',
+    isAvailable: true,
+  },
+  {
+    id: 'auth',
+    name: 'Auth',
+    description: 'Your Ciphera account settings',
+    icon: 'https://ciphera.net/auth_icon_no_margins.png',
+    href: 'https://auth.ciphera.net',
+    isAvailable: true,
+  },
+]
 
 const SIDEBAR_KEY = 'pulse_sidebar_collapsed'
 const EXPANDED = 256
@@ -239,10 +275,14 @@ export default function Sidebar({
 }: {
   siteId: string; mobileOpen: boolean; onMobileClose: () => void; onMobileOpen: () => void
 }) {
-  const { user } = useAuth()
+  const auth = useAuth()
+  const { user } = auth
   const canEdit = user?.role === 'owner' || user?.role === 'admin'
   const pathname = usePathname()
+  const router = useRouter()
+  const { openSettings } = useSettingsModal()
   const [sites, setSites] = useState<Site[]>([])
+  const [orgs, setOrgs] = useState<OrganizationMember[]>([])
   const [pendingHref, setPendingHref] = useState<string | null>(null)
   const wasCollapsedRef = useRef(false)
   // Safe to read localStorage directly — this component is loaded with ssr:false
@@ -251,6 +291,25 @@ export default function Sidebar({
   })
 
   useEffect(() => { listSites().then(setSites).catch(() => {}) }, [])
+  useEffect(() => {
+    if (user) {
+      getUserOrganizations()
+        .then((organizations) => setOrgs(Array.isArray(organizations) ? organizations : []))
+        .catch(err => logger.error('Failed to fetch orgs', err))
+    }
+  }, [user])
+
+  const handleSwitchOrganization = async (orgId: string | null) => {
+    if (!orgId) return
+    try {
+      const { access_token } = await switchContext(orgId)
+      await setSessionAction(access_token)
+      sessionStorage.setItem('pulse_switching_org', 'true')
+      window.location.reload()
+    } catch (err) {
+      logger.error('Failed to switch organization', err)
+    }
+  }
   useEffect(() => { setPendingHref(null); onMobileClose() }, [pathname, onMobileClose])
 
   useEffect(() => {
@@ -284,6 +343,11 @@ export default function Sidebar({
 
     return (
       <div className="flex flex-col h-full overflow-hidden">
+        {/* App Switcher — top of sidebar (scope-level switch) */}
+        <div className="flex items-center justify-center px-2 pt-3 pb-1 shrink-0">
+          <AppLauncher apps={CIPHERA_APPS} currentAppId="pulse" anchor="right" />
+        </div>
+
         {/* Logo — fixed layout, text fades */}
         <Link href="/" className="flex items-center gap-3 px-[14px] py-4 shrink-0 group overflow-hidden">
           <span className="w-9 h-9 flex items-center justify-center shrink-0">
@@ -315,23 +379,44 @@ export default function Sidebar({
           ))}
         </nav>
 
-        {/* Bottom */}
-        <div className="border-t border-neutral-200/60 dark:border-neutral-800/60 px-2 py-3 space-y-0.5 shrink-0">
-          {canEdit && (
-            <NavLink item={SETTINGS_ITEM} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={handleNavigate} />
-          )}
-          {!isMobile && (
-            <button
-              onClick={toggle}
-              className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 w-full overflow-hidden"
-              title={collapsed ? 'Expand sidebar (press [)' : 'Collapse sidebar (press [)'}
-            >
-              <span className="w-7 h-7 flex items-center justify-center shrink-0">
-                <CollapseLeftIcon className={`w-[18px] h-[18px] transition-transform duration-200 ${c ? 'rotate-180' : ''}`} />
-              </span>
-              <Label collapsed={c}>Collapse</Label>
-            </button>
-          )}
+        {/* Bottom — utility items */}
+        <div className="border-t border-neutral-200/60 dark:border-neutral-800/60 px-2 py-3 shrink-0">
+          {/* Theme, Notifications, Profile */}
+          <div className="flex items-center justify-center gap-1 mb-1">
+            <ThemeToggle />
+            <NotificationCenter anchor="right" />
+            <UserMenu
+              auth={auth}
+              LinkComponent={Link}
+              orgs={orgs}
+              activeOrgId={auth.user?.org_id}
+              onSwitchOrganization={handleSwitchOrganization}
+              onCreateOrganization={() => router.push('/onboarding')}
+              allowPersonalOrganization={false}
+              onOpenSettings={openSettings}
+              compact
+              anchor="right"
+            />
+          </div>
+
+          {/* Settings + Collapse */}
+          <div className="space-y-0.5">
+            {canEdit && (
+              <NavLink item={SETTINGS_ITEM} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={handleNavigate} />
+            )}
+            {!isMobile && (
+              <button
+                onClick={toggle}
+                className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 w-full overflow-hidden"
+                title={collapsed ? 'Expand sidebar (press [)' : 'Collapse sidebar (press [)'}
+              >
+                <span className="w-7 h-7 flex items-center justify-center shrink-0">
+                  <CollapseLeftIcon className={`w-[18px] h-[18px] transition-transform duration-200 ${c ? 'rotate-180' : ''}`} />
+                </span>
+                <Label collapsed={c}>Collapse</Label>
+              </button>
+            )}
+          </div>
         </div>
       </div>
     )

components/notifications/NotificationCenter.tsx

@@ -37,7 +37,7 @@ function BellIcon({ className }: { className?: string }) {
 const LOADING_DELAY_MS = 250
 const POLL_INTERVAL_MS = 90_000
 
-export default function NotificationCenter() {
+export default function NotificationCenter({ anchor = 'bottom' }: { anchor?: 'bottom' | 'right' }) {
   const [open, setOpen] = useState(false)
   const [notifications, setNotifications] = useState<Notification[]>([])
   const [unreadCount, setUnreadCount] = useState(0)
@@ -152,7 +152,11 @@ export default function NotificationCenter() {
           id="notification-dropdown"
           role="dialog"
           aria-label="Notifications"
-          className="fixed left-4 right-4 top-16 sm:absolute sm:left-auto sm:right-0 sm:top-full sm:mt-2 sm:w-96 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden z-[100]"
+          className={`fixed left-4 right-4 top-16 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden z-[100] ${
+            anchor === 'right'
+              ? 'sm:absolute sm:left-full sm:top-0 sm:ml-2 sm:right-auto sm:w-96'
+              : 'sm:absolute sm:left-auto sm:right-0 sm:top-full sm:mt-2 sm:w-96'
+          }`}
         >
           <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
             <h3 className="font-semibold text-neutral-900 dark:text-white">Notifications</h3>