fixes

Author: avoonix

env.node.d.ts

@@ -0,0 +1 @@
+declare module "eslint-plugin-vuetify";

package-lock.json

@@ -50,7 +50,9 @@
   "devDependencies": {
     "@playwright/test": "^1.51.1",
     "@tsconfig/node22": "^22.0.1",
+    "@types/hammerjs": "^2.0.46",
     "@types/jsdom": "^21.1.7",
+    "@types/mousetrap": "^1.6.15",
     "@types/node": "^22.13.14",
     "@vite-pwa/assets-generator": "^1.0.0",
     "@vitejs/plugin-vue": "^5.2.3",

package.json

@@ -15,7 +15,7 @@
                   </v-list-item-title>
                   <template v-slot:append>
                     <!-- <v-btn icon="mdi-pencil" size="x-small" variant="tonal"></v-btn> -->
-                     {{ item.size }}
+                    {{ item.size }}
                   </template>
                 </v-list-item>
               </template>
@@ -35,7 +35,7 @@ import {
   watch,
   watchEffect,
 } from "vue";
-import type { IAnalyzeTagsArgs, IProgressEvent } from "@/worker/AnalyzeService";
+import type { IAnalyzeTagsArgs, IAnalyzeTagsResult, IProgressEvent } from "@/worker/AnalyzeService";
 import { getAnalyzeService } from "@/worker/services";
 import { cloneDeep, debounce } from "lodash";
 import * as Comlink from "comlink";
@@ -62,7 +62,7 @@ const args = computed<IAnalyzeTagsArgs>(() => {
   };
 });
 
-const result = ref();
+const result = ref<IAnalyzeTagsResult>();
 
 const analyze = debounce(async (a) => {
   const service = await getAnalyzeService();

src/Analyzer/FavoritesAnalyzerResult.vue

@@ -18,7 +18,7 @@
       </v-card-text>
       <v-card-actions>
         <v-spacer />
-        <v-btn variant="text" color @click="hide">Never show again</v-btn>
+        <v-btn variant="text" @click="hide">Never show again</v-btn>
         <v-btn variant="text" color="primary" @click="install">Install</v-btn>
       </v-card-actions>
     </v-card>

src/App/InstallMenu.vue

@@ -105,7 +105,7 @@ const route = useRoute();
 
 const artist = computed<string>(() => {
   let name = "";
-  if (route.params.name) name = route.params.name;
+  if (route.params.name) name = typeof route.params.name === "string" ? route.params.name : route.params.name[0];
   return name;
 });
 

src/ArtistDashboard/DashboardResult.vue

@@ -13,11 +13,12 @@
 import { useUrlStore } from "@/services";
 import DText from "./DText.vue";
 import { useHead } from "@unhead/vue";
+import { ref } from "vue";
 
 useHead({ title: "Parser Test Page", });
 
 const urlStore = useUrlStore(); // todo: properly convert to vue 3 api
-const testText = `
+const testText = ref(`
 h1. Hello there
 Edit this text and see the results below.
 
@@ -79,5 +80,5 @@ header | header | header
  row   |   row  | row
  row   |   row  | row
 [/table]
-`
+`)
 </script>

src/Parser/ParserTestPage.vue

@@ -1,7 +1,7 @@
 <template>
   <v-dialog dark :model-value="open" fullscreen :scrim="false" transition="dialog-bottom-transition" scrollable
     persistent>
-    <div class="fullscreen bg-grey-darken-4" ref="dialog">
+    <div class="fullscreen bg-grey-darken-4">
       <div class="flex">
         <div v-show="!hideUi" class="float-left" v-ripple="hasPreviousFullscreenPost" @click="showPreviousImage">
           <v-icon size="50" v-if="hasPreviousFullscreenPost">
@@ -90,7 +90,7 @@ document.querySelector("#app")?.addEventListener("fullscreenchange", () => {
   appIsFullscreen.value = !!document.fullscreenElement;
 });
 
-const emit = defineEmits(["close", "next-post", "previous-post"]);
+const emit = defineEmits(["close", "next-post", "previous-post", "set-post-favorite", "open-post-details"]);
 
 
 const props = defineProps({
@@ -115,7 +115,6 @@ const blacklist = useBlacklistStore();
 const posts = usePostsStore();
 const shortcutService = useShortcutService();
 
-const dialog = ref<Vue>();
 const lastFullscreenId = ref<number | null>();
 const isZoomed = ref(false);
 const postIsBlacklisted = computed(() =>
@@ -186,7 +185,7 @@ const showPreviousImage = () => {
 };
 
 const updateFavorite = (favorited: (current: boolean) => boolean) => () =>
-  props.current && !props.current?.__meta.isFavoriteLoading && props.current.is_favorited !== favorited(props.current.is_favorited) && context.emit("set-post-favorite", {
+  props.current && !props.current?.__meta.isFavoriteLoading && props.current.is_favorited !== favorited(props.current.is_favorited) && emit("set-post-favorite", {
     postId: props.current.id,
     favorited: favorited(props.current.is_favorited),
   } as Parameters<ReturnType<typeof usePostListManager>["setPostFavorite"]>["0"]);

src/Post/FullscreenDialog.vue

@@ -1,20 +1,14 @@
 <template>
   <div>
-    <post-button
-      :post="post"
-      v-for="(button, idx) in buttons"
-      :key="idx"
-      :type="button"
+    <post-button :post="post" v-for="(button, idx) in buttons" :key="idx" :type="button"
       @open-post-details="$emit('open-post-details', $event)"
       @open-post-fullscreen="$emit('open-post-fullscreen', $event)"
-      @set-post-favorite="$emit('set-post-favorite', $event)"
-    />
+      @set-post-favorite="$emit('set-post-favorite', $event)" />
   </div>
 </template>
 
 <script lang="ts">
 import type { ButtonType } from "@/services/types";
-import { Post } from "@/worker/api";
 import type { EnhancedPost } from "@/worker/ApiService";
 import type { PropType } from "vue";
 import { defineComponent } from "vue";

src/Post/PostButtons.vue

@@ -2,20 +2,23 @@
   <div>
     <portal to="toolbar">
       <div style="display: flex; align-items: center; flex-grow: 999;">
-        <tag-search v-view-transition-name="'tagsearch'" style="flex: 1 1 auto" :tags="tags" @add-tag="addTag" @remove-tag="removeTag"
-          @confirm-search="updateQuery() && onSearchClick()" label="Tags" />
-        <v-btn icon @click="updateQuery() && onSearchClick()" :loading="loading">
+        <tag-search v-view-transition-name="'tagsearch'" style="flex: 1 1 auto" :tags="tags" @add-tag="addTag"
+          @remove-tag="removeTag" @confirm-search="updateQuery(), onSearchClick()" label="Tags" />
+        <v-btn icon @click="updateQuery(), onSearchClick()" :loading="loading">
           <v-icon>mdi-magnify</v-icon>
         </v-btn>
-        <v-menu location="bottom left" max-height="300" offset-y transition="slide-y-transition"
-          v-if="mdAndUp">
+        <v-menu location="bottom left" max-height="300" offset-y transition="slide-y-transition" v-if="mdAndUp">
           <template #activator="{ props }">
             <v-btn v-bind="props" icon>
               <v-icon>mdi-history</v-icon>
             </v-btn>
           </template>
-          <history-list :entries="historyEntries" @delete-entry="removeHistoryEntry($event)"
-            @click-entry="onHistoryEntryClick" />
+          <v-card>
+            <v-card-text>
+              <history-list :entries="historyEntries" @delete-entry="removeHistoryEntry($event)"
+                @click-entry="onHistoryEntryClick" />
+            </v-card-text>
+          </v-card>
         </v-menu>
       </div>
     </portal>
@@ -61,7 +64,7 @@ const { tags, addTag, removeTag, updateQuery, query, setTags } =
 const urlStore = useUrlStore();
 const route = useRoute();
 
-const {removeRouterQuery, updateRouterQuery} = useRouterQueryHelpers();
+const { removeRouterQuery, updateRouterQuery } = useRouterQueryHelpers();
 
 const {
   loadPreviousPage,

src/Post/PostsPage.vue

@@ -1,22 +1,7 @@
 <template>
-  <div
-    ref="middle"
-    class="middle bg-black"
-    @wheel="onScroll"
-    @mousewheel="onScroll"
-  >
-    <div
-      ref="overflow"
-      class="overflow"
-      @mousedown.prevent="onMouseDown"
-      @mouseup="onMouseUp"
-    >
-      <div
-        :style="containerStyle"
-        ref="zoom"
-        class="zoom-container text-center"
-        style="position: relative"
-      >
+  <div ref="middle" class="middle bg-black" @wheel="onScroll" @mousewheel="onScroll">
+    <div ref="overflow" class="overflow" @mousedown.prevent="onMouseDown" @mouseup="onMouseUp">
+      <div :style="containerStyle" ref="zoom" class="zoom-container text-center" style="position: relative">
         <slot />
       </div>
     </div>
@@ -48,8 +33,8 @@ export default defineComponent({
       startLevel: 0,
     };
 
-    const middle = ref<Element>();
-    const zoom = ref<Element>();
+    const middle = ref<HTMLElement>();
+    const zoom = ref<HTMLElement>();
 
     const currentZoom = reactive(clone(initialZoom));
 
@@ -64,7 +49,7 @@ export default defineComponent({
         hammer.destroy();
         hammer = null;
       }
-      if(!middle.value) return;
+      if (!middle.value) return;
       hammer = new Hammer.Manager(middle.value, {
         recognizers: [
           [Hammer.Tap],
@@ -77,16 +62,16 @@ export default defineComponent({
           [Hammer.Pinch, { enable: true, threshold: 0.01 }, ["pan"]],
         ],
       });
-      hammer.on("swipeleft", (event) => {
+      hammer.on("swipeleft", () => {
         context.emit("swipe-left", zoomInfo.value);
       });
-      hammer.on("swiperight", (event) => {
+      hammer.on("swiperight", () => {
         context.emit("swipe-right", zoomInfo.value);
       });
-      hammer.on("swipedown", (event) => {
+      hammer.on("swipedown", () => {
         context.emit("swipe-down", zoomInfo.value);
       });
-      hammer.on("swipeup", (event) => {
+      hammer.on("swipeup", () => {
         context.emit("swipe-up", zoomInfo.value);
       });
       hammer.on("pinchstart", () => {
@@ -106,7 +91,7 @@ export default defineComponent({
     };
 
     const constrainZoom = () => {
-      if(!middle.value || !zoom.value) return;
+      if (!middle.value || !zoom.value) return;
       const padding = 0;
       const constraints = {
         left: {
@@ -203,9 +188,8 @@ export default defineComponent({
       const zoom = currentZoom;
       const style = {
         "transform-origin": "top left",
-        transform: `translate(${-zoom.left}px, ${-zoom.top}px) scale(${
-          zoom.level
-        })`,
+        transform: `translate(${-zoom.left}px, ${-zoom.top}px) scale(${zoom.level
+          })`,
         display: "block",
       };
       return style;

src/Post/ZoomPanImage.vue

@@ -1,9 +1,5 @@
 <template>
-  <v-data-table
-    disable-sort
-    :headers="headers"
-    :items="shortcuts"
-  >
+  <v-data-table disable-sort :headers="headers" :items="shortcuts">
     <template #top>
       <div class="pa-2">
         <v-dialog v-model="dialog" max-width="500px">
@@ -21,23 +17,13 @@
               <v-container>
                 <v-row>
                   <v-col cols="12" sm="6">
-                    <v-select
-                      :items="actions"
-                      v-model="editedItem.action"
-                      label="Action"
-                    />
+                    <v-select :items="actions" v-model="editedItem.action" label="Action" />
                   </v-col>
                   <v-col cols="12" sm="6">
-                    <v-text-field
-                      v-model="editedItem.sequence"
-                      label="Recorded sequence"
-                      readonly
-                    />
+                    <v-text-field v-model="editedItem.sequence" label="Recorded sequence" readonly />
                   </v-col>
                   <v-col cols="12">
-                    <keyboard-shortcut-recorder
-                      @recorded="editedItem.sequence = $event"
-                    />
+                    <keyboard-shortcut-recorder @recorded="editedItem.sequence = $event" />
                   </v-col>
                 </v-row>
               </v-container>
@@ -89,13 +75,14 @@ import {
 import { clone } from "lodash";
 import KeyboardShortcutRecorder from "./KeyboardShortcutRecorder.vue";
 import { useShortcutStore } from "@/services";
+import type { DataTableHeader } from "vuetify";
 
 export default defineComponent({
   props: {},
   components: { KeyboardShortcutRecorder },
   setup(props, context) {
     const shortcutStore = useShortcutStore();
-    const headers = [
+    const headers: DataTableHeader[] = [
       { title: "Action", value: "action" },
       { title: "Sequence", value: "sequence" },
       { title: "", value: "buttons", align: "end" },