Fix eslint errors in Lexbox admin UI

rmunn · rmunn · commit 33b567d82766 · 2025-07-29T15:34:44.000+07:00
FW Lite UI (frontend/viewer) will be next
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
@@ -143,12 +143,4 @@ export default [
       }
     },
   },
-  {
-    // 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',
-    },
-  },
 ];
diff --git a/frontend/src/lib/components/HgLogView.svelte b/frontend/src/lib/components/HgLogView.svelte
@@ -136,7 +136,7 @@
   </thead>
   <tbody>
     {#if logEntries?.length}
-      {#each expandedLog as log, idx}
+      {#each expandedLog as log, idx (log.node)}
         <tr>
           {#if idx === 0}
             <td class="py-0 w-0" rowspan="1000000">
diff --git a/frontend/src/lib/components/ProjectList.svelte b/frontend/src/lib/components/ProjectList.svelte
@@ -14,7 +14,7 @@
 </script>
 
 <div class="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 auto-rows-fr gap-2 md:gap-4 max-xs:justify-items-center">
-  {#each projects as project}
+  {#each projects as project (project.id)}
     {#if project.isDraft}
       <div class="draft card aspect-square bg-base-200 overflow-hidden">
         <div class="bg" style="background-image: url('{getProjectTypeIcon(project.type)}')"></div>
diff --git a/frontend/src/lib/components/Projects/ProjectConfidentialityFilterSelect.svelte b/frontend/src/lib/components/Projects/ProjectConfidentialityFilterSelect.svelte
@@ -21,7 +21,7 @@
 <div class="relative">
   <Select {...rest} label={$t('project.confidential.confidentiality')} helpLink={helpLinks.confidentiality} bind:value>
     <option value={undefined}>{$t('common.any')}</option>
-    {#each Object.entries(options) as [value, label]}
+    {#each Object.entries(options) as [value, label] (value)}
       <option {value}>{$t(label)}</option>
     {/each}
   </Select>
diff --git a/frontend/src/lib/components/Projects/ProjectFilter.svelte b/frontend/src/lib/components/Projects/ProjectFilter.svelte
@@ -98,7 +98,7 @@
   {loading}
 >
   {#snippet activeFilterSlot({ activeFilters })}
-    {#each activeFilters as filter}
+    {#each activeFilters as filter (filter.key)}
       {#if filter.key === 'projectType'}
         <ActiveFilter {filter}>
           <ProjectTypeIcon type={filter.value} />
diff --git a/frontend/src/lib/components/Projects/ProjectTable.svelte b/frontend/src/lib/components/Projects/ProjectTable.svelte
@@ -55,7 +55,7 @@
       </tr>
     </thead>
     <tbody>
-      {#each projects as project}
+      {#each projects as project (project.id)}
         <tr>
           {#if isColumnVisible('name')}
             <td>
diff --git a/frontend/src/lib/components/Projects/WritingSystemList.svelte b/frontend/src/lib/components/Projects/WritingSystemList.svelte
@@ -13,7 +13,7 @@
 <div class="w-full">
   {#if writingSystems.length > 0}
     <BadgeList>
-      {#each writingSystems as ws}
+      {#each writingSystems as ws (ws.tag)}
         <WritingSystemBadge tag={ws.tag} isActive={ws.isActive} isDefault={ws.isDefault} />
       {/each}
     </BadgeList>
diff --git a/frontend/src/lib/components/TrainTracks.svelte b/frontend/src/lib/components/TrainTracks.svelte
@@ -113,10 +113,10 @@
 {#if circles?.length > 0}
   <svg width={maxWidth} height="0" style="height: 100%">
     {#if rowHeights?.length > 0}
-      {#each curves as curve}
+      {#each curves as curve (curve)}
         <path fill="none" stroke={curve.color} stroke-width="1.5" d={curve.d} />
       {/each}
-      {#each svgDots as c}
+      {#each svgDots as c (c)}
         <circle cx={c.x} cy={c.y} r={circleSize} fill={c.color} stroke="none" style="" />
       {/each}
     {/if}
diff --git a/frontend/src/lib/components/Users/UserFilter.svelte b/frontend/src/lib/components/Users/UserFilter.svelte
@@ -54,8 +54,8 @@
   {loading}
 >
   {#snippet activeFilterSlot({ activeFilters })}
-  
-      {#each activeFilters as filter}
+
+      {#each activeFilters as filter (filter.key)}
         {#if filter.key === 'userType' && filter.value}
           <ActiveFilter {filter}>
             {#if filter.value === 'admin'}
@@ -76,10 +76,10 @@
           </ActiveFilter>
         {/if}
       {/each}
-    
+
   {/snippet}
   {#snippet filterSlot()}
-  
+
       <h2 class="card-title">{$t('admin_dashboard.user_filter.title')}</h2>
       {#if filterEnabled('userType')}
         <div class="form-control">
@@ -97,6 +97,6 @@
           </label>
         </div>
       {/if}
-    
+
   {/snippet}
 </FilterBar>
diff --git a/frontend/src/lib/components/Users/UserProjects.svelte b/frontend/src/lib/components/Users/UserProjects.svelte
@@ -73,7 +73,7 @@
         </tr>
       </thead>
       <tbody>
-        {#each projects as proj}
+        {#each projects as proj (proj.id)}
           {@const isManager = proj.memberRole === ProjectRole.Manager}
           <tr>
             <td class="p-0 w-4">
diff --git a/frontend/src/lib/components/Users/UserTable.svelte b/frontend/src/lib/components/Users/UserTable.svelte
@@ -30,7 +30,7 @@
     </tr>
   </thead>
   <tbody>
-    {#each shownUsers as user}
+    {#each shownUsers as user (user.id)}
       <tr>
         <td>
           <div class="flex items-center gap-2 max-w-40 @xl:max-w-52">
diff --git a/frontend/src/lib/forms/DisplayLanguageSelect.svelte b/frontend/src/lib/forms/DisplayLanguageSelect.svelte
@@ -25,7 +25,7 @@
     <!-- Make sure we don't overwrite persisted locales that we don't support yet -->
     <option {value}>{value} ({$t('account_settings.language.not_supported')})</option>
   {/if}
-  {#each availableLocales as locale}
+  {#each availableLocales as locale (locale)}
     <option value={locale}>{localNames[locale] ?? locale}</option>
   {/each}
 </Select>
diff --git a/frontend/src/lib/forms/ProjectTypeSelect.svelte b/frontend/src/lib/forms/ProjectTypeSelect.svelte
@@ -25,7 +25,7 @@
     {#if undefinedOptionLabel}
       <option value={undefined}>{undefinedOptionLabel}</option>
     {/if}
-    {#each types as type}
+    {#each types as type (type)}
       <option value={type}><FormatProjectType {type} /></option>
     {/each}
     {#if includeUnknown}
diff --git a/frontend/src/lib/forms/RadioButtonGroup.svelte b/frontend/src/lib/forms/RadioButtonGroup.svelte
@@ -39,7 +39,7 @@
   <div class="legend" id={`label-${id}`}>
     {label}
   </div>
-  {#each buttons as button}
+  {#each buttons as button (button.value)}
     <div class="form-control w-full">
       <label class="label cursor-pointer justify-normal pb-0">
         <input {id} type="radio" bind:group={value} value={button.value} class="radio mr-2 {variant ?? ''}" />
diff --git a/frontend/src/lib/forms/UserTypeSelect.svelte b/frontend/src/lib/forms/UserTypeSelect.svelte
@@ -22,7 +22,7 @@
     {#if undefinedOptionLabel}
       <option value={undefined}>{undefinedOptionLabel}</option>
     {/if}
-    {#each Object.entries(options) as [value, label]}
+    {#each Object.entries(options) as [value, label] (value)}
       <option {value}>{$t(label)}</option>
     {/each}
   </Select>
diff --git a/frontend/src/lib/forms/UserTypeahead.svelte b/frontend/src/lib/forms/UserTypeahead.svelte
@@ -133,7 +133,7 @@
     />
     <div class="overlay-content">
       <ul class="menu p-0">
-      {#each filteredResults as user, idx}
+      {#each filteredResults as user, idx (user.id)}
         <li class={(highlightIdx == idx) ? 'p-0 bg-primary text-white' : 'p-0'}><button class="whitespace-nowrap" onclick={() => {
           setTimeout(() => selectUser(user));
         }}>{formatResult(user)}</button></li>
diff --git a/frontend/src/lib/layout/Breadcrumbs/Breadcrumbs.svelte b/frontend/src/lib/layout/Breadcrumbs/Breadcrumbs.svelte
@@ -9,7 +9,7 @@
 
 <div class="text-sm breadcrumbs p-0 max-xs:invisible">
   <ul>
-    {#each $crumbs as crumb}
+    {#each $crumbs as crumb (crumb)}
       <RenderElement tag="li" el={crumb}/>
     {/each}
   </ul>
diff --git a/frontend/src/routes/(authenticated)/admin/AdminTabs.svelte b/frontend/src/routes/(authenticated)/admin/AdminTabs.svelte
@@ -24,7 +24,7 @@
 
 <div role="tablist" class="hidden admin-tabs:flex tabs tabs-lifted tabs-lg overflow-x-auto">
   <div class="tab tab-divider"></div>
-  {#each adminTabs as tab}
+  {#each adminTabs as tab (tab)}
     {@const isActiveTab = activeTab === tab}
     <button
       onclick={() => onClickTab?.(tab)}
diff --git a/frontend/src/routes/(authenticated)/admin/EditUserAccount.svelte b/frontend/src/routes/(authenticated)/admin/EditUserAccount.svelte
@@ -145,7 +145,7 @@
       <div>
         Feature flags:
         <ul>
-          {#each allPossibleFlags as flag}
+          {#each allPossibleFlags as flag (flag)}
             <li>
               <label
                 ><input type="checkbox" name="featureFlags" value={flag} bind:group={$form!.featureFlags} />
diff --git a/frontend/src/routes/(authenticated)/authorize/+page.svelte b/frontend/src/routes/(authenticated)/authorize/+page.svelte
@@ -30,7 +30,7 @@
       </div>
       <div class="bg-base-200/50 py-5 px-8">
         <div class="grid gap-x-3 gap-y-5" style="grid-template-columns: auto 1fr">
-          {#each data.scope?.split(' ') ?? [] as scope}
+          {#each data.scope?.split(' ') ?? [] as scope (scope)}
             {#if scope === 'profile'}
               <div class="grid grid-cols-subgrid col-span-full items-center">
                 <AuthenticatedUserIcon size="text-4xl" />
@@ -53,7 +53,7 @@
         </div>
       </div>
       <div>
-        {#each Object.entries(data.postback) as [key, value]}
+        {#each Object.entries(data.postback) as [key, value] (key)}
           <!--parameters required to resume the auth process-->
           <input type="hidden" name={key} {value} />
         {/each}
diff --git a/frontend/src/routes/(authenticated)/org/[org_id]/BulkAddOrgMembers.svelte b/frontend/src/routes/(authenticated)/org/[org_id]/BulkAddOrgMembers.svelte
@@ -110,7 +110,7 @@
         {#if addedMembers.length > 0}
           <div class="mt-2">
             <BadgeList>
-              {#each addedMembers as user}
+              {#each addedMembers as user (user.username)}
                 <OrgMemberBadge member={{ name: user.username, role: user.role }} />
               {/each}
             </BadgeList>
@@ -125,7 +125,7 @@
         {#if notFoundMembers.length > 0}
           <div class="mt-2">
             <BadgeList>
-              {#each notFoundMembers as user}
+              {#each notFoundMembers as user (user.username)}
                 <OrgMemberBadge member={{ name: user.username, role: user.role }} />
               {/each}
             </BadgeList>
@@ -139,7 +139,7 @@
         </p>
         <div class="mt-2">
           <BadgeList>
-            {#each existingMembers as user}
+            {#each existingMembers as user (user.username)}
               <OrgMemberBadge member={{ name: user.username, role: user.role }} />
             {/each}
           </BadgeList>
diff --git a/frontend/src/routes/(authenticated)/org/[org_id]/OrgMemberTable.svelte b/frontend/src/routes/(authenticated)/org/[org_id]/OrgMemberTable.svelte
@@ -58,7 +58,7 @@
       </tr>
     </thead>
     <tbody>
-      {#each shownUsers as member}
+      {#each shownUsers as member (member.id)}
         {@const memberUser = member.user}
         {@const isOrgAdmin = member.role === OrgRole.Admin}
         <tr>
diff --git a/frontend/src/routes/(authenticated)/org/[org_id]/OrgTabs.svelte b/frontend/src/routes/(authenticated)/org/[org_id]/OrgTabs.svelte
@@ -34,7 +34,7 @@
 
 <div role="tablist" class="flex tabs tabs-lifted tabs-lg overflow-x-auto">
   <div class="tab tab-divider"></div>
-  {#each visibleTabs as tab}
+  {#each visibleTabs as tab (tab)}
     {@const isActiveTab = activeTab === tab}
     <button onclick={() => activeTab = tab} role="tab" class:tab-active={isActiveTab} class="tab grow flex-1 basis-1/2">
       <h2 class="text-lg flex gap-4 items-center">
diff --git a/frontend/src/routes/(authenticated)/org/list/+page.svelte b/frontend/src/routes/(authenticated)/org/list/+page.svelte
@@ -149,7 +149,7 @@ TODO:
               </tr>
             {/if}
           {/if}
-          {#each [...myOrgs, ...otherOrgs] as org, i}
+          {#each [...myOrgs, ...otherOrgs] as org, i (org.id)}
             {@const isFirstOtherOrg = i === myOrgs.length}
             {#if showingMyOrgsHeader && isFirstOtherOrg}
               <tr>
diff --git a/frontend/src/routes/(authenticated)/project/[project_code]/AddOrganization.svelte b/frontend/src/routes/(authenticated)/project/[project_code]/AddOrganization.svelte
@@ -53,7 +53,7 @@
   {/snippet}
   {#snippet children({ errors })}
     <Select id="org" label={$t('project_page.organization.title')} bind:value={$form!.orgId} error={errors.orgId}>
-      {#each orgList as org}
+      {#each orgList as org (org.id)}
         <option value={org.id}>{org.name}</option>
       {/each}
     </Select>
diff --git a/frontend/src/routes/(authenticated)/project/[project_code]/BulkAddProjectMembers.svelte b/frontend/src/routes/(authenticated)/project/[project_code]/BulkAddProjectMembers.svelte
@@ -144,7 +144,7 @@
           {#if addedMembers.length > 0}
             <div class="mt-2">
               <BadgeList>
-                {#each addedMembers as user}
+                {#each addedMembers as user (user.username)}
                   <MemberBadge member={{ name: user.username, role: user.role }} />
                 {/each}
               </BadgeList>
@@ -159,7 +159,7 @@
           {#if createdMembers.length > 0}
             <div class="mt-2">
               <BadgeList>
-                {#each createdMembers as user}
+                {#each createdMembers as user (user.username)}
                   <MemberBadge member={{ name: user.username, role: user.role }} />
                 {/each}
               </BadgeList>
@@ -173,7 +173,7 @@
           </p>
           <div class="mt-2">
             <BadgeList>
-              {#each existingMembers as user}
+              {#each existingMembers as user (user.username)}
                 <MemberBadge member={{ name: user.username, role: user.role }} />
               {/each}
             </BadgeList>
diff --git a/frontend/src/routes/(authenticated)/project/create/+page.svelte b/frontend/src/routes/(authenticated)/project/create/+page.svelte
@@ -239,7 +239,7 @@
 
       <Select id="org" label={$t('project.create.org')} bind:value={$form.orgId} error={$errors.orgId}>
         <option value="">{$t('project_page.organization.placeholder')}</option>
-        {#each myOrgs as org}
+        {#each myOrgs as org (org.id)}
           <option value={org.id}>{org.name}</option>
         {/each}
       </Select>
@@ -300,7 +300,7 @@
             <div class="legend" id="label-extra-projects">
               {$t('project.create.maybe_related')}
             </div>
-            {#each relatedProjects.current as proj}
+            {#each relatedProjects.current as proj (proj.id)}
               <div class="form-control w-full">
                 <label class="label cursor-pointer justify-normal pb-0">
                   <input
diff --git a/frontend/src/routes/+error.svelte b/frontend/src/routes/+error.svelte
@@ -9,7 +9,7 @@
 
 {#if page.data.user}
   <HomeBreadcrumb />
-  {#each page.url.pathname.split('/').slice(1) as path}
+  {#each page.url.pathname.split('/').slice(1) as path (path)}
     <PageBreadcrumb>{path}</PageBreadcrumb>
   {/each}
 {/if}
diff --git a/frontend/src/routes/email/tester/+page@.svelte b/frontend/src/routes/email/tester/+page@.svelte
@@ -132,7 +132,7 @@
 <label class="label cursor-pointer inline-flex gap-4 m-4">
   <span class="label-text">Email template:</span>
   <select class="select select-info" bind:value={currEmail}>
-    {#each emails as email}
+    {#each emails as email (email)}
       <option value={email}>{email.label ?? email.template.replaceAll(/([a-z])([A-Z])/g, '$1 $2')}</option>
     {/each}
   </select>

Original file line number	Diff line number	Diff line change
`@@ -98,7 +98,7 @@`
`98`	`98`	`{loading}`
`99`	`99`	`>`
`100`	`100`	`{#snippet activeFilterSlot({ activeFilters })}`
`101`		`- {#each activeFilters as filter}`
	`101`	`+ {#each activeFilters as filter (filter.key)}`
`102`	`102`	`{#if filter.key === 'projectType'}`
`103`	`103`	`<ActiveFilter {filter}>`
`104`	`104`	`<ProjectTypeIcon type={filter.value} />`