feat(library ui): add installed ui in the library menu

composables/game.ts

@@ -12,7 +12,7 @@ export type SerializedGameStatus = [
   OptionGameStatus | null
 ];
 
-const parseStatus = (status: SerializedGameStatus): GameStatus => {
+export const parseStatus = (status: SerializedGameStatus): GameStatus => {
   if (status[0]) {
     return {
       type: status[0].type,

pages/library.vue

@@ -1,21 +1,25 @@
 <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">
+    <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',
+            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="h-8 w-10 flex-none object-cover bg-zinc-900"
+              class="size-6 flex-none object-cover bg-zinc-900 rounded"
               :src="icons[navIdx]"
               alt=""
             />
@@ -34,16 +38,26 @@
 
 <script setup lang="ts">
 import { invoke } from "@tauri-apps/api/core";
-import type { Game, NavigationItem } from "~/types";
+import { GameStatusEnum, type Game, type NavigationItem } from "~/types";
 
-const games: Array<Game> = await invoke("fetch_library");
-const icons = await Promise.all(games.map((e) => useObject(e.mIconId)));
+const rawGames: Array<Game> = await invoke("fetch_library");
+const games = await Promise.all(rawGames.map((e) => useGame(e.id)));
+const icons = await Promise.all(
+  games.map(({ game, status }) => useObject(game.mIconId))
+);
 
-const navigation = games.map((e) => {
-  const item: NavigationItem = {
-    label: e.mName,
-    route: `/library/${e.id}`,
-    prefix: `/library/${e.id}`,
+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;
 });

src-tauri/src/state.rs

@@ -1,6 +1,5 @@
-
 use crate::{
-    db::{GameStatus, GameTransientStatus},
+    db::{Database, GameStatus, GameTransientStatus},
     DB,
 };
 
@@ -10,9 +9,14 @@ pub struct GameStatusManager {}
 impl GameStatusManager {
     pub fn fetch_state(game_id: &String) -> GameStatusWithTransient {
         let db_lock = DB.borrow_data().unwrap();
+        GameStatusManager::fetch_state_with_db(game_id, &db_lock)
+    }
+    pub fn fetch_state_with_db(
+        game_id: &String,
+        db_lock: &Database,
+    ) -> GameStatusWithTransient {
         let offline_state = db_lock.games.statuses.get(game_id).cloned();
         let online_state = db_lock.games.transient_statuses.get(game_id).cloned();
-        drop(db_lock);
 
         if online_state.is_some() {
             return (None, online_state);