From 3961323cca20651b901ec7737f20ebc9af97dc69 Mon Sep 17 00:00:00 2001
From: Huskydog9988 <39809509+Huskydog9988@users.noreply.github.com>
Date: Sun, 13 Apr 2025 22:10:28 -0400
Subject: [PATCH] fix: more eslint issues

---
 server/components/CarouselPagination.vue      |  8 +++----
 server/components/CreateCollectionModal.vue   |  2 +-
 server/components/{Logo.vue => DropLogo.vue}  | 12 +++++-----
 .../{Wordmark.vue => DropWordmark.vue}        |  0
 server/components/GameSearchResultWidget.vue  |  4 ++--
 server/components/LibraryDirectory.vue        | 13 ++++++-----
 server/components/NewsArticleCreateButton.vue | 21 +++++++++--------
 server/components/NewsDirectory.vue           | 23 +++++++++++--------
 ...{Notification.vue => NotificationItem.vue} |  0
 server/components/UploadFileDialog.vue        |  9 ++++----
 server/components/UserHeader/UserWidget.vue   | 10 +++-----
 server/composables/collection.ts              |  8 ++++---
 server/composables/news.ts                    |  2 +-
 server/composables/request.ts                 |  7 +++---
 server/pages/auth/signin.vue                  | 10 ++++----
 server/pages/auth/signout.vue                 |  4 ++--
 server/pages/store/[id]/index.vue             |  2 +-
 .../api/v1/client/user/webtoken.post.ts       |  2 +-
 18 files changed, 71 insertions(+), 66 deletions(-)
 rename server/components/{Logo.vue => DropLogo.vue} (98%)
 rename server/components/{Wordmark.vue => DropWordmark.vue} (100%)
 rename server/components/{Notification.vue => NotificationItem.vue} (100%)

diff --git a/server/components/CarouselPagination.vue b/server/components/CarouselPagination.vue
index 82ce7cf6..61be4b90 100644
--- a/server/components/CarouselPagination.vue
+++ b/server/components/CarouselPagination.vue
@@ -18,8 +18,8 @@ const carousel = inject(injectCarousel)!;
 
 const amount = carousel.maxSlide - carousel.minSlide + 1;
 
-function slideTo(index: number) {
-  const offsetIndex = index + carousel.minSlide;
-  carousel.nav.slideTo(offsetIndex);
-}
+// function slideTo(index: number) {
+//   const offsetIndex = index + carousel.minSlide;
+//   carousel.nav.slideTo(offsetIndex);
+// }
 </script>
diff --git a/server/components/CreateCollectionModal.vue b/server/components/CreateCollectionModal.vue
index 1410b4b8..64554758 100644
--- a/server/components/CreateCollectionModal.vue
+++ b/server/components/CreateCollectionModal.vue
@@ -58,7 +58,7 @@ const emit = defineEmits<{
   created: [collectionId: string];
 }>();
 
-const open: Ref<boolean> = defineModel<boolean>();
+const open = defineModel<boolean>({ required: true });
 
 const collectionName = ref("");
 const createCollectionLoading = ref(false);
diff --git a/server/components/Logo.vue b/server/components/DropLogo.vue
similarity index 98%
rename from server/components/Logo.vue
rename to server/components/DropLogo.vue
index 6105fd17..d7760057 100644
--- a/server/components/Logo.vue
+++ b/server/components/DropLogo.vue
@@ -1,7 +1,7 @@
-<template>
-    <svg class="text-blue-400" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-            d="M4 13.5C4 11.0008 5.38798 8.76189 7.00766 7C8.43926 5.44272 10.0519 4.25811 11.0471 3.5959C11.6287 3.20893 12.3713 3.20893 12.9529 3.5959C13.9481 4.25811 15.5607 5.44272 16.9923 7C18.612 8.76189 20 11.0008 20 13.5C20 17.9183 16.4183 21.5 12 21.5C7.58172 21.5 4 17.9183 4 13.5Z"
-            stroke="currentColor" stroke-width="2" />
-    </svg>
+<template>
+    <svg class="text-blue-400" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M4 13.5C4 11.0008 5.38798 8.76189 7.00766 7C8.43926 5.44272 10.0519 4.25811 11.0471 3.5959C11.6287 3.20893 12.3713 3.20893 12.9529 3.5959C13.9481 4.25811 15.5607 5.44272 16.9923 7C18.612 8.76189 20 11.0008 20 13.5C20 17.9183 16.4183 21.5 12 21.5C7.58172 21.5 4 17.9183 4 13.5Z"
+            stroke="currentColor" stroke-width="2" />
+    </svg>
 </template>
\ No newline at end of file
diff --git a/server/components/Wordmark.vue b/server/components/DropWordmark.vue
similarity index 100%
rename from server/components/Wordmark.vue
rename to server/components/DropWordmark.vue
diff --git a/server/components/GameSearchResultWidget.vue b/server/components/GameSearchResultWidget.vue
index 9cb223e8..20cf908d 100644
--- a/server/components/GameSearchResultWidget.vue
+++ b/server/components/GameSearchResultWidget.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-row items-center gap-x-2">
-    <img :src="game.icon" class="w-12 h-12 rounded-sm object-cover" >
+    <img :src="game.icon" class="w-12 h-12 rounded-sm object-cover" />
     <div class="flex flex-col items-left">
       <h1 class="font-semibold font-display text-lg text-zinc-100">
         {{ game.name }}
@@ -18,7 +18,7 @@
 <script setup lang="ts">
 import type { GameMetadataSearchResult } from "~/server/internal/metadata/types";
 
-const props = defineProps<{
+const { game } = defineProps<{
   game: GameMetadataSearchResult & { sourceName?: string };
 }>();
 </script>
diff --git a/server/components/LibraryDirectory.vue b/server/components/LibraryDirectory.vue
index c76d14c0..b5272b95 100644
--- a/server/components/LibraryDirectory.vue
+++ b/server/components/LibraryDirectory.vue
@@ -14,7 +14,7 @@
         autocomplete="off"
         class="block w-full rounded-md bg-zinc-900 py-2 pl-9 pr-2 text-sm text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600"
         placeholder="Search library..."
-      >
+      />
       <MagnifyingGlassIcon
         class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400"
         aria-hidden="true"
@@ -37,9 +37,11 @@
             :src="useObject(game.mCoverId)"
             class="h-9 w-9 flex-shrink-0 rounded transition-all duration-300 group-hover:scale-105 hover:rotate-[-2deg] hover:shadow-lg"
             alt=""
-          >
+          />
           <div class="min-w-0 flex-1 pl-2.5">
-            <p class="text-sm font-semibold text-display text-zinc-200 truncate text-left">
+            <p
+              class="text-sm font-semibold text-display text-zinc-200 truncate text-left"
+            >
               {{ game.mName }}
             </p>
           </div>
@@ -57,7 +59,6 @@
 </template>
 
 <script setup lang="ts">
-import { HomeIcon } from "@heroicons/vue/24/outline";
 import { Bars3Icon, MagnifyingGlassIcon } from "@heroicons/vue/24/solid";
 
 const library = await useLibrary();
@@ -68,7 +69,7 @@ const filteredLibrary = computed(() =>
   library.value.entries
     .map((e) => e.game)
     .filter((e) =>
-      e.mName.toLowerCase().includes(searchQuery.value.toLowerCase())
-    )
+      e.mName.toLowerCase().includes(searchQuery.value.toLowerCase()),
+    ),
 );
 </script>
diff --git a/server/components/NewsArticleCreateButton.vue b/server/components/NewsArticleCreateButton.vue
index ef2e9566..89ef8391 100644
--- a/server/components/NewsArticleCreateButton.vue
+++ b/server/components/NewsArticleCreateButton.vue
@@ -29,7 +29,7 @@
             autocomplete="off"
             class="mt-1 block w-full rounded-md bg-zinc-900 border-zinc-700 text-zinc-100 shadow-sm focus:border-primary-500 focus:ring-primary-500"
             required
-          >
+          />
         </div>
 
         <div>
@@ -42,7 +42,7 @@
             type="text"
             class="mt-1 block w-full rounded-md bg-zinc-900 border-zinc-700 text-zinc-100 shadow-sm focus:border-primary-500 focus:ring-primary-500"
             required
-          >
+          />
         </div>
 
         <div>
@@ -124,8 +124,8 @@
             accept="image/*"
             class="hidden"
             type="file"
-            @change="(e) => file = (e.target as any)?.files"
-          >
+            @change="(e) => (file = (e.target as any)?.files)"
+          />
         </div>
 
         <div>
@@ -155,7 +155,7 @@
               placeholder="Add a tag..."
               class="mt-1 block w-full rounded-md bg-zinc-900 border-zinc-700 text-zinc-100 shadow-sm focus:border-primary-500 focus:ring-primary-500"
               @keydown.enter.prevent="addTag"
-            >
+            />
             <button
               type="button"
               class="mt-1 px-3 py-2 rounded-md bg-zinc-800 text-zinc-100 hover:bg-zinc-700"
@@ -207,12 +207,10 @@ import {
   XCircleIcon,
   XMarkIcon,
 } from "@heroicons/vue/24/solid";
-import type { Article } from "@prisma/client";
 import { micromark } from "micromark";
-import type { SerializeObject } from "nitropack/types";
 
 const news = useNews();
-if(!news.value){
+if (!news.value) {
   news.value = await fetchNews();
 }
 
@@ -230,6 +228,8 @@ const newArticle = ref({
 });
 
 const markdownPreview = computed(() => {
+  // TODO: maybe?? add https://github.com/cure53/DOMPurify
+  // micromark says its safe, but this is straight html we are injecting
   return micromark(newArticle.value.content);
 });
 
@@ -302,7 +302,7 @@ function addTag() {
 
 function removeTag(tagToRemove: string) {
   newArticle.value.tags = newArticle.value.tags.filter(
-    (tag) => tag !== tagToRemove
+    (tag) => tag !== tagToRemove,
   );
 }
 
@@ -367,7 +367,8 @@ async function createArticle() {
 
     modalOpen.value = false;
   } catch (e) {
-    error.value = (e as any)?.statusMessage ?? "An unknown error occured.";
+    // @ts-expect-error attempt to get statusMessage on error
+    error.value = e?.statusMessage ?? "An unknown error occured.";
   } finally {
     loading.value = false;
   }
diff --git a/server/components/NewsDirectory.vue b/server/components/NewsDirectory.vue
index 7293b57d..d84e5485 100644
--- a/server/components/NewsDirectory.vue
+++ b/server/components/NewsDirectory.vue
@@ -21,7 +21,7 @@
             type="text"
             class="block w-full rounded-md border-0 bg-zinc-800 py-2.5 pl-10 pr-3 text-zinc-100 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-500 sm:text-sm sm:leading-6"
             placeholder="Search articles..."
-          >
+          />
         </div>
       </div>
 
@@ -85,7 +85,7 @@
             <img
               :src="useObject(article.image)"
               class="absolute blur-sm inset-0 w-full h-full object-cover transition-all duration-200 group-hover:scale-110"
-            >
+            />
             <div
               class="absolute inset-0 bg-gradient-to-b from-transparent to-zinc-800 transition-all duration-200"
             />
@@ -117,7 +117,7 @@ import { MagnifyingGlassIcon } from "@heroicons/vue/24/solid";
 import { micromark } from "micromark";
 
 const news = useNews();
-if(!news.value){
+if (!news.value) {
   news.value = await fetchNews();
 }
 
@@ -154,6 +154,7 @@ const formatDate = (date: string) => {
 };
 
 const formatExcerpt = (excerpt: string) => {
+  // TODO: same as one in NewsArticleCreateButton
   // Convert markdown to HTML
   const html = micromark(excerpt);
   // Strip HTML tags using regex
@@ -175,28 +176,32 @@ const filteredArticles = computed(() => {
     const now = new Date();
     let matchesDate = true;
 
-    switch (dateFilter.value) {
-      case "today":
+    switch (dateFilter.value.toLowerCase()) {
+      case "today": {
         matchesDate = articleDate.toDateString() === now.toDateString();
         break;
-      case "week":
+      }
+      case "week": {
         const weekAgo = new Date(now.setDate(now.getDate() - 7));
         matchesDate = articleDate >= weekAgo;
         break;
-      case "month":
+      }
+      case "month": {
         matchesDate =
           articleDate.getMonth() === now.getMonth() &&
           articleDate.getFullYear() === now.getFullYear();
         break;
-      case "year":
+      }
+      case "year": {
         matchesDate = articleDate.getFullYear() === now.getFullYear();
         break;
+      }
     }
 
     const matchesTags =
       selectedTags.value.length === 0 ||
       selectedTags.value.every((tag) =>
-        article.tags.find((e) => e.name == tag)
+        article.tags.find((e) => e.name == tag),
       );
 
     return matchesSearch && matchesDate && matchesTags;
diff --git a/server/components/Notification.vue b/server/components/NotificationItem.vue
similarity index 100%
rename from server/components/Notification.vue
rename to server/components/NotificationItem.vue
diff --git a/server/components/UploadFileDialog.vue b/server/components/UploadFileDialog.vue
index 8283d7e7..b2b8b911 100644
--- a/server/components/UploadFileDialog.vue
+++ b/server/components/UploadFileDialog.vue
@@ -60,8 +60,8 @@
                       :accept="props.accept"
                       class="hidden"
                       type="file"
-                      @change="(e) => file = (e.target as any)?.files"
-                    >
+                      @change="(e) => (file = (e.target as any)?.files)"
+                    />
                   </div>
                 </div>
               </div>
@@ -112,14 +112,15 @@ import { ref } from "vue";
 import {
   Dialog,
   DialogPanel,
-  DialogTitle,
   TransitionChild,
   TransitionRoot,
 } from "@headlessui/vue";
 import { ArrowUpTrayIcon } from "@heroicons/vue/20/solid";
 import { XCircleIcon } from "@heroicons/vue/24/solid";
 
-const open: Ref<boolean> = defineModel<boolean>() as any;
+const open = defineModel<boolean>({
+  required: true,
+});
 
 const file = ref<FileList | undefined>();
 const currentFile = computed(() => file.value?.item(0));
diff --git a/server/components/UserHeader/UserWidget.vue b/server/components/UserHeader/UserWidget.vue
index d4bc6fa8..46f02671 100644
--- a/server/components/UserHeader/UserWidget.vue
+++ b/server/components/UserHeader/UserWidget.vue
@@ -6,7 +6,7 @@
           <img
             :src="useObject(user.profilePicture)"
             class="w-5 h-5 rounded-sm"
-          >
+          />
           <span class="ml-2 text-sm font-bold">{{ user.displayName }}</span>
           <ChevronDownIcon class="ml-3 h-4" />
         </div>
@@ -33,7 +33,7 @@
               <img
                 :src="useObject(user.profilePicture)"
                 class="w-5 h-5 rounded-sm"
-              >
+              />
               <span class="ml-2 text-sm font-bold">{{ user.displayName }}</span>
             </div>
           </NuxtLink>
@@ -45,6 +45,7 @@
               v-slot="{ active, close }"
               hydrate-on-visible
             >
+              <!-- TODO: think this would work better as a NuxtLink instead of a button -->
               <button
                 :href="nav.route"
                 :class="[
@@ -92,9 +93,4 @@ const navigation: NavigationItem[] = [
 ].filter((e) => e !== undefined);
 
 const router = useRouter();
-
-function navigateLink(href: string, closeFn: () => any) {
-  closeFn();
-  router.push(href);
-}
 </script>
diff --git a/server/composables/collection.ts b/server/composables/collection.ts
index afc51422..120b0c26 100644
--- a/server/composables/collection.ts
+++ b/server/composables/collection.ts
@@ -6,7 +6,7 @@ type FullCollection = Collection & {
 };
 
 export const useCollections = async () => {
-  // @ts-expect-error
+  // @ts-expect-error undefined is used to tell if value has been fetched or not
   const state = useState<FullCollection[]>("collections", () => undefined);
   if (state.value === undefined) {
     state.value = await $dropFetch<FullCollection[]>("/api/v1/collection");
@@ -17,7 +17,9 @@ export const useCollections = async () => {
 
 export async function refreshCollection(id: string) {
   const state = useState<FullCollection[]>("collections");
-  const collection = await $dropFetch<FullCollection>(`/api/v1/collection/${id}`);
+  const collection = await $dropFetch<FullCollection>(
+    `/api/v1/collection/${id}`,
+  );
   const index = state.value.findIndex((e) => e.id == id);
   if (index == -1) {
     state.value.push(collection);
@@ -27,7 +29,7 @@ export async function refreshCollection(id: string) {
 }
 
 export const useLibrary = async () => {
-  // @ts-expect-error
+  // @ts-expect-error undefined is used to tell if value has been fetched or not
   const state = useState<FullCollection>("library", () => undefined);
   if (state.value === undefined) {
     await refreshLibrary();
diff --git a/server/composables/news.ts b/server/composables/news.ts
index 620d8b7b..45b2ed76 100644
--- a/server/composables/news.ts
+++ b/server/composables/news.ts
@@ -31,7 +31,7 @@ export const fetchNews = async (options?: {
 
   const news = useNews();
 
-  // @ts-ignore
+  // @ts-ignore forget why this ignor exists
   const newValue = await $dropFetch(`/api/v1/news?${query.toString()}`);
 
   news.value = newValue;
diff --git a/server/composables/request.ts b/server/composables/request.ts
index 584a6bee..a3b448c7 100644
--- a/server/composables/request.ts
+++ b/server/composables/request.ts
@@ -1,5 +1,4 @@
 import type {
-  $Fetch,
   ExtractedRouteMethod,
   NitroFetchOptions,
   NitroFetchRequest,
@@ -8,15 +7,15 @@ import type {
 
 interface DropFetch<
   DefaultT = unknown,
-  DefaultR extends NitroFetchRequest = NitroFetchRequest
+  DefaultR extends NitroFetchRequest = NitroFetchRequest,
 > {
   <
     T = DefaultT,
     R extends NitroFetchRequest = DefaultR,
-    O extends NitroFetchOptions<R> = NitroFetchOptions<R>
+    O extends NitroFetchOptions<R> = NitroFetchOptions<R>,
   >(
     request: R,
-    opts?: O
+    opts?: O,
   ): Promise<
     // @ts-ignore
     TypedInternalResponse<
diff --git a/server/pages/auth/signin.vue b/server/pages/auth/signin.vue
index 0933e1c2..b1e09a5b 100644
--- a/server/pages/auth/signin.vue
+++ b/server/pages/auth/signin.vue
@@ -34,7 +34,7 @@
                     autocomplete="username"
                     required
                     class="block w-full rounded-md border-0 py-1.5 px-3 shadow-sm bg-zinc-950/20 text-zinc-300 ring-1 ring-inset ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
-                  >
+                  />
                 </div>
               </div>
 
@@ -53,7 +53,7 @@
                     autocomplete="current-password"
                     required
                     class="block w-full rounded-md border-0 py-1.5 px-3 shadow-sm bg-zinc-950/20 text-zinc-300 ring-1 ring-inset ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
-                  >
+                  />
                 </div>
               </div>
 
@@ -65,7 +65,7 @@
                     name="remember-me"
                     type="checkbox"
                     class="h-4 w-4 rounded bg-zinc-800 border-zinc-700 text-blue-600 focus:ring-blue-600"
-                  >
+                  />
                   <label
                     for="remember-me"
                     class="ml-3 block text-sm leading-6 text-zinc-400"
@@ -113,7 +113,7 @@
         src="/wallpapers/signin.jpg"
         class="absolute inset-0 h-full w-full object-cover"
         alt=""
-      >
+      />
     </div>
   </div>
 </template>
@@ -121,7 +121,7 @@
 <script setup lang="ts">
 import { XCircleIcon } from "@heroicons/vue/20/solid";
 import type { User } from "@prisma/client";
-import Logo from "~/components/Logo.vue";
+import Logo from "~/components/DropLogo.vue";
 
 const username = ref("");
 const password = ref("");
diff --git a/server/pages/auth/signout.vue b/server/pages/auth/signout.vue
index bf49dd93..ebe8b424 100644
--- a/server/pages/auth/signout.vue
+++ b/server/pages/auth/signout.vue
@@ -22,13 +22,13 @@
         src="/wallpapers/signin.jpg"
         class="absolute inset-0 h-full w-full object-cover"
         alt=""
-      >
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Logo from "~/components/Logo.vue";
+import Logo from "~/components/DropLogo.vue";
 const router = useRouter();
 
 // Clear the user state
diff --git a/server/pages/store/[id]/index.vue b/server/pages/store/[id]/index.vue
index d6120b8f..56fd4dd2 100644
--- a/server/pages/store/[id]/index.vue
+++ b/server/pages/store/[id]/index.vue
@@ -70,9 +70,9 @@
                   class="whitespace-nowrap inline-flex gap-x-4 px-3 py-4 text-sm text-zinc-400"
                 >
                   <component
+                    :is="PLATFORM_ICONS[platform]"
                     v-for="platform in platforms"
                     :key="platform"
-                    :is="PLATFORM_ICONS[platform]"
                     class="text-blue-600 w-6 h-6"
                   />
                   <span
diff --git a/server/server/api/v1/client/user/webtoken.post.ts b/server/server/api/v1/client/user/webtoken.post.ts
index 8d0869e1..f95246b7 100644
--- a/server/server/api/v1/client/user/webtoken.post.ts
+++ b/server/server/api/v1/client/user/webtoken.post.ts
@@ -1,6 +1,6 @@
 import { APITokenMode } from "@prisma/client";
 import { DateTime } from "luxon";
-import { UserACL } from "~/server/internal/acls";
+import type { UserACL } from "~/server/internal/acls";
 import { defineClientEventHandler } from "~/server/internal/clients/event-handler";
 import prisma from "~/server/internal/db/database";