feat: restyle pageshell to match hifi

clients/web/src/components/requests/KanbanColumn.tsx

@@ -8,7 +8,7 @@ type KanbanColumnProps = {
 
 export function KanbanColumn({ title, children }: KanbanColumnProps) {
   return (
-    <div className="flex flex-col gap-3 rounded-t-2xl border border-b-0 border-stroke-subtle bg-white p-4 h-full">
+    <div className="flex h-full min-h-0 w-max shrink-0 flex-col gap-3 rounded-t-2xl border border-b-0 border-stroke-subtle bg-white p-4">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
           <ChefHat className="size-5 text-text-default" />
@@ -31,7 +31,7 @@ export function KanbanColumn({ title, children }: KanbanColumnProps) {
           </button>
         </div>
       </div>
-      <div className="flex flex-col gap-3 overflow-y-auto flex-1">
+      <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto *:shrink-0">
         {children}
       </div>
     </div>

clients/web/src/components/rooms/OverviewCard.tsx

@@ -22,7 +22,7 @@ export function OverviewCard({
   className = "",
 }: OverviewCardProps) {
   return (
-    <section className={cn("flex w-full min-w-0 flex-col bg-white", className)}>
+    <section className={cn("flex w-full min-w-0 flex-col", className)}>
       <h2 className="my-2 shrink-0 text-sm font-medium leading-tight text-neutral-400">
         {title}
       </h2>

clients/web/src/components/rooms/RoomsHeader.tsx → clients/web/src/components/rooms/RoomsToolbar.tsx

@@ -1,22 +1,28 @@
 import { FloorDropdown } from "./FloorDropdown";
+import { OrderByDropdown } from "./OrderByDropdown";
 import { RoomsFilterPopover } from "@/components/rooms/RoomsFilterPopover";
 
-type RoomsHeaderProps = {
+type RoomsToolbarProps = {
   selectedFloors: Array<number>;
   onChangeSelectedFloors: (floors: Array<number>) => void;
+  ascending: boolean;
+  setAscending: (ascending: boolean) => void;
 };
 
-export function RoomsHeader({
+export function RoomsToolbar({
   selectedFloors,
   onChangeSelectedFloors,
-}: RoomsHeaderProps) {
+  ascending,
+  setAscending,
+}: RoomsToolbarProps) {
   return (
-    <header className="z-30 bg-bg-container px-16 py-6 flex items-center gap-3">
+    <div className="flex items-center gap-3">
       <FloorDropdown
         selected={selectedFloors}
         onChangeSelectedFloors={onChangeSelectedFloors}
       />
       <RoomsFilterPopover />
-    </header>
+      <OrderByDropdown ascending={ascending} setAscending={setAscending} />
+    </div>
   );
 }

clients/web/src/components/ui/PageShell.tsx

@@ -2,7 +2,10 @@ import type { ReactNode } from "react";
 import { cn } from "@/lib/utils";
 
 type PageShellProps = {
-  header: ReactNode;
+  header?: {
+    title: string;
+    description: string;
+  };
   drawer?: ReactNode;
   drawerOpen?: boolean;
   children: ReactNode;
@@ -23,20 +26,24 @@ export function PageShell({
   return (
     <main className="relative flex h-screen w-full min-w-0 overflow-hidden">
       <div className="flex flex-1 flex-col min-w-0 overflow-hidden">
-        <header className="shrink-0 bg-bg-container">{header}</header>
+        {header ? (
+          <header className="shrink-0 bg-white border-b border-stroke-subtle px-6 py-4 flex flex-col gap-1.5">
+            <h1 className="text-2xl font-semibold text-text-default">
+              {header.title}
+            </h1>
+            <h2 className="text-sm font-medium text-text-subtle">
+              {header.description}
+            </h2>
+          </header>
+        ) : null}
 
         <section
           className={cn(
-            "flex-1 min-h-0 overflow-auto bg-bg-primary",
+            "flex-1 min-h-0 overflow-auto bg-neutral-10 px-6 py-4",
             bodyClassName,
           )}
         >
-          <div
-            className={cn(
-              "flex flex-col mx-auto w-full px-16",
-              contentClassName,
-            )}
-          >
+          <div className={cn("flex flex-col mx-auto w-full", contentClassName)}>
             {children}
           </div>
         </section>

clients/web/src/routes/_protected/guests.index.tsx

@@ -48,11 +48,10 @@ function GuestsQuickListPage() {
 
   return (
     <PageShell
-      header={
-        <div className="px-6 py-5 border-b border-stroke-subtle">
-          <h1 className="text-2xl font-semibold text-text-default">Guests</h1>
-        </div>
-      }
+      header={{
+        title: "Guests",
+        description: "Description blah blah fries -> bag",
+      }}
       drawerOpen={generatedRequest !== null}
       drawer={
         <GeneratedRequestDrawer

clients/web/src/routes/_protected/home.tsx

@@ -3,7 +3,6 @@ import { createFileRoute } from "@tanstack/react-router";
 import type { Request } from "@shared";
 import { GlobalTaskInput } from "@/components/ui/GlobalTaskInput";
 import { PageShell } from "@/components/ui/PageShell";
-import { HomeHeader } from "@/components/home/HomeHeader";
 import { HomeToolbar } from "@/components/home/HomeToolbar";
 import { HomeFilterBar } from "@/components/home/HomeFilterBar";
 import { KanbanColumn } from "@/components/requests/KanbanColumn";
@@ -22,13 +21,10 @@ function HomePage() {
 
   return (
     <PageShell
-      header={
-        <>
-          <HomeHeader />
-          <HomeToolbar className="mt-2" />
-          <HomeFilterBar />
-        </>
-      }
+      header={{
+        title: "Home",
+        description: "Overview of all tasks currently at play",
+      }}
       drawerOpen={generatedRequest !== null}
       drawer={
         <GeneratedRequestDrawer
@@ -38,14 +34,18 @@ function HomePage() {
       }
       contentClassName="!px-0 h-full overflow-hidden relative"
     >
-      <div className="absolute inset-0 flex items-stretch gap-6 overflow-x-auto overflow-y-hidden p-6 pb-0">
-        {PLACEHOLDER_COLUMNS.map((col) => (
-          <KanbanColumn key={col.title} title={col.title}>
-            {col.tasks.map((task, i) => (
-              <RequestCardItem key={i} {...task} />
-            ))}
-          </KanbanColumn>
-        ))}
+      <HomeToolbar className="mt-2" />
+      <HomeFilterBar />
+      <div className="relative flex-1 min-h-0">
+        <div className="absolute inset-0 flex items-stretch gap-6 overflow-x-auto overflow-y-hidden p-6 pb-0">
+          {PLACEHOLDER_COLUMNS.map((col) => (
+            <KanbanColumn key={col.title} title={col.title}>
+              {col.tasks.map((task, i) => (
+                <RequestCardItem key={i} {...task} />
+              ))}
+            </KanbanColumn>
+          ))}
+        </div>
       </div>
       {generatedRequest === null && (
         <GlobalTaskInput onRequestGenerated={setGeneratedRequest} />

clients/web/src/routes/_protected/rooms.index.tsx

@@ -4,9 +4,8 @@ import { usePostRoomsHook } from "@shared/api/generated/endpoints/rooms/rooms";
 import { useQuery } from "@tanstack/react-query";
 import type { Request, RoomWithOptionalGuestBooking } from "@shared";
 import { GlobalTaskInput } from "@/components/ui/GlobalTaskInput";
-import { SortByContainer } from "@/components/rooms/SortByContainer";
 import { PageShell } from "@/components/ui/PageShell";
-import { RoomsHeader } from "@/components/rooms/RoomsHeader";
+import { RoomsToolbar } from "@/components/rooms/RoomsToolbar";
 import { RoomsList } from "@/components/rooms/RoomsList";
 import { RoomDetailsDrawer } from "@/components/rooms/RoomDetailsDrawer";
 import { GeneratedRequestDrawer } from "@/components/requests/GeneratedRequestDrawer";
@@ -50,18 +49,22 @@ function RoomsPage() {
 
   return (
     <PageShell
-      header={
-        <RoomsHeader
-          selectedFloors={selectedFloors}
-          onChangeSelectedFloors={setSelectedFloors}
-        />
-      }
+      header={{
+        title: "Rooms",
+        description:
+          "Find any room and access essential details like availability, occupancy, and status at a glance.",
+      }}
       drawerOpen={generatedRequest !== null || selectedRoom !== null}
       drawer={drawerContent}
       bodyClassName="overflow-hidden"
-      contentClassName={"h-full pb-26.5"}
+      contentClassName={"h-full"}
     >
-      <SortByContainer ascending={ascending} setAscending={setAscending} />
+      <RoomsToolbar
+        selectedFloors={selectedFloors}
+        onChangeSelectedFloors={setSelectedFloors}
+        ascending={ascending}
+        setAscending={setAscending}
+      />
       <div className="flex min-h-0 flex-row">
         <RoomsList
           rooms={rooms?.items ?? []}

clients/web/src/styles.css

@@ -56,7 +56,9 @@
   --color-text-subtle: #747474;
   --color-text-secondary: #5d5d5d;
   --color-bg-selected: #edf5f1;
+  --color-neutral-10: #fafafa;
   --color-neutral-400: #808080;
+  --color-neutral-750: #464646;
   --color-muted: #f0f0f0;
   --color-request-pending-secondary: #fcdcd1;
   --color-request-pending: #f25118;