feat: Use dynamic page titles (#43)

Updates the incident details page to set the page title to INC-2001 •
Firetower, for easier tab identification. Also removes the use of
forwardRef in favor of the new React 19 ref prop.

Author: spalmurray

frontend/src/components/Card.tsx

@@ -11,14 +11,13 @@ const card = cva([
 
 interface CardProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof card> {}
+    VariantProps<typeof card> {
+  ref?: React.Ref<HTMLDivElement>;
+}
 
-const CardRoot = React.forwardRef<HTMLDivElement, CardProps>(
-  ({className, ...props}, ref) => (
-    <div ref={ref} className={cn(card({className}))} {...props} />
-  )
+const CardRoot = ({className, ref, ...props}: CardProps) => (
+  <div ref={ref} className={cn(card({className}))} {...props} />
 );
-CardRoot.displayName = 'Card';
 
 const title = cva(['text-lg', 'font-semibold', 'mb-space-xl', 'text-content-headings'], {
   variants: {
@@ -37,16 +36,15 @@ const title = cva(['text-lg', 'font-semibold', 'mb-space-xl', 'text-content-head
 
 interface TitleProps
   extends React.HTMLAttributes<HTMLHeadingElement>,
-    VariantProps<typeof title> {}
+    VariantProps<typeof title> {
+  ref?: React.Ref<HTMLHeadingElement>;
+}
 
-const Title = React.forwardRef<HTMLHeadingElement, TitleProps>(
-  ({className, size, children, ...props}, ref) => (
-    <h3 ref={ref} className={cn(title({className, size}))} {...props}>
-      {children}
-    </h3>
-  )
+const Title = ({className, size, children, ref, ...props}: TitleProps) => (
+  <h3 ref={ref} className={cn(title({className, size}))} {...props}>
+    {children}
+  </h3>
 );
-Title.displayName = 'Card.Title';
 
 export const Card = Object.assign(CardRoot, {
   Title,

frontend/src/components/Pill.tsx

@@ -50,13 +50,12 @@ const pill = cva(
 
 interface PillProps
   extends React.HTMLAttributes<HTMLSpanElement>,
-    VariantProps<typeof pill> {}
+    VariantProps<typeof pill> {
+  ref?: React.Ref<HTMLSpanElement>;
+}
 
-const Pill = React.forwardRef<HTMLSpanElement, PillProps>(
-  ({className, variant, ...props}, ref) => (
-    <span ref={ref} className={cn(pill({variant, className}))} {...props} />
-  )
+const Pill = ({className, variant, ref, ...props}: PillProps) => (
+  <span ref={ref} className={cn(pill({variant, className}))} {...props} />
 );
-Pill.displayName = 'Pill';
 
 export {Pill, type PillProps};

frontend/src/components/Spinner.tsx

@@ -3,6 +3,7 @@ import {cn} from 'utils/cn';
 
 interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
   size?: 'sm' | 'md' | 'lg';
+  ref?: React.Ref<HTMLDivElement>;
 }
 
 const sizeClasses = {
@@ -11,24 +12,21 @@ const sizeClasses = {
   lg: 'h-12 w-12 border-4',
 };
 
-export const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(
-  ({size = 'md', className, ...props}, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          'animate-spin rounded-full border-border-secondary border-t-transparent',
-          sizeClasses[size],
-          className
-        )}
-        role="status"
-        aria-label="Loading"
-        data-testid="spinner"
-        {...props}
-      >
-        <span className="sr-only">Loading...</span>
-      </div>
-    );
-  }
-);
-Spinner.displayName = 'Spinner';
+export const Spinner = ({size = 'md', className, ref, ...props}: SpinnerProps) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'animate-spin rounded-full border-border-secondary border-t-transparent',
+        sizeClasses[size],
+        className
+      )}
+      role="status"
+      aria-label="Loading"
+      data-testid="spinner"
+      {...props}
+    >
+      <span className="sr-only">Loading...</span>
+    </div>
+  );
+};

frontend/src/routes/$incidentId/index.tsx

@@ -1,3 +1,4 @@
+import {useEffect} from 'react';
 import {useSuspenseQuery} from '@tanstack/react-query';
 import {createFileRoute} from '@tanstack/react-router';
 import {Card} from 'components/Card';
@@ -20,6 +21,13 @@ function Incident() {
   const params = Route.useParams();
   const {data: incident} = useSuspenseQuery(incidentDetailQueryOptions(params));
 
+  useEffect(() => {
+    document.title = `${params.incidentId} • Firetower`;
+    return () => {
+      document.title = 'Firetower';
+    };
+  }, [params.incidentId]);
+
   return (
     <div className="space-y-4 p-2">
       <IncidentSummary incident={incident} />