From c722a54132d5e6212dd20baee8445cfbd5220d24 Mon Sep 17 00:00:00 2001
From: Aden Lindsay <140392385+AdenMGB@users.noreply.github.com>
Date: Fri, 27 Dec 2024 13:39:50 +1030
Subject: [PATCH 1/2] Delete pages/library.vue

---
 pages/library.vue | 59 -----------------------------------------------
 1 file changed, 59 deletions(-)
 delete mode 100644 pages/library.vue

diff --git a/pages/library.vue b/pages/library.vue
deleted file mode 100644
index 8acd519..0000000
--- a/pages/library.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <div class="flex flex-row h-full">
-    <div class="flex-none max-h-full overflow-y-auto 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-auto 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',
-                  'truncate transition text-sm font-display leading-6',
-                ]"
-              >
-                {{ nav.label }}
-              </p>
-            </div>
-          </div>
-        </NuxtLink>
-      </ul>
-    </div>
-    <div class="grow overflow-y-auto">
-      <NuxtPage />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { invoke } from "@tauri-apps/api/core";
-import type { Game, NavigationItem } from "~/types";
-
-const games: Array<Game> = await invoke("fetch_library");
-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>

From dcb2c0f004af36009c05656b06e5a55ab22d4e9d Mon Sep 17 00:00:00 2001
From: Aden Lindsay <140392385+AdenMGB@users.noreply.github.com>
Date: Fri, 27 Dec 2024 13:40:24 +1030
Subject: [PATCH 2/2] Add files via upload

---
 pages/library.vue | 52 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 pages/library.vue

diff --git a/pages/library.vue b/pages/library.vue
new file mode 100644
index 0000000..a1838d9
--- /dev/null
+++ b/pages/library.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="flex flex-row h-full">
+    <div class="flex-none max-h-full overflow-y-auto 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-all duration-200 rounded-lg flex items-center py-1.5 px-3',
+            navIdx === currentNavigationIndex 
+              ? 'bg-zinc-800 text-zinc-100' 
+              : 'bg-zinc-900/50 text-zinc-400 hover:bg-zinc-800/70 hover:text-zinc-300',
+          ]"
+          :href="nav.route"
+        >
+          <div class="flex items-center w-full gap-x-3">
+            <img
+              class="h-8 w-10 flex-none object-cover bg-zinc-900"
+              :src="icons[navIdx]"
+              alt=""
+            />
+            <p class="truncate text-sm font-display leading-6 flex-1">
+              {{ nav.label }}
+            </p>
+          </div>
+        </NuxtLink>
+      </ul>
+    </div>
+    <div class="grow overflow-y-auto">
+      <NuxtPage />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { invoke } from "@tauri-apps/api/core";
+import type { Game, NavigationItem } from "~/types";
+
+const games: Array<Game> = await invoke("fetch_library");
+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>