cleanup and game UI beginnings

pages/library.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="flex flex-row h-full">
+    <div class="flex-none h-full w-64 bg-zinc-950 px-2 py-1">
+      <ul class="flex flex-col gap-y-1">
+        <NuxtLink
+          v-for="(nav, navIdx) in navigation"
+          :key="nav.route"
+          :class="[
+            'transition group rounded flex justify-between gap-x-6 py-2 px-3',
+            navIdx === currentNavigationIndex ? 'bg-zinc-900' : '',
+          ]"
+          :href="nav.route"
+        >
+          <div class="flex items-center min-w-0 gap-x-2">
+            <img
+              class="h-5 w-5 flex-none object-cover rounded-sm bg-zinc-900"
+              :src="icons[navIdx]"
+              alt=""
+            />
+            <div class="min-w-0 flex-auto">
+              <p
+                :class="[
+                  navIdx === currentNavigationIndex
+                    ? 'text-zinc-100'
+                    : 'text-zinc-400 group-hover:text-zinc-300',
+                  'transition text-sm font-display leading-6',
+                ]"
+              >
+                {{ nav.label }}
+              </p>
+            </div>
+          </div>
+        </NuxtLink>
+      </ul>
+    </div>
+    <div class="grow">
+      <NuxtPage />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Game } from "@prisma/client";
+import { invoke } from "@tauri-apps/api/core";
+import type { NavigationItem } from "~/types";
+
+const rawGames = await invoke<string>("fetch_library");
+const games: Array<Game> = JSON.parse(rawGames);
+const icons = await Promise.all(games.map((e) => useObject(e.mIconId)));
+
+const navigation = games.map((e) => {
+  const item: NavigationItem = {
+    label: e.mName,
+    route: `/library/${e.id}`,
+    prefix: `/library/${e.id}`,
+  };
+  return item;
+});
+
+const currentNavigationIndex = useCurrentNavigationIndex(navigation);
+</script>

pages/library/[id]/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <div
+    class="mx-auto w-full relative flex flex-col justify-center pt-64 z-10 overflow-hidden"
+  >
+    <!-- banner image -->
+    <div class="absolute flex top-0 h-fit inset-x-0 -z-[20]">
+      <img :src="bannerUrl" class="w-full h-auto object-cover" />
+      <div
+        class="absolute inset-0 bg-gradient-to-b from-transparent to-50% to-zinc-900"
+      />
+    </div>
+    <!-- main page -->
+    <div class="w-full min-h-screen mx-auto bg-zinc-900 px-16 py-12"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Game } from "@prisma/client";
+import { invoke } from "@tauri-apps/api/core";
+
+const route = useRoute();
+const id = route.params.id;
+
+const rawGame = await invoke<string>("fetch_game", { id: id });
+const game: Game = JSON.parse(rawGame);
+
+const bannerUrl = await useObject(game.mBannerId);
+</script>

pages/library/index.vue

@@ -0,0 +1,3 @@
+<template>
+  
+</template>