Fix eslint warnings in viewer

rmunn · rmunn · commit 71ad653e2502 · 2025-07-29T15:34:44.000+07:00
diff --git a/frontend/viewer/eslint.config.js b/frontend/viewer/eslint.config.js
@@ -154,14 +154,4 @@ export default [
     },
   },
   ...storybook.configs["flat/recommended"],
-  {
-    // TEMPORARY IGNORES, to be gotten rid of as soon as possible - 2025-07-24 RM
-    files: ['**/*.svelte', '**/*.svelte.ts'],
-    rules: {
-      'svelte/require-each-key': 'off',
-      'svelte/no-useless-mustaches': 'off',
-      'svelte/prefer-svelte-reactivity': 'off',
-      'svelte/no-unused-props': 'off',
-    },
-  },
 ];
diff --git a/frontend/viewer/src/home/HomeView.svelte b/frontend/viewer/src/home/HomeView.svelte
@@ -188,7 +188,7 @@
               </ButtonListItem>
             {/each}
             <DevContent>
-              <ButtonListItem href={`/testing/project-view`}>
+              <ButtonListItem href="/testing/project-view">
                 <ListItem title={$t`Test Project`} icon={mdiTestTube}
                           classes={{root: 'dark:bg-muted/50 bg-muted/80 hover:bg-muted/30 hover:dark:bg-muted'}}>
                   <div slot="actions" class="pointer-events-none shrink-0">
diff --git a/frontend/viewer/src/home/Server.svelte b/frontend/viewer/src/home/Server.svelte
@@ -100,7 +100,7 @@
       </p>
     {:else}
       <div class="shadow rounded">
-        {#each projects as project}
+        {#each projects as project (project.id)}
           {@const localProject = matchesProject(localProjects, project)}
           {#if localProject?.crdt}
             <ButtonListItem href={`/project/${project.code}`}>
diff --git a/frontend/viewer/src/home/ServersList.svelte b/frontend/viewer/src/home/ServersList.svelte
@@ -55,7 +55,7 @@
 {#await serversPromise}
   <Server status={undefined} projects={[]} localProjects={[]} loading={true}/>
 {:then serversStatus}
-  {#each serversStatus as status}
+  {#each serversStatus as status (status.server.id)}
     {@const server = status.server}
     {@const serverProjects = remoteProjects[server.id]?.filter(p => p.crdt) ?? []}
     <Server {status}
diff --git a/frontend/viewer/src/lib/DictionaryEntry.svelte b/frontend/viewer/src/lib/DictionaryEntry.svelte
@@ -93,6 +93,7 @@
   {:else}
     <span class="font-bold">{index + 1}</span>
   {/if}
+  <!-- eslint-disable-next-line svelte/no-useless-mustaches This mustache is not useless, it preserves whitespace -->
   {' · '}
 {/snippet}
 
@@ -102,6 +103,7 @@
   </div>
   <strong class="mr-1">
     {#each headwords as headword, i (headword.wsId)}
+      <!-- eslint-disable-next-line svelte/no-useless-mustaches This mustache is not useless, it preserves whitespace -->
       {#if i > 0}{' / '}{/if}
       <span class={headword.color}>{headword.value}</span>
     {/each}
@@ -123,11 +125,12 @@
         {#if glossAndDef.definition}
           <span class={glossAndDef.color}>{glossAndDef.definition}</span>
         {/if}
+        <!-- eslint-disable-next-line svelte/no-useless-mustaches This mustache is not useless, it is deliberately an empty string with no whitespace -->
         {''}
       {/each}
     </span>
     {#each sense.exampleSentences as example (example.id)}
-      {#each example.sentences as sentence, j}
+      {#each example.sentences as sentence, j (sentence)}
         {@const first = j === 0}
         {@const last = j === example.sentences.length - 1}
         {#if j > 0};{/if}
diff --git a/frontend/viewer/src/lib/activity/ActivityView.svelte b/frontend/viewer/src/lib/activity/ActivityView.svelte
@@ -109,7 +109,7 @@
         <div
           class="change-list col-start-2 row-start-2 flex flex-col gap-4 overflow-auto p-1 border rounded h-max max-h-full">
           <InfiniteScroll perPage={100} items={selectedRow.changes} let:visibleItems>
-            {#each visibleItems as change}
+            {#each visibleItems as change (change)}
               <div class="change whitespace-pre-wrap font-mono text-sm">
                 {formatJsonForUi(change)}
               </div>
diff --git a/frontend/viewer/src/lib/components/reorderer/reorderer-item-list.svelte b/frontend/viewer/src/lib/components/reorderer/reorderer-item-list.svelte
@@ -41,7 +41,7 @@
 </script>
 
 <DropdownMenu.Group {...mergedProps}>
-  {#each displayItems as item, i}
+  {#each displayItems as item, i (item)}
     {@const reorderName = getDisplayName(item) || '–'}
     <DropdownMenu.Item class="grid grid-cols-subgrid col-span-full justify-items-start items-center"
       onmouseover={() => displayIndex = i}
diff --git a/frontend/viewer/src/lib/entry-editor/EntryOrSensePicker.svelte b/frontend/viewer/src/lib/entry-editor/EntryOrSensePicker.svelte
@@ -215,7 +215,7 @@
               </Badge>
             {/if}
           </ListItem>
-          {#each selectedEntry.senses as sense}
+          {#each selectedEntry.senses as sense (sense.id)}
             {@const disabledSense = disableSense?.(sense, selectedEntry)}
             <SenseRow
               {sense}
diff --git a/frontend/viewer/src/lib/entry-editor/ItemListItem.svelte b/frontend/viewer/src/lib/entry-editor/ItemListItem.svelte
@@ -23,12 +23,18 @@
 
   let {
     item,
+    // TODO: Either use `index` or remove it as a prop
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    index,
     items = $bindable(),
     readonly,
     orderable = false,
     getDisplayName,
     onchange,
     menuItems,
+    // TODO: Either use `actions` or remove it as a prop
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    actions,
   } : ItemListItemProps<T> = $props();
 
   const displayName = $derived(getDisplayName(item) || '–');
diff --git a/frontend/viewer/src/lib/entry-editor/NewEntryDialog.svelte b/frontend/viewer/src/lib/entry-editor/NewEntryDialog.svelte
@@ -101,7 +101,7 @@
     </OverrideFields>
     {#if errors.length}
       <div class="text-end space-y-2">
-        {#each errors as error}
+        {#each errors as error (error)}
           <p class="text-destructive">{error}</p>
         {/each}
       </div>
diff --git a/frontend/viewer/src/lib/i18n/LocalizationPicker.svelte b/frontend/viewer/src/lib/i18n/LocalizationPicker.svelte
@@ -28,7 +28,7 @@
   </DropdownMenu.Trigger>
   <DropdownMenu.Content>
     <DropdownMenu.RadioGroup bind:value={() => $locale, l => setLanguage(l)}>
-      {#each Object.entries(languages) as [lang, label]}
+      {#each Object.entries(languages) as [lang, label] (lang)}
         <DropdownMenu.RadioItem class="cursor-pointer" value={lang}>{label}</DropdownMenu.RadioItem>
       {/each}
     </DropdownMenu.RadioGroup>
diff --git a/frontend/viewer/src/lib/sandbox/EditorSandbox.svelte b/frontend/viewer/src/lib/sandbox/EditorSandbox.svelte
@@ -76,6 +76,7 @@
   }
 </script>
 
+<!-- eslint-disable svelte/no-useless-mustaches - This is a sandbox, we don't need translations -->
 <ResizablePaneGroup direction="horizontal">
   <ResizablePane class="!overflow-visible" defaultSize={75}>
     <Editor.Root class="my-4 border px-4 py-8 relative z-0">
diff --git a/frontend/viewer/src/lib/sandbox/Sandbox.svelte b/frontend/viewer/src/lib/sandbox/Sandbox.svelte
@@ -191,7 +191,7 @@
                         mode={pickerMode}
                         pick={(e) => selectedEntryHistory.push(e)}/>
     <div>
-      {#each selectedEntryHistory as selected}
+      {#each selectedEntryHistory as selected (selected.entry.id)}
         <p>
           Entry: {writingSystemService.headword(selected.entry)}
           {#if selected.sense}
@@ -322,16 +322,16 @@
       </div>
       <div><Button onclick={testLoading}>Test loading</Button></div>
       <div class="flex gap-2 flex-wrap">
-        {#each variants as variant}
+        {#each variants as variant (variant)}
           <Button loading={buttonsLoading} {variant}>{variant} button</Button>
         {/each}
-        {#each variants as variant}
+        {#each variants as variant (variant)}
           <Button loading={buttonsLoading} {variant} icon="i-mdi-auto-fix"></Button>
         {/each}
-        {#each sizes as size}
+        {#each sizes as size (size)}
           <Button loading={buttonsLoading} {size}>Size: {size}</Button>
         {/each}
-        {#each sizes as size}
+        {#each sizes as size (size)}
           <Button loading={buttonsLoading} {size} icon="i-mdi-auto-fix"/>
         {/each}
       </div>
diff --git a/frontend/viewer/src/lib/utils/url.svelte.ts b/frontend/viewer/src/lib/utils/url.svelte.ts
@@ -1,4 +1,4 @@
-import {createSubscriber} from 'svelte/reactivity';
+import {createSubscriber, SvelteURL} from 'svelte/reactivity';
 import {queueHistoryChange} from './history';
 import {useLocation} from 'svelte-routing';
 
@@ -39,7 +39,7 @@ export class QueryParamState {
     this.#waitingForHistoryChange = true;
     await queueHistoryChange(() => {
       try {
-        const currentUrl = new URL(document.location.href);
+        const currentUrl = new SvelteURL(document.location.href);
         if (isDefault) {
           currentUrl.searchParams.delete(this.config.key);
         } else {
@@ -95,7 +95,7 @@ export class QueryParamState {
   }
 
   private readUrlValue(): string {
-    return new URL(document.location.href).searchParams.get(this.config.key) ?? this.defaultValue;
+    return new SvelteURL(document.location.href).searchParams.get(this.config.key) ?? this.defaultValue;
   }
 }
 
diff --git a/frontend/viewer/src/project/ProjectDropdown.svelte b/frontend/viewer/src/project/ProjectDropdown.svelte
@@ -107,7 +107,7 @@
           </Command.Loading>
         {:else}
           <Command.Empty>{$t`No Dictionaries found`}</Command.Empty>
-          {#each projectsResource.current ?? [] as project}
+          {#each projectsResource.current ?? [] as project (project.id)}
             <Command.Item
               value={project.name + project.crdt}
               onSelect={() => handleSelect(project)}
diff --git a/frontend/viewer/src/project/browse/EntryView.svelte b/frontend/viewer/src/project/browse/EntryView.svelte
@@ -68,7 +68,7 @@
     <DictionaryEntry {entry} showLinks class={cn('rounded bg-muted/80 dark:bg-muted/50 p-4')}>
       {#snippet actions()}
         <Toggle bind:pressed={() => sticky, (value) => dictionaryPreview = value ? 'sticky' : 'show'}
-          aria-label={`Toggle pinned`} class="aspect-square" size="xs">
+          aria-label={$t`Toggle pinned`} class="aspect-square" size="xs">
           <Icon icon="i-mdi-pin-outline" class="size-5" />
         </Toggle>
       {/snippet}
diff --git a/frontend/viewer/src/project/browse/SortMenu.svelte b/frontend/viewer/src/project/browse/SortMenu.svelte
@@ -42,6 +42,9 @@
   let {
     value = $bindable(),
     autoSelector,
+    // TODO: Either use `autoDirection` or remove it as a prop
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    autoDirection,
   }: Props = $props();
 
   let selectedSortField = $state<SortField>();
@@ -75,7 +78,7 @@
           ({$t(sortLabels[autoSort])})
         </span>
     </ResponsiveMenu.Item>
-    {#each sortOptions as option}
+    {#each sortOptions as option (option)}
       {@const icon = sortIcons[option.field]?.[option.dir]}
       <ResponsiveMenu.Item
         onSelect={() => {
diff --git a/frontend/viewer/src/project/browse/ViewPicker.svelte b/frontend/viewer/src/project/browse/ViewPicker.svelte
@@ -30,7 +30,7 @@
   <div class="space-y-2 md:space-y-4">
     <RadioGroup.Root bind:value={getCurrentView, setCurrentView}>
       <h3 class="font-normal max-md:mb-1">{$t`Field Labels`}</h3>
-      {#each views as view}
+      {#each views as view (view.id)}
         <RadioGroup.Item value={view.id} label={view.label} />
       {/each}
     </RadioGroup.Root>
diff --git a/frontend/viewer/src/stories/editor/misc/entry-picker.stories.svelte b/frontend/viewer/src/stories/editor/misc/entry-picker.stories.svelte
@@ -43,7 +43,7 @@
   </div>
 
   <div>
-    {#each selectedEntryHistory as selected}
+    {#each selectedEntryHistory as selected (selected.entry.id)}
       <p>
         Entry: {writingSystemService?.headword(selected.entry)}
         {#if selected.sense}
diff --git a/frontend/viewer/src/stories/editor/misc/reorderer.stories.svelte b/frontend/viewer/src/stories/editor/misc/reorderer.stories.svelte
@@ -36,7 +36,7 @@
 </div>
 
 <code>
-  {#each items as item}
+  {#each items as item (item)}
     <span class={cn('p-2 inline-block', item === currentItem && 'text-primary font-bold')}>
       {displayFunc(item)}
     </span>
diff --git a/frontend/viewer/src/stories/primitives/button.stories.svelte b/frontend/viewer/src/stories/primitives/button.stories.svelte
@@ -30,31 +30,31 @@
       <div>
         Variants:
         <div class="flex gap-2 flex-wrap">
-          {#each variants as variant}
+          {#each variants as variant (variant)}
             <Button {variant} {...args}>{variant} button</Button>
           {/each}
         </div>
       </div>
       <div>
         Variants with icon:
         <div class="flex gap-2 flex-wrap">
-          {#each variants as variant}
+          {#each variants as variant (variant)}
             <Button {variant} icon="i-mdi-auto-fix" {...args}></Button>
           {/each}
         </div>
       </div>
       <div>
         Sizes:
         <div class="flex gap-2 flex-wrap">
-          {#each sizes as size}
+          {#each sizes as size (size)}
             <Button {size} {...args}>{size}</Button>
           {/each}
         </div>
       </div>
       <div>
         Sizes with icon:
         <div class="flex gap-2 flex-wrap">
-          {#each sizes as size}
+          {#each sizes as size (size)}
             <Button {size} icon="i-mdi-auto-fix" {...args} />
           {/each}
         </div>
