fix(ui): restore a green Frontend Quality job (#98)

* fix(ui): satisfy the react-hooks lint rules that break CI

The `Frontend Quality` job fails on main because `npm run lint` reports two
errors from the react-hooks rules that ship with eslint-config-next 16.3.x:

* `react-hooks/immutability` in `file-upload.tsx` - `formatSize` was declared
  after the `handleFileSelect` callback that reads it.
* `react-hooks/set-state-in-effect` in the errors page - the effect called a
  fetch helper that synchronously flipped the loading state.

`formatSize` was duplicated in `file-upload.tsx` and `file-browser.tsx`, so it
moves to `lib/utils.ts` as `formatBytes` (module scope, covered by tests) and
both components use it. The errors page moves to React Query, matching every
other data-loading page in the app, which removes the effect entirely.

* fix(ui): set explicit display names on the primitive wrappers

Recent Radix UI releases no longer assign `displayName` to their primitives, so
every wrapper that copied it (`Label.displayName = LabelPrimitive.Root.displayName`
and friends) ended up with `undefined`. That is invisible in the browser but
breaks eight assertions in the component suites and leaves React DevTools
showing anonymous `ForwardRef` nodes.

Each wrapper now declares its own name, which is what the rest of the ui
components already did. The scroll bar keeps the name of the exported
component, `ScrollBar`, instead of the Radix-internal `ScrollAreaScrollbar`.

* test(ui): simulate a full click when dismissing the popover

Radix now passes `deferPointerDownOutside: true` for popovers, so an outside
pointerdown no longer dismisses on its own - the layer waits for the click that
follows, which stops a drag that ends outside the popover from closing it. The
test fired only `pointerDown` and therefore never saw `onOpenChange`.

Author: rennerdo30

ui/src/app/[locale]/errors/page.tsx

@@ -1,9 +1,17 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { CheckCircle, RefreshCw, Copy } from "lucide-react";
 import { format } from "date-fns";
 
+/** Base path of the error-tracking endpoints. */
+const ERRORS_ENDPOINT = "/api/v1/errors";
+/** React Query cache key for the error list. */
+const ERRORS_QUERY_KEY = "errors";
+/** Filter value that disables source filtering. */
+const ALL_SOURCES = "all";
+
 type ErrorEvent = {
     id: string;
     source_component: string;
@@ -15,43 +23,53 @@ type ErrorEvent = {
     created_at: string;
 };
 
+async function fetchErrorEvents(source: string): Promise<ErrorEvent[]> {
+    const url = source !== ALL_SOURCES
+        ? `${ERRORS_ENDPOINT}?source=${encodeURIComponent(source)}`
+        : ERRORS_ENDPOINT;
+
+    const res = await fetch(url);
+    if (!res.ok) {
+        throw new Error(`Failed to fetch errors: ${res.status}`);
+    }
+    const data = await res.json();
+    return data ?? [];
+}
+
+async function resolveErrorEvent(id: string): Promise<void> {
+    const res = await fetch(`${ERRORS_ENDPOINT}/${encodeURIComponent(id)}/resolve`, {
+        method: "PATCH",
+    });
+    if (!res.ok) {
+        throw new Error(`Failed to resolve error: ${res.status}`);
+    }
+}
+
 export default function ErrorsPage() {
-    const [errors, setErrors] = useState<ErrorEvent[]>([]);
-    const [loading, setLoading] = useState(true);
-    const [filterSource, setFilterSource] = useState("all");
-
-    const fetchErrors = useCallback(async () => {
-        setLoading(true);
-        try {
-            const url = filterSource !== "all"
-                ? `/api/v1/errors?source=${filterSource}`
-                : `/api/v1/errors`;
-
-            const res = await fetch(url);
-            if (res.ok) {
-                const data = await res.json();
-                setErrors(data || []);
-            }
-        } catch (e) {
-            console.error("Failed to fetch errors", e);
-        } finally {
-            setLoading(false);
-        }
-    }, [filterSource]);
-
-    useEffect(() => {
-        void fetchErrors();
-    }, [fetchErrors]);
-
-    const handleResolve = async (id: string) => {
-        try {
-            const res = await fetch(`/api/v1/errors/${id}/resolve`, { method: "PATCH" });
-            if (res.ok) {
-                await fetchErrors();
-            }
-        } catch (e) {
+    const [filterSource, setFilterSource] = useState(ALL_SOURCES);
+    const queryClient = useQueryClient();
+
+    const {
+        data: errors = [],
+        isFetching: loading,
+        refetch,
+    } = useQuery({
+        queryKey: [ERRORS_QUERY_KEY, filterSource],
+        queryFn: () => fetchErrorEvents(filterSource),
+    });
+
+    const resolveMutation = useMutation({
+        mutationFn: resolveErrorEvent,
+        onSuccess: () => {
+            void queryClient.invalidateQueries({ queryKey: [ERRORS_QUERY_KEY] });
+        },
+        onError: (e) => {
             console.error("Failed to resolve error", e);
-        }
+        },
+    });
+
+    const handleResolve = (id: string) => {
+        resolveMutation.mutate(id);
     };
 
     const getSeverityColor = (severity: string) => {
@@ -89,7 +107,7 @@ export default function ErrorsPage() {
                         <option value="worker">Worker</option>
                     </select>
                     <button
-                        onClick={() => void fetchErrors()}
+                        onClick={() => void refetch()}
                         className="p-2 hover:bg-white/10 rounded-md transition-colors"
                     >
                         <RefreshCw className={`w-5 h-5 ${loading ? "animate-spin" : ""}`} />

ui/src/components/file-browser.tsx

@@ -25,6 +25,10 @@ import {
     HardDrive,
     Check,
 } from "lucide-react";
+import { formatBytes } from "@/lib/utils";
+
+/** Placeholder rendered where a size or date is unknown. */
+const EMPTY_VALUE_LABEL = "—";
 
 interface FileBrowserProps {
     onSelect: (path: string) => void;
@@ -82,15 +86,8 @@ export function FileBrowser({ onSelect, selectedPath, mediaOnly = true }: FileBr
         setSearchQuery("");
     };
 
-    const formatSize = (bytes: number): string => {
-        if (bytes === 0) return "—";
-        const units = ["B", "KB", "MB", "GB", "TB"];
-        const i = Math.floor(Math.log(bytes) / Math.log(1024));
-        return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${units[i]}`;
-    };
-
     const formatDate = (timestamp: number): string => {
-        if (!timestamp) return "—";
+        if (!timestamp) return EMPTY_VALUE_LABEL;
         return new Date(timestamp * 1000).toLocaleDateString();
     };
 
@@ -250,7 +247,7 @@ export function FileBrowser({ onSelect, selectedPath, mediaOnly = true }: FileBr
                                         </div>
                                         {!entry.is_directory && (
                                             <div className="text-xs text-muted-foreground flex items-center gap-2">
-                                                <span>{formatSize(entry.size)}</span>
+                                                <span>{formatBytes(entry.size, EMPTY_VALUE_LABEL)}</span>
                                                 <span>•</span>
                                                 <span>{formatDate(entry.mod_time)}</span>
                                                 {entry.extension && (

ui/src/components/file-upload.tsx

@@ -3,6 +3,7 @@
 import { useState, useCallback, useRef } from "react";
 import { useMutation } from "@tanstack/react-query";
 import { uploadFile, reportError, UploadProgress, UploadResponse } from "@/lib/api";
+import { formatBytes } from "@/lib/utils";
 import { Progress } from "@/components/ui/progress";
 import { Button } from "@/components/ui/button";
 import {
@@ -68,7 +69,7 @@ export function FileUpload({
         (file: File) => {
             // Validate file size
             if (file.size > maxSize) {
-                setError(`File size exceeds maximum of ${formatSize(maxSize)}`);
+                setError(`File size exceeds maximum of ${formatBytes(maxSize)}`);
                 setState("error");
                 return;
             }
@@ -162,13 +163,6 @@ export function FileUpload({
         return <File className="h-8 w-8 text-muted-foreground" />;
     };
 
-    const formatSize = (bytes: number): string => {
-        if (bytes === 0) return "0 B";
-        const units = ["B", "KB", "MB", "GB", "TB"];
-        const i = Math.floor(Math.log(bytes) / Math.log(1024));
-        return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${units[i]}`;
-    };
-
     return (
         <div className="space-y-4">
             <input
@@ -212,7 +206,7 @@ export function FileUpload({
                                 {isDragging ? "Drop your file here" : "Drag and drop your video file"}
                             </p>
                             <p className="text-sm text-muted-foreground mt-1">
-                                or click to browse • Max {formatSize(maxSize)}
+                                or click to browse • Max {formatBytes(maxSize)}
                             </p>
                         </div>
                         <div className="flex gap-2 flex-wrap justify-center text-xs text-muted-foreground">
@@ -238,7 +232,7 @@ export function FileUpload({
                         <div className="flex-1 min-w-0">
                             <p className="font-medium truncate">{selectedFile.name}</p>
                             <div className="flex items-center gap-3 text-sm text-muted-foreground mt-1">
-                                <span>{formatSize(selectedFile.size)}</span>
+                                <span>{formatBytes(selectedFile.size)}</span>
                                 <span>•</span>
                                 <span>{selectedFile.type || "Unknown type"}</span>
                             </div>
@@ -275,7 +269,7 @@ export function FileUpload({
                             <p className="font-medium truncate">{selectedFile.name}</p>
                             <div className="flex items-center gap-3 text-sm text-muted-foreground mt-1">
                                 <span>
-                                    {formatSize(progress.loaded)} / {formatSize(progress.total)}
+                                    {formatBytes(progress.loaded)} / {formatBytes(progress.total)}
                                 </span>
                                 <span>•</span>
                                 <span className="text-violet-400 font-medium">{progress.percentage}%</span>

ui/src/components/ui/checkbox.tsx

@@ -25,6 +25,6 @@ const Checkbox = React.forwardRef<
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+Checkbox.displayName = "Checkbox"
 
 export { Checkbox }

ui/src/components/ui/dialog.tsx

@@ -27,7 +27,7 @@ const DialogOverlay = React.forwardRef<
     {...props}
   />
 ))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+DialogOverlay.displayName = "DialogOverlay"
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -51,7 +51,7 @@ const DialogContent = React.forwardRef<
     </DialogPrimitive.Content>
   </DialogPortal>
 ))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+DialogContent.displayName = "DialogContent"
 
 const DialogHeader = ({
   className,
@@ -94,7 +94,7 @@ const DialogTitle = React.forwardRef<
     {...props}
   />
 ))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+DialogTitle.displayName = "DialogTitle"
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -106,7 +106,7 @@ const DialogDescription = React.forwardRef<
     {...props}
   />
 ))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+DialogDescription.displayName = "DialogDescription"
 
 export {
   Dialog,

ui/src/components/ui/label.tsx

@@ -21,6 +21,6 @@ const Label = React.forwardRef<
     {...props}
   />
 ))
-Label.displayName = LabelPrimitive.Root.displayName
+Label.displayName = "Label"
 
 export { Label }

ui/src/components/ui/popover.test.tsx

@@ -222,8 +222,15 @@ describe('Popover', () => {
         expect(screen.getByText('Content')).toBeInTheDocument()
       })
 
-      fireEvent.pointerDown(screen.getByTestId('outside'))
-      expect(handleOpenChange).toHaveBeenCalledWith(false)
+      // Radix defers the popover's dismissal to the click that follows the
+      // outside pointerdown, so the full interaction has to be simulated.
+      const outside = screen.getByTestId('outside')
+      fireEvent.pointerDown(outside)
+      fireEvent.click(outside)
+
+      await waitFor(() => {
+        expect(handleOpenChange).toHaveBeenCalledWith(false)
+      })
     })
   })
 

ui/src/components/ui/popover.tsx

@@ -28,6 +28,6 @@ const PopoverContent = React.forwardRef<
     />
   </PopoverPrimitive.Portal>
 ))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+PopoverContent.displayName = "PopoverContent"
 
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

ui/src/components/ui/progress.tsx

@@ -23,6 +23,6 @@ const Progress = React.forwardRef<
     />
   </ProgressPrimitive.Root>
 ))
-Progress.displayName = ProgressPrimitive.Root.displayName
+Progress.displayName = "Progress"
 
 export { Progress }

ui/src/components/ui/scroll-area.test.tsx

@@ -179,7 +179,7 @@ describe('ScrollArea', () => {
 describe('ScrollBar', () => {
   describe('rendering', () => {
     it('should have correct displayName', () => {
-      expect(ScrollBar.displayName).toBe('ScrollAreaScrollbar')
+      expect(ScrollBar.displayName).toBe('ScrollBar')
     })
   })