Format & lint React code

webui/README.md

@@ -82,5 +82,12 @@ The recommended dev flow keeps the backend and frontend separate:
    ```
    Vite hot reloads the React side when you change webui files.
 
+For linting and formatting, use:
+
+```bash
+npm run check
+npm run fix
+```
+
 If you want a convenience wrapper, the repo root also includes `./dev.sh`.
 It starts both halves together and is most useful on Linux, macOS, and WSL.

webui/package.json

@@ -3,7 +3,9 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "check": "vp check src",
     "dev": "vp dev",
+    "fix": "vp check --fix src",
     "build": "vp build",
     "test": "vp test run",
     "test:watch": "vp test",

webui/src/components/form/form.test.tsx

@@ -66,7 +66,11 @@ function FormDemo() {
       <FormField label="Priority" helperText="Set urgency">
         <OptionButtonGroup>
           {(['low', 'normal', 'high'] as const).map((value) => (
-            <OptionButton key={value} onClick={() => setPriority(value)} selected={priority === value}>
+            <OptionButton
+              key={value}
+              onClick={() => setPriority(value)}
+              selected={priority === value}
+            >
               {value[0].toUpperCase()}
               {value.slice(1)}
             </OptionButton>

webui/src/components/form/form.tsx

@@ -85,8 +85,7 @@ export function OptionCardGroup({
   return <div className={mergeClassNames(styles.optionCardGroup, className)}>{children}</div>;
 }
 
-export interface OptionCardProps
-  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
+export interface OptionCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
   description?: ReactNode;
   icon?: ReactNode;
   selected?: boolean;
@@ -163,7 +162,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
   { className, type = 'button', ...props },
   ref,
 ) {
-  return <button ref={ref} className={mergeClassNames(styles.button, className)} type={type} {...props} />;
+  return (
+    <button
+      ref={ref}
+      className={mergeClassNames(styles.button, className)}
+      type={type}
+      {...props}
+    />
+  );
 });
 
 export function FormError({ className, message }: { className?: string; message?: ReactNode }) {
@@ -176,12 +182,6 @@ export function FormError({ className, message }: { className?: string; message?
   );
 }
 
-export function FormActions({
-  className,
-  children,
-}: {
-  children: ReactNode;
-  className?: string;
-}) {
+export function FormActions({ className, children }: { children: ReactNode; className?: string }) {
   return <div className={mergeClassNames(styles.formActions, className)}>{children}</div>;
 }

webui/src/platform/shell/globals.d.ts

@@ -1,18 +1,17 @@
-import type { ShellProfileContext, ShellRouteDefinition, ShellPageId } from './bridge';
 import type {
   DownloadMissingAlbumWorkflowInput,
   WishlistAlbumWorkflowInput,
 } from '@/platform/workflows/album-workflows';
 import type { IssueDomainBridge } from '@/routes/issues/-issues.types';
 
+import type { ShellProfileContext, ShellRouteDefinition, ShellPageId } from './bridge';
+
 declare global {
   interface Window {
     showToast?: (message: string, type?: string, durationOrContext?: number | string) => void;
     SoulSyncIssueDomain?: IssueDomainBridge;
     SoulSyncWorkflowActions?: {
-      openDownloadMissingAlbum: (
-        input: DownloadMissingAlbumWorkflowInput,
-      ) => void | Promise<void>;
+      openDownloadMissingAlbum: (input: DownloadMissingAlbumWorkflowInput) => void | Promise<void>;
       openAddToWishlistAlbum: (input: WishlistAlbumWorkflowInput) => void | Promise<void>;
       notify?: (message: string, type?: string) => void;
     };

webui/src/routes/issues/-route.test.tsx

@@ -204,7 +204,9 @@ describe('issues route', () => {
 
     await waitFor(() => {
       expect(
-        fetchMock.mock.calls.some(([request]) => request instanceof Request && request.method === 'POST'),
+        fetchMock.mock.calls.some(
+          ([request]) => request instanceof Request && request.method === 'POST',
+        ),
       ).toBe(true);
     });
   });

webui/src/routes/issues/-ui/issue-detail-modal.tsx

@@ -1,11 +1,11 @@
 import { useMutation } from '@tanstack/react-query';
 import { useEffect, useMemo, useState } from 'react';
 
+import { Button, FormField, TextArea } from '@/components/form';
 import {
   launchAlbumDownloadWorkflow,
   launchAlbumWishlistWorkflow,
 } from '@/platform/workflows/album-workflows';
-import { Button, FormField, TextArea } from '@/components/form';
 
 import type { IssueRecord } from '../-issues.types';
 
@@ -429,7 +429,9 @@ export function IssueDetailModal({
                           </span>
                           <span className={styles.issueDetailTracklistDur}>{duration}</span>
                           <span className={styles.issueDetailTracklistMeta}>
-                            {format ? <span className={styles.issueTrackBadge}>{format}</span> : null}
+                            {format ? (
+                              <span className={styles.issueTrackBadge}>{format}</span>
+                            ) : null}
                             {bitrate ? (
                               <span className={styles.issueTrackBadge}>{bitrate}</span>
                             ) : null}
@@ -442,27 +444,27 @@ export function IssueDetailModal({
               ) : null}
 
               {issue.entity_type !== 'artist' && isAdmin && (
-              <div className={styles.issueDetailSection}>
-                <div className={styles.issueDetailSectionTitle}>Admin Actions</div>
-                <div className={styles.issueActionButtons}>
-                  <Button
-                    className={styles.issueActionDownload}
-                    type="button"
-                    disabled={downloadWorkflowMutation.isPending}
-                    onClick={() => downloadWorkflowMutation.mutate(albumWorkflowInput)}
-                  >
-                    {downloadWorkflowMutation.isPending ? 'Loading...' : 'Download Album'}
-                  </Button>
-                  <Button
-                    className={styles.issueActionWishlist}
-                    type="button"
-                    disabled={wishlistWorkflowMutation.isPending}
-                    onClick={() => wishlistWorkflowMutation.mutate(albumWorkflowInput)}
-                  >
-                    {wishlistWorkflowMutation.isPending ? 'Loading...' : 'Add to Wishlist'}
-                  </Button>
+                <div className={styles.issueDetailSection}>
+                  <div className={styles.issueDetailSectionTitle}>Admin Actions</div>
+                  <div className={styles.issueActionButtons}>
+                    <Button
+                      className={styles.issueActionDownload}
+                      type="button"
+                      disabled={downloadWorkflowMutation.isPending}
+                      onClick={() => downloadWorkflowMutation.mutate(albumWorkflowInput)}
+                    >
+                      {downloadWorkflowMutation.isPending ? 'Loading...' : 'Download Album'}
+                    </Button>
+                    <Button
+                      className={styles.issueActionWishlist}
+                      type="button"
+                      disabled={wishlistWorkflowMutation.isPending}
+                      onClick={() => wishlistWorkflowMutation.mutate(albumWorkflowInput)}
+                    >
+                      {wishlistWorkflowMutation.isPending ? 'Loading...' : 'Add to Wishlist'}
+                    </Button>
+                  </div>
                 </div>
-              </div>
               )}
 
               {isAdmin && (
@@ -494,11 +496,7 @@ export function IssueDetailModal({
         </div>
 
         <div className={styles.modalFooter}>
-          <Button
-            className={styles.modalButtonSecondary}
-            type="button"
-            onClick={onClose}
-          >
+          <Button className={styles.modalButtonSecondary} type="button" onClick={onClose}>
             Close
           </Button>
           {!isLoading && !error && issue && (
@@ -626,8 +624,10 @@ function getTrackMetaItems(snapshot: ReturnType<typeof parseSnapshot>) {
   const duration = formatDuration(snapshot.duration);
   if (duration) items.push({ icon: 'T', label: 'Duration', value: duration });
   if (snapshot.format) items.push({ icon: 'F', label: 'Format', value: String(snapshot.format) });
-  if (snapshot.bitrate) items.push({ icon: 'B', label: 'Bitrate', value: `${snapshot.bitrate} kbps` });
+  if (snapshot.bitrate)
+    items.push({ icon: 'B', label: 'Bitrate', value: `${snapshot.bitrate} kbps` });
   if (snapshot.bpm) items.push({ icon: 'M', label: 'BPM', value: String(snapshot.bpm) });
-  if (snapshot.quality) items.push({ icon: 'Q', label: 'Quality', value: String(snapshot.quality) });
+  if (snapshot.quality)
+    items.push({ icon: 'Q', label: 'Quality', value: String(snapshot.quality) });
   return items;
 }

webui/src/routes/issues/-ui/issue-domain-host.tsx

@@ -1,9 +1,8 @@
-import { useForm } from "@tanstack/react-form";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useEffect, useMemo, useState } from "react";
-import { createPortal } from "react-dom";
+import { useForm } from '@tanstack/react-form';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
 
-import { getShellProfileContext } from "@/platform/shell/bridge";
 import {
   Button,
   FormActions,
@@ -15,10 +14,11 @@ import {
   OptionCardGroup,
   TextArea,
   TextInput,
-} from "@/components/form";
-import { useShellBridge } from "@/platform/shell/route-controllers";
+} from '@/components/form';
+import { getShellProfileContext } from '@/platform/shell/bridge';
+import { useShellBridge } from '@/platform/shell/route-controllers';
 
-import type { IssuePriority, IssueReportPayload } from "../-issues.types";
+import type { IssuePriority, IssueReportPayload } from '../-issues.types';
 
 import {
   REFRESH_EVENT,
@@ -26,10 +26,10 @@ import {
   createIssue,
   getIssueCategoriesForEntity,
   issueCountsQueryOptions,
-} from "../-issues.helpers";
-import styles from "./issue-detail-modal.module.css";
+} from '../-issues.helpers';
+import styles from './issue-detail-modal.module.css';
 
-const ISSUE_DOMAIN_QUERY_KEY = ["issues"] as const;
+const ISSUE_DOMAIN_QUERY_KEY = ['issues'] as const;
 
 interface ReportIssueFormValues {
   category: string;
@@ -39,10 +39,10 @@ interface ReportIssueFormValues {
 }
 
 const DEFAULT_REPORT_ISSUE_VALUES: ReportIssueFormValues = {
-  category: "",
-  description: "",
-  priority: "normal",
-  title: "",
+  category: '',
+  description: '',
+  priority: 'normal',
+  title: '',
 };
 
 export function IssueDomainHost() {
@@ -127,7 +127,7 @@ function ReportIssueModal({
     [payload.entityType],
   );
   const entityLabel =
-    payload.entityType === "track" ? "Track" : payload.entityType === "album" ? "Album" : "Artist";
+    payload.entityType === 'track' ? 'Track' : payload.entityType === 'album' ? 'Album' : 'Artist';
 
   const createMutation = useMutation({
     mutationFn: async (values: ReportIssueFormValues) => {
@@ -141,7 +141,7 @@ function ReportIssueModal({
       });
     },
     onSuccess: () => {
-      notify("Issue reported successfully", "success");
+      notify('Issue reported successfully', 'success');
       onSubmitted();
     },
   });
@@ -161,9 +161,9 @@ function ReportIssueModal({
         await createMutation.mutateAsync(normalizedValues);
       } catch (mutationError) {
         const message =
-          mutationError instanceof Error ? mutationError.message : "Failed to submit issue";
+          mutationError instanceof Error ? mutationError.message : 'Failed to submit issue';
         formApi.setErrorMap({ onSubmit: message });
-        notify(message, "error");
+        notify(message, 'error');
         throw mutationError;
       }
     },
@@ -206,7 +206,7 @@ function ReportIssueModal({
             {payload.artistName ? (
               <div className={styles.reportIssueEntityArtist}>
                 {payload.artistName}
-                {payload.albumTitle ? ` - ${payload.albumTitle}` : ""}
+                {payload.albumTitle ? ` - ${payload.albumTitle}` : ''}
               </div>
             ) : null}
           </div>
@@ -227,9 +227,9 @@ function ReportIssueModal({
                         field.handleChange(category);
                         createMutation.reset();
                         form.setErrorMap({ onSubmit: undefined });
-                        if (!form.getFieldMeta("title")?.isTouched) {
+                        if (!form.getFieldMeta('title')?.isTouched) {
                           form.setFieldValue(
-                            "title",
+                            'title',
                             createDefaultIssueTitle(category, payload.entityName),
                             { dontUpdateMeta: true },
                           );
@@ -298,7 +298,7 @@ function ReportIssueModal({
                         label="Priority"
                       >
                         <OptionButtonGroup>
-                          {(["low", "normal", "high"] as const).map((priority) => (
+                          {(['low', 'normal', 'high'] as const).map((priority) => (
                             <OptionButton
                               key={priority}
                               onClick={() => field.handleChange(priority)}
@@ -326,11 +326,7 @@ function ReportIssueModal({
         </div>
 
         <FormActions className={styles.modalFooter}>
-          <Button
-            className={styles.modalButtonSecondary}
-            type="button"
-            onClick={onClose}
-          >
+          <Button className={styles.modalButtonSecondary} type="button" onClick={onClose}>
             Cancel
           </Button>
           <form.Subscribe
@@ -348,7 +344,7 @@ function ReportIssueModal({
                   type="submit"
                   disabled={!state.category || !state.title.trim() || isSubmitting}
                 >
-                  {isSubmitting ? "Submitting..." : "Submit Issue"}
+                  {isSubmitting ? 'Submitting...' : 'Submit Issue'}
                 </Button>
               );
             }}
@@ -373,27 +369,27 @@ function validateReportIssueForm(
   values: ReportIssueFormValues,
 ): string | undefined {
   const normalizedValues = normalizeReportIssueFormValues(values);
-  if (!profileId) return "Profile is still loading";
-  if (!normalizedValues.category) return "Please select an issue category";
-  if (!normalizedValues.title) return "Please provide a title for the issue";
+  if (!profileId) return 'Profile is still loading';
+  if (!normalizedValues.category) return 'Please select an issue category';
+  if (!normalizedValues.title) return 'Please provide a title for the issue';
   return undefined;
 }
 
 function getReportIssueFormError(errors: Array<unknown>): string {
   const error = errors.find(Boolean);
-  if (!error) return "";
-  if (typeof error === "string") return error;
+  if (!error) return '';
+  if (typeof error === 'string') return error;
   if (error instanceof Error) return error.message;
   return String(error);
 }
 
-function notify(message: string, type: "success" | "error" | "warning" | "info" = "info") {
+function notify(message: string, type: 'success' | 'error' | 'warning' | 'info' = 'info') {
   window.showToast?.(message, type);
 }
 
 function updateBadge(openCount: number) {
-  const badge = document.getElementById("issues-nav-badge");
+  const badge = document.getElementById('issues-nav-badge');
   if (!badge) return;
   badge.textContent = String(openCount || 0);
-  badge.classList.toggle("hidden", !openCount);
+  badge.classList.toggle('hidden', !openCount);
 }

webui/src/routes/issues/-ui/issues-page.tsx

@@ -2,8 +2,8 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
 import { useEffect, useState } from 'react';
 
-import { getShellProfileContext } from '@/platform/shell/bridge';
 import { Select } from '@/components/form';
+import { getShellProfileContext } from '@/platform/shell/bridge';
 import { useReactPageShell } from '@/platform/shell/route-controllers';
 
 import type { IssueCounts, IssueRecord, IssueStatus } from '../-issues.types';

webui/vite.config.ts

@@ -18,6 +18,7 @@ export default defineConfig({
       ],
     },
     sortPackageJson: true,
+    trailingComma: 'all',
   },
   plugins: [
     tanstackRouter({