style(library): Re-designed Library UI with new features

pages/library.vue

@@ -1,78 +1,35 @@
 <template>
   <div class="flex flex-row h-full">
+    <!-- Sidebar -->
     <div
-      class="flex-none max-h-full overflow-y-auto w-64 bg-zinc-950 px-2 py-1"
+      class="flex-none max-h-full overflow-y-auto w-72 bg-zinc-950/50 backdrop-blur-xl px-4 py-3 border-r border-zinc-800/50"
     >
-      <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'
-              : nav.isInstalled.value
-              ? 'text-zinc-300 hover:bg-zinc-800/90 hover:text-zinc-200'
-              : 'text-zinc-500 hover:bg-zinc-800/70 hover:text-zinc-300',
-          ]"
-          :href="nav.route"
-        >
-          <div class="flex items-center w-full gap-x-3">
-            <img
-              class="size-6 flex-none object-cover bg-zinc-900 rounded"
-              :src="icons[navIdx]"
-              alt=""
-            />
-            <p class="truncate text-sm font-display leading-6 flex-1">
-              {{ nav.label }}
-            </p>
-          </div>
-        </NuxtLink>
-      </ul>
+      <LibrarySearch />
     </div>
     <div class="grow overflow-y-auto">
-      <NuxtPage :libraryDownloadError = "libraryDownloadError" />
+      <NuxtPage :libraryDownloadError="libraryDownloadError" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { invoke } from "@tauri-apps/api/core";
-import { GameStatusEnum, type Game, type NavigationItem } from "~/types";
-
 let libraryDownloadError = false;
+</script>
 
-async function calculateGames(): Promise<Game[]> {
-  try {
-    return await invoke("fetch_library");
-  }
-  catch(e) {
-    libraryDownloadError = true;
-    return new Array();
-  }
+<style scoped>
+.list-move,
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.3s ease;
 }
 
-const rawGames: Array<Game> = await calculateGames();
-const games = await Promise.all(rawGames.map((e) => useGame(e.id)));
-const icons = await Promise.all(
-  games.map(({ game, status }) => useObject(game.mIconId))
-);
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(-30px);
+}
 
-const navigation = games.map(({ game, status }) => {
-  const isInstalled = computed(
-    () =>
-      status.value.type == GameStatusEnum.Installed ||
-      status.value.type == GameStatusEnum.SetupRequired
-  );
-
-  const item = {
-    label: game.mName,
-    route: `/library/${game.id}`,
-    prefix: `/library/${game.id}`,
-    isInstalled,
-  };
-  return item;
-});
-
-const currentNavigationIndex = useCurrentNavigationIndex(navigation);
-</script>
+.list-leave-active {
+  position: absolute;
+}
+</style>