img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardAction,
+ CardDescription,
+ CardContent,
+}
diff --git a/web/src/components/ui/dialog.tsx b/web/src/components/ui/dialog.tsx
new file mode 100644
index 00000000..23239d9a
--- /dev/null
+++ b/web/src/components/ui/dialog.tsx
@@ -0,0 +1,157 @@
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+ return
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+ return
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+ return
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+ return
+}
+
+function DialogOverlay({
+ className,
+ ...props
+}: DialogPrimitive.Backdrop.Props) {
+ return (
+
+ )
+}
+
+function DialogContent({
+ className,
+ children,
+ showCloseButton = true,
+ ...props
+}: DialogPrimitive.Popup.Props & {
+ showCloseButton?: boolean
+}) {
+ return (
+
+
+
+ {children}
+ {showCloseButton && (
+
+ }
+ >
+
+ Close
+
+ )}
+
+
+ )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function DialogFooter({
+ className,
+ showCloseButton = false,
+ children,
+ ...props
+}: React.ComponentProps<"div"> & {
+ showCloseButton?: boolean
+}) {
+ return (
+
+ {children}
+ {showCloseButton && (
+ }>
+ Close
+
+ )}
+
+ )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+ return (
+
+ )
+}
+
+function DialogDescription({
+ className,
+ ...props
+}: DialogPrimitive.Description.Props) {
+ return (
+
+ )
+}
+
+export {
+ Dialog,
+ DialogClose,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogOverlay,
+ DialogPortal,
+ DialogTitle,
+ DialogTrigger,
+}
diff --git a/web/src/components/ui/dropdown-menu.tsx b/web/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 00000000..30ddda7b
--- /dev/null
+++ b/web/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,270 @@
+import * as React from "react"
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+
+import { cn } from "@/lib/utils"
+import { ChevronRightIcon, CheckIcon } from "lucide-react"
+
+function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
+ return
+}
+
+function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+ return
+}
+
+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+ return
+}
+
+function DropdownMenuContent({
+ align = "start",
+ alignOffset = 0,
+ side = "bottom",
+ sideOffset = 4,
+ className,
+ ...props
+}: MenuPrimitive.Popup.Props &
+ Pick<
+ MenuPrimitive.Positioner.Props,
+ "align" | "alignOffset" | "side" | "sideOffset"
+ >) {
+ return (
+
+
+
+
+
+ )
+}
+
+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+ return
+}
+
+function DropdownMenuLabel({
+ className,
+ inset,
+ ...props
+}: MenuPrimitive.GroupLabel.Props & {
+ inset?: boolean
+}) {
+ return (
+
+ )
+}
+
+function DropdownMenuItem({
+ className,
+ inset,
+ variant = "default",
+ ...props
+}: MenuPrimitive.Item.Props & {
+ inset?: boolean
+ variant?: "default" | "destructive"
+}) {
+ return (
+
+ )
+}
+
+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+ return
+}
+
+function DropdownMenuSubTrigger({
+ className,
+ inset,
+ children,
+ ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+ inset?: boolean
+}) {
+ return (
+
+ {children}
+
+
+ )
+}
+
+function DropdownMenuSubContent({
+ align = "start",
+ alignOffset = -3,
+ side = "right",
+ sideOffset = 0,
+ className,
+ ...props
+}: React.ComponentProps
) {
+ return (
+
+ )
+}
+
+function DropdownMenuCheckboxItem({
+ className,
+ children,
+ checked,
+ inset,
+ ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+ inset?: boolean
+}) {
+ return (
+
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+ return (
+
+ )
+}
+
+function DropdownMenuRadioItem({
+ className,
+ children,
+ inset,
+ ...props
+}: MenuPrimitive.RadioItem.Props & {
+ inset?: boolean
+}) {
+ return (
+
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function DropdownMenuSeparator({
+ className,
+ ...props
+}: MenuPrimitive.Separator.Props) {
+ return (
+
+ )
+}
+
+function DropdownMenuShortcut({
+ className,
+ ...props
+}: React.ComponentProps<"span">) {
+ return (
+
+ )
+}
+
+export {
+ DropdownMenu,
+ DropdownMenuPortal,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuLabel,
+ DropdownMenuItem,
+ DropdownMenuCheckboxItem,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuSub,
+ DropdownMenuSubTrigger,
+ DropdownMenuSubContent,
+}
diff --git a/web/src/components/ui/input.tsx b/web/src/components/ui/input.tsx
new file mode 100644
index 00000000..7d21babb
--- /dev/null
+++ b/web/src/components/ui/input.tsx
@@ -0,0 +1,20 @@
+import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+ return (
+
+ )
+}
+
+export { Input }
diff --git a/web/src/components/ui/label.tsx b/web/src/components/ui/label.tsx
new file mode 100644
index 00000000..f1629961
--- /dev/null
+++ b/web/src/components/ui/label.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+ return (
+
+ )
+}
+
+export { Label }
diff --git a/web/src/components/ui/popover.tsx b/web/src/components/ui/popover.tsx
new file mode 100644
index 00000000..1428fddf
--- /dev/null
+++ b/web/src/components/ui/popover.tsx
@@ -0,0 +1,88 @@
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({ ...props }: PopoverPrimitive.Root.Props) {
+ return
+}
+
+function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
+ return
+}
+
+function PopoverContent({
+ className,
+ align = "center",
+ alignOffset = 0,
+ side = "bottom",
+ sideOffset = 4,
+ ...props
+}: PopoverPrimitive.Popup.Props &
+ Pick<
+ PopoverPrimitive.Positioner.Props,
+ "align" | "alignOffset" | "side" | "sideOffset"
+ >) {
+ return (
+
+
+
+
+
+ )
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
+ return (
+
+ )
+}
+
+function PopoverDescription({
+ className,
+ ...props
+}: PopoverPrimitive.Description.Props) {
+ return (
+
+ )
+}
+
+export {
+ Popover,
+ PopoverContent,
+ PopoverDescription,
+ PopoverHeader,
+ PopoverTitle,
+ PopoverTrigger,
+}
diff --git a/web/src/components/ui/scroll-area.tsx b/web/src/components/ui/scroll-area.tsx
new file mode 100644
index 00000000..7668f217
--- /dev/null
+++ b/web/src/components/ui/scroll-area.tsx
@@ -0,0 +1,52 @@
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+ className,
+ children,
+ ...props
+}: ScrollAreaPrimitive.Root.Props) {
+ return (
+
+
+ {children}
+
+
+
+
+ )
+}
+
+function ScrollBar({
+ className,
+ orientation = "vertical",
+ ...props
+}: ScrollAreaPrimitive.Scrollbar.Props) {
+ return (
+
+
+
+ )
+}
+
+export { ScrollArea, ScrollBar }
diff --git a/web/src/components/ui/select.tsx b/web/src/components/ui/select.tsx
new file mode 100644
index 00000000..a6d77862
--- /dev/null
+++ b/web/src/components/ui/select.tsx
@@ -0,0 +1,200 @@
+import * as React from "react"
+import { Select as SelectPrimitive } from "@base-ui/react/select"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+const Select = SelectPrimitive.Root
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+ return (
+
+ )
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+ return (
+
+ )
+}
+
+function SelectTrigger({
+ className,
+ size = "default",
+ children,
+ ...props
+}: SelectPrimitive.Trigger.Props & {
+ size?: "sm" | "default"
+}) {
+ return (
+
+ {children}
+
+ }
+ />
+
+ )
+}
+
+function SelectContent({
+ className,
+ children,
+ side = "bottom",
+ sideOffset = 4,
+ align = "center",
+ alignOffset = 0,
+ alignItemWithTrigger = true,
+ ...props
+}: SelectPrimitive.Popup.Props &
+ Pick<
+ SelectPrimitive.Positioner.Props,
+ "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+ >) {
+ return (
+
+
+
+
+ {children}
+
+
+
+
+ )
+}
+
+function SelectLabel({
+ className,
+ ...props
+}: SelectPrimitive.GroupLabel.Props) {
+ return (
+
+ )
+}
+
+function SelectItem({
+ className,
+ children,
+ ...props
+}: SelectPrimitive.Item.Props) {
+ return (
+
+
+ {children}
+
+
+ }
+ >
+
+
+
+ )
+}
+
+function SelectSeparator({
+ className,
+ ...props
+}: SelectPrimitive.Separator.Props) {
+ return (
+
+ )
+}
+
+function SelectScrollUpButton({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ )
+}
+
+function SelectScrollDownButton({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ )
+}
+
+export {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectScrollDownButton,
+ SelectScrollUpButton,
+ SelectSeparator,
+ SelectTrigger,
+ SelectValue,
+}
diff --git a/web/src/components/ui/separator.tsx b/web/src/components/ui/separator.tsx
new file mode 100644
index 00000000..4f65961b
--- /dev/null
+++ b/web/src/components/ui/separator.tsx
@@ -0,0 +1,23 @@
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+ className,
+ orientation = "horizontal",
+ ...props
+}: SeparatorPrimitive.Props) {
+ return (
+
+ )
+}
+
+export { Separator }
diff --git a/web/src/components/ui/skeleton.tsx b/web/src/components/ui/skeleton.tsx
new file mode 100644
index 00000000..0118624f
--- /dev/null
+++ b/web/src/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export { Skeleton }
diff --git a/web/src/components/ui/sonner.tsx b/web/src/components/ui/sonner.tsx
new file mode 100644
index 00000000..e510f14e
--- /dev/null
+++ b/web/src/components/ui/sonner.tsx
@@ -0,0 +1,48 @@
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import {
+ CircleCheckIcon,
+ InfoIcon,
+ TriangleAlertIcon,
+ OctagonXIcon,
+ Loader2Icon,
+} from "lucide-react"
+
+// Sourced from the app's own ThemeProvider rather than next-themes, which the
+// shadcn template assumes but this project does not use.
+import { useTheme } from "@/components/theme-provider"
+
+// React.CSSProperties has no room for custom properties, so widen it rather
+// than asserting the whole object.
+const toasterStyle: React.CSSProperties & Record<`--${string}`, string> = {
+ "--normal-bg": "var(--popover)",
+ "--normal-text": "var(--popover-foreground)",
+ "--normal-border": "var(--border)",
+ "--border-radius": "var(--radius)",
+}
+
+const Toaster = ({ ...props }: ToasterProps) => {
+ const { theme } = useTheme()
+
+ return (
+ ,
+ info: ,
+ warning: ,
+ error: ,
+ loading: ,
+ }}
+ style={toasterStyle}
+ toastOptions={{
+ classNames: {
+ toast: "cn-toast",
+ },
+ }}
+ {...props}
+ />
+ )
+}
+
+export { Toaster }
diff --git a/web/src/components/ui/tabs.tsx b/web/src/components/ui/tabs.tsx
new file mode 100644
index 00000000..2adaeb6c
--- /dev/null
+++ b/web/src/components/ui/tabs.tsx
@@ -0,0 +1,80 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+ className,
+ orientation = "horizontal",
+ ...props
+}: TabsPrimitive.Root.Props) {
+ return (
+
+ )
+}
+
+const tabsListVariants = cva(
+ "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+ {
+ variants: {
+ variant: {
+ default: "bg-muted",
+ line: "gap-1 bg-transparent",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+function TabsList({
+ className,
+ variant = "default",
+ ...props
+}: TabsPrimitive.List.Props & VariantProps) {
+ return (
+
+ )
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+ return (
+
+ )
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+ return (
+
+ )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
diff --git a/web/src/components/ui/textarea.tsx b/web/src/components/ui/textarea.tsx
new file mode 100644
index 00000000..04d27f7d
--- /dev/null
+++ b/web/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+ return (
+
+ )
+}
+
+export { Textarea }
diff --git a/web/src/components/ui/tooltip.tsx b/web/src/components/ui/tooltip.tsx
new file mode 100644
index 00000000..96a9ec25
--- /dev/null
+++ b/web/src/components/ui/tooltip.tsx
@@ -0,0 +1,64 @@
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+ delay = 0,
+ ...props
+}: TooltipPrimitive.Provider.Props) {
+ return (
+
+ )
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+ return
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+ return
+}
+
+function TooltipContent({
+ className,
+ side = "top",
+ sideOffset = 4,
+ align = "center",
+ alignOffset = 0,
+ children,
+ ...props
+}: TooltipPrimitive.Popup.Props &
+ Pick<
+ TooltipPrimitive.Positioner.Props,
+ "align" | "alignOffset" | "side" | "sideOffset"
+ >) {
+ return (
+
+
+
+ {children}
+
+
+
+
+ )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
From 4fdd78e8e77a51030bf2ebbf4c841eb4544c04cc Mon Sep 17 00:00:00 2001
From: Yerassyl Auyeskhan <95128018+ieraasyl@users.noreply.github.com>
Date: Sun, 26 Jul 2026 02:27:07 +0500
Subject: [PATCH 05/56] feat(web): add auth guard, session layer, and shared
query conventions
---
infra/docker-compose.yml | 6 +-
infra/nginx/nginx.dev.conf | 5 +-
web/.gitignore | 3 +
web/Dockerfile.dev | 5 +
web/src/api/client.ts | 24 +++--
web/src/api/query-keys.ts | 72 +++++++++++++++
web/src/components/query-boundary.tsx | 128 ++++++++++++++++++++++++++
web/src/features/auth/api.ts | 42 +++++++++
web/src/features/auth/schema.ts | 49 ++++++++++
web/src/features/auth/use-session.ts | 53 +++++++++++
web/src/lib/datetime.ts | 105 +++++++++++++++++++++
web/src/routeTree.gen.ts | 47 +++++++++-
web/src/routes/_app.tsx | 31 +++++++
web/src/routes/_app/announcements.tsx | 29 ++++++
web/src/routes/index.tsx | 53 +++++++++--
15 files changed, 631 insertions(+), 21 deletions(-)
create mode 100644 web/src/api/query-keys.ts
create mode 100644 web/src/components/query-boundary.tsx
create mode 100644 web/src/features/auth/api.ts
create mode 100644 web/src/features/auth/schema.ts
create mode 100644 web/src/features/auth/use-session.ts
create mode 100644 web/src/lib/datetime.ts
create mode 100644 web/src/routes/_app.tsx
create mode 100644 web/src/routes/_app/announcements.tsx
diff --git a/infra/docker-compose.yml b/infra/docker-compose.yml
index 05c41bf7..4c4fdcc2 100644
--- a/infra/docker-compose.yml
+++ b/infra/docker-compose.yml
@@ -42,7 +42,7 @@ services:
restart: always
ports:
- "80:80" # Existing frontend/
- - "8080:8080" # New web/ — remove once the cutover lands
+ - "8081:8081" # New web/ — remove once the cutover lands
volumes:
- ./nginx/nginx.dev.conf:/etc/nginx/nginx.conf
- ../frontend/dist:/var/www/my-app/dist # Make sure this folder exists in production builds
@@ -168,6 +168,10 @@ services:
volumes:
- ../web:/app # Mount source for HMR
- /app/node_modules # Anonymous volume keeps the image's deps
+ environment:
+ # The bind mount makes pnpm's deps-status check want to purge
+ # node_modules, which it refuses to do without a TTY.
+ - CI=true
networks:
- nuros
diff --git a/infra/nginx/nginx.dev.conf b/infra/nginx/nginx.dev.conf
index bf3bb71f..3dea1543 100644
--- a/infra/nginx/nginx.dev.conf
+++ b/infra/nginx/nginx.dev.conf
@@ -114,9 +114,12 @@ http {
# against a single backend. Same API/WS/GCS routing as :80; only the
# document root differs. Remove this block at cutover, when :80 starts
# serving web/ directly.
+ #
+ # 8081 rather than 8080: the latter is a common default and was already
+ # taken on the dev machine this was first brought up on.
# ------------------------------------------------------------------------
server {
- listen 8080;
+ listen 8081;
server_name localhost;
client_max_body_size 100m;
diff --git a/web/.gitignore b/web/.gitignore
index ca59ec87..4bd514db 100644
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -25,3 +25,6 @@ dist-ssr
# Generated from the backend OpenAPI schema
openapi.json
+
+# pnpm store, created when the dev container installs into the bind mount
+.pnpm-store/
diff --git a/web/Dockerfile.dev b/web/Dockerfile.dev
index 0927fcdd..b0c18080 100644
--- a/web/Dockerfile.dev
+++ b/web/Dockerfile.dev
@@ -5,6 +5,11 @@ FROM node:24-alpine
RUN apk add --no-cache bash curl git
RUN corepack enable
+# Keep the content-addressable store outside /app. The source directory is
+# bind-mounted from the host, so a store under it would write ~300MB of package
+# files straight into the working tree.
+ENV npm_config_store_dir=/pnpm-store
+
WORKDIR /app
# Cache the dependency layer separately from source.
diff --git a/web/src/api/client.ts b/web/src/api/client.ts
index 2ead5c72..63b720c5 100644
--- a/web/src/api/client.ts
+++ b/web/src/api/client.ts
@@ -38,22 +38,30 @@ export class ApiError extends Error {
}
}
+function isRecord(value: unknown): value is Record {
+ return typeof value === "object" && value !== null
+}
+
function describe(detail: unknown): string {
if (typeof detail === "string") return detail
- if (detail && typeof detail === "object" && "detail" in detail) {
- const inner = (detail as { detail: unknown }).detail
+
+ if (isRecord(detail) && "detail" in detail) {
+ const inner = detail.detail
if (typeof inner === "string") return inner
- // 422 bodies are [{loc, msg, type}, ...].
+
+ // FastAPI validation errors are [{loc, msg, type}, ...].
if (Array.isArray(inner)) {
- return inner
+ const messages: unknown[] = inner
+ return messages
.map((issue) =>
- issue && typeof issue === "object" && "msg" in issue
- ? String((issue as { msg: unknown }).msg)
+ isRecord(issue) && typeof issue.msg === "string"
+ ? issue.msg
: JSON.stringify(issue)
)
.join("; ")
}
}
+
return JSON.stringify(detail)
}
@@ -69,7 +77,9 @@ export async function unwrap(
if (error !== undefined || !response.ok) {
throw new ApiError(response.status, error)
}
- // 204/205 responses legitimately carry no body.
+ // 204/205 carry no body by design, and callers of those endpoints type the
+ // result as void — so widening undefined to T here is intentional.
+ // oxlint-disable-next-line typescript/no-unsafe-type-assertion
return data as T
}
diff --git a/web/src/api/query-keys.ts b/web/src/api/query-keys.ts
new file mode 100644
index 00000000..a356f83a
--- /dev/null
+++ b/web/src/api/query-keys.ts
@@ -0,0 +1,72 @@
+/**
+ * Every query key in the app is built here.
+ *
+ * The previous app had 88 inline `queryKey:` literals with no shared
+ * convention — ["campusCurrent","communities"] next to ["grade-terms"] next to
+ * ["sg-members","list"] — which made targeted invalidation guesswork. Keys are
+ * hierarchical: invalidating `qk.events.all()` clears every events query,
+ * including lists and details.
+ */
+export const qk = {
+ session: () => ["session"] as const,
+
+ events: {
+ all: () => ["events"] as const,
+ list: (filters: Record) =>
+ ["events", "list", filters] as const,
+ detail: (id: number) => ["events", "detail", id] as const,
+ },
+
+ communities: {
+ all: () => ["communities"] as const,
+ list: (filters: Record) =>
+ ["communities", "list", filters] as const,
+ detail: (id: number) => ["communities", "detail", id] as const,
+ },
+
+ announcements: {
+ all: () => ["announcements"] as const,
+ bundle: () => ["announcements", "bundle"] as const,
+ telegram: () => ["announcements", "telegram"] as const,
+ },
+
+ opportunities: {
+ all: () => ["opportunities"] as const,
+ list: (filters: Record) =>
+ ["opportunities", "list", filters] as const,
+ detail: (id: number) => ["opportunities", "detail", id] as const,
+ },
+
+ courses: {
+ all: () => ["courses"] as const,
+ catalog: (filters: Record) =>
+ ["courses", "catalog", filters] as const,
+ registered: () => ["courses", "registered"] as const,
+ schedule: () => ["courses", "schedule"] as const,
+ gradeTerms: () => ["courses", "grade-terms"] as const,
+ grades: (filters: Record) =>
+ ["courses", "grades", filters] as const,
+ degreeAudit: () => ["courses", "degree-audit"] as const,
+ planner: () => ["courses", "planner"] as const,
+ },
+
+ sgotinish: {
+ all: () => ["sgotinish"] as const,
+ tickets: (filters: Record) =>
+ ["sgotinish", "tickets", filters] as const,
+ ticket: (id: number) => ["sgotinish", "tickets", id] as const,
+ messages: (conversationId: number) =>
+ ["sgotinish", "messages", conversationId] as const,
+ members: () => ["sgotinish", "members"] as const,
+ departments: () => ["sgotinish", "departments"] as const,
+ },
+
+ notifications: {
+ all: () => ["notifications"] as const,
+ list: (filters: Record) =>
+ ["notifications", "list", filters] as const,
+ },
+
+ search: (keyword: string, storageName: string) =>
+ ["search", storageName, keyword] as const,
+} as const
diff --git a/web/src/components/query-boundary.tsx b/web/src/components/query-boundary.tsx
new file mode 100644
index 00000000..79048d5d
--- /dev/null
+++ b/web/src/components/query-boundary.tsx
@@ -0,0 +1,128 @@
+import type { ReactNode } from "react"
+import type { UseQueryResult } from "@tanstack/react-query"
+import { AlertTriangleIcon, RefreshCwIcon } from "lucide-react"
+
+import { ApiError } from "@/api/client"
+import { Button } from "@/components/ui/button"
+import { Skeleton } from "@/components/ui/skeleton"
+
+/**
+ * One place that renders loading, error and empty states for a query.
+ *
+ * The old app handled these three ways: a shared QueryBoundary in some places,
+ * a bespoke inline animate-pulse skeleton in others, and a bare
+ * `Loading messages...
` with no retry in the worst ones. Route them all
+ * through here so the app behaves consistently when the network does not.
+ */
+interface QueryBoundaryProps {
+ query: UseQueryResult
+ children: (data: T) => ReactNode
+ /** Shown while loading. Defaults to generic skeleton lines. */
+ pending?: ReactNode
+ /** Rendered instead of children when the result is empty. */
+ empty?: ReactNode
+ /** Decides emptiness; defaults to empty arrays. */
+ isEmpty?: (data: T) => boolean
+}
+
+export function QueryBoundary({
+ query,
+ children,
+ pending,
+ empty,
+ isEmpty = defaultIsEmpty,
+}: QueryBoundaryProps) {
+ if (query.isPending) {
+ return pending ??
+ }
+
+ if (query.isError) {
+ return (
+ {
+ void query.refetch()
+ }}
+ />
+ )
+ }
+
+ if (empty && isEmpty(query.data)) {
+ return empty
+ }
+
+ return children(query.data)
+}
+
+function defaultIsEmpty(data: unknown): boolean {
+ return Array.isArray(data) && data.length === 0
+}
+
+export function SkeletonLines({ count = 3 }: { count?: number }) {
+ return (
+
+ {Array.from({ length: count }, (_, i) => (
+
+ ))}
+
+ )
+}
+
+export function QueryError({
+ error,
+ onRetry,
+}: {
+ error: unknown
+ onRetry?: () => void
+}) {
+ return (
+
+
+
+
Something went wrong
+
{describeError(error)}
+
+ {onRetry && (
+
+ )}
+
+
+
{title}
+ {description && (
+
{description}
+ )}
+
+ {action}
+
+
+
+
+
+ )
+}
diff --git a/web/src/routes/_app/announcements.tsx b/web/src/routes/_app/announcements.tsx
new file mode 100644
index 00000000..8c10c4f4
--- /dev/null
+++ b/web/src/routes/_app/announcements.tsx
@@ -0,0 +1,29 @@
+import { createFileRoute } from "@tanstack/react-router"
+
+import { useCurrentUser } from "@/features/auth/use-session"
+import { beginLogout } from "@/features/auth/api"
+import { Button } from "@/components/ui/button"
+
+export const Route = createFileRoute("/_app/announcements")({
+ component: Announcements,
+})
+
+function Announcements() {
+ const user = useCurrentUser()
+
+ return (
+
+
+
+ Hi, {user.given_name}
+
+
+
+
+ Signed in as {user.email} ({user.role}).
+
+
-
Nuspace
-
- New frontend — scaffold running.
-
+
+
+
+
Nuspace
+
+ Campus services, announcements, and student essentials for NU, in
+ one place.
+
+
+
)
From 1992a3513c918203aa816e50cdb6db3ebd031d7a Mon Sep 17 00:00:00 2001
From: Yerassyl Auyeskhan <95128018+ieraasyl@users.noreply.github.com>
Date: Sun, 26 Jul 2026 02:28:52 +0500
Subject: [PATCH 06/56] chore(infra): serve the new frontend on 6767
---
infra/docker-compose.yml | 4 ++--
infra/nginx/nginx.dev.conf | 7 +++----
2 files changed, 5 insertions(+), 6 deletions(-)
diff --git a/infra/docker-compose.yml b/infra/docker-compose.yml
index 4c4fdcc2..3e308484 100644
--- a/infra/docker-compose.yml
+++ b/infra/docker-compose.yml
@@ -42,7 +42,7 @@ services:
restart: always
ports:
- "80:80" # Existing frontend/
- - "8081:8081" # New web/ — remove once the cutover lands
+ - "6767:6767" # New web/ — remove once the cutover lands
volumes:
- ./nginx/nginx.dev.conf:/etc/nginx/nginx.conf
- ../frontend/dist:/var/www/my-app/dist # Make sure this folder exists in production builds
@@ -159,7 +159,7 @@ services:
- cloudflared
# New frontend, served side by side with `frontend` so the two can be compared
- # against one backend during the rewrite. Reachable at http://localhost:8080.
+ # against one backend during the rewrite. Reachable at http://localhost:6767.
web:
build:
context: ..
diff --git a/infra/nginx/nginx.dev.conf b/infra/nginx/nginx.dev.conf
index 3dea1543..d06e7063 100644
--- a/infra/nginx/nginx.dev.conf
+++ b/infra/nginx/nginx.dev.conf
@@ -38,7 +38,7 @@ http {
1 /api/og$request_uri;
}
- # Same routing, but pointed at the new frontend (see the :8080 server below).
+ # Same routing, but pointed at the new frontend (see the :6767 server below).
map $is_bot $web_upstream {
0 http://web:5173;
1 http://fastapi:8000;
@@ -115,11 +115,10 @@ http {
# document root differs. Remove this block at cutover, when :80 starts
# serving web/ directly.
#
- # 8081 rather than 8080: the latter is a common default and was already
- # taken on the dev machine this was first brought up on.
+ # Not 8080: pgadmin already publishes that port in this compose file.
# ------------------------------------------------------------------------
server {
- listen 8081;
+ listen 6767;
server_name localhost;
client_max_body_size 100m;
From ce0b33e537c40c3b25037544991bfea426ab1d03 Mon Sep 17 00:00:00 2001
From: Yerassyl Auyeskhan <95128018+ieraasyl@users.noreply.github.com>
Date: Sun, 26 Jul 2026 02:34:57 +0500
Subject: [PATCH 07/56] feat(web): add app shell, infinite-list primitives, and
route skeleton
---
web/src/components/app-sidebar.tsx | 133 +++++++++++++++++++++
web/src/components/infinite-list.tsx | 70 +++++++++++
web/src/components/ui/sheet.tsx | 135 +++++++++++++++++++++
web/src/hooks/use-infinite-list.ts | 82 +++++++++++++
web/src/hooks/use-intersection.ts | 37 ++++++
web/src/main.tsx | 2 +
web/src/routeTree.gen.ts | 161 +++++++++++++++++++++++++-
web/src/routes/_app.tsx | 8 +-
web/src/routes/_app/communities.tsx | 16 +++
web/src/routes/_app/contacts.tsx | 16 +++
web/src/routes/_app/courses.tsx | 16 +++
web/src/routes/_app/events.tsx | 16 +++
web/src/routes/_app/opportunities.tsx | 16 +++
web/src/routes/_app/profile.tsx | 16 +++
web/src/routes/_app/sgotinish.tsx | 16 +++
15 files changed, 735 insertions(+), 5 deletions(-)
create mode 100644 web/src/components/app-sidebar.tsx
create mode 100644 web/src/components/infinite-list.tsx
create mode 100644 web/src/components/ui/sheet.tsx
create mode 100644 web/src/hooks/use-infinite-list.ts
create mode 100644 web/src/hooks/use-intersection.ts
create mode 100644 web/src/routes/_app/communities.tsx
create mode 100644 web/src/routes/_app/contacts.tsx
create mode 100644 web/src/routes/_app/courses.tsx
create mode 100644 web/src/routes/_app/events.tsx
create mode 100644 web/src/routes/_app/opportunities.tsx
create mode 100644 web/src/routes/_app/profile.tsx
create mode 100644 web/src/routes/_app/sgotinish.tsx
diff --git a/web/src/components/app-sidebar.tsx b/web/src/components/app-sidebar.tsx
new file mode 100644
index 00000000..b8fb521b
--- /dev/null
+++ b/web/src/components/app-sidebar.tsx
@@ -0,0 +1,133 @@
+import { useState } from "react"
+import { Link, useRouterState } from "@tanstack/react-router"
+import {
+ BookOpenIcon,
+ BriefcaseIcon,
+ CalendarIcon,
+ InfoIcon,
+ MenuIcon,
+ MegaphoneIcon,
+ ShieldIcon,
+ UserIcon,
+ UsersIcon,
+} from "lucide-react"
+import type { LinkProps } from "@tanstack/react-router"
+import type { LucideIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+ Sheet,
+ SheetContent,
+ SheetTitle,
+ SheetTrigger,
+} from "@/components/ui/sheet"
+
+interface NavItem {
+ /**
+ * Typed against the generated route tree, so a link to a route that does not
+ * exist fails the build. The old app's Link wrapper took a plain string and
+ * threw this away.
+ */
+ to: LinkProps["to"]
+ label: string
+ icon: LucideIcon
+}
+
+const NAV_ITEMS: NavItem[] = [
+ { to: "/announcements", label: "Home", icon: MegaphoneIcon },
+ { to: "/events", label: "Events", icon: CalendarIcon },
+ { to: "/communities", label: "Communities", icon: UsersIcon },
+ { to: "/courses", label: "Courses", icon: BookOpenIcon },
+ { to: "/opportunities", label: "Opportunities", icon: BriefcaseIcon },
+ { to: "/contacts", label: "Contacts", icon: InfoIcon },
+ { to: "/sgotinish", label: "SG otinish", icon: ShieldIcon },
+ { to: "/profile", label: "Profile", icon: UserIcon },
+]
+
+function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
+ const pathname = useRouterState({ select: (s) => s.location.pathname })
+
+ return (
+
+ )
+}
+
+function SidebarBrand() {
+ return (
+
+ Nuspace
+
+ )
+}
+
+/**
+ * App navigation: a fixed rail on desktop, a sheet on mobile.
+ *
+ * The old sidebar injected a raw