From 1c1e1f84e96737e9a05800e4321256af6fcd4690 Mon Sep 17 00:00:00 2001
From: seethruhead <shane.keulen@gmail.com>
Date: Thu, 26 Dec 2024 22:16:50 -0500
Subject: [PATCH 1/5] adds nvm rc!

---
 desktop/.nvmrc | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 desktop/.nvmrc

diff --git a/desktop/.nvmrc b/desktop/.nvmrc
new file mode 100644
index 00000000..40994076
--- /dev/null
+++ b/desktop/.nvmrc
@@ -0,0 +1 @@
+23

From a0e87230775badbf5dbee5c7cdbf22b9de41aef4 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Fri, 27 Dec 2024 14:03:06 +1100
Subject: [PATCH 2/5] feat(install modal): add note about more install dirs

---
 desktop/components/PageWidget.vue    |   7 +
 desktop/pages/library/[id]/index.vue | 498 ++++++++++++---------------
 2 files changed, 226 insertions(+), 279 deletions(-)
 create mode 100644 desktop/components/PageWidget.vue

diff --git a/desktop/components/PageWidget.vue b/desktop/components/PageWidget.vue
new file mode 100644
index 00000000..ad9428b5
--- /dev/null
+++ b/desktop/components/PageWidget.vue
@@ -0,0 +1,7 @@
+<template>
+  <NuxtLink
+    class="inline-flex items-center gap-x-2 px-1 py-0.5 rounded bg-blue-900 text-zinc-100 hover:bg-blue-800"
+  >
+    <slot />
+  </NuxtLink>
+</template>
diff --git a/desktop/pages/library/[id]/index.vue b/desktop/pages/library/[id]/index.vue
index 4cc2e7ea..2588a044 100644
--- a/desktop/pages/library/[id]/index.vue
+++ b/desktop/pages/library/[id]/index.vue
@@ -39,285 +39,221 @@
     </div>
   </div>
 
-  <TransitionRoot as="template" :show="installFlowOpen">
-    <Dialog class="relative z-50" @close="installFlowOpen = false">
-      <TransitionChild
-        as="template"
-        enter="ease-out duration-300"
-        enter-from="opacity-0"
-        enter-to="opacity-100"
-        leave="ease-in duration-200"
-        leave-from="opacity-100"
-        leave-to="opacity-0"
-      >
-        <div
-          class="fixed inset-0 bg-zinc-950 bg-opacity-75 transition-opacity"
-        />
-      </TransitionChild>
-
-      <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
-        <div
-          class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
-        >
-          <TransitionChild
-            as="template"
-            enter="ease-out duration-300"
-            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enter-to="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leave-from="opacity-100 translate-y-0 sm:scale-100"
-            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          >
-            <form
-              @submit.prevent="() => install()"
-              class="relative transform rounded-lg bg-zinc-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
-            >
-              <div class="px-4 pb-4 pt-5 space-y-4 sm:p-6 sm:pb-4">
-                <div class="sm:flex sm:items-start">
-                  <div class="mt-3 text-center sm:mt-0 sm:text-left">
-                    <DialogTitle
-                      as="h3"
-                      class="text-base font-semibold text-zinc-100"
-                      >Install {{ game.mName }}?
-                    </DialogTitle>
-                    <div class="mt-2">
-                      <p class="text-sm text-zinc-400">
-                        Drop will add {{ game.mName }} to the queue to be
-                        downloaded. While downloading, Drop may use up a large
-                        amount of resources, particularly network bandwidth and
-                        CPU utilisation.
-                      </p>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="space-y-6">
-                  <div v-if="versionOptions && versionOptions.length > 0">
-                    <Listbox as="div" v-model="installVersionIndex">
-                      <ListboxLabel
-                        class="block text-sm/6 font-medium text-zinc-100"
-                        >Version</ListboxLabel
-                      >
-                      <div class="relative mt-2">
-                        <ListboxButton
-                          class="relative w-full cursor-default rounded-md bg-zinc-800 py-1.5 pl-3 pr-10 text-left text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 focus:outline-none focus:ring-2 focus:ring-blue-600 sm:text-sm/6"
-                        >
-                          <span class="block truncate"
-                            >{{
-                              versionOptions[installVersionIndex].versionName
-                            }}
-                            on
-                            {{
-                              versionOptions[installVersionIndex].platform
-                            }}</span
-                          >
-                          <span
-                            class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
-                          >
-                            <ChevronUpDownIcon
-                              class="h-5 w-5 text-gray-400"
-                              aria-hidden="true"
-                            />
-                          </span>
-                        </ListboxButton>
-
-                        <transition
-                          leave-active-class="transition ease-in duration-100"
-                          leave-from-class="opacity-100"
-                          leave-to-class="opacity-0"
-                        >
-                          <ListboxOptions
-                            class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
-                          >
-                            <ListboxOption
-                              as="template"
-                              v-for="(version, versionIdx) in versionOptions"
-                              :key="version.versionName"
-                              :value="versionIdx"
-                              v-slot="{ active, selected }"
-                            >
-                              <li
-                                :class="[
-                                  active
-                                    ? 'bg-blue-600 text-white'
-                                    : 'text-zinc-300',
-                                  'relative cursor-default select-none py-2 pl-3 pr-9',
-                                ]"
-                              >
-                                <span
-                                  :class="[
-                                    selected
-                                      ? 'font-semibold text-zinc-100'
-                                      : 'font-normal',
-                                    'block truncate',
-                                  ]"
-                                  >{{ version.versionName }} on
-                                  {{ version.platform }}</span
-                                >
-
-                                <span
-                                  v-if="selected"
-                                  :class="[
-                                    active ? 'text-white' : 'text-blue-600',
-                                    'absolute inset-y-0 right-0 flex items-center pr-4',
-                                  ]"
-                                >
-                                  <CheckIcon
-                                    class="h-5 w-5"
-                                    aria-hidden="true"
-                                  />
-                                </span>
-                              </li>
-                            </ListboxOption>
-                          </ListboxOptions>
-                        </transition>
-                      </div>
-                    </Listbox>
-                  </div>
-                  <div v-else class="mt-1 rounded-md bg-red-600/10 p-4">
-                    <div class="flex">
-                      <div class="flex-shrink-0">
-                        <XCircleIcon
-                          class="h-5 w-5 text-red-600"
-                          aria-hidden="true"
-                        />
-                      </div>
-                      <div class="ml-3">
-                        <h3 class="text-sm font-medium text-red-600">
-                          There are no supported versions to install. Please
-                          contact your server admin or try again later.
-                        </h3>
-                      </div>
-                    </div>
-                  </div>
-                  <div v-if="installDirs">
-                    <Listbox as="div" v-model="installDir">
-                      <ListboxLabel
-                        class="block text-sm/6 font-medium text-zinc-100"
-                        >Install to</ListboxLabel
-                      >
-                      <div class="relative mt-2">
-                        <ListboxButton
-                          class="relative w-full cursor-default rounded-md bg-zinc-800 py-1.5 pl-3 pr-10 text-left text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 focus:outline-none focus:ring-2 focus:ring-blue-600 sm:text-sm/6"
-                        >
-                          <span class="block truncate">{{
-                            installDirs[installDir]
-                          }}</span>
-                          <span
-                            class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
-                          >
-                            <ChevronUpDownIcon
-                              class="h-5 w-5 text-gray-400"
-                              aria-hidden="true"
-                            />
-                          </span>
-                        </ListboxButton>
-
-                        <transition
-                          leave-active-class="transition ease-in duration-100"
-                          leave-from-class="opacity-100"
-                          leave-to-class="opacity-0"
-                        >
-                          <ListboxOptions
-                            class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
-                          >
-                            <ListboxOption
-                              as="template"
-                              v-for="(dir, dirIdx) in installDirs"
-                              :key="dir"
-                              :value="dirIdx"
-                              v-slot="{ active, selected }"
-                            >
-                              <li
-                                :class="[
-                                  active
-                                    ? 'bg-blue-600 text-white'
-                                    : 'text-zinc-300',
-                                  'relative cursor-default select-none py-2 pl-3 pr-9',
-                                ]"
-                              >
-                                <span
-                                  :class="[
-                                    selected
-                                      ? 'font-semibold text-zinc-100'
-                                      : 'font-normal',
-                                    'block truncate',
-                                  ]"
-                                  >{{ dir }}</span
-                                >
-
-                                <span
-                                  v-if="selected"
-                                  :class="[
-                                    active ? 'text-white' : 'text-blue-600',
-                                    'absolute inset-y-0 right-0 flex items-center pr-4',
-                                  ]"
-                                >
-                                  <CheckIcon
-                                    class="h-5 w-5"
-                                    aria-hidden="true"
-                                  />
-                                </span>
-                              </li>
-                            </ListboxOption>
-                          </ListboxOptions>
-                        </transition>
-                      </div>
-                    </Listbox>
-                  </div>
-                </div>
-
-                <div
-                  v-if="installError"
-                  class="mt-1 rounded-md bg-red-600/10 p-4"
-                >
-                  <div class="flex">
-                    <div class="flex-shrink-0">
-                      <XCircleIcon
-                        class="h-5 w-5 text-red-600"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <div class="ml-3">
-                      <h3 class="text-sm font-medium text-red-600">
-                        {{ installError }}
-                      </h3>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="rounded-b-lg bg-zinc-800 px-4 py-3 sm:flex sm:gap-x-2 sm:flex-row-reverse sm:px-6"
-              >
-                <LoadingButton
-                  :disabled="
-                    !(
-                      versionOptions &&
-                      versionOptions.length > 0 &&
-                      !installDir
-                    )
-                  "
-                  :loading="installLoading"
-                  type="submit"
-                  class="w-full sm:w-fit"
-                >
-                  Install
-                </LoadingButton>
-                <button
-                  type="button"
-                  class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
-                  @click="installFlowOpen = false"
-                  ref="cancelButtonRef"
-                >
-                  Cancel
-                </button>
-              </div>
-            </form>
-          </TransitionChild>
+  <ModalTemplate v-model="installFlowOpen">
+    <template #default>
+      <div class="sm:flex sm:items-start">
+        <div class="mt-3 text-center sm:mt-0 sm:text-left">
+          <DialogTitle as="h3" class="text-base font-semibold text-zinc-100"
+            >Install {{ game.mName }}?
+          </DialogTitle>
+          <div class="mt-2">
+            <p class="text-sm text-zinc-400">
+              Drop will add {{ game.mName }} to the queue to be downloaded.
+              While downloading, Drop may use up a large amount of resources,
+              particularly network bandwidth and CPU utilisation.
+            </p>
+          </div>
         </div>
       </div>
-    </Dialog>
-  </TransitionRoot>
+
+      <form @submit.prevent="() => install()" class="space-y-6">
+        <div v-if="versionOptions && versionOptions.length > 0">
+          <Listbox as="div" v-model="installVersionIndex">
+            <ListboxLabel class="block text-sm/6 font-medium text-zinc-100"
+              >Version</ListboxLabel
+            >
+            <div class="relative mt-2">
+              <ListboxButton
+                class="relative w-full cursor-default rounded-md bg-zinc-800 py-1.5 pl-3 pr-10 text-left text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 focus:outline-none focus:ring-2 focus:ring-blue-600 sm:text-sm/6"
+              >
+                <span class="block truncate"
+                  >{{ versionOptions[installVersionIndex].versionName }}
+                  on
+                  {{ versionOptions[installVersionIndex].platform }}</span
+                >
+                <span
+                  class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+                >
+                  <ChevronUpDownIcon
+                    class="h-5 w-5 text-gray-400"
+                    aria-hidden="true"
+                  />
+                </span>
+              </ListboxButton>
+
+              <transition
+                leave-active-class="transition ease-in duration-100"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+              >
+                <ListboxOptions
+                  class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+                >
+                  <ListboxOption
+                    as="template"
+                    v-for="(version, versionIdx) in versionOptions"
+                    :key="version.versionName"
+                    :value="versionIdx"
+                    v-slot="{ active, selected }"
+                  >
+                    <li
+                      :class="[
+                        active ? 'bg-blue-600 text-white' : 'text-zinc-300',
+                        'relative cursor-default select-none py-2 pl-3 pr-9',
+                      ]"
+                    >
+                      <span
+                        :class="[
+                          selected
+                            ? 'font-semibold text-zinc-100'
+                            : 'font-normal',
+                          'block truncate',
+                        ]"
+                        >{{ version.versionName }} on
+                        {{ version.platform }}</span
+                      >
+
+                      <span
+                        v-if="selected"
+                        :class="[
+                          active ? 'text-white' : 'text-blue-600',
+                          'absolute inset-y-0 right-0 flex items-center pr-4',
+                        ]"
+                      >
+                        <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                      </span>
+                    </li>
+                  </ListboxOption>
+                </ListboxOptions>
+              </transition>
+            </div>
+          </Listbox>
+        </div>
+        <div v-else class="mt-1 rounded-md bg-red-600/10 p-4">
+          <div class="flex">
+            <div class="flex-shrink-0">
+              <XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
+            </div>
+            <div class="ml-3">
+              <h3 class="text-sm font-medium text-red-600">
+                There are no supported versions to install. Please contact your
+                server admin or try again later.
+              </h3>
+            </div>
+          </div>
+        </div>
+        <div v-if="installDirs">
+          <Listbox as="div" v-model="installDir">
+            <ListboxLabel class="block text-sm/6 font-medium text-zinc-100"
+              >Install to</ListboxLabel
+            >
+            <div class="relative mt-2">
+              <ListboxButton
+                class="relative w-full cursor-default rounded-md bg-zinc-800 py-1.5 pl-3 pr-10 text-left text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 focus:outline-none focus:ring-2 focus:ring-blue-600 sm:text-sm/6"
+              >
+                <span class="block truncate">{{
+                  installDirs[installDir]
+                }}</span>
+                <span
+                  class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+                >
+                  <ChevronUpDownIcon
+                    class="h-5 w-5 text-gray-400"
+                    aria-hidden="true"
+                  />
+                </span>
+              </ListboxButton>
+
+              <transition
+                leave-active-class="transition ease-in duration-100"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+              >
+                <ListboxOptions
+                  class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+                >
+                  <ListboxOption
+                    as="template"
+                    v-for="(dir, dirIdx) in installDirs"
+                    :key="dir"
+                    :value="dirIdx"
+                    v-slot="{ active, selected }"
+                  >
+                    <li
+                      :class="[
+                        active ? 'bg-blue-600 text-white' : 'text-zinc-300',
+                        'relative cursor-default select-none py-2 pl-3 pr-9',
+                      ]"
+                    >
+                      <span
+                        :class="[
+                          selected
+                            ? 'font-semibold text-zinc-100'
+                            : 'font-normal',
+                          'block truncate',
+                        ]"
+                        >{{ dir }}</span
+                      >
+
+                      <span
+                        v-if="selected"
+                        :class="[
+                          active ? 'text-white' : 'text-blue-600',
+                          'absolute inset-y-0 right-0 flex items-center pr-4',
+                        ]"
+                      >
+                        <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                      </span>
+                    </li>
+                  </ListboxOption>
+                </ListboxOptions>
+              </transition>
+            </div>
+            <div class="text-zinc-400 text-sm mt-2">
+              Add more install directories in
+              <PageWidget to="/settings/downloads">
+                <WrenchIcon class="size-3" />
+                Settings
+              </PageWidget>
+            </div>
+          </Listbox>
+        </div>
+      </form>
+
+      <div v-if="installError" class="mt-1 rounded-md bg-red-600/10 p-4">
+        <div class="flex">
+          <div class="flex-shrink-0">
+            <XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
+          </div>
+          <div class="ml-3">
+            <h3 class="text-sm font-medium text-red-600">
+              {{ installError }}
+            </h3>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #buttons>
+      <LoadingButton
+        :disabled="
+          !(versionOptions && versionOptions.length > 0 && !installDir)
+        "
+        :loading="installLoading"
+        type="submit"
+        class="w-full sm:w-fit"
+      >
+        Install
+      </LoadingButton>
+      <button
+        type="button"
+        class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
+        @click="installFlowOpen = false"
+        ref="cancelButtonRef"
+      >
+        Cancel
+      </button>
+    </template>
+  </ModalTemplate>
 </template>
 
 <script setup lang="ts">
@@ -332,7 +268,11 @@ import {
   ListboxOption,
   ListboxOptions,
 } from "@headlessui/vue";
-import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import {
+  CheckIcon,
+  ChevronUpDownIcon,
+  WrenchIcon,
+} from "@heroicons/vue/20/solid";
 import { BuildingStorefrontIcon } from "@heroicons/vue/24/outline";
 import { XCircleIcon } from "@heroicons/vue/24/solid";
 import { invoke } from "@tauri-apps/api/core";
@@ -412,6 +352,6 @@ async function queue() {
 }
 
 async function uninstall() {
-  await invoke("uninstall_game", {gameId: game.value.id});
+  await invoke("uninstall_game", { gameId: game.value.id });
 }
 </script>

From 5fd17fa740a45c603df19bf3c1ec951ba13edbd4 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Fri, 27 Dec 2024 14:04:55 +1100
Subject: [PATCH 3/5] fix(install flow): clear stale data before requesting new

---
 desktop/pages/library/[id]/index.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/desktop/pages/library/[id]/index.vue b/desktop/pages/library/[id]/index.vue
index 2588a044..db754397 100644
--- a/desktop/pages/library/[id]/index.vue
+++ b/desktop/pages/library/[id]/index.vue
@@ -297,6 +297,8 @@ const versionOptions = ref<
 const installDirs = ref<undefined | Array<string>>();
 async function installFlow() {
   installFlowOpen.value = true;
+  versionOptions.value = undefined;
+  installDirs.value = undefined
 
   try {
     versionOptions.value = await invoke("fetch_game_verion_options", {

From 3d9c987fc55a096e05c12ceccd45a9ed6b0e45e1 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 4/5] Delete pages/library.vue

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

diff --git a/desktop/pages/library.vue b/desktop/pages/library.vue
deleted file mode 100644
index 8acd5193..00000000
--- a/desktop/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 1449b97369add24bf0fc7f1862291e0b206f153e 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 5/5] Add files via upload

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

diff --git a/desktop/pages/library.vue b/desktop/pages/library.vue
new file mode 100644
index 00000000..a1838d98
--- /dev/null
+++ b/desktop/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>