From 4b158fedb685efafd7a9fd09ac4af2de5e19b4a9 Mon Sep 17 00:00:00 2001
From: Aden Linday <lindsaya542@gmail.com>
Date: Mon, 5 Jan 2026 14:04:33 +1030
Subject: [PATCH 01/10] feat(library): add grid/list view toggle with settings
 persistence

---
 main/components/LibrarySearch.vue |  15 +-
 main/composables/library-view.ts  |  29 ++++
 main/pages/library/index.vue      | 279 ++++++++++++++++++++++++++++--
 main/pages/settings/interface.vue |  67 +++++--
 main/types.ts                     |   1 +
 src-tauri/database/src/models.rs  |   4 +-
 6 files changed, 367 insertions(+), 28 deletions(-)
 create mode 100644 main/composables/library-view.ts

diff --git a/main/components/LibrarySearch.vue b/main/components/LibrarySearch.vue
index d4beffaf..e5ffdd9b 100644
--- a/main/components/LibrarySearch.vue
+++ b/main/components/LibrarySearch.vue
@@ -25,6 +25,14 @@
       >
         <ArrowPathIcon class="size-4" />
       </button>
+      <button
+        @click="toggleView"
+        class="p-1.5 flex items-center justify-center transition-all duration-200 size-10 hover:scale-105 active:scale-95 rounded-lg bg-zinc-800/50 text-zinc-100 hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-950"
+        :title="libraryView === 'list' ? 'Switch to grid view' : 'Switch to list view'"
+      >
+        <Squares2X2Icon v-if="libraryView === 'list'" class="size-4" />
+        <Bars3Icon v-else class="size-4" />
+      </button>
     </div>
 
     <TransitionGroup name="list" tag="ul" class="flex flex-col gap-y-1.5">
@@ -52,7 +60,7 @@
         <DisclosurePanel as="dd" class="mt-2 flex flex-col gap-y-1.5">
           <NuxtLink
             v-for="item in nav.items"
-            :key="nav.id"
+            :key="item.id"
             :class="[
               'transition-all duration-300 rounded-lg flex items-center px-1 py-1.5 hover:scale-105 active:scale-95 hover:shadow-lg hover:shadow-zinc-950/50',
               currentNavigation == item.id
@@ -127,6 +135,8 @@ import {
   MagnifyingGlassIcon,
   MinusSmallIcon,
   PlusSmallIcon,
+  Squares2X2Icon,
+  Bars3Icon,
 } from "@heroicons/vue/20/solid";
 import { invoke } from "@tauri-apps/api/core";
 import {
@@ -169,6 +179,9 @@ const router = useRouter();
 const searchQuery = ref("");
 
 const loading = ref(false);
+
+// Use library view composable
+const { libraryView, toggleView } = useLibraryView();
 const games: {
   [key: string]: { game: Game; status: Ref<GameStatus, GameStatus> };
 } = {};
diff --git a/main/composables/library-view.ts b/main/composables/library-view.ts
new file mode 100644
index 00000000..59ed79cf
--- /dev/null
+++ b/main/composables/library-view.ts
@@ -0,0 +1,29 @@
+import { invoke } from "@tauri-apps/api/core";
+import type { Settings } from "~/types";
+
+export const useLibraryView = () => {
+  const libraryView = useState<"list" | "grid">("library-view", () => "list");
+
+  // Load initial value from settings if not already loaded
+  const state = libraryView.value;
+  if (state === "list") {
+    invoke<Settings>("fetch_settings").then((settings) => {
+      if (libraryView.value === "list") {
+        libraryView.value = (settings?.libraryView as "list" | "grid") || "list";
+      }
+    });
+  }
+
+  const toggleView = async () => {
+    const newView = libraryView.value === "list" ? "grid" : "list";
+    libraryView.value = newView;
+    await invoke("update_settings", {
+      newSettings: { libraryView: newView },
+    });
+  };
+
+  return {
+    libraryView,
+    toggleView,
+  };
+};
diff --git a/main/pages/library/index.vue b/main/pages/library/index.vue
index a23a7993..9ffd5aa3 100644
--- a/main/pages/library/index.vue
+++ b/main/pages/library/index.vue
@@ -1,19 +1,276 @@
 <template>
+  <div v-if="libraryView === 'grid'" class="h-full overflow-y-auto p-6">
+    <div
+      v-if="loading"
+      class="h-full flex items-center justify-center text-zinc-100"
+    >
+      <div role="status">
+        <svg
+          aria-hidden="true"
+          class="w-6 h-6 text-transparent animate-spin fill-zinc-600"
+          viewBox="0 0 100 101"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+            fill="currentColor"
+          />
+          <path
+            d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+            fill="currentFill"
+          />
+        </svg>
+        <span class="sr-only">Loading...</span>
+      </div>
+    </div>
+    <div
+      v-else
+      class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4"
+    >
+      <template v-for="collection in filteredNavigation" :key="collection.id">
+        <NuxtLink
+          v-for="item in collection.items"
+          :key="item.id"
+          :href="item.route"
+          :class="[
+            'group relative aspect-[3/4] transition-all duration-200 rounded-xl overflow-hidden',
+            'hover:scale-[1.02] active:scale-[0.98]',
+            'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900',
+            currentNavigation == item.id
+              ? 'ring-2 ring-blue-500 shadow-lg shadow-blue-500/20'
+              : 'ring-1 ring-zinc-800/50',
+          ]"
+        >
+          <!-- Blurred Background Image -->
+          <div class="absolute inset-0 z-0">
+            <!-- Cover Image (if available) -->
+            <img
+              v-if="covers[item.id]"
+              :src="covers[item.id]"
+              :alt="item.label"
+              class="w-full h-full object-cover blur-[2px] scale-105 transition-transform duration-300 group-hover:scale-110"
+            />
+            <!-- Fallback to Icon -->
+            <div
+              v-else
+              class="w-full h-full flex items-center justify-center bg-gradient-to-br from-zinc-800 to-zinc-900"
+            >
+              <img
+                class="w-2/3 h-2/3 object-contain blur-[2px] scale-105 transition-transform duration-300 group-hover:scale-110"
+                :src="icons[item.id]"
+                :alt="item.label"
+              />
+            </div>
+            <!-- Gradient Overlays -->
+            <div
+              class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-zinc-900/80 to-transparent opacity-90 transition-opacity duration-200 group-hover:opacity-70"
+            />
+            <div
+              class="absolute inset-0 bg-gradient-to-r from-zinc-900/95 via-zinc-900/80 to-transparent opacity-90 transition-opacity duration-200 group-hover:opacity-60"
+            />
+          </div>
+
+          <!-- Content Overlay -->
+          <div class="relative z-10 flex flex-col h-full p-4 justify-end">
+            <!-- Game Title -->
+            <h3
+              :class="[
+                'text-base font-display font-bold text-zinc-100 drop-shadow-lg mb-2 line-clamp-2',
+                'transition-colors duration-200',
+                currentNavigation == item.id
+                  ? 'text-zinc-100'
+                  : item.isInstalled.value
+                  ? 'text-zinc-100 group-hover:text-white'
+                  : 'text-zinc-300 group-hover:text-zinc-100',
+              ]"
+            >
+              {{ item.label }}
+            </h3>
 
-    <div class="h-full flex flex-col items-center justify-center">
-        <div class="text-center">
-            <div class="flex flex-col items-center gap-y-4">
-                <div class="p-4 rounded-xl bg-zinc-700/50 backdrop-blur-sm">
-                    <RocketLaunchIcon class="size-12 text-zinc-400" />
-                </div>
-                <div>
-                    <h3 class="text-xl font-display font-semibold text-zinc-100">Select a game</h3>
-                    <p class="mt-1 text-sm text-zinc-400">Choose a game from your library to view details</p>
-                </div>
+            <!-- Status Badge -->
+            <div class="flex items-center">
+              <span
+                :class="[
+                  'inline-flex items-center px-2 py-1 rounded-md text-[10px] font-bold uppercase font-display',
+                  'backdrop-blur-sm border shadow-lg',
+                  gameStatusTextStyle[games[item.id].status.value.type],
+                  currentNavigation == item.id
+                    ? 'bg-zinc-800/50 border-zinc-700/50 text-white'
+                    : 'bg-zinc-900/50 border-zinc-800/50',
+                ]"
+              >
+                {{ gameStatusText[games[item.id].status.value.type] }}
+              </span>
             </div>
+          </div>
+
+          <!-- Selected Indicator -->
+          <div
+            v-if="currentNavigation == item.id"
+            class="absolute top-3 right-3 z-20 w-2.5 h-2.5 rounded-full bg-blue-500 shadow-lg shadow-blue-500/50 ring-2 ring-blue-500/30"
+          />
+        </NuxtLink>
+      </template>
+    </div>
+  </div>
+  <div v-else class="h-full flex flex-col items-center justify-center">
+    <div class="text-center">
+      <div class="flex flex-col items-center gap-y-4">
+        <div class="p-4 rounded-xl bg-zinc-700/50 backdrop-blur-sm">
+          <RocketLaunchIcon class="size-12 text-zinc-400" />
+        </div>
+        <div>
+          <h3 class="text-xl font-display font-semibold text-zinc-100">
+            Select a game
+          </h3>
+          <p class="mt-1 text-sm text-zinc-400">
+            Choose a game from your library to view details
+          </p>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 <script setup lang="ts">
-import { RocketLaunchIcon } from '@heroicons/vue/24/outline';
+import { RocketLaunchIcon } from "@heroicons/vue/24/outline";
+import { invoke } from "@tauri-apps/api/core";
+import {
+  GameStatusEnum,
+  type Collection,
+  type Game,
+  type GameStatus,
+} from "~/types";
+import { listen } from "@tauri-apps/api/event";
+
+const { libraryView } = useLibraryView();
+
+const route = useRoute();
+const currentNavigation = computed(() => {
+  return route.path.slice("/library/".length);
+});
+
+// Style information
+const gameStatusTextStyle: { [key in GameStatusEnum]: string } = {
+  [GameStatusEnum.Installed]: "text-green-500",
+  [GameStatusEnum.Downloading]: "text-zinc-400",
+  [GameStatusEnum.Validating]: "text-blue-300",
+  [GameStatusEnum.Running]: "text-green-500",
+  [GameStatusEnum.Remote]: "text-zinc-700",
+  [GameStatusEnum.Queued]: "text-zinc-400",
+  [GameStatusEnum.Updating]: "text-zinc-400",
+  [GameStatusEnum.Uninstalling]: "text-zinc-100",
+  [GameStatusEnum.SetupRequired]: "text-yellow-500",
+  [GameStatusEnum.PartiallyInstalled]: "text-gray-400",
+};
+const gameStatusText: { [key in GameStatusEnum]: string } = {
+  [GameStatusEnum.Remote]: "Not installed",
+  [GameStatusEnum.Queued]: "Queued",
+  [GameStatusEnum.Downloading]: "Downloading...",
+  [GameStatusEnum.Validating]: "Validating...",
+  [GameStatusEnum.Installed]: "Installed",
+  [GameStatusEnum.Updating]: "Updating...",
+  [GameStatusEnum.Uninstalling]: "Uninstalling...",
+  [GameStatusEnum.SetupRequired]: "Setup required",
+  [GameStatusEnum.Running]: "Running",
+  [GameStatusEnum.PartiallyInstalled]: "Partially installed",
+};
+
+const loading = ref(false);
+const games: {
+  [key: string]: { game: Game; status: Ref<GameStatus, GameStatus> };
+} = {};
+const icons: { [key: string]: string } = {};
+const covers: { [key: string]: string } = {};
+const collections: Ref<Collection[]> = ref([]);
+
+async function calculateGames(clearAll = false, forceRefresh = false) {
+  if (clearAll) {
+    collections.value = [];
+    loading.value = true;
+  }
+  const newGames = await invoke<Game[]>("fetch_library", {
+    hardRefresh: forceRefresh,
+  });
+  const otherCollections = await invoke<Collection[]>("fetch_collections", {
+    hardRefresh: forceRefresh,
+  });
+  const allGames = [
+    ...newGames,
+    ...otherCollections
+      .map((e) => e.entries)
+      .flat()
+      .map((e) => e.game),
+  ].filter((v, i, a) => a.indexOf(v) === i);
+
+  for (const game of allGames) {
+    if (games[game.id]) continue;
+    games[game.id] = await useGame(game.id);
+  }
+  for (const game of allGames) {
+    if (icons[game.id]) continue;
+    icons[game.id] = await useObject(game.mIconObjectId);
+  }
+  for (const game of allGames) {
+    if (covers[game.id]) continue;
+    covers[game.id] = await useObject(game.mCoverObjectId);
+  }
+
+  const libraryCollection = {
+    id: "library",
+    name: "Library",
+    isDefault: true,
+    entries: newGames.map((e) => ({ gameId: e.id, game: e })),
+  } satisfies Collection;
+
+  loading.value = false;
+  collections.value = [libraryCollection, ...otherCollections];
+}
+
+// Wait up to 300 ms for the library to load
+await new Promise<void>((r) => {
+  let hasResolved = false;
+  const resolveFunc = () => {
+    if (!hasResolved) r();
+    hasResolved = true;
+  };
+  calculateGames(true).then(resolveFunc);
+  setTimeout(resolveFunc, 300);
+});
+
+const navigation = computed(() =>
+  collections.value.map((collection) => {
+    const items = collection.entries.map(({ game }) => {
+      const status = games[game.id].status;
+
+      const isInstalled = computed(
+        () => status.value.type != GameStatusEnum.Remote
+      );
+
+      const item = {
+        label: game.mName,
+        route: `/library/${game.id}`,
+        prefix: `/library/${game.id}`,
+        isInstalled,
+        id: game.id,
+      };
+      return item;
+    });
+
+    return {
+      id: collection.id,
+      name: collection.name,
+      deft: collection.isDefault,
+      items,
+    };
+  })
+);
+
+const filteredNavigation = computed(() => {
+  return navigation.value;
+});
+
+listen("update_library", async () => {
+  await calculateGames();
+});
 </script>
\ No newline at end of file
diff --git a/main/pages/settings/interface.vue b/main/pages/settings/interface.vue
index 7df32e15..cd36b3a4 100644
--- a/main/pages/settings/interface.vue
+++ b/main/pages/settings/interface.vue
@@ -1,23 +1,60 @@
 <template>
-  <div class="grow w-full h-full flex items-center justify-center">
-    <div class="flex flex-col items-center">
-      <WrenchScrewdriverIcon
-        class="h-12 w-12 text-blue-600"
-        aria-hidden="true"
-      />
-      <div class="mt-3 text-center sm:mt-5">
-        <h1 class="text-3xl font-semibold font-display leading-6 text-zinc-100">
-          Under construction
-        </h1>
-        <div class="mt-4">
-          <p class="text-sm text-zinc-400 max-w-lg">
-            This page hasn't been implemented yet.
-          </p>
+  <div class="grow w-full h-full">
+    <div class="border-b border-zinc-700 py-5">
+      <h3 class="text-base font-semibold font-display leading-6 text-zinc-100">
+        Interface
+      </h3>
+    </div>
+
+    <div class="mt-5">
+      <div class="space-y-8">
+        <div class="flex flex-row items-center justify-between">
+          <div>
+            <h3 class="text-sm font-medium leading-6 text-zinc-100">Library View</h3>
+            <p class="mt-1 text-sm leading-6 text-zinc-400">
+              Choose how games are displayed in your library
+            </p>
+          </div>
+          <div class="flex gap-x-2">
+            <button
+              @click="() => updateLibraryView('list')"
+              :class="[
+                'px-4 py-2 rounded-lg text-sm font-semibold transition-all duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900',
+                libraryView === 'list'
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-zinc-800 text-zinc-300 hover:bg-zinc-700',
+              ]"
+            >
+              List
+            </button>
+            <button
+              @click="() => updateLibraryView('grid')"
+              :class="[
+                'px-4 py-2 rounded-lg text-sm font-semibold transition-all duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900',
+                libraryView === 'grid'
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-zinc-800 text-zinc-300 hover:bg-zinc-700',
+              ]"
+            >
+              Grid
+            </button>
+          </div>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { WrenchScrewdriverIcon } from "@heroicons/vue/20/solid";
+import { invoke } from "@tauri-apps/api/core";
+
+const { libraryView, toggleView } = useLibraryView();
+
+async function updateLibraryView(view: "list" | "grid") {
+  if (libraryView.value !== view) {
+    libraryView.value = view;
+    await invoke("update_settings", {
+      newSettings: { libraryView: view },
+    });
+  }
+}
 </script>
diff --git a/main/types.ts b/main/types.ts
index f63a9c57..9e05c255 100644
--- a/main/types.ts
+++ b/main/types.ts
@@ -93,4 +93,5 @@ export type Settings = {
   autostart: boolean;
   maxDownloadThreads: number;
   forceOffline: boolean;
+  libraryView: "list" | "grid";
 };
diff --git a/src-tauri/database/src/models.rs b/src-tauri/database/src/models.rs
index d05a0143..bca77bb4 100644
--- a/src-tauri/database/src/models.rs
+++ b/src-tauri/database/src/models.rs
@@ -137,7 +137,8 @@ pub mod data {
         pub struct Settings {
             pub autostart: bool,
             pub max_download_threads: usize,
-            pub force_offline: bool, // ... other settings ...
+            pub force_offline: bool,
+            pub library_view: String, // "list" or "grid"
         }
         impl Default for Settings {
             fn default() -> Self {
@@ -145,6 +146,7 @@ pub mod data {
                     autostart: false,
                     max_download_threads: 4,
                     force_offline: false,
+                    library_view: "list".to_string(),
                 }
             }
         }

From 847fb01f2cee83eefe20c7a0e9297c75e4e828bc Mon Sep 17 00:00:00 2001
From: Aden Linday <lindsaya542@gmail.com>
Date: Mon, 5 Jan 2026 14:07:49 +1030
Subject: [PATCH 02/10] fix(remote): modify CSP header to allow iframe
 embedding

---
 src-tauri/remote/src/server_proto.rs | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src-tauri/remote/src/server_proto.rs b/src-tauri/remote/src/server_proto.rs
index 47406d2a..8a93ee73 100644
--- a/src-tauri/remote/src/server_proto.rs
+++ b/src-tauri/remote/src/server_proto.rs
@@ -112,7 +112,29 @@ fn handle_server_proto(request: Request<Vec<u8>>) -> Result<Response<Vec<u8>>, S
     {
         let client_response_headers = client_http_response.headers_mut().unwrap();
         for (header, header_value) in response.headers() {
-            client_response_headers.insert(header, header_value.clone());
+            // Remove or modify Content-Security-Policy to allow framing
+            if header.as_str().eq_ignore_ascii_case("content-security-policy") {
+                let csp_value = header_value.to_str().unwrap_or("");
+                // Remove frame-ancestors directive or replace it to allow all
+                let modified_csp = csp_value
+                    .split(';')
+                    .map(|directive| directive.trim())
+                    .filter(|directive| !directive.starts_with("frame-ancestors"))
+                    .collect::<Vec<_>>()
+                    .join("; ");
+                // Add frame-ancestors * to allow framing from any origin
+                let new_csp = if modified_csp.is_empty() {
+                    "frame-ancestors *".to_string()
+                } else {
+                    format!("{}; frame-ancestors *", modified_csp)
+                };
+                client_response_headers.insert(
+                    header.clone(),
+                    HeaderValue::from_str(&new_csp).unwrap_or(header_value.clone()),
+                );
+            } else {
+                client_response_headers.insert(header, header_value.clone());
+            }
         }
     };
 

From cf3a795ea4ec648eadc337f05158aff5c07a8169 Mon Sep 17 00:00:00 2001
From: Aden Linday <lindsaya542@gmail.com>
Date: Mon, 5 Jan 2026 14:16:45 +1030
Subject: [PATCH 03/10] refactor(library): extract GamePanel component with
 slight blur effect

---
 main/components/GamePanel.vue | 100 ++++++++++++++++++++++++++++++++++
 main/pages/library/index.vue  |  89 ++++--------------------------
 2 files changed, 110 insertions(+), 79 deletions(-)
 create mode 100644 main/components/GamePanel.vue

diff --git a/main/components/GamePanel.vue b/main/components/GamePanel.vue
new file mode 100644
index 00000000..94bee8d2
--- /dev/null
+++ b/main/components/GamePanel.vue
@@ -0,0 +1,100 @@
+<template>
+  <NuxtLink
+    :href="href"
+    :class="[
+      'group relative flex-1 min-w-42 max-w-48 h-64 rounded-lg overflow-hidden',
+      'transition-all duration-300 text-left hover:scale-[1.02] hover:shadow-lg hover:-translate-y-0.5',
+      'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900',
+      isSelected
+        ? 'ring-2 ring-blue-500 shadow-lg shadow-blue-500/20'
+        : '',
+    ]"
+  >
+    <!-- Background Image -->
+    <div
+      :class="{
+        'transition-all duration-300 group-hover:scale-110': true,
+      }"
+      class="absolute inset-0"
+    >
+      <!-- Cover Image (if available) -->
+      <img
+        v-if="coverSrc"
+        :src="coverSrc"
+        :alt="gameName"
+        class="w-full h-full object-cover brightness-[90%] blur-[1px]"
+      />
+      <!-- Fallback to Icon -->
+      <div
+        v-else-if="iconSrc"
+        class="w-full h-full flex items-center justify-center bg-gradient-to-br from-zinc-800 to-zinc-900"
+      >
+        <img
+          class="w-2/3 h-2/3 object-contain brightness-[90%] blur-[1px]"
+          :src="iconSrc"
+          :alt="gameName"
+        />
+      </div>
+      <!-- Placeholder -->
+      <div
+        v-else
+        class="w-full h-full bg-gradient-to-br from-zinc-800 to-zinc-900"
+      />
+      <!-- Gradient Overlay -->
+      <div
+        class="absolute inset-0 bg-gradient-to-t from-zinc-950/80 via-zinc-950/0 to-transparent"
+      />
+    </div>
+
+    <!-- Content Overlay -->
+    <div class="absolute bottom-0 left-0 w-full p-3">
+      <h1
+        :class="{
+          'group-hover:text-white transition-colors': true,
+        }"
+        class="text-zinc-100 text-sm font-bold font-display mb-1"
+      >
+        {{ gameName }}
+      </h1>
+      <p
+        v-if="description"
+        :class="{
+          'group-hover:text-zinc-300 transition-colors': true,
+        }"
+        class="text-zinc-400 text-xs line-clamp-2 mb-1.5"
+      >
+        {{ description }}
+      </p>
+      <!-- Status Badge -->
+      <div v-if="statusText" class="flex items-center mt-1">
+        <span
+          :class="[
+            'inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-bold uppercase font-display',
+            statusClass,
+          ]"
+        >
+          {{ statusText }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Selected Indicator -->
+    <div
+      v-if="isSelected"
+      class="absolute top-3 right-3 z-20 w-2.5 h-2.5 rounded-full bg-blue-500 shadow-lg shadow-blue-500/50 ring-2 ring-blue-500/30"
+    />
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  href: string;
+  gameName: string;
+  description?: string;
+  coverSrc?: string;
+  iconSrc?: string;
+  statusText?: string;
+  statusClass?: string;
+  isSelected?: boolean;
+}>();
+</script>
diff --git a/main/pages/library/index.vue b/main/pages/library/index.vue
index 9ffd5aa3..4b1a8ff8 100644
--- a/main/pages/library/index.vue
+++ b/main/pages/library/index.vue
@@ -29,88 +29,18 @@
       class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4"
     >
       <template v-for="collection in filteredNavigation" :key="collection.id">
-        <NuxtLink
+        <GamePanel
           v-for="item in collection.items"
           :key="item.id"
           :href="item.route"
-          :class="[
-            'group relative aspect-[3/4] transition-all duration-200 rounded-xl overflow-hidden',
-            'hover:scale-[1.02] active:scale-[0.98]',
-            'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900',
-            currentNavigation == item.id
-              ? 'ring-2 ring-blue-500 shadow-lg shadow-blue-500/20'
-              : 'ring-1 ring-zinc-800/50',
-          ]"
-        >
-          <!-- Blurred Background Image -->
-          <div class="absolute inset-0 z-0">
-            <!-- Cover Image (if available) -->
-            <img
-              v-if="covers[item.id]"
-              :src="covers[item.id]"
-              :alt="item.label"
-              class="w-full h-full object-cover blur-[2px] scale-105 transition-transform duration-300 group-hover:scale-110"
-            />
-            <!-- Fallback to Icon -->
-            <div
-              v-else
-              class="w-full h-full flex items-center justify-center bg-gradient-to-br from-zinc-800 to-zinc-900"
-            >
-              <img
-                class="w-2/3 h-2/3 object-contain blur-[2px] scale-105 transition-transform duration-300 group-hover:scale-110"
-                :src="icons[item.id]"
-                :alt="item.label"
-              />
-            </div>
-            <!-- Gradient Overlays -->
-            <div
-              class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-zinc-900/80 to-transparent opacity-90 transition-opacity duration-200 group-hover:opacity-70"
-            />
-            <div
-              class="absolute inset-0 bg-gradient-to-r from-zinc-900/95 via-zinc-900/80 to-transparent opacity-90 transition-opacity duration-200 group-hover:opacity-60"
-            />
-          </div>
-
-          <!-- Content Overlay -->
-          <div class="relative z-10 flex flex-col h-full p-4 justify-end">
-            <!-- Game Title -->
-            <h3
-              :class="[
-                'text-base font-display font-bold text-zinc-100 drop-shadow-lg mb-2 line-clamp-2',
-                'transition-colors duration-200',
-                currentNavigation == item.id
-                  ? 'text-zinc-100'
-                  : item.isInstalled.value
-                  ? 'text-zinc-100 group-hover:text-white'
-                  : 'text-zinc-300 group-hover:text-zinc-100',
-              ]"
-            >
-              {{ item.label }}
-            </h3>
-
-            <!-- Status Badge -->
-            <div class="flex items-center">
-              <span
-                :class="[
-                  'inline-flex items-center px-2 py-1 rounded-md text-[10px] font-bold uppercase font-display',
-                  'backdrop-blur-sm border shadow-lg',
-                  gameStatusTextStyle[games[item.id].status.value.type],
-                  currentNavigation == item.id
-                    ? 'bg-zinc-800/50 border-zinc-700/50 text-white'
-                    : 'bg-zinc-900/50 border-zinc-800/50',
-                ]"
-              >
-                {{ gameStatusText[games[item.id].status.value.type] }}
-              </span>
-            </div>
-          </div>
-
-          <!-- Selected Indicator -->
-          <div
-            v-if="currentNavigation == item.id"
-            class="absolute top-3 right-3 z-20 w-2.5 h-2.5 rounded-full bg-blue-500 shadow-lg shadow-blue-500/50 ring-2 ring-blue-500/30"
-          />
-        </NuxtLink>
+          :game-name="item.label"
+          :description="item.game?.mShortDescription"
+          :cover-src="covers[item.id]"
+          :icon-src="icons[item.id]"
+          :status-text="gameStatusText[games[item.id].status.value.type]"
+          :status-class="gameStatusTextStyle[games[item.id].status.value.type]"
+          :is-selected="currentNavigation == item.id"
+        />
       </template>
     </div>
   </div>
@@ -253,6 +183,7 @@ const navigation = computed(() =>
         prefix: `/library/${game.id}`,
         isInstalled,
         id: game.id,
+        game: game, // Include full game object for description access
       };
       return item;
     });

From ee0431b5a0fa8a9c33ca3be5a64b846f690ffead Mon Sep 17 00:00:00 2001
From: Aden Linday <lindsaya542@gmail.com>
Date: Fri, 16 Jan 2026 08:03:59 +1030
Subject: [PATCH 04/10] fix(remote): remove CSP header rewrite

---
 src-tauri/remote/src/server_proto.rs | 24 +-----------------------
 1 file changed, 1 insertion(+), 23 deletions(-)

diff --git a/src-tauri/remote/src/server_proto.rs b/src-tauri/remote/src/server_proto.rs
index 8a93ee73..47406d2a 100644
--- a/src-tauri/remote/src/server_proto.rs
+++ b/src-tauri/remote/src/server_proto.rs
@@ -112,29 +112,7 @@ fn handle_server_proto(request: Request<Vec<u8>>) -> Result<Response<Vec<u8>>, S
     {
         let client_response_headers = client_http_response.headers_mut().unwrap();
         for (header, header_value) in response.headers() {
-            // Remove or modify Content-Security-Policy to allow framing
-            if header.as_str().eq_ignore_ascii_case("content-security-policy") {
-                let csp_value = header_value.to_str().unwrap_or("");
-                // Remove frame-ancestors directive or replace it to allow all
-                let modified_csp = csp_value
-                    .split(';')
-                    .map(|directive| directive.trim())
-                    .filter(|directive| !directive.starts_with("frame-ancestors"))
-                    .collect::<Vec<_>>()
-                    .join("; ");
-                // Add frame-ancestors * to allow framing from any origin
-                let new_csp = if modified_csp.is_empty() {
-                    "frame-ancestors *".to_string()
-                } else {
-                    format!("{}; frame-ancestors *", modified_csp)
-                };
-                client_response_headers.insert(
-                    header.clone(),
-                    HeaderValue::from_str(&new_csp).unwrap_or(header_value.clone()),
-                );
-            } else {
-                client_response_headers.insert(header, header_value.clone());
-            }
+            client_response_headers.insert(header, header_value.clone());
         }
     };
 

From c52ec0e32127a0100607cf6c1bd49919359d56f5 Mon Sep 17 00:00:00 2001
From: Aden Linday <lindsaya542@gmail.com>
Date: Fri, 16 Jan 2026 08:04:06 +1030
Subject: [PATCH 05/10] refactor(library): extract library games logic into
 composable

---
 main/composables/library-games.ts | 71 +++++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 main/composables/library-games.ts

diff --git a/main/composables/library-games.ts b/main/composables/library-games.ts
new file mode 100644
index 00000000..ea4b2ecd
--- /dev/null
+++ b/main/composables/library-games.ts
@@ -0,0 +1,71 @@
+import { invoke } from "@tauri-apps/api/core";
+import {
+  GameStatusEnum,
+  type Collection,
+  type Game,
+  type GameStatus,
+} from "~/types";
+
+export const useLibraryGames = () => {
+  const loading = ref(false);
+  const games: {
+    [key: string]: { game: Game; status: Ref<GameStatus, GameStatus> };
+  } = {};
+  const icons: { [key: string]: string } = {};
+  const covers: { [key: string]: string } = {};
+  const collections: Ref<Collection[]> = ref([]);
+
+  async function calculateGames(clearAll = false, forceRefresh = false) {
+    if (clearAll) {
+      collections.value = [];
+      loading.value = true;
+    }
+    // If we update immediately, the navigation gets re-rendered before we
+    // add all the necessary state, and it freaks tf out
+    const newGames = await invoke<Game[]>("fetch_library", {
+      hardRefresh: forceRefresh,
+    });
+    const otherCollections = await invoke<Collection[]>("fetch_collections", {
+      hardRefresh: forceRefresh,
+    });
+    const allGames = [
+      ...newGames,
+      ...otherCollections
+        .map((e) => e.entries)
+        .flat()
+        .map((e) => e.game),
+    ].filter((v, i, a) => a.indexOf(v) === i);
+
+    for (const game of allGames) {
+      if (games[game.id]) continue;
+      games[game.id] = await useGame(game.id);
+    }
+    for (const game of allGames) {
+      if (icons[game.id]) continue;
+      icons[game.id] = await useObject(game.mIconObjectId);
+    }
+    for (const game of allGames) {
+      if (covers[game.id]) continue;
+      covers[game.id] = await useObject(game.mCoverObjectId);
+    }
+
+    const libraryCollection = {
+      id: "library",
+      name: "Library",
+      isDefault: true,
+      entries: newGames.map((e) => ({ gameId: e.id, game: e })),
+    } satisfies Collection;
+
+    loading.value = false;
+    collections.value = [libraryCollection, ...otherCollections];
+  }
+
+  return {
+    loading: readonly(loading),
+    games,
+    icons,
+    covers,
+    collections: readonly(collections),
+    calculateGames,
+  };
+};

From ba810f4339c665cd3a53f1261d4278d981291b54 Mon Sep 17 00:00:00 2001
From: Aden Linday <lindsaya542@gmail.com>
Date: Fri, 16 Jan 2026 08:04:13 +1030
Subject: [PATCH 06/10] feat(library): add setView function to library-view
 composable

---
 main/composables/library-view.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/main/composables/library-view.ts b/main/composables/library-view.ts
index 59ed79cf..c21cd22e 100644
--- a/main/composables/library-view.ts
+++ b/main/composables/library-view.ts
@@ -22,8 +22,18 @@ export const useLibraryView = () => {
     });
   };
 
+  const setView = async (view: "list" | "grid") => {
+    if (libraryView.value !== view) {
+      libraryView.value = view;
+      await invoke("update_settings", {
+        newSettings: { libraryView: view },
+      });
+    }
+  };
+
   return {
     libraryView,
     toggleView,
+    setView,
   };
 };

From ca660ee8464a019f7428e07d58690cc0b921c8a8 Mon Sep 17 00:00:00 2001
From: Aden Linday <lindsaya542@gmail.com>
Date: Fri, 16 Jan 2026 08:04:20 +1030
Subject: [PATCH 07/10] refactor(library): simplify GamePanel props using Game
 type

---
 main/components/GamePanel.vue | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/main/components/GamePanel.vue b/main/components/GamePanel.vue
index 94bee8d2..a931f308 100644
--- a/main/components/GamePanel.vue
+++ b/main/components/GamePanel.vue
@@ -21,7 +21,7 @@
       <img
         v-if="coverSrc"
         :src="coverSrc"
-        :alt="gameName"
+        :alt="game.mName"
         class="w-full h-full object-cover brightness-[90%] blur-[1px]"
       />
       <!-- Fallback to Icon -->
@@ -32,7 +32,7 @@
         <img
           class="w-2/3 h-2/3 object-contain brightness-[90%] blur-[1px]"
           :src="iconSrc"
-          :alt="gameName"
+          :alt="game.mName"
         />
       </div>
       <!-- Placeholder -->
@@ -54,16 +54,16 @@
         }"
         class="text-zinc-100 text-sm font-bold font-display mb-1"
       >
-        {{ gameName }}
+        {{ game.mName }}
       </h1>
       <p
-        v-if="description"
+        v-if="game.mShortDescription"
         :class="{
           'group-hover:text-zinc-300 transition-colors': true,
         }"
         class="text-zinc-400 text-xs line-clamp-2 mb-1.5"
       >
-        {{ description }}
+        {{ game.mShortDescription }}
       </p>
       <!-- Status Badge -->
       <div v-if="statusText" class="flex items-center mt-1">
@@ -87,10 +87,16 @@
 </template>
 
 <script setup lang="ts">
+import type { Game, GameStatus } from "~/types";
+
+type GameWithStatus = {
+  game: Game;
+  status: GameStatus;
+};
+
 defineProps<{
+  game: GameWithStatus;
   href: string;
-  gameName: string;
-  description?: string;
   coverSrc?: string;
   iconSrc?: string;
   statusText?: string;

From e628a71487b3417beddc691330ff736098ccff98 Mon Sep 17 00:00:00 2001
From: Aden Linday <lindsaya542@gmail.com>
Date: Fri, 16 Jan 2026 08:04:26 +1030
Subject: [PATCH 08/10] refactor(library): use library-games composable in
 components

---
 main/components/LibrarySearch.vue | 64 ++++++-------------------------
 main/pages/library/index.vue      | 59 ++--------------------------
 2 files changed, 14 insertions(+), 109 deletions(-)

diff --git a/main/components/LibrarySearch.vue b/main/components/LibrarySearch.vue
index e5ffdd9b..d67078ee 100644
--- a/main/components/LibrarySearch.vue
+++ b/main/components/LibrarySearch.vue
@@ -138,12 +138,8 @@ import {
   Squares2X2Icon,
   Bars3Icon,
 } from "@heroicons/vue/20/solid";
-import { invoke } from "@tauri-apps/api/core";
 import {
   GameStatusEnum,
-  type Collection as Collection,
-  type Game,
-  type GameStatus,
 } from "~/types";
 import { TransitionGroup } from "vue";
 import { listen } from "@tauri-apps/api/event";
@@ -178,57 +174,9 @@ const router = useRouter();
 
 const searchQuery = ref("");
 
-const loading = ref(false);
-
 // Use library view composable
 const { libraryView, toggleView } = useLibraryView();
-const games: {
-  [key: string]: { game: Game; status: Ref<GameStatus, GameStatus> };
-} = {};
-const icons: { [key: string]: string } = {};
-
-const collections: Ref<Collection[]> = ref([]);
-
-async function calculateGames(clearAll = false, forceRefresh = false) {
-  if (clearAll) {
-    collections.value = [];
-    loading.value = true;
-  }
-  // If we update immediately, the navigation gets re-rendered before we
-  // add all the necessary state, and it freaks tf out
-  const newGames = await invoke<Game[]>("fetch_library", {
-    hardRefresh: forceRefresh,
-  });
-  const otherCollections = await invoke<Collection[]>("fetch_collections", {
-    hardRefresh: forceRefresh,
-  });
-  const allGames = [
-    ...newGames,
-    ...otherCollections
-      .map((e) => e.entries)
-      .flat()
-      .map((e) => e.game),
-  ].filter((v, i, a) => a.indexOf(v) === i);
-
-  for (const game of allGames) {
-    if (games[game.id]) continue;
-    games[game.id] = await useGame(game.id);
-  }
-  for (const game of allGames) {
-    if (icons[game.id]) continue;
-    icons[game.id] = await useObject(game.mIconObjectId);
-  }
-
-  const libraryCollection = {
-    id: "library",
-    name: "Library",
-    isDefault: true,
-    entries: newGames.map((e) => ({ gameId: e.id, game: e })),
-  } satisfies Collection;
-
-  loading.value = false;
-  collections.value = [libraryCollection, ...otherCollections];
-}
+const { loading, games, icons, collections, calculateGames } = useLibraryGames();
 
 // Wait up to 300 ms for the library to load, otherwise
 // show the loading state while we while
@@ -242,6 +190,16 @@ await new Promise<void>((r) => {
   setTimeout(resolveFunc, 300);
 });
 
+// Listen for library updates
+listen("update_library", async (event) => {
+  console.log("Updating library");
+  let oldNavigation = currentNavigation.value;
+  await calculateGames();
+  if (oldNavigation !== currentNavigation.value) {
+    router.push("/library");
+  }
+});
+
 const navigation = computed(() =>
   collections.value.map((collection) => {
     const items = collection.entries.map(({ game }) => {
diff --git a/main/pages/library/index.vue b/main/pages/library/index.vue
index 4b1a8ff8..6d4e8daf 100644
--- a/main/pages/library/index.vue
+++ b/main/pages/library/index.vue
@@ -33,8 +33,7 @@
           v-for="item in collection.items"
           :key="item.id"
           :href="item.route"
-          :game-name="item.label"
-          :description="item.game?.mShortDescription"
+          :game="games[item.id]"
           :cover-src="covers[item.id]"
           :icon-src="icons[item.id]"
           :status-text="gameStatusText[games[item.id].status.value.type]"
@@ -64,12 +63,8 @@
 </template>
 <script setup lang="ts">
 import { RocketLaunchIcon } from "@heroicons/vue/24/outline";
-import { invoke } from "@tauri-apps/api/core";
 import {
   GameStatusEnum,
-  type Collection,
-  type Game,
-  type GameStatus,
 } from "~/types";
 import { listen } from "@tauri-apps/api/event";
 
@@ -106,56 +101,7 @@ const gameStatusText: { [key in GameStatusEnum]: string } = {
   [GameStatusEnum.PartiallyInstalled]: "Partially installed",
 };
 
-const loading = ref(false);
-const games: {
-  [key: string]: { game: Game; status: Ref<GameStatus, GameStatus> };
-} = {};
-const icons: { [key: string]: string } = {};
-const covers: { [key: string]: string } = {};
-const collections: Ref<Collection[]> = ref([]);
-
-async function calculateGames(clearAll = false, forceRefresh = false) {
-  if (clearAll) {
-    collections.value = [];
-    loading.value = true;
-  }
-  const newGames = await invoke<Game[]>("fetch_library", {
-    hardRefresh: forceRefresh,
-  });
-  const otherCollections = await invoke<Collection[]>("fetch_collections", {
-    hardRefresh: forceRefresh,
-  });
-  const allGames = [
-    ...newGames,
-    ...otherCollections
-      .map((e) => e.entries)
-      .flat()
-      .map((e) => e.game),
-  ].filter((v, i, a) => a.indexOf(v) === i);
-
-  for (const game of allGames) {
-    if (games[game.id]) continue;
-    games[game.id] = await useGame(game.id);
-  }
-  for (const game of allGames) {
-    if (icons[game.id]) continue;
-    icons[game.id] = await useObject(game.mIconObjectId);
-  }
-  for (const game of allGames) {
-    if (covers[game.id]) continue;
-    covers[game.id] = await useObject(game.mCoverObjectId);
-  }
-
-  const libraryCollection = {
-    id: "library",
-    name: "Library",
-    isDefault: true,
-    entries: newGames.map((e) => ({ gameId: e.id, game: e })),
-  } satisfies Collection;
-
-  loading.value = false;
-  collections.value = [libraryCollection, ...otherCollections];
-}
+const { loading, games, icons, covers, collections, calculateGames } = useLibraryGames();
 
 // Wait up to 300 ms for the library to load
 await new Promise<void>((r) => {
@@ -201,6 +147,7 @@ const filteredNavigation = computed(() => {
   return navigation.value;
 });
 
+// Listen for library updates
 listen("update_library", async () => {
   await calculateGames();
 });

From 8312de18b9daf2cf6290ad2802984c7c49b52d89 Mon Sep 17 00:00:00 2001
From: Aden Linday <lindsaya542@gmail.com>
Date: Fri, 16 Jan 2026 08:04:33 +1030
Subject: [PATCH 09/10] refactor(settings): use setView from library-view
 composable

---
 main/pages/settings/interface.vue | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/main/pages/settings/interface.vue b/main/pages/settings/interface.vue
index cd36b3a4..93a6100c 100644
--- a/main/pages/settings/interface.vue
+++ b/main/pages/settings/interface.vue
@@ -17,7 +17,7 @@
           </div>
           <div class="flex gap-x-2">
             <button
-              @click="() => updateLibraryView('list')"
+              @click="() => setView('list')"
               :class="[
                 'px-4 py-2 rounded-lg text-sm font-semibold transition-all duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900',
                 libraryView === 'list'
@@ -28,7 +28,7 @@
               List
             </button>
             <button
-              @click="() => updateLibraryView('grid')"
+              @click="() => setView('grid')"
               :class="[
                 'px-4 py-2 rounded-lg text-sm font-semibold transition-all duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900',
                 libraryView === 'grid'
@@ -45,16 +45,5 @@
   </div>
 </template>
 <script setup lang="ts">
-import { invoke } from "@tauri-apps/api/core";
-
-const { libraryView, toggleView } = useLibraryView();
-
-async function updateLibraryView(view: "list" | "grid") {
-  if (libraryView.value !== view) {
-    libraryView.value = view;
-    await invoke("update_settings", {
-      newSettings: { libraryView: view },
-    });
-  }
-}
+const { libraryView, setView } = useLibraryView();
 </script>

From fa87450e5e76ea15b0389b88c96f6a02ba708640 Mon Sep 17 00:00:00 2001
From: Aden Linday <lindsaya542@gmail.com>
Date: Fri, 16 Jan 2026 08:08:22 +1030
Subject: [PATCH 10/10] fix(library): resolve merge conflict in LibrarySearch
 component

---
 main/components/LibrarySearch.vue | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/main/components/LibrarySearch.vue b/main/components/LibrarySearch.vue
index d67078ee..b19288ab 100644
--- a/main/components/LibrarySearch.vue
+++ b/main/components/LibrarySearch.vue
@@ -149,7 +149,7 @@ const gameStatusTextStyle: { [key in GameStatusEnum]: string } = {
   [GameStatusEnum.Installed]: "text-green-500",
   [GameStatusEnum.Downloading]: "text-zinc-400",
   [GameStatusEnum.Validating]: "text-blue-300",
-  [GameStatusEnum.Running]: "text-green-500",
+  [GameStatusEnum.Running]: "text-blue-500",
   [GameStatusEnum.Remote]: "text-zinc-700",
   [GameStatusEnum.Queued]: "text-zinc-400",
   [GameStatusEnum.Updating]: "text-zinc-400",
@@ -244,15 +244,6 @@ const filteredNavigation = computed(() => {
     }))
     .filter((e) => e.items.length > 0);
 });
-
-listen("update_library", async (event) => {
-  console.log("Updating library");
-  let oldNavigation = currentNavigation.value;
-  await calculateGames();
-  if (oldNavigation !== currentNavigation.value) {
-    router.push("/library");
-  }
-});
 </script>
 
 <style scoped>