chore(frontend): resolve eslint errors + nuxi-generate build warnings

.pre-commit-config.yaml

@@ -62,7 +62,11 @@ repos:
     hooks:
       - id: frontend-lint
         name: "Lint and fix extralit-frontend files"
-        entry: bash -c 'cd extralit-frontend && npx eslint --fix --cache "$@" || true'
+        # pre-commit passes repo-relative paths (extralit-frontend/foo.vue). The trailing
+        # `--` is the placeholder $0 (otherwise `bash -c` assigns the first file to $0 and
+        # "$@" drops it); `${@#extralit-frontend/}` strips the prefix so paths resolve after
+        # the cd. `|| true` keeps lint advisory (non-blocking), matching `eslint . --quiet`.
+        entry: bash -c 'cd extralit-frontend && npx eslint --fix --cache "${@#extralit-frontend/}" || true' --
         language: system
         files: '^extralit-frontend/.*\.(js|ts|vue)$'
         pass_filenames: true

extralit-frontend/.prettierignore

@@ -0,0 +1,11 @@
+# Dependencies and build output / generated dirs (prettier has no implicit ignores
+# beyond node_modules; without this it tries to parse generated .vue files in .nuxt*).
+node_modules
+dist
+.output
+.nuxt
+.nuxt-stale-root
+.vercel
+
+# Lockfiles and generated data
+package-lock.json

extralit-frontend/components/base/BaseSvgIcon.vue

@@ -47,9 +47,7 @@ const svg = computed(() => {
 
   // Strip the intrinsic width/height off the root <svg> so ours win (viewBox
   // keeps the aspect ratio), then inject the requested dimensions.
-  markup = markup
-    .replace(/(<svg\b[^>]*?)\swidth="[^"]*"/i, "$1")
-    .replace(/(<svg\b[^>]*?)\sheight="[^"]*"/i, "$1");
+  markup = markup.replace(/(<svg\b[^>]*?)\swidth="[^"]*"/i, "$1").replace(/(<svg\b[^>]*?)\sheight="[^"]*"/i, "$1");
   const sized: string[] = [];
   if (width) sized.push(`width="${width}"`);
   if (height) sized.push(`height="${height}"`);

extralit-frontend/components/base/base-breadcrumbs/BaseBreadcrumbs.vue

@@ -17,18 +17,10 @@
           :is-last-breadcrumb="index === filteredBreadcrumbs.length - 1"
         />
         <!-- Render normal breadcrumb items -->
-        <nuxt-link
-          v-else-if="breadcrumb.link"
-          class="breadcrumbs__item"
-          :to="breadcrumb.link"
-        >
+        <nuxt-link v-else-if="breadcrumb.link" class="breadcrumbs__item" :to="breadcrumb.link">
           {{ breadcrumb.name }}
         </nuxt-link>
-        <span
-          v-else
-          class="breadcrumbs__item --action"
-          @click="onBreadcrumbAction(breadcrumb)"
-        >
+        <span v-else class="breadcrumbs__item --action" @click="onBreadcrumbAction(breadcrumb)">
           {{ breadcrumb.name }}
         </span>
       </li>
@@ -39,7 +31,10 @@
         class="breadcrumbs__copy"
         @click.prevent="
           $copyToClipboard(
-            filteredBreadcrumbs.slice(-2).map(breadcrumb => breadcrumb.name).join('/')
+            filteredBreadcrumbs
+              .slice(-2)
+              .map((breadcrumb) => breadcrumb.name)
+              .join('/')
           )
         "
       >

extralit-frontend/components/base/base-breadcrumbs/DatasetBreadcrumbDropdown.vue

@@ -2,50 +2,45 @@
   <div class="breadcrumb-dropdown">
     <BaseDropdown :visible="visibleDropdown" @visibility="onToggleVisibility">
       <template #dropdown-header>
-      <span
-        class="breadcrumb-dropdown__header"
-      >
-        <span
-          class="breadcrumb-dropdown__name"
-          :class="{ '--last': isLastBreadcrumb }"
-        >
-          {{ selectedDatasetName }}
+        <span class="breadcrumb-dropdown__header">
+          <span class="breadcrumb-dropdown__name" :class="{ '--last': isLastBreadcrumb }">
+            {{ selectedDatasetName }}
+          </span>
+          <BaseIcon
+            icon-name="chevron-down"
+            class="breadcrumb-dropdown__icon"
+            :class="{ '--rotated': visibleDropdown }"
+          />
         </span>
-        <BaseIcon
-          icon-name="chevron-down"
-          class="breadcrumb-dropdown__icon"
-          :class="{ '--rotated': visibleDropdown }"
-        />
-      </span>
       </template>
       <template #dropdown-content>
-      <span class="breadcrumb-dropdown__content">
-        <div class="breadcrumb-dropdown__selector">
-          <BaseSearch v-model="searchText" :placeholder="$t('searchDatasets')" />
-          <div class="breadcrumb-dropdown__items">
-            <div v-if="datasets.length === 0" class="breadcrumb-dropdown__empty">
-              {{ $t('No datasets available') }}
+        <span class="breadcrumb-dropdown__content">
+          <div class="breadcrumb-dropdown__selector">
+            <BaseSearch v-model="searchText" :placeholder="$t('searchDatasets')" />
+            <div class="breadcrumb-dropdown__items">
+              <div v-if="datasets.length === 0" class="breadcrumb-dropdown__empty">
+                {{ $t("No datasets available") }}
+              </div>
+              <div v-else-if="datasetsFilteredBySearchText.length === 0" class="breadcrumb-dropdown__empty">
+                {{ $t("No datasets match your search") }}
+              </div>
+              <template v-else>
+                <BaseRadioButton
+                  class="breadcrumb-dropdown__item"
+                  v-for="dataset in datasetsFilteredBySearchText"
+                  :key="dataset.id"
+                  :id="dataset.id"
+                  :name="dataset.id"
+                  :value="dataset.id"
+                  :checked="selectedDatasetId === dataset.id"
+                  @change="onDatasetSelectionChange(dataset.id)"
+                >
+                  {{ dataset.name }}
+                </BaseRadioButton>
+              </template>
             </div>
-            <div v-else-if="datasetsFilteredBySearchText.length === 0" class="breadcrumb-dropdown__empty">
-              {{ $t('No datasets match your search') }}
-            </div>
-            <template v-else>
-              <BaseRadioButton
-                class="breadcrumb-dropdown__item"
-                v-for="dataset in datasetsFilteredBySearchText"
-                :key="dataset.id"
-                :id="dataset.id"
-                :name="dataset.id"
-                :value="dataset.id"
-                :checked="selectedDatasetId === dataset.id"
-                @change="onDatasetSelectionChange(dataset.id)"
-              >
-                {{ dataset.name }}
-              </BaseRadioButton>
-            </template>
           </div>
-        </div>
-      </span>
+        </span>
       </template>
     </BaseDropdown>
   </div>
@@ -95,28 +90,26 @@ export default {
       if (!this.selectedWorkspace) {
         return this.allDatasets;
       }
-      return this.allDatasets.filter(dataset => dataset.workspaceId === this.selectedWorkspace.id);
+      return this.allDatasets.filter((dataset) => dataset.workspaceId === this.selectedWorkspace.id);
     },
     selectedDataset(): Dataset | null {
-      return this.datasets.find(d => d.id === this.datasetId) || null;
+      return this.datasets.find((d) => d.id === this.datasetId) || null;
     },
     selectedDatasetName(): string {
-      return this.selectedDataset?.name || this.$t('Select dataset');
+      return this.selectedDataset?.name || this.$t("Select dataset");
     },
     selectedDatasetId: {
       get(): string | null {
         return this.datasetId;
       },
       set(datasetId: string | null) {
-        const dataset = this.datasets.find(d => d.id === datasetId) || null;
+        const dataset = this.datasets.find((d) => d.id === datasetId) || null;
         this.onDatasetChange(dataset);
         this.visibleDropdown = false;
-      }
+      },
     },
     datasetsFilteredBySearchText(): Dataset[] {
-      return this.datasets.filter((dataset) =>
-        dataset.name.toLowerCase().includes(this.searchText.toLowerCase())
-      );
+      return this.datasets.filter((dataset) => dataset.name.toLowerCase().includes(this.searchText.toLowerCase()));
     },
   },
   methods: {
@@ -130,14 +123,14 @@ export default {
           path: `/dataset/${dataset.id}/annotation-mode`,
           query: {
             ...this.$route.query,
-            workspace: this.selectedWorkspace?.name
-          }
+            workspace: this.selectedWorkspace?.name,
+          },
         });
       }
     },
     onDatasetSelectionChange(datasetId: string) {
       this.selectedDatasetId = datasetId;
-    }
+    },
   },
 };
 </script>
@@ -149,7 +142,7 @@ export default {
   &__header {
     display: flex;
     align-items: center;
-    padding: $base-space / 2;
+    padding: $base-space * 0.5;
     color: var(--fg-lighter);
     cursor: pointer;
     border-radius: $border-radius-s;
@@ -193,7 +186,7 @@ export default {
   }
 
   &__items {
-    padding: $base-space / 2;
+    padding: $base-space * 0.5;
   }
 
   &__item {
@@ -268,7 +261,7 @@ export default {
   margin: 0;
 
   .base-search__input {
-    padding: $base-space / 2;
+    padding: $base-space * 0.5;
     border-radius: $border-radius-s;
     border: 1px solid var(--border-field);
     background: var(--bg-field);
@@ -290,4 +283,4 @@ export default {
     flex: 1;
   }
 }
-</style>
+</style>