Rearchitecture for v0.4.0 (#197)

* feat: database redist support

* feat: rearchitecture of database schemas, migration reset, and #180

* feat: import redists

* fix: giantbomb logging bug

* feat: partial user platform support + statusMessage -> message

* feat: add user platform filters to store view

* fix: sanitize svg uploads

... copilot suggested this

I feel dirty.

* feat: beginnings of platform & redist management

* feat: add server side redist patching

* fix: update drop-base commit

* feat: import of custom platforms & file extensions

* fix: redelete platform

* fix: remove platform

* feat: uninstall commands, new R UI

* checkpoint: before migrating to nuxt v4

* update to nuxt 4

* fix: fixes for Nuxt v4 update

* fix: remaining type issues

* feat: initial feedback to import other kinds of versions

* working commit

* fix: lint

* feat: redist import

app/components/Directory/Library.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="flex grow flex-col overflow-y-auto px-6 py-4">
+    <span class="inline-flex items-center gap-x-2 font-semibold text-zinc-100">
+      <Bars3Icon class="size-6" /> {{ $t("userHeader.links.library") }}
+    </span>
+
+    <!-- Search bar -->
+    <div class="mt-5 relative">
+      <input
+        id="search"
+        v-model="searchQuery"
+        type="text"
+        name="search"
+        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="$t('library.search')"
+      />
+      <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"
+      />
+    </div>
+
+    <TransitionGroup
+      v-if="filteredLibrary.length > 0"
+      name="list"
+      tag="ul"
+      role="list"
+      class="mt-2 space-y-0.5"
+    >
+      <li v-for="game in filteredLibrary" :key="game.id" class="flex">
+        <NuxtLink
+          :to="`/library/game/${game.id}`"
+          class="flex flex-row items-center w-full p-2 rounded-md transition-all duration-200 hover:bg-zinc-800 hover:scale-105 hover:shadow-lg active:scale-95"
+        >
+          <img
+            :src="useObject(game.mIconObjectId)"
+            class="h-5 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"
+            >
+              {{ game.mName }}
+            </p>
+          </div>
+        </NuxtLink>
+      </li>
+    </TransitionGroup>
+
+    <p
+      v-else
+      class="text-zinc-600 text-sm font-display font-bold uppercase text-center mt-8"
+    >
+      {{ !!searchQuery ? $t("common.noResults") : $t("library.noGames") }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Bars3Icon, MagnifyingGlassIcon } from "@heroicons/vue/24/solid";
+
+const library = await useLibrary();
+
+const searchQuery = ref("");
+
+const filteredLibrary = computed(() =>
+  library.value.entries
+    .map((e) => e.game)
+    .filter((e) =>
+      e.mName.toLowerCase().includes(searchQuery.value.toLowerCase()),
+    ),
+);
+</script>