Unified mode homes, branded sidebar, and global header/footer across all pages

src/app/applications/layout.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+
+import { GlobalSearchShell } from "@/components/clinical-dashboard/global-search-shell";
+
+export default function ApplicationsLayout({ children }: { children: ReactNode }) {
+  return (
+    <GlobalSearchShell initialMode="tools" searchComposerVisible={false}>
+      {children}
+    </GlobalSearchShell>
+  );
+}

src/app/globals.css

@@ -491,24 +491,36 @@ summary::-webkit-details-marker {
 
 .answer-footer-search-pill {
   min-height: 3.8rem;
-  gap: 0.25rem;
-  border: 1px solid var(--border-strong);
-  background: var(--surface);
-  padding-inline: 0.375rem;
+  gap: 0.375rem;
+  border: 1px solid color-mix(in srgb, var(--border-strong) 80%, transparent);
+  background: color-mix(in srgb, var(--surface) 97%, transparent);
+  padding-inline: 0.5rem;
   box-shadow:
-    0 1px 2px rgb(16 24 40 / 5%),
-    0 8px 22px rgb(16 24 40 / 8%);
+    0 1px 2px rgb(16 24 40 / 4%),
+    0 6px 16px rgb(16 24 40 / 7%),
+    0 20px 48px rgb(16 24 40 / 12%);
+  backdrop-filter: blur(18px) saturate(140%);
+  -webkit-backdrop-filter: blur(18px) saturate(140%);
   transition:
     border-color 180ms ease,
     box-shadow 180ms ease,
     transform 180ms ease;
 }
 
+.answer-footer-search-pill:hover {
+  border-color: var(--border-strong);
+  box-shadow:
+    0 1px 2px rgb(16 24 40 / 5%),
+    0 8px 20px rgb(16 24 40 / 9%),
+    0 24px 56px rgb(16 24 40 / 14%);
+}
+
 .answer-footer-search-pill:focus-within {
   border-color: var(--clinical-accent);
   box-shadow:
-    0 0 0 3px color-mix(in srgb, var(--clinical-accent) 18%, transparent),
-    0 8px 22px rgb(16 24 40 / 10%);
+    0 0 0 3px color-mix(in srgb, var(--clinical-accent) 16%, transparent),
+    0 8px 20px rgb(16 24 40 / 8%),
+    0 20px 48px rgb(16 24 40 / 12%);
 }
 
 .answer-footer-search-action {
@@ -546,26 +558,49 @@ summary::-webkit-details-marker {
   width: 2.8rem;
   background: var(--clinical-accent);
   color: var(--clinical-accent-contrast);
-  box-shadow: 0 2px 8px color-mix(in srgb, var(--clinical-accent) 30%, transparent);
+  box-shadow: 0 3px 10px color-mix(in srgb, var(--clinical-accent) 32%, transparent);
+  transition:
+    background-color 160ms ease,
+    box-shadow 160ms ease,
+    transform 160ms ease;
 }
 
 .answer-footer-search-send:hover {
   background: var(--clinical-accent-hover);
+  box-shadow: 0 5px 14px color-mix(in srgb, var(--clinical-accent) 38%, transparent);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .answer-footer-search-send:active {
+    transform: scale(0.96);
+  }
 }
 
 .answer-footer-search-chip {
   display: inline-flex;
-  min-height: 1.9rem;
+  min-height: 2.25rem;
   align-items: center;
-  gap: 0.35rem;
-  border: 1px solid var(--border);
+  gap: 0.4rem;
+  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
   border-radius: 999px;
-  background: var(--surface);
-  padding-inline: 0.65rem;
+  background: color-mix(in srgb, var(--surface) 94%, transparent);
+  padding-inline: 0.8rem;
   color: var(--text-muted);
   font-size: 0.75rem;
   font-weight: 700;
-  box-shadow: none;
+  box-shadow: 0 2px 10px rgb(16 24 40 / 6%);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  transition:
+    border-color 160ms ease,
+    background-color 160ms ease,
+    color 160ms ease;
+}
+
+.answer-footer-search-chip:hover {
+  border-color: var(--clinical-accent-border);
+  background: var(--surface);
+  color: var(--text);
 }
 
 .answer-footer-search-chip svg {
@@ -603,23 +638,35 @@ summary::-webkit-details-marker {
 
 .desktop-home-search-pill {
   min-height: 3.45rem;
-  gap: 0.35rem;
-  border-color: var(--border-strong);
-  background: var(--surface);
-  padding-inline: 0.45rem;
+  gap: 0.375rem;
+  border-color: color-mix(in srgb, var(--border-strong) 80%, transparent);
+  background: color-mix(in srgb, var(--surface) 96%, transparent);
+  padding-inline: 0.5rem;
   box-shadow:
-    0 1px 2px rgb(16 24 40 / 5%),
-    0 8px 22px rgb(16 24 40 / 8%);
+    0 1px 2px rgb(16 24 40 / 4%),
+    0 6px 16px rgb(16 24 40 / 6%),
+    0 18px 40px rgb(16 24 40 / 9%);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
   transition:
     border-color 180ms ease,
     box-shadow 180ms ease;
 }
 
+.desktop-home-search-pill:hover {
+  border-color: var(--border-strong);
+  box-shadow:
+    0 1px 2px rgb(16 24 40 / 5%),
+    0 8px 20px rgb(16 24 40 / 8%),
+    0 22px 48px rgb(16 24 40 / 11%);
+}
+
 .desktop-home-search-pill:focus-within {
   border-color: var(--clinical-accent);
   box-shadow:
-    0 0 0 3px color-mix(in srgb, var(--clinical-accent) 18%, transparent),
-    0 8px 22px rgb(16 24 40 / 10%);
+    0 0 0 3px color-mix(in srgb, var(--clinical-accent) 16%, transparent),
+    0 8px 20px rgb(16 24 40 / 8%),
+    0 18px 40px rgb(16 24 40 / 9%);
 }
 
 .desktop-home-search-input {
@@ -666,8 +713,8 @@ summary::-webkit-details-marker {
   }
 
   .answer-footer-search-chip {
-    min-height: 2rem;
-    padding-inline: 0.82rem;
+    min-height: 2.25rem;
+    padding-inline: 0.9rem;
     font-size: 0.8125rem;
   }
 

src/app/medications/layout.tsx

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+
+import { GlobalSearchShell } from "@/components/clinical-dashboard/global-search-shell";
+
+export default function MedicationsLayout({ children }: { children: ReactNode }) {
+  return <GlobalSearchShell initialMode="prescribing">{children}</GlobalSearchShell>;
+}

src/components/ClinicalDashboard.tsx

@@ -122,6 +122,7 @@ import { AUTH_EMAIL_STORAGE_KEY, useAuthSession } from "@/lib/supabase/client";
 import { SafeBoldText } from "@/components/SafeBoldText";
 import { Sheet } from "@/components/ui/sheet";
 import { AnswerEmptyState, AnswerSkeleton, CopyButton } from "@/components/clinical-dashboard/answer-status";
+import { useSidebarCollapsed } from "@/components/clinical-dashboard/use-sidebar-collapsed";
 import { useTheme } from "@/components/clinical-dashboard/use-theme";
 import { StatusBadge, StrengthBadge } from "@/components/clinical-dashboard/badges";
 import {
@@ -271,7 +272,7 @@ function useMobilePreviewSheet() {
 }
 
 const authEmailChangeEvent = "clinical-kb-auth-email-change";
-const recentQueryStorageKey = "clinical-kb-recent-queries";
+export const recentQueryStorageKey = "clinical-kb-recent-queries";
 const documentPageSize = 150;
 const activeIndexingPollFallbackMs = 5_000;
 const setupRecheckPollMs = 60_000;
@@ -4854,7 +4855,7 @@ function DrawerGroupLabel({ title }: { title: string }) {
   );
 }
 
-function SettingsDialog({
+export function SettingsDialog({
   open,
   onClose,
   identity,
@@ -5754,7 +5755,7 @@ export function ClinicalDashboard({
   const [guideOpen, setGuideOpen] = useState(false);
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useSidebarCollapsed();
   const [documentsDrawerOpen, setDocumentsDrawerOpen] = useState(false);
   const [documentsDrawerMode, setDocumentsDrawerMode] = useState<DocumentDrawerMode>("library");
   const [uploadDrawerOpen, setUploadDrawerOpen] = useState(false);
@@ -7310,8 +7311,13 @@ export function ClinicalDashboard({
         !modeSearchSubmitted) ||
       (searchMode === "prescribing" && activeModeResultKind === "documents" && !modeSearchSubmitted) ||
       (activeModeResultKind === "differentials" && !modeSearchSubmitted) ||
+      activeModeResultKind === "favourites" ||
       activeModeResultKind === "tools");
   const desktopHomeComposerSlotId = showDesktopHomeComposer ? modeHomeDesktopComposerSlotId : undefined;
+  // Favourites and Tools are content-rich hubs: they share the centred hero but
+  // stay top-aligned so their lists start in a stable position.
+  const centeredModeHome =
+    showDesktopHomeComposer && activeModeResultKind !== "tools" && activeModeResultKind !== "favourites";
   const renderDegradedNotice = () => (
     <UtilityDrawer
       icon={!isOnline ? WifiOff : AlertCircle}
@@ -7472,9 +7478,6 @@ export function ClinicalDashboard({
             closeDashboardTransientSurfaces("mobileSidebar");
             setMobileSidebarOpen(true);
           }}
-          onOpenSettings={openSettings}
-          theme={theme}
-          onToggleTheme={toggleTheme}
           queryModeOptions={clinicalQueryModeOptions}
           queryInputRef={composerInputRef}
           queryInputAutoFocus={focusSearch}
@@ -7533,8 +7536,8 @@ export function ClinicalDashboard({
             <section
               className={cn(
                 "min-h-[calc(100dvh-11rem)]",
-                activeModeResultKind === "answer" && !answer && !loading
-                  ? "grid place-items-center"
+                centeredModeHome || (activeModeResultKind === "answer" && !answer && !loading)
+                  ? "grid w-full place-items-center"
                   : activeModeResultKind === "tools" ||
                       activeModeResultKind === "favourites" ||
                       activeModeResultKind === "differentials"
@@ -7612,6 +7615,7 @@ export function ClinicalDashboard({
                   onAddFavourite={() =>
                     setActionNotice({ tone: "success", message: "Favourite creation is ready to connect." })
                   }
+                  desktopComposerSlotId={desktopHomeComposerSlotId}
                 />
               ) : activeModeResultKind === "documents" ? (
                 searchMode === "prescribing" ? (