feat: prototype big picture mode

feat: finish big picture navigation
partial: mutationobserver
2025-11-17 02:01:14 +10:00 · 2025-09-23 18:05:35 +10:00 · 2025-09-23 16:37:25 +10:00 · 2025-09-23 15:38:30 +10:00 · 2025-09-11 08:16:33 +10:00
80 changed files with 15376 additions and 1049 deletions
--- a/README.md
+++ b/README.md
@ -1,29 +1,21 @@
-# Drop App
+# Drop Desktop Client
-Drop app is the companion app for [Drop](https://github.com/Drop-OSS/drop). It uses a Tauri base with Nuxt 3 + TailwindCSS on top of it, so we can re-use components from the web UI.
+The Drop Desktop Client is the companion app for [Drop](https://github.com/Drop-OSS/drop). It is the official & intended way to download and play games on your Drop server.
-## Running
+## Internals
 Before setting up the drop app, be sure that you have a server set up. 
 The instructions for this can be found on the [Drop Docs](https://docs.droposs.org/docs/guides/quickstart)
-## Current features
+It uses a Tauri base with Nuxt 3 + TailwindCSS on top of it, so we can re-use components from the web UI.
 Currently supported are the following features:
 - Signin (with custom server)
 - Database registering & recovery
 - Dynamic library fetching from server
 - Installing & uninstalling games
 - Download progress monitoring
 - Launching / playing games
 ## Development
 Before setting up a development environemnt, be sure that you have a server set up. The instructions for this can be found on the [Drop Docs](https://docs.droposs.org/docs/guides/quickstart).
-Install dependencies with `yarn`
+Then, install dependencies with `yarn`. This'll install the custom builder's dependencies. Then, check everything works properly with `yarn tauri build`. 
-Run the app in development with `yarn tauri dev`. NVIDIA users on Linux, use shell script `./nvidia-prop-dev.sh`
+Run the app in development with `yarn tauri dev`. NVIDIA users on Linux, use shell script `./nvidia-prop-dev.sh`
 To manually specify the logging level, add the environment variable `RUST_LOG=[debug, info, warn, error]` to `yarn tauri dev`:
 e.g. `RUST_LOG=debug yarn tauri dev`
 ## Contributing
-Check the original [Drop repo](https://github.com/Drop-OSS/drop/blob/main/CONTRIBUTING.md) for contributing guidelines. 
+Check out the contributing guide on our Developer Docs: [Drop Developer Docs - Contributing](https://developer.droposs.org/contributing).
--- a/main/app.vue
+++ b/main/app.vue
@ -1,5 +1,5 @@
 <template>
-    <NuxtLoadingIndicator color="#2563eb" />
+  <NuxtLoadingIndicator color="#2563eb" />
  <NuxtLayout class="select-none w-screen h-screen">
    <NuxtPage />
    <ModalStack />
@ -7,14 +7,7 @@
 </template>
 <script setup lang="ts">
 import "~/composables/downloads.js";
 import { invoke } from "@tauri-apps/api/core";
 import { useAppState } from "./composables/app-state.js";
 import {
  initialNavigation,
  setupHooks,
 } from "./composables/state-navigation.js";
 const router = useRouter();
@ -44,10 +37,6 @@ router.beforeEach(async () => {
 setupHooks();
 initialNavigation(state);
 // Setup playtime event listeners
 const { setupEventListeners } = usePlaytime();
 setupEventListeners();
 useHead({
  title: "Drop",
 });
--- a/main/components/Header.vue
+++ b/main/components/Header.vue
@ -2,9 +2,7 @@
  <div class="h-16 bg-zinc-950 flex flex-row justify-between">
    <div class="flex flex-row grow items-center pl-5 pr-2 py-3">
      <div class="inline-flex items-center gap-x-10">
-        <NuxtLink to="/store">
+        <Wordmark class="h-8 mb-0.5" />
          <Wordmark class="h-8 mb-0.5" />
        </NuxtLink>
        <nav class="inline-flex items-center mt-0.5">
          <ol class="inline-flex items-center gap-x-6">
            <NuxtLink
@ -42,7 +40,7 @@
        </ol>
      </div>
    </div>
-    <WindowControl  />
+    <WindowControl />
  </div>
 </template>
--- a/main/components/HeaderUserWidget.vue
+++ b/main/components/HeaderUserWidget.vue
@ -76,7 +76,6 @@ import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
 import { ChevronDownIcon } from "@heroicons/vue/16/solid";
 import type { NavigationItem } from "../types";
 import HeaderWidget from "./HeaderWidget.vue";
 import { useAppState } from "~/composables/app-state";
 import { invoke } from "@tauri-apps/api/core";
 const open = ref(false);
--- a/main/components/LibrarySearch.vue
+++ b/main/components/LibrarySearch.vue
@ -73,7 +73,7 @@
                  alt=""
                />
              </div>
-              <div class="inline-flex items-center gap-x-2">
+              <div class="flex flex-col gap-x-2">
                <p
                  class="text-sm whitespace-nowrap font-display font-semibold"
                >
--- a/main/components/PageWidget.vue
+++ b/main/components/PageWidget.vue
@ -1,7 +0,0 @@
 <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>
--- a/main/components/PlaytimeDisplay.vue
+++ b/main/components/PlaytimeDisplay.vue
@ -1,53 +0,0 @@
 <template>
  <div v-if="stats" class="flex flex-col gap-1">
    <!-- Main playtime display -->
    <div class="flex items-center gap-2">
      <ClockIcon class="w-5 h-5 text-zinc-400" />
      <span class="text-base text-zinc-300 font-medium">
        {{ formatPlaytime(stats.totalPlaytimeSeconds) }} played
      </span>
      <span v-if="isActive && showActiveIndicator" class="text-sm text-green-400 font-medium">
        • Playing
      </span>
    </div>
    <!-- Additional details when expanded -->
    <div v-if="showDetails" class="text-xs text-zinc-400 space-y-1 ml-7">
      <div>{{ stats.sessionCount }} session{{ stats.sessionCount !== 1 ? 's' : '' }}</div>
      <div v-if="stats.sessionCount > 0">
        Avg: {{ formatPlaytime(stats.averageSessionLength) }} per session
      </div>
      <div v-if="stats.currentSessionDuration">
        Current session: {{ formatPlaytime(stats.currentSessionDuration) }}
      </div>
    </div>
  </div>
  <!-- No playtime data -->
  <div v-else-if="showWhenEmpty" class="flex items-center gap-2 text-zinc-500">
    <ClockIcon class="w-5 h-5" />
    <span class="text-base">Never played</span>
  </div>
 </template>
 <script setup lang="ts">
 import { ClockIcon } from "@heroicons/vue/20/solid";
 import type { GamePlaytimeStats } from "~/types";
 interface Props {
  stats: GamePlaytimeStats | null;
  isActive?: boolean;
  showDetails?: boolean;
  showWhenEmpty?: boolean;
  showActiveIndicator?: boolean;
 }
 const props = withDefaults(defineProps<Props>(), {
  isActive: false,
  showDetails: false,
  showWhenEmpty: true,
  showActiveIndicator: true,
 });
 const { formatPlaytime } = usePlaytime();
 </script>
--- a/main/components/PlaytimeStats.vue
+++ b/main/components/PlaytimeStats.vue
@ -1,76 +0,0 @@
 <template>
  <div class="bg-zinc-800/50 rounded-lg p-4 space-y-4">
    <div class="flex items-center gap-2">
      <ChartBarIcon class="w-5 h-5 text-zinc-400" />
      <h3 class="text-lg font-semibold text-zinc-100">Playtime Statistics</h3>
    </div>
    <div v-if="stats" class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <!-- Total Playtime -->
      <div class="bg-zinc-700/50 rounded-lg p-3">
        <div class="flex items-center gap-2 mb-2">
          <ClockIcon class="w-4 h-4 text-blue-400" />
          <span class="text-sm font-medium text-zinc-300">Total Playtime</span>
        </div>
        <div class="text-2xl font-bold text-zinc-100">
          {{ formatDetailedPlaytime(stats.totalPlaytimeSeconds) }}
        </div>
        <div v-if="stats.currentSessionDuration" class="text-xs text-green-400 mt-1">
          +{{ formatPlaytime(stats.currentSessionDuration) }} this session
        </div>
      </div>
      <!-- Sessions -->
      <div class="bg-zinc-700/50 rounded-lg p-3">
        <div class="flex items-center gap-2 mb-2">
          <PlayIcon class="w-4 h-4 text-green-400" />
          <span class="text-sm font-medium text-zinc-300">Sessions</span>
        </div>
        <div class="text-2xl font-bold text-zinc-100">
          {{ stats.sessionCount }}
        </div>
        <div class="text-xs text-zinc-400 mt-1">
          Avg: {{ formatPlaytime(stats.averageSessionLength) }}
        </div>
      </div>
    </div>
    <!-- No stats available -->
    <div v-else class="text-center py-8">
      <ClockIcon class="w-12 h-12 text-zinc-600 mx-auto mb-3" />
      <p class="text-zinc-400">No playtime data available</p>
      <p class="text-sm text-zinc-500 mt-1">Statistics will appear after you start playing</p>
    </div>
    <!-- Current session indicator -->
    <div v-if="isActive && stats" class="border-t border-zinc-700 pt-3">
      <div class="flex items-center gap-2 text-green-400">
        <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
        <span class="text-sm font-medium">Currently playing</span>
        <span v-if="stats.currentSessionDuration" class="text-xs text-zinc-400">
          {{ formatPlaytime(stats.currentSessionDuration) }}
        </span>
      </div>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import { 
  ChartBarIcon, 
  ClockIcon, 
  PlayIcon 
 } from "@heroicons/vue/20/solid";
 import type { GamePlaytimeStats } from "~/types";
 interface Props {
  stats: GamePlaytimeStats | null;
  isActive?: boolean;
 }
 const props = withDefaults(defineProps<Props>(), {
  isActive: false,
 });
 const { formatPlaytime, formatDetailedPlaytime } = usePlaytime();
 </script>
--- a/main/composables/playtime.ts
+++ b/main/composables/playtime.ts
@ -1,193 +0,0 @@
 import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
 import type { 
  GamePlaytimeStats, 
  PlaytimeUpdateEvent, 
  PlaytimeSessionStartEvent, 
  PlaytimeSessionEndEvent 
 } from "~/types";
 export const usePlaytime = () => {
  const playtimeStats = useState<Record<string, GamePlaytimeStats>>('playtime-stats', () => ({}));
  const activeSessions = useState<Set<string>>('active-sessions', () => new Set());
  // Fetch playtime stats for a specific game
  const fetchGamePlaytime = async (gameId: string): Promise<GamePlaytimeStats | null> => {
    try {
      const stats = await invoke<GamePlaytimeStats | null>("fetch_game_playtime", { gameId });
      if (stats) {
        playtimeStats.value[gameId] = stats;
      }
      return stats;
    } catch (error) {
      console.error(`Failed to fetch playtime for game ${gameId}:`, error);
      return null;
    }
  };
  // Fetch all playtime stats
  const fetchAllPlaytimeStats = async (): Promise<Record<string, GamePlaytimeStats>> => {
    try {
      const stats = await invoke<Record<string, GamePlaytimeStats>>("fetch_all_playtime_stats");
      playtimeStats.value = stats;
      return stats;
    } catch (error) {
      console.error("Failed to fetch all playtime stats:", error);
      return {};
    }
  };
  // Check if a session is active
  const isSessionActive = async (gameId: string): Promise<boolean> => {
    try {
      return await invoke<boolean>("is_playtime_session_active", { gameId });
    } catch (error) {
      console.error(`Failed to check session status for game ${gameId}:`, error);
      return false;
    }
  };
  // Get all active sessions
  const getActiveSessions = async (): Promise<string[]> => {
    try {
      const sessions = await invoke<string[]>("get_active_playtime_sessions");
      activeSessions.value = new Set(sessions);
      return sessions;
    } catch (error) {
      console.error("Failed to get active sessions:", error);
      return [];
    }
  };
  // Format playtime duration
  const formatPlaytime = (seconds: number): string => {
    if (seconds < 60) {
      return `${seconds}s`;
    } else if (seconds < 3600) {
      const minutes = Math.floor(seconds / 60);
      return `${minutes}m`;
    } else {
      const hours = Math.floor(seconds / 3600);
      const minutes = Math.floor((seconds % 3600) / 60);
      if (minutes === 0) {
        return `${hours}h`;
      }
      return `${hours}h ${minutes}m`;
    }
  };
  // Format detailed playtime
  const formatDetailedPlaytime = (seconds: number): string => {
    if (seconds < 60) {
      return `${seconds} seconds`;
    } else if (seconds < 3600) {
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = seconds % 60;
      if (remainingSeconds === 0) {
        return `${minutes} minutes`;
      }
      return `${minutes} minutes, ${remainingSeconds} seconds`;
    } else {
      const hours = Math.floor(seconds / 3600);
      const minutes = Math.floor((seconds % 3600) / 60);
      if (minutes === 0) {
        return `${hours} hours`;
      }
      return `${hours} hours, ${minutes} minutes`;
    }
  };
  // Format relative time (e.g., "2 hours ago")
  const formatRelativeTime = (timestamp: string): string => {
    const date = new Date(timestamp);
    const now = new Date();
    const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
    if (diffInSeconds < 60) {
      return "Just now";
    } else if (diffInSeconds < 3600) {
      const minutes = Math.floor(diffInSeconds / 60);
      return `${minutes} minute${minutes !== 1 ? 's' : ''} ago`;
    } else if (diffInSeconds < 86400) {
      const hours = Math.floor(diffInSeconds / 3600);
      return `${hours} hour${hours !== 1 ? 's' : ''} ago`;
    } else if (diffInSeconds < 604800) {
      const days = Math.floor(diffInSeconds / 86400);
      return `${days} day${days !== 1 ? 's' : ''} ago`;
    } else {
      return date.toLocaleDateString();
    }
  };
  // Get playtime stats for a game (from cache or fetch)
  const getGamePlaytime = async (gameId: string): Promise<GamePlaytimeStats | null> => {
    if (playtimeStats.value[gameId]) {
      return playtimeStats.value[gameId];
    }
    return await fetchGamePlaytime(gameId);
  };
  // Setup event listeners
  const setupEventListeners = () => {
    // Listen for general playtime updates
    listen<PlaytimeUpdateEvent>("playtime_update", (event) => {
      const { gameId, stats, isActive } = event.payload;
      playtimeStats.value[gameId] = stats;
      if (isActive) {
        activeSessions.value.add(gameId);
      } else {
        activeSessions.value.delete(gameId);
      }
    });
    // Listen for session start events
    listen<PlaytimeSessionStartEvent>("playtime_session_start", (event) => {
      const { gameId } = event.payload;
      activeSessions.value.add(gameId);
    });
    // Listen for session end events
    listen<PlaytimeSessionEndEvent>("playtime_session_end", (event) => {
      const { gameId } = event.payload;
      activeSessions.value.delete(gameId);
    });
  };
  // Setup game-specific event listeners
  const setupGameEventListeners = (gameId: string) => {
    listen<PlaytimeUpdateEvent>(`playtime_update/${gameId}`, (event) => {
      const { stats, isActive } = event.payload;
      playtimeStats.value[gameId] = stats;
      if (isActive) {
        activeSessions.value.add(gameId);
      } else {
        activeSessions.value.delete(gameId);
      }
    });
    listen<PlaytimeSessionStartEvent>(`playtime_session_start/${gameId}`, () => {
      activeSessions.value.add(gameId);
    });
    listen<PlaytimeSessionEndEvent>(`playtime_session_end/${gameId}`, () => {
      activeSessions.value.delete(gameId);
    });
  };
  return {
    playtimeStats: readonly(playtimeStats),
    activeSessions: readonly(activeSessions),
    fetchGamePlaytime,
    fetchAllPlaytimeStats,
    isSessionActive,
    getActiveSessions,
    formatPlaytime,
    formatDetailedPlaytime,
    formatRelativeTime,
    getGamePlaytime,
    setupEventListeners,
    setupGameEventListeners,
  };
 };
--- a/main/nuxt.config.ts
+++ b/main/nuxt.config.ts
@ -9,13 +9,17 @@ export default defineNuxtConfig({
    },
  },
  css: ["~/assets/main.scss"],
  ssr: false,
-  extends: [["../libs/drop-base"]],
+  extends: ["../shared", "../libs/drop-base"],
  app: {
    baseURL: "/main",
-  }
+  },
  devtools: {
    enabled: false,
  },
 });
--- a/main/pages/library/[id]/index.vue
+++ b/main/pages/library/[id]/index.vue
@ -18,20 +18,10 @@
    <div class="relative z-10">
      <div class="px-8 pb-4">
        <h1
-          class="text-5xl text-zinc-100 font-bold font-display drop-shadow-lg mb-4"
+          class="text-5xl text-zinc-100 font-bold font-display drop-shadow-lg mb-8"
        >
          {{ game.mName }}
        </h1>
        <!-- Playtime Display -->
        <div class="mb-8">
          <PlaytimeDisplay 
            :stats="gamePlaytime" 
            :is-active="isPlaytimeActive"
            :show-details="false"
            :show-active-indicator="false"
          />
        </div>
        <div class="flex flex-row gap-x-4 items-stretch mb-8">
          <!-- Do not add scale animations to this: https://stackoverflow.com/a/35683068 -->
@ -70,12 +60,6 @@
          </div>
          <div class="space-y-6">
            <!-- Playtime Statistics -->
            <PlaytimeStats 
              :stats="gamePlaytime" 
              :is-active="isPlaytimeActive"
            />
            <div class="bg-zinc-800/50 rounded-xl p-6 backdrop-blur-sm">
              <h2 class="text-xl font-display font-semibold text-zinc-100 mb-4">
                Game Images
@ -544,19 +528,6 @@ const currentImageIndex = ref(0);
 const configureModalOpen = ref(false);
 // Playtime tracking
 const { 
  getGamePlaytime, 
  setupGameEventListeners,
  activeSessions 
 } = usePlaytime();
 const gamePlaytime = ref(await getGamePlaytime(id));
 const isPlaytimeActive = computed(() => activeSessions.value.has(id));
 // Setup playtime event listeners for this game
 setupGameEventListeners(id);
 async function installFlow() {
  installFlowOpen.value = true;
  versionOptions.value = undefined;
--- a/main/tailwind.config.js
+++ b/main/tailwind.config.js
@ -7,6 +7,7 @@ export default {
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
    "../shared/components/**/*.vue"
  ],
  theme: {
    extend: {
--- a/main/types.ts
+++ b/main/types.ts
@ -94,37 +94,3 @@ export type Settings = {
  maxDownloadThreads: number;
  forceOffline: boolean;
 };
 export type GamePlaytimeStats = {
  gameId: string;
  totalPlaytimeSeconds: number;
  sessionCount: number;
  firstPlayed: string;
  lastPlayed: string;
  averageSessionLength: number;
  currentSessionDuration?: number;
 };
 export type PlaytimeSession = {
  gameId: string;
  startTime: string;
  sessionId: string;
 };
 export type PlaytimeUpdateEvent = {
  gameId: string;
  stats: GamePlaytimeStats;
  isActive: boolean;
 };
 export type PlaytimeSessionStartEvent = {
  gameId: string;
  startTime: string;
 };
 export type PlaytimeSessionEndEvent = {
  gameId: string;
  sessionDurationSeconds: number;
  totalPlaytimeSeconds: number;
  sessionCount: number;
 };
--- a/shared/app.vue
+++ b/shared/app.vue
@ -0,0 +1,50 @@
 <template>
  <NuxtLoadingIndicator color="#2563eb" />
  <NuxtLayout class="select-none w-screen h-screen">
    <NuxtPage />
    <ModalStack />
  </NuxtLayout>
 </template>
 <script setup lang="ts">
 import "~/composables/downloads.js";
 import { invoke } from "@tauri-apps/api/core";
 import { useAppState } from "./composables/app-state.js";
 import {
  initialNavigation,
  setupHooks,
 } from "./composables/state-navigation.js";
 const router = useRouter();
 const state = useAppState();
 async function fetchState() {
  try {
    state.value = JSON.parse(await invoke("fetch_state"));
    if (!state.value)
      throw createError({
        statusCode: 500,
        statusMessage: `App state is: ${state.value}`,
        fatal: true,
      });
  } catch (e) {
    console.error("failed to parse state", e);
    throw e;
  }
 }
 await fetchState();
 // This is inefficient but apparently we do it lol
 router.beforeEach(async () => {
  await fetchState();
 });
 setupHooks();
 initialNavigation(state);
 useHead({
  title: "Drop",
 });
 </script>
--- a/shared/assets/main.scss
+++ b/shared/assets/main.scss
@ -0,0 +1,84 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
 html,
 body {
  -ms-overflow-style: none; /* IE and Edge /
 scrollbar-width: none; / Firefox */
 }
 /* Hide scrollbar for Chrome, Safari and Opera */
 html::-webkit-scrollbar {
  display: none;
 }
 $motiva: (
  ("MotivaSansThin.ttf", "ttf", 100, normal),
  ("MotivaSansLight.woff.ttf", "woff", 300, normal),
  ("MotivaSansRegular.woff.ttf", "woff", 400, normal),
  ("MotivaSansMedium.woff.ttf", "woff", 500, normal),
  ("MotivaSansBold.woff.ttf", "woff", 600, normal),
  ("MotivaSansExtraBold.ttf", "woff", 700, normal),
  ("MotivaSansBlack.woff.ttf", "woff", 900, normal)
 );
 $helvetica: (
  ("Helvetica.woff", "woff", 400, normal),
  ("Helvetica-Oblique.woff", "woff", 400, italic),
  ("Helvetica-Bold.woff", "woff", 600, normal),
  ("Helvetica-BoldOblique.woff", "woff", 600, italic),
  ("helvetica-light-587ebe5a59211.woff2", "woff2", 300, normal)
 );
@each $file, $format, $weight, $style in $motiva {
  @font-face {
    font-family: "Motiva Sans";
    src: url("/fonts/motiva/#{$file}") format($format);
    font-weight: $weight;
    font-style: $style;
  }
 }
@each $file, $format, $weight, $style in $helvetica {
  @font-face {
    font-family: "Helvetica";
    src: url("/fonts/helvetica/#{$file}") format($format);
    font-weight: $weight;
    font-style: $style;
  }
 }
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/InterVariable.ttf");
  font-style: normal;
 }
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/InterVariable-Italic.ttf");
  font-style: italic;
 }
 /* ===== Scrollbar CSS ===== */
 /* Firefox */
 * {
  scrollbar-width: 4px;
  scrollbar-color: #52525b #00000000;
 }
 /* Chrome, Edge, and Safari */
 *::-webkit-scrollbar {
  width: 4px;
 }
 *::-webkit-scrollbar-track {
  background: transparent;
 }
 *::-webkit-scrollbar-thumb {
  background-color: #52525b;
  border-radius: 10px;
  border: 3px solid #52525b;
 }
--- a/shared/components/GameStatusButton.vue
+++ b/shared/components/GameStatusButton.vue
--- a/shared/components/Logo.vue
+++ b/shared/components/Logo.vue
--- a/shared/components/Wordmark.vue
+++ b/shared/components/Wordmark.vue
--- a/shared/composables/app-state.ts
+++ b/shared/composables/app-state.ts
--- a/shared/composables/current-page-engine.ts
+++ b/shared/composables/current-page-engine.ts
--- a/shared/composables/downloads.ts
+++ b/shared/composables/downloads.ts
--- a/shared/composables/game.ts
+++ b/shared/composables/game.ts
--- a/shared/composables/generateGameMeta.ts
+++ b/shared/composables/generateGameMeta.ts
--- a/shared/composables/state-navigation.ts
+++ b/shared/composables/state-navigation.ts
--- a/shared/composables/use-object.ts
+++ b/shared/composables/use-object.ts
@ -1,5 +1,5 @@
 import { convertFileSrc } from "@tauri-apps/api/core";
-export const useObject = async (id: string) => {
+export const useObject = (id: string) => {
  return convertFileSrc(id, "object");
 };
--- a/shared/error.vue
+++ b/shared/error.vue
@ -0,0 +1,91 @@
 <template>
  <NuxtLayout name="default">
    <div
      class="grid min-h-full grid-cols-1 grid-rows-[1fr,auto,1fr] lg:grid-cols-[max(50%,36rem),1fr]"
    >
      <header
        class="mx-auto w-full max-w-7xl px-6 pt-6 sm:pt-10 lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:px-8"
      >
        <Logo class="h-10 w-auto sm:h-12" />
      </header>
      <main
        class="mx-auto w-full max-w-7xl px-6 py-24 sm:py-32 lg:col-span-2 lg:col-start-1 lg:row-start-2 lg:px-8"
      >
        <div class="max-w-lg">
          <p class="text-base font-semibold leading-8 text-blue-600">
            {{ error?.statusCode }}
          </p>
          <h1
            class="mt-4 text-3xl font-bold font-display tracking-tight text-zinc-100 sm:text-5xl"
          >
            Oh no!
          </h1>
          <p
            v-if="message"
            class="mt-3 font-bold text-base leading-7 text-red-500"
          >
            {{ message }}
          </p>
          <p class="mt-6 text-base leading-7 text-zinc-400">
            An error occurred while responding to your request. If you believe
            this to be a bug, please report it. Try signing in and see if it
            resolves the issue.
          </p>
          <div class="mt-10">
            <!-- full app reload to fix errors -->
            <a
              href="/store"
              class="text-sm font-semibold leading-7 text-blue-600"
              ><span aria-hidden="true">&larr;</span> Back to store</a
            >
          </div>
        </div>
      </main>
      <footer class="self-end lg:col-span-2 lg:col-start-1 lg:row-start-3">
        <div class="border-t border-zinc-700 bg-zinc-900 py-10">
          <nav
            class="mx-auto flex w-full max-w-7xl items-center gap-x-4 px-6 text-sm leading-7 text-zinc-400 lg:px-8"
          >
            <NuxtLink href="/docs">Documentation</NuxtLink>
            <svg
              viewBox="0 0 2 2"
              aria-hidden="true"
              class="h-0.5 w-0.5 fill-zinc-600"
            >
              <circle cx="1" cy="1" r="1" />
            </svg>
            <a href="https://discord.gg/NHx46XKJWA" target="_blank"
              >Support Discord</a
            >
          </nav>
        </div>
      </footer>
      <div
        class="hidden lg:relative lg:col-start-2 lg:row-start-1 lg:row-end-4 lg:block"
      >
        <img
          src="@/assets/wallpaper.jpg"
          alt=""
          class="absolute inset-0 h-full w-full object-cover"
        />
      </div>
    </div>
  </NuxtLayout>
 </template>
 <script setup lang="ts">
 import type { NuxtError } from "#app";
 const props = defineProps({
  error: Object as () => NuxtError,
 });
 const statusCode = props.error?.statusCode;
 const message =
  props.error?.statusMessage ||
  props.error?.message ||
  "An unknown error occurred.";
 console.error(props.error);
 </script>
--- a/shared/nuxt.config.ts
+++ b/shared/nuxt.config.ts
@ -0,0 +1,25 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
  compatibilityDate: "2024-04-03",
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  css: ["~/assets/main.scss"],
  ssr: false,
  extends: [["../libs/drop-base"]],
  app: {
    baseURL: "/main",
  },
  devtools: {
    enabled: false,
  },
 });
--- a/shared/package.json
+++ b/shared/package.json
@ -0,0 +1,37 @@
 {
  "name": "view",
  "private": true,
  "version": "0.3.3",
  "type": "module",
  "scripts": {
    "build": "nuxt generate",
    "dev": "nuxt dev",
    "postinstall": "nuxt prepare",
    "tauri": "tauri"
  },
  "dependencies": {
    "@headlessui/vue": "^1.7.23",
    "@heroicons/vue": "^2.1.5",
    "@nuxtjs/tailwindcss": "^6.12.2",
    "@tauri-apps/api": "^2.7.0",
    "koa": "^2.16.1",
    "markdown-it": "^14.1.0",
    "micromark": "^4.0.1",
    "nuxt": "^3.16.0",
    "scss": "^0.2.4",
    "vue-router": "latest",
    "vuedraggable": "^4.1.0"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.9",
    "@tailwindcss/typography": "^0.5.15",
    "@types/markdown-it": "^14.1.2",
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.47",
    "sass-embedded": "^1.79.4",
    "tailwindcss": "^3.4.13",
    "typescript": "^5.8.3",
    "vue-tsc": "^2.2.10"
  },
  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
--- a/shared/plugins/global-error-handler.ts
+++ b/shared/plugins/global-error-handler.ts
--- a/shared/plugins/vuedraggable.ts
+++ b/shared/plugins/vuedraggable.ts
--- a/shared/public/fonts/helvetica/Helvetica-Bold.woff
+++ b/shared/public/fonts/helvetica/Helvetica-Bold.woff
--- a/shared/public/fonts/helvetica/Helvetica-BoldOblique.woff
+++ b/shared/public/fonts/helvetica/Helvetica-BoldOblique.woff
--- a/shared/public/fonts/helvetica/Helvetica-Oblique.woff
+++ b/shared/public/fonts/helvetica/Helvetica-Oblique.woff
--- a/shared/public/fonts/helvetica/Helvetica.woff
+++ b/shared/public/fonts/helvetica/Helvetica.woff
--- a/shared/public/fonts/helvetica/helvetica-compressed-5871d14b6903a.woff
+++ b/shared/public/fonts/helvetica/helvetica-compressed-5871d14b6903a.woff
--- a/shared/public/fonts/helvetica/helvetica-light-587ebe5a59211.woff
+++ b/shared/public/fonts/helvetica/helvetica-light-587ebe5a59211.woff
--- a/shared/public/fonts/helvetica/helvetica-light-587ebe5a59211.woff2
+++ b/shared/public/fonts/helvetica/helvetica-light-587ebe5a59211.woff2
--- a/shared/public/fonts/helvetica/helvetica-rounded-bold-5871d05ead8de.woff
+++ b/shared/public/fonts/helvetica/helvetica-rounded-bold-5871d05ead8de.woff
--- a/shared/public/fonts/inter/InterVariable-Italic.ttf
+++ b/shared/public/fonts/inter/InterVariable-Italic.ttf
--- a/shared/public/fonts/inter/InterVariable.ttf
+++ b/shared/public/fonts/inter/InterVariable.ttf
--- a/shared/public/fonts/motiva/MotivaSansBlack.woff.ttf
+++ b/shared/public/fonts/motiva/MotivaSansBlack.woff.ttf
--- a/shared/public/fonts/motiva/MotivaSansBold.woff.ttf
+++ b/shared/public/fonts/motiva/MotivaSansBold.woff.ttf
--- a/shared/public/fonts/motiva/MotivaSansExtraBold.ttf
+++ b/shared/public/fonts/motiva/MotivaSansExtraBold.ttf
--- a/shared/public/fonts/motiva/MotivaSansLight.woff.ttf
+++ b/shared/public/fonts/motiva/MotivaSansLight.woff.ttf
--- a/shared/public/fonts/motiva/MotivaSansMedium.woff.ttf
+++ b/shared/public/fonts/motiva/MotivaSansMedium.woff.ttf
--- a/shared/public/fonts/motiva/MotivaSansRegular.woff.ttf
+++ b/shared/public/fonts/motiva/MotivaSansRegular.woff.ttf
--- a/shared/public/fonts/motiva/MotivaSansThin.ttf
+++ b/shared/public/fonts/motiva/MotivaSansThin.ttf
--- a/shared/tailwind.config.js
+++ b/shared/tailwind.config.js
@ -0,0 +1,20 @@
 /** @type {import('tailwindcss').Config} */
 export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter"],
        display: ["Motiva Sans"],
      },
    },
  },
  plugins: [require("@tailwindcss/forms"), require('@tailwindcss/typography')],
 };
--- a/shared/tsconfig.json
+++ b/shared/tsconfig.json
@ -0,0 +1,5 @@
 {
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
  "exclude": ["src-tauri/**/*"]
 }
--- a/shared/types.ts
+++ b/shared/types.ts
@ -0,0 +1,96 @@
 import type { Component } from "vue";
 export type NavigationItem = {
  prefix: string;
  route: string;
  label: string;
 };
 export type QuickActionNav = {
  icon: Component;
  notifications?: number;
  action: () => Promise<void>;
 };
 export type User = {
  id: string;
  username: string;
  admin: boolean;
  displayName: string;
  profilePictureObjectId: string;
 };
 export type AppState = {
  status: AppStatus;
  user?: User;
 };
 export type Game = {
  id: string;
  mName: string;
  mShortDescription: string;
  mDescription: string;
  mIconObjectId: string;
  mBannerObjectId: string;
  mCoverObjectId: string;
  mImageLibraryObjectIds: string[];
  mImageCarouselObjectIds: string[];
 };
 export type Collection = {
  id: string;
  name: string;
  isDefault: boolean;
  entries: Array<{ gameId: string; game: Game }>;
 };
 export type GameVersion = {
  launchCommandTemplate: string;
 };
 export enum AppStatus {
  NotConfigured = "NotConfigured",
  Offline = "Offline",
  SignedOut = "SignedOut",
  SignedIn = "SignedIn",
  SignedInNeedsReauth = "SignedInNeedsReauth",
  ServerUnavailable = "ServerUnavailable",
 }
 export enum GameStatusEnum {
  Remote = "Remote",
  Queued = "Queued",
  Downloading = "Downloading",
  Validating = "Validating",
  Installed = "Installed",
  Updating = "Updating",
  Uninstalling = "Uninstalling",
  SetupRequired = "SetupRequired",
  Running = "Running",
  PartiallyInstalled = "PartiallyInstalled",
 }
 export type GameStatus = {
  type: GameStatusEnum;
  version_name?: string;
  install_dir?: string;
 };
 export enum DownloadableType {
  Game = "Game",
  Tool = "Tool",
  DLC = "DLC",
  Mod = "Mod",
 }
 export type DownloadableMetadata = {
  id: string;
  version: string;
  downloadType: DownloadableType;
 };
 export type Settings = {
  autostart: boolean;
  maxDownloadThreads: number;
  forceOffline: boolean;
 };
--- a/shared/yarn.lock
+++ b/shared/yarn.lock
--- a/src-tauri/src/database/models.rs
+++ b/src-tauri/src/database/models.rs
@ -8,7 +8,7 @@ pub mod data {
    // Declare it using the actual version that it is from, i.e. v1::Settings rather than just Settings from here
    pub type GameVersion = v1::GameVersion;
-    pub type Database = v4::Database;
+    pub type Database = v3::Database;
    pub type Settings = v1::Settings;
    pub type DatabaseAuth = v1::DatabaseAuth;
@ -20,10 +20,7 @@ pub mod data {
    pub type DownloadableMetadata = v1::DownloadableMetadata;
    pub type DownloadType = v1::DownloadType;
    pub type DatabaseApplications = v2::DatabaseApplications;
-    //pub type DatabaseCompatInfo = v2::DatabaseCompatInfo;
+    // pub type DatabaseCompatInfo = v2::DatabaseCompatInfo;
    pub type PlaytimeData = v4::PlaytimeData;
    pub type GamePlaytimeStats = v4::GamePlaytimeStats;
    pub type PlaytimeSession = v4::PlaytimeSession;
    use std::collections::HashMap;
@ -358,108 +355,6 @@ pub mod data {
                settings: Settings::default(),
                cache_dir,
                compat_info: None,
                playtime_data: PlaytimeData::default(),
            }
        }
    }
    mod v4 {
        use std::{collections::HashMap, path::PathBuf, time::SystemTime};
        use super::{
            DatabaseApplications, DatabaseAuth, DatabaseCompatInfo, Deserialize, Serialize,
            Settings, native_model, v3,
        };
        #[native_model(id = 1, version = 4, with = native_model::rmp_serde_1_3::RmpSerde)]
        #[derive(Serialize, Deserialize, Clone, Default)]
        pub struct Database {
            #[serde(default)]
            pub settings: Settings,
            pub auth: Option<DatabaseAuth>,
            pub base_url: String,
            pub applications: DatabaseApplications,
            #[serde(skip)]
            pub prev_database: Option<PathBuf>,
            pub cache_dir: PathBuf,
            pub compat_info: Option<DatabaseCompatInfo>,
            #[serde(default)]
            pub playtime_data: PlaytimeData,
        }
        #[derive(Serialize, Deserialize, Clone, Default)]
        #[native_model(id = 9, version = 1, with = native_model::rmp_serde_1_3::RmpSerde)]
        pub struct PlaytimeData {
            pub game_sessions: HashMap<String, GamePlaytimeStats>,
            #[serde(skip)]
            pub active_sessions: HashMap<String, PlaytimeSession>,
        }
        #[derive(Serialize, Deserialize, Clone, Debug)]
        #[native_model(id = 10, version = 1, with = native_model::rmp_serde_1_3::RmpSerde)]
        pub struct GamePlaytimeStats {
            pub game_id: String,
            pub total_playtime_seconds: u64,
            pub session_count: u32,
            pub first_played: SystemTime,
            pub last_played: SystemTime,
        }
        #[derive(Serialize, Deserialize, Clone, Debug)]
        #[native_model(id = 11, version = 1, with = native_model::rmp_serde_1_3::RmpSerde)]
        pub struct PlaytimeSession {
            pub game_id: String,
            pub start_time: SystemTime,
            pub session_id: String,
        }
        impl GamePlaytimeStats {
            pub fn new(game_id: String) -> Self {
                let now = SystemTime::now();
                Self {
                    game_id,
                    total_playtime_seconds: 0,
                    session_count: 0,
                    first_played: now,
                    last_played: now,
                }
            }
            pub fn average_session_length(&self) -> u64 {
                if self.session_count == 0 {
                    0
                } else {
                    self.total_playtime_seconds / self.session_count as u64
                }
            }
        }
        impl PlaytimeSession {
            pub fn new(game_id: String) -> Self {
                Self {
                    game_id,
                    start_time: SystemTime::now(),
                    session_id: uuid::Uuid::new_v4().to_string(),
                }
            }
            pub fn duration(&self) -> std::time::Duration {
                self.start_time.elapsed().unwrap_or_default()
            }
        }
        impl From<v3::Database> for Database {
            fn from(value: v3::Database) -> Self {
                Self {
                    settings: value.settings,
                    auth: value.auth,
                    base_url: value.base_url,
                    applications: value.applications,
                    prev_database: value.prev_database,
                    cache_dir: value.cache_dir,
                    compat_info: value.compat_info,
                    playtime_data: PlaytimeData::default(),
                }
            }
        }
--- a/src-tauri/src/error/process_error.rs
+++ b/src-tauri/src/error/process_error.rs
@ -11,8 +11,7 @@ pub enum ProcessError {
    IOError(Error),
    FormatError(String), // String errors supremacy
    InvalidPlatform,
-    OpenerError(tauri_plugin_opener::Error),
+    OpenerError(tauri_plugin_opener::Error)
    PlaytimeError(String),
 }
 impl Display for ProcessError {
@ -26,7 +25,6 @@ impl Display for ProcessError {
            ProcessError::InvalidPlatform => "This game cannot be played on the current platform",
            ProcessError::FormatError(e) => &format!("Failed to format template: {e}"),
            ProcessError::OpenerError(error) => &format!("Failed to open directory: {error}"),
            ProcessError::PlaytimeError(error) => &format!("Playtime tracking error: {error}"),
                    };
        write!(f, "{s}")
    }
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@ -11,7 +11,6 @@ mod games;
 mod client;
 mod download_manager;
 mod error;
 mod playtime;
 mod process;
 mod remote;
@ -47,12 +46,6 @@ use games::commands::{
 use games::downloads::commands::download_game;
 use games::library::{Game, update_game_configuration};
 use log::{LevelFilter, debug, info, warn};
 use playtime::manager::PlaytimeManager;
 use playtime::commands::{
    start_playtime_tracking, end_playtime_tracking, fetch_game_playtime, 
    fetch_all_playtime_stats, is_playtime_session_active, get_active_playtime_sessions,
    cleanup_orphaned_playtime_sessions
 };
 use log4rs::Config;
 use log4rs::append::console::ConsoleAppender;
 use log4rs::append::file::FileAppender;
@ -134,11 +127,7 @@ pub struct AppState<'a> {
    #[serde(skip_serializing)]
    process_manager: Arc<Mutex<ProcessManager<'a>>>,
    #[serde(skip_serializing)]
    playtime_manager: Arc<Mutex<PlaytimeManager>>,
    #[serde(skip_serializing)]
    compat_info: Option<CompatInfo>,
    #[serde(skip_serializing)]
    app_handle: AppHandle,
 }
 async fn setup(handle: AppHandle) -> AppState<'static> {
@ -175,7 +164,6 @@ async fn setup(handle: AppHandle) -> AppState<'static> {
    let games = HashMap::new();
    let download_manager = Arc::new(DownloadManagerBuilder::build(handle.clone()));
    let process_manager = Arc::new(Mutex::new(ProcessManager::new(handle.clone())));
    let playtime_manager = Arc::new(Mutex::new(PlaytimeManager::new(handle.clone())));
    let compat_info = create_new_compat_info();
    debug!("checking if database is set up");
@ -190,9 +178,7 @@ async fn setup(handle: AppHandle) -> AppState<'static> {
            games,
            download_manager,
            process_manager,
            playtime_manager,
            compat_info,
            app_handle: handle.clone(),
        };
    }
@ -251,20 +237,13 @@ async fn setup(handle: AppHandle) -> AppState<'static> {
        warn!("failed to sync autostart state: {e}");
    }
    // Clean up any orphaned playtime sessions
    if let Err(e) = playtime_manager.lock().unwrap().cleanup_orphaned_sessions() {
        warn!("failed to cleanup orphaned playtime sessions: {e}");
    }
    AppState {
        status: app_status,
        user,
        games,
        download_manager,
        process_manager,
        playtime_manager,
        compat_info,
        app_handle: handle.clone(),
    }
 }
@ -355,15 +334,7 @@ pub fn run() {
            kill_game,
            toggle_autostart,
            get_autostart_enabled,
-            open_process_logs,
+            open_process_logs
            // Playtime tracking
            start_playtime_tracking,
            end_playtime_tracking,
            fetch_game_playtime,
            fetch_all_playtime_stats,
            is_playtime_session_active,
            get_active_playtime_sessions,
            cleanup_orphaned_playtime_sessions
        ])
        .plugin(tauri_plugin_shell::init())
        .plugin(tauri_plugin_dialog::init())
@ -390,7 +361,7 @@ pub fn run() {
                let _main_window = tauri::WebviewWindowBuilder::new(
                    &handle,
                    "main", // BTW this is not the name of the window, just the label. Keep this 'main', there are permissions & configs that depend on it
-                    tauri::WebviewUrl::App("main".into()),
+                    tauri::WebviewUrl::App("tvmode".into()),
                )
                .title("Drop Desktop App")
                .min_inner_size(1000.0, 500.0)
--- a/src-tauri/src/playtime/commands.rs
+++ b/src-tauri/src/playtime/commands.rs
@ -1,95 +0,0 @@
 use std::collections::HashMap;
 use tauri::State;
 use std::sync::Mutex;
 use crate::AppState;
 use super::manager::PlaytimeStats;
 use super::events::{push_playtime_update, push_session_start, push_session_end};
 #[tauri::command]
 pub fn start_playtime_tracking(
    game_id: String,
    state: State<'_, Mutex<AppState<'_>>>,
 ) -> Result<(), String> {
    let state_lock = state.lock().unwrap();
    let playtime_manager_lock = state_lock.playtime_manager.lock().unwrap();
    match playtime_manager_lock.start_session(game_id.clone()) {
        Ok(()) => {
            push_session_start(&state_lock.app_handle, &game_id);
            Ok(())
        }
        Err(e) => Err(e.to_string())
    }
 }
 #[tauri::command]
 pub fn end_playtime_tracking(
    game_id: String,
    state: State<'_, Mutex<AppState<'_>>>,
 ) -> Result<PlaytimeStats, String> {
    let state_lock = state.lock().unwrap();
    let playtime_manager_lock = state_lock.playtime_manager.lock().unwrap();
    match playtime_manager_lock.end_session(game_id.clone()) {
        Ok(stats) => {
            push_session_end(&state_lock.app_handle, &game_id, &stats);
            push_playtime_update(&state_lock.app_handle, &game_id, stats.clone(), false);
            Ok(stats)
        }
        Err(e) => Err(e.to_string())
    }
 }
 #[tauri::command]
 pub fn fetch_game_playtime(
    game_id: String,
    state: State<'_, Mutex<AppState<'_>>>,
 ) -> Result<Option<PlaytimeStats>, String> {
    let state_lock = state.lock().unwrap();
    let playtime_manager_lock = state_lock.playtime_manager.lock().unwrap();
    Ok(playtime_manager_lock.get_game_stats(&game_id))
 }
 #[tauri::command]
 pub fn fetch_all_playtime_stats(
    state: State<'_, Mutex<AppState<'_>>>,
 ) -> Result<HashMap<String, PlaytimeStats>, String> {
    let state_lock = state.lock().unwrap();
    let playtime_manager_lock = state_lock.playtime_manager.lock().unwrap();
    Ok(playtime_manager_lock.get_all_stats())
 }
 #[tauri::command]
 pub fn is_playtime_session_active(
    game_id: String,
    state: State<'_, Mutex<AppState<'_>>>,
 ) -> Result<bool, String> {
    let state_lock = state.lock().unwrap();
    let playtime_manager_lock = state_lock.playtime_manager.lock().unwrap();
    Ok(playtime_manager_lock.is_session_active(&game_id))
 }
 #[tauri::command]
 pub fn get_active_playtime_sessions(
    state: State<'_, Mutex<AppState<'_>>>,
 ) -> Result<Vec<String>, String> {
    let state_lock = state.lock().unwrap();
    let playtime_manager_lock = state_lock.playtime_manager.lock().unwrap();
    Ok(playtime_manager_lock.get_active_sessions())
 }
 #[tauri::command]
 pub fn cleanup_orphaned_playtime_sessions(
    state: State<'_, Mutex<AppState<'_>>>,
 ) -> Result<(), String> {
    let state_lock = state.lock().unwrap();
    let playtime_manager_lock = state_lock.playtime_manager.lock().unwrap();
    playtime_manager_lock.cleanup_orphaned_sessions()
        .map_err(|e| e.to_string())
 }
--- a/src-tauri/src/playtime/events.rs
+++ b/src-tauri/src/playtime/events.rs
@ -1,81 +0,0 @@
 use serde::Serialize;
 use tauri::{AppHandle, Emitter};
 use log::warn;
 use super::manager::PlaytimeStats;
 #[derive(Serialize, Clone, Debug)]
 #[serde(rename_all = "camelCase")]
 pub struct PlaytimeUpdateEvent {
    pub game_id: String,
    pub stats: PlaytimeStats,
    pub is_active: bool,
 }
 #[derive(Serialize, Clone, Debug)]
 #[serde(rename_all = "camelCase")]
 pub struct PlaytimeSessionStartEvent {
    pub game_id: String,
    pub start_time: std::time::SystemTime,
 }
 #[derive(Serialize, Clone, Debug)]
 #[serde(rename_all = "camelCase")]
 pub struct PlaytimeSessionEndEvent {
    pub game_id: String,
    pub session_duration_seconds: u64,
    pub total_playtime_seconds: u64,
    pub session_count: u32,
 }
 /// Push a playtime update event to the frontend
 pub fn push_playtime_update(app_handle: &AppHandle, game_id: &str, stats: PlaytimeStats, is_active: bool) {
    let event = PlaytimeUpdateEvent {
        game_id: game_id.to_string(),
        stats,
        is_active,
    };
    if let Err(e) = app_handle.emit(&format!("playtime_update/{}", game_id), &event) {
        warn!("Failed to emit playtime update event for {}: {}", game_id, e);
    }
    // Also emit a general playtime update event for global listeners
    if let Err(e) = app_handle.emit("playtime_update", &event) {
        warn!("Failed to emit general playtime update event: {}", e);
    }
 }
 /// Push a session start event to the frontend
 pub fn push_session_start(app_handle: &AppHandle, game_id: &str) {
    let event = PlaytimeSessionStartEvent {
        game_id: game_id.to_string(),
        start_time: std::time::SystemTime::now(),
    };
    if let Err(e) = app_handle.emit(&format!("playtime_session_start/{}", game_id), &event) {
        warn!("Failed to emit session start event for {}: {}", game_id, e);
    }
    if let Err(e) = app_handle.emit("playtime_session_start", &event) {
        warn!("Failed to emit general session start event: {}", e);
    }
 }
 /// Push a session end event to the frontend
 pub fn push_session_end(app_handle: &AppHandle, game_id: &str, stats: &PlaytimeStats) {
    let event = PlaytimeSessionEndEvent {
        game_id: game_id.to_string(),
        session_duration_seconds: stats.current_session_duration.unwrap_or(0),
        total_playtime_seconds: stats.total_playtime_seconds,
        session_count: stats.session_count,
    };
    if let Err(e) = app_handle.emit(&format!("playtime_session_end/{}", game_id), &event) {
        warn!("Failed to emit session end event for {}: {}", game_id, e);
    }
    if let Err(e) = app_handle.emit("playtime_session_end", &event) {
        warn!("Failed to emit general session end event: {}", e);
    }
 }
--- a/src-tauri/src/playtime/manager.rs
+++ b/src-tauri/src/playtime/manager.rs
@ -1,255 +0,0 @@
 use std::collections::HashMap;
 use std::time::SystemTime;
 use std::fmt;
 use log::{debug, warn};
 use serde::{Deserialize, Serialize};
 use tauri::AppHandle;
 use crate::database::db::{borrow_db_checked, borrow_db_mut_checked};
 use crate::database::models::data::{GamePlaytimeStats, PlaytimeSession};
 use crate::error::process_error::ProcessError;
 #[derive(Debug)]
 pub enum PlaytimeError {
    DatabaseError(String),
    SessionNotFound(String),
    SessionAlreadyActive(String),
    InvalidGameId(String),
 }
 impl fmt::Display for PlaytimeError {
    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
        match self {
            PlaytimeError::DatabaseError(msg) => write!(f, "Database error: {}", msg),
            PlaytimeError::SessionNotFound(game_id) => write!(f, "Session not found for game: {}", game_id),
            PlaytimeError::SessionAlreadyActive(game_id) => write!(f, "Session already active for game: {}", game_id),
            PlaytimeError::InvalidGameId(game_id) => write!(f, "Invalid game ID: {}", game_id),
        }
    }
 }
 impl std::error::Error for PlaytimeError {}
 impl From<PlaytimeError> for ProcessError {
    fn from(error: PlaytimeError) -> Self {
        ProcessError::PlaytimeError(error.to_string())
    }
 }
 #[derive(Serialize, Deserialize, Clone, Debug)]
 #[serde(rename_all = "camelCase")]
 pub struct PlaytimeStats {
    pub game_id: String,
    pub total_playtime_seconds: u64,
    pub session_count: u32,
    pub first_played: SystemTime,
    pub last_played: SystemTime,
    pub average_session_length: u64,
    pub current_session_duration: Option<u64>,
 }
 impl From<GamePlaytimeStats> for PlaytimeStats {
    fn from(stats: GamePlaytimeStats) -> Self {
        let average_length = stats.average_session_length();
        Self {
            game_id: stats.game_id,
            total_playtime_seconds: stats.total_playtime_seconds,
            session_count: stats.session_count,
            first_played: stats.first_played,
            last_played: stats.last_played,
            average_session_length: average_length,
            current_session_duration: None,
        }
    }
 }
 pub struct PlaytimeManager {
    app_handle: AppHandle,
 }
 impl PlaytimeManager {
    pub fn new(app_handle: AppHandle) -> Self {
        Self { app_handle }
    }
    /// Start tracking playtime for a game
    pub fn start_session(&self, game_id: String) -> Result<(), PlaytimeError> {
        debug!("Starting playtime session for game: {}", game_id);
        let mut db_handle = borrow_db_mut_checked();
        // Check if session is already active
        if db_handle.playtime_data.active_sessions.contains_key(&game_id) {
            warn!("Session already active for game: {}", game_id);
            return Err(PlaytimeError::SessionAlreadyActive(game_id));
        }
        // Create new session
        let session = PlaytimeSession::new(game_id.clone());
        db_handle.playtime_data.active_sessions.insert(game_id.clone(), session);
        debug!("Started playtime tracking for game: {}", game_id);
        Ok(())
    }
    /// End tracking playtime for a game and update stats
    pub fn end_session(&self, game_id: String) -> Result<PlaytimeStats, PlaytimeError> {
        debug!("Ending playtime session for game: {}", game_id);
        let mut db_handle = borrow_db_mut_checked();
        // Get active session
        let session = db_handle.playtime_data.active_sessions.remove(&game_id)
            .ok_or_else(|| PlaytimeError::SessionNotFound(game_id.clone()))?;
        let session_duration = session.duration().as_secs();
        debug!("Session duration for {}: {} seconds", game_id, session_duration);
        // Update or create game stats
        let stats = db_handle.playtime_data.game_sessions
            .entry(game_id.clone())
            .or_insert_with(|| GamePlaytimeStats::new(game_id.clone()));
        // Update stats
        stats.total_playtime_seconds += session_duration;
        stats.session_count += 1;
        stats.last_played = SystemTime::now();
        // If this is the first session, update first_played
        if stats.session_count == 1 {
            stats.first_played = session.start_time;
        }
        let result_stats = PlaytimeStats {
            game_id: stats.game_id.clone(),
            total_playtime_seconds: stats.total_playtime_seconds,
            session_count: stats.session_count,
            first_played: stats.first_played,
            last_played: stats.last_played,
            average_session_length: stats.average_session_length(),
            current_session_duration: Some(session_duration),
        };
        debug!("Updated playtime stats for {}: {} total seconds, {} sessions", 
               game_id, stats.total_playtime_seconds, stats.session_count);
        Ok(result_stats)
    }
    /// Get playtime stats for a specific game
    pub fn get_game_stats(&self, game_id: &str) -> Option<PlaytimeStats> {
        let db_handle = borrow_db_checked();
        if let Some(stats) = db_handle.playtime_data.game_sessions.get(game_id) {
            let mut playtime_stats: PlaytimeStats = stats.clone().into();
            // If there's an active session, include current session duration
            if let Some(session) = db_handle.playtime_data.active_sessions.get(game_id) {
                playtime_stats.current_session_duration = Some(session.duration().as_secs());
            }
            Some(playtime_stats)
        } else {
            None
        }
    }
    /// Get playtime stats for all games
    pub fn get_all_stats(&self) -> HashMap<String, PlaytimeStats> {
        let db_handle = borrow_db_checked();
        let mut result = HashMap::new();
        for (game_id, stats) in &db_handle.playtime_data.game_sessions {
            let mut playtime_stats: PlaytimeStats = stats.clone().into();
            // If there's an active session, include current session duration
            if let Some(session) = db_handle.playtime_data.active_sessions.get(game_id) {
                playtime_stats.current_session_duration = Some(session.duration().as_secs());
            }
            result.insert(game_id.clone(), playtime_stats);
        }
        result
    }
    /// Check if a game has an active session
    pub fn is_session_active(&self, game_id: &str) -> bool {
        let db_handle = borrow_db_checked();
        db_handle.playtime_data.active_sessions.contains_key(game_id)
    }
    /// Get active sessions (for debugging/monitoring)
    pub fn get_active_sessions(&self) -> Vec<String> {
        let db_handle = borrow_db_checked();
        db_handle.playtime_data.active_sessions.keys().cloned().collect()
    }
    /// Clean up any orphaned sessions (called on startup)
    pub fn cleanup_orphaned_sessions(&self) -> Result<(), PlaytimeError> {
        debug!("Cleaning up orphaned playtime sessions");
        let mut db_handle = borrow_db_mut_checked();
        let orphaned_sessions: Vec<String> = db_handle.playtime_data.active_sessions.keys().cloned().collect();
        for game_id in orphaned_sessions {
            warn!("Found orphaned session for game: {}, ending it", game_id);
            if let Some(session) = db_handle.playtime_data.active_sessions.remove(&game_id) {
                let session_duration = session.duration().as_secs();
                // Only count sessions that lasted more than 5 seconds to avoid counting crashes
                if session_duration > 5 {
                    let stats = db_handle.playtime_data.game_sessions
                        .entry(game_id.clone())
                        .or_insert_with(|| GamePlaytimeStats::new(game_id.clone()));
                    stats.total_playtime_seconds += session_duration;
                    stats.session_count += 1;
                    stats.last_played = SystemTime::now();
                    if stats.session_count == 1 {
                        stats.first_played = session.start_time;
                    }
                    debug!("Recovered orphaned session for {}: {} seconds", game_id, session_duration);
                } else {
                    debug!("Discarded short orphaned session for {}: {} seconds", game_id, session_duration);
                }
            }
        }
        Ok(())
    }
    // Future server-side methods (ready for migration)
    /// Start session with server sync (placeholder for future implementation)
    #[allow(dead_code)]
    pub async fn sync_session_start(&self, game_id: String) -> Result<(), PlaytimeError> {
        // For now, just call local method
        self.start_session(game_id)?;
        // Future: Send to server
        // let response = self.api_client.post("/api/v1/playtime/start")
        //     .json(&StartSessionRequest { game_id })
        //     .send().await?;
        Ok(())
    }
    /// End session with server sync (placeholder for future implementation)
    #[allow(dead_code)]
    pub async fn sync_session_end(&self, game_id: String) -> Result<PlaytimeStats, PlaytimeError> {
        // For now, just call local method
        let stats = self.end_session(game_id)?;
        // Future: Send to server
        // let response = self.api_client.post("/api/v1/playtime/end")
        //     .json(&EndSessionRequest { game_id, duration: stats.current_session_duration })
        //     .send().await?;
        Ok(stats)
    }
 }
--- a/src-tauri/src/playtime/mod.rs
+++ b/src-tauri/src/playtime/mod.rs
@ -1,3 +0,0 @@
 pub mod commands;
 pub mod events;
 pub mod manager;
--- a/src-tauri/src/process/commands.rs
+++ b/src-tauri/src/process/commands.rs
@ -16,28 +16,14 @@ pub fn launch_game(
    //    download_type: DownloadType::Game,
    //};
-    match process_manager_lock.launch_process(id.clone(), &state_lock) {
+    match process_manager_lock.launch_process(id, &state_lock) {
-        Ok(()) => {
+        Ok(()) => {}
-            // Start playtime tracking after successful launch
+        Err(e) => return Err(e),
            drop(process_manager_lock);
            let playtime_manager_lock = state_lock.playtime_manager.lock().unwrap();
            if let Err(e) = playtime_manager_lock.start_session(id.clone()) {
                log::warn!("Failed to start playtime tracking for {}: {}", id, e);
            } else {
                log::debug!("Started playtime tracking for game: {}", id);
                crate::playtime::events::push_session_start(&state_lock.app_handle, &id);
            }
            drop(playtime_manager_lock);
        }
        Err(e) => {
            drop(process_manager_lock);
            drop(state_lock);
            return Err(e);
        }
    }
    drop(process_manager_lock);
    drop(state_lock);
    Ok(())
 }
@ -47,18 +33,6 @@ pub fn kill_game(
    state: tauri::State<'_, Mutex<AppState>>,
 ) -> Result<(), ProcessError> {
    let state_lock = state.lock().unwrap();
    let mut process_manager_lock = state_lock.process_manager.lock().unwrap();
    // End playtime tracking before killing the game
    drop(process_manager_lock);
    let playtime_manager_lock = state_lock.playtime_manager.lock().unwrap();
    if let Ok(stats) = playtime_manager_lock.end_session(game_id.clone()) {
        log::debug!("Ended playtime tracking for game: {} (manual kill)", game_id);
        crate::playtime::events::push_session_end(&state_lock.app_handle, &game_id, &stats);
        crate::playtime::events::push_playtime_update(&state_lock.app_handle, &game_id, stats, false);
    }
    drop(playtime_manager_lock);
    let mut process_manager_lock = state_lock.process_manager.lock().unwrap();
    process_manager_lock
        .kill_game(game_id)
--- a/src-tauri/src/process/process_manager.rs
+++ b/src-tauri/src/process/process_manager.rs
@ -29,7 +29,6 @@ use crate::{
    },
    error::process_error::ProcessError,
    games::{library::push_game_update, state::GameStatusManager},
    playtime::events::{push_session_end, push_playtime_update},
    process::{
        format::DropFormatArgs,
        process_handlers::{AsahiMuvmLauncher, NativeGameLauncher, UMULauncher},
@ -395,15 +394,6 @@ impl ProcessManager<'_> {
            let app_state = wait_thread_apphandle.state::<Mutex<AppState>>();
            let app_state_handle = app_state.lock().unwrap();
            // End playtime tracking before processing finish
            let playtime_manager_lock = app_state_handle.playtime_manager.lock().unwrap();
            if let Ok(stats) = playtime_manager_lock.end_session(wait_thread_game_id.id.clone()) {
                debug!("Ended playtime tracking for game: {} (process finished)", wait_thread_game_id.id);
                push_session_end(&app_state_handle.app_handle, &wait_thread_game_id.id, &stats);
                push_playtime_update(&app_state_handle.app_handle, &wait_thread_game_id.id, stats, false);
            }
            drop(playtime_manager_lock);
            let mut process_manager_handle = app_state_handle.process_manager.lock().unwrap();
            process_manager_handle.on_process_finish(wait_thread_game_id.id, result);
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@ -4,7 +4,7 @@
  "version": "0.3.3",
  "identifier": "dev.drop.client",
  "build": {
-    "beforeDevCommand": "yarn --cwd main dev --port 1432",
+    "beforeDevCommand": "yarn --cwd tvmode dev --port 1432",
    "devUrl": "http://localhost:1432/",
    "beforeBuildCommand": "yarn build",
    "frontendDist": "../.output"
--- a/tvmode/.gitignore
+++ b/tvmode/.gitignore
@ -0,0 +1,24 @@
 # Nuxt dev/build outputs
 .output
 .data
 .nuxt
 .nitro
 .cache
 dist
 # Node dependencies
 node_modules
 # Logs
 logs
 *.log
 # Misc
 .DS_Store
 .fleet
 .idea
 # Local env files
 .env
 .env.*
 !.env.example
--- a/tvmode/README.md
+++ b/tvmode/README.md
@ -0,0 +1,75 @@
 # Nuxt Minimal Starter
 Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 ## Setup
 Make sure to install dependencies:
 ```bash
 # npm
 npm install
 # pnpm
 pnpm install
 # yarn
 yarn install
 # bun
 bun install
 ```
 ## Development Server
 Start the development server on `http://localhost:3000`:
 ```bash
 # npm
 npm run dev
 # pnpm
 pnpm dev
 # yarn
 yarn dev
 # bun
 bun run dev
 ```
 ## Production
 Build the application for production:
 ```bash
 # npm
 npm run build
 # pnpm
 pnpm build
 # yarn
 yarn build
 # bun
 bun run build
 ```
 Locally preview production build:
 ```bash
 # npm
 npm run preview
 # pnpm
 pnpm preview
 # yarn
 yarn preview
 # bun
 bun run preview
 ```
 Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
--- a/tvmode/app.vue
+++ b/tvmode/app.vue
@ -0,0 +1,40 @@
 <template>
  <NuxtLoadingIndicator color="#2563eb" />
  <NuxtLayout class="select-none">
    <NuxtPage />
    <ModalStack />
  </NuxtLayout>
 </template>
 <script setup lang="ts">
 import { invoke } from '@tauri-apps/api/core';
 const router = useRouter();
 const state = useAppState();
 async function fetchState() {
  try {
    state.value = JSON.parse(await invoke("fetch_state"));
    if (!state.value)
      throw createError({
        statusCode: 500,
        statusMessage: `App state is: ${state.value}`,
        fatal: true,
      });
  } catch (e) {
    console.error("failed to parse state", e);
    throw e;
  }
 }
 await fetchState();
 // This is inefficient but apparently we do it lol
 router.beforeEach(async () => {
  await fetchState();
 });
 setupHooks();
 initialNavigation(state);
 const navigator = createTVNavigator();
 </script>
--- a/tvmode/assets/main.scss
+++ b/tvmode/assets/main.scss
@ -0,0 +1,84 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
 html,
 body {
  -ms-overflow-style: none; /* IE and Edge /
 scrollbar-width: none; / Firefox */
 }
 /* Hide scrollbar for Chrome, Safari and Opera */
 html::-webkit-scrollbar {
  display: none;
 }
 $motiva: (
  ("MotivaSansThin.ttf", "ttf", 100, normal),
  ("MotivaSansLight.woff.ttf", "woff", 300, normal),
  ("MotivaSansRegular.woff.ttf", "woff", 400, normal),
  ("MotivaSansMedium.woff.ttf", "woff", 500, normal),
  ("MotivaSansBold.woff.ttf", "woff", 600, normal),
  ("MotivaSansExtraBold.ttf", "woff", 700, normal),
  ("MotivaSansBlack.woff.ttf", "woff", 900, normal)
 );
 $helvetica: (
  ("Helvetica.woff", "woff", 400, normal),
  ("Helvetica-Oblique.woff", "woff", 400, italic),
  ("Helvetica-Bold.woff", "woff", 600, normal),
  ("Helvetica-BoldOblique.woff", "woff", 600, italic),
  ("helvetica-light-587ebe5a59211.woff2", "woff2", 300, normal)
 );
@each $file, $format, $weight, $style in $motiva {
  @font-face {
    font-family: "Motiva Sans";
    src: url("/fonts/motiva/#{$file}") format($format);
    font-weight: $weight;
    font-style: $style;
  }
 }
@each $file, $format, $weight, $style in $helvetica {
  @font-face {
    font-family: "Helvetica";
    src: url("/fonts/helvetica/#{$file}") format($format);
    font-weight: $weight;
    font-style: $style;
  }
 }
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/InterVariable.ttf");
  font-style: normal;
 }
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/InterVariable-Italic.ttf");
  font-style: italic;
 }
 /* ===== Scrollbar CSS ===== */
 /* Firefox */
 * {
  scrollbar-width: 4px;
  scrollbar-color: #52525b #00000000;
 }
 /* Chrome, Edge, and Safari */
 *::-webkit-scrollbar {
  width: 4px;
 }
 *::-webkit-scrollbar-track {
  background: transparent;
 }
 *::-webkit-scrollbar-thumb {
  background-color: #52525b;
  border-radius: 10px;
  border: 3px solid #52525b;
 }
--- a/tvmode/assets/wallpaper.jpg
+++ b/tvmode/assets/wallpaper.jpg
--- a/tvmode/components/Sidebar.vue
+++ b/tvmode/components/Sidebar.vue
@ -0,0 +1,71 @@
 <template>
    <div class="bg-zinc-950 flex flex-col items-center pl-5 px-10 py-8">
      <div class="flex flex-col items-center gap-y-10">
        <Wordmark class="h-8 mb-0.5" />
          <ol class="flex flex-col gap-y-2">
            <NuxtLink
              v-for="(nav, navIdx) in navigation"
              :class="[
                'transition rounded focus:ring-2 ring-blue-600 px-2 uppercase font-display font-semibold text-xl',
                navIdx === currentNavigation
                  ? 'text-zinc-100'
                  : 'text-zinc-400 hover:text-zinc-200',
              ]"
              :href="nav.route"
            >
              {{ nav.label }}
            </NuxtLink>
          </ol>
      </div>
    </div>
 </template>
 <script setup lang="ts">
 import { BellIcon, UserGroupIcon } from "@heroicons/vue/16/solid";
 import { AppStatus, type NavigationItem, type QuickActionNav } from "../types";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 const window = getCurrentWindow();
 const state = useAppState();
 const navigation: Array<NavigationItem> = [
  {
    prefix: "/store",
    route: "/store",
    label: "Store",
  },
  {
    prefix: "/library",
    route: "/library",
    label: "Library",
  },
  /*
  {
    prefix: "/community",
    route: "/community",
    label: "Community",
  },
  {
    prefix: "/news",
    route: "/news",
    label: "News",
  },
  */
 ];
 const { currentNavigation } = useCurrentNavigationIndex(navigation);
 const quickActions: Array<QuickActionNav> = [
  {
    icon: UserGroupIcon,
    action: async () => {},
  },
  {
    icon: BellIcon,
    action: async () => {},
  },
 ];
 const queue = useQueueState();
 const currentQueueObject = computed(() => queue.value.queue.at(0));
 </script>
--- a/tvmode/composables/tvmode.ts
+++ b/tvmode/composables/tvmode.ts
@ -0,0 +1,206 @@
 const NAVIGATE_MODIFIED_PROP = "tvnav-id";
 const NAVIGATE_INTERACT_ID = "tvnav-iid";
 const Directions = ["left", "right", "up", "down"] as const;
 type Direction = (typeof Directions)[number];
 interface NavigationJump {
  distance: number;
  id: string;
 }
 type Position = [number, number, number, number];
 class TVModeNavigator {
  private navigationNodes: Map<string, HTMLElement> = new Map();
  constructor() {
    const thisRef = this;
    const observer = new MutationObserver((v, k) => {
      this.onMutation(thisRef, v, k);
    });
    observer.observe(document.getRootNode(), {
      childList: true,
      subtree: true,
    });
    document.addEventListener("keydown", (ev) => {
      switch (ev.code) {
        case "KeyW":
          return this.moveUp();
        case "KeyS":
          return this.moveDown();
        case "KeyD":
          return this.moveRight();
        case "KeyA":
          return this.moveLeft();
      }
    });
  }
  private getCurrentPosition(element?: HTMLElement): Position {
    const el = element || document.activeElement;
    if (!el) throw "No active position";
    const rect = el.getBoundingClientRect();
    return [rect.left, rect.right, rect.top, rect.bottom];
  }
  private isSamePosition(a: Position, b: Position) {
    return a.map((v, i) => v === b[i]).every((v) => v);
  }
  private getUniqueNavNodes() {
    const hasSeen = new Map<string, boolean>();
    return this.navigationNodes
      .values()
      .filter((v) => {
        const id = this.getInteractionId(v);
        if (hasSeen.get(id)) return false;
        hasSeen.set(id, true);
        return true;
      });
  }
  private findElementWithPredicate(
    check: (current: Position, target: Position) => boolean
  ) {
    const current = this.getCurrentPosition();
    // We want things in the x direction, with a limit on the y
    let distance = Math.max(window.innerWidth, window.innerHeight);
    let element = null;
    const nodes = this.getUniqueNavNodes();
    for (const newElement of nodes) {
      const target = this.getCurrentPosition(newElement);
      if (this.isSamePosition(current, target)) continue;
      const newDistance = Math.sqrt(
        Math.pow(current[0] - target[0], 2) +
          Math.pow(current[2] - target[2], 2)
      );
      // If we're the wrong way, or further than the current option
      if (newDistance < 0 || newDistance > distance) {
        continue;
      }
      if (!check(current, target)) {
        continue;
      }
      distance = newDistance;
      element = newElement;
    }
    return element;
  }
  moveUp() {
    const leeway = 100; // 20px
    const element = this.findElementWithPredicate(
      ([xleft, xright, ytop, ybottom], [eleft, eright, etop, ebottom]) =>
        xleft - leeway < eright && xright + leeway > eleft && ytop >= ebottom
    );
    if (element) {
      element.focus();
    }
  }
  moveDown() {
    const leeway = 20; // 20px
    const element = this.findElementWithPredicate(
      ([xleft, xright, ytop, ybottom], [eleft, eright, etop, ebottom]) =>
        xleft - leeway < eright && xright + leeway > eleft && ytop <= ebottom
    );
    if (element) {
      element.focus();
    }
  }
  moveRight() {
    const leeway = 0; // 20px
    const element = this.findElementWithPredicate(
      ([xleft, xright, ytop, ybottom], [eleft, eright, etop, ebottom]) =>
        ytop - leeway < ebottom && ybottom + leeway > etop && xright <= eleft
    );
    if (element) {
      element.focus();
    }
  }
  moveLeft() {
    const leeway = 20; // 20px
    const element = this.findElementWithPredicate(
      ([xleft, xright, ytop, ybottom], [eleft, eright, etop, ebottom]) =>
        ytop - leeway < ebottom && ybottom + leeway > etop && xleft >= eright
    );
    if (element) {
      element.focus();
    }
  }
  recursivelyFindInteractable(element: Element): Array<HTMLElement> {
    const elements = [];
    for (const child of element.children) {
      if (!child) continue;
      if (child instanceof HTMLAnchorElement) {
        elements.push(child);
        continue;
      }
      if (child instanceof HTMLButtonElement) {
        elements.push(child);
        continue;
      }
      if (child instanceof HTMLInputElement) {
        elements.push(child);
        continue;
      }
      // Save ourselves a function call
      if (child.children.length > 0) {
        elements.push(...this.recursivelyFindInteractable(child));
      }
    }
    return elements;
  }
  getInteractionId(element: Element) {
    const id = element.getAttribute(NAVIGATE_INTERACT_ID);
    if (id) return id;
    const newId = crypto.randomUUID();
    element.setAttribute(NAVIGATE_INTERACT_ID, newId);
    return newId;
  }
  onMutation(
    self: TVModeNavigator,
    mutationlist: Array<MutationRecord>,
    observer: unknown
  ) {
    for (const mutation of mutationlist) {
      for (const node of mutation.addedNodes) {
        if (!node) continue;
        if (node.nodeType !== Node.ELEMENT_NODE) continue;
        const el = node as Element;
        const interactiveNodes = self.recursivelyFindInteractable(el);
        for (const v of interactiveNodes) {
          const id = self.getInteractionId(v);
          self.navigationNodes.set(id, v);
        }
      }
    }
    const interactiveElements = this.navigationNodes.values().toArray().flat();
    // Set focus so we aren't confused
    if (!document.activeElement || document.activeElement.tagName === "BODY") {
      const active = interactiveElements.at(0);
      if (active) {
        active.focus();
      }
    }
  }
 }
 export const createTVNavigator = () => new TVModeNavigator();
--- a/tvmode/layouts/default.vue
+++ b/tvmode/layouts/default.vue
@ -0,0 +1,12 @@
 <template>
  <div tvnav-id="mainbody" class="flex flex-row bg-zinc-900 overflow-hidden h-screen">
    <Sidebar class="select-none" />
    <div class="relative grow overflow-y-auto">
      <slot />
    </div>
  </div>
 </template>
 <script setup lang="ts">
 const queueState = useQueueState();
 </script>
--- a/tvmode/nuxt.config.ts
+++ b/tvmode/nuxt.config.ts
@ -0,0 +1,25 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
  compatibilityDate: "2024-04-03",
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  ssr: false,
  extends: ["../shared", "../libs/drop-base"],
  app: {
    baseURL: "/tvmode",
  },
  devtools: {
    enabled: false,
  },
 });
--- a/tvmode/package.json
+++ b/tvmode/package.json
@ -0,0 +1,24 @@
 {
  "name": "nuxt-app",
  "type": "module",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@headlessui/vue": "^1.7.23",
    "@heroicons/vue": "^2.1.5",
    "@nuxtjs/tailwindcss": "^6.12.2",
    "@tauri-apps/api": "^2.7.0",
    "markdown-it": "^14.1.0",
    "micromark": "^4.0.1",
    "nuxt": "^3.16.0",
    "sass-embedded": "^1.93.1",
    "scss": "^0.2.4",
    "vue-router": "latest"
  }
 }
--- a/tvmode/pages/index.vue
+++ b/tvmode/pages/index.vue
@ -0,0 +1 @@
 <template></template>
--- a/tvmode/pages/library.vue
+++ b/tvmode/pages/library.vue
@ -0,0 +1,28 @@
 <template>
  <div class="grid grid-cols-4 gap-4 p-8">
    <NuxtLink
      class="group transition-all duration-300 overflow-hidden bg-zinc-950 p-2 rounded-xl relative focus:scale-105"
      v-for="game in newGames"
      :key="game.id"
      :to="`/library/${game.id}`"
    >
      <div class="h-full z-10 relative bg-zinc-800/40 p-4 rounded-xl">
        <h1 class="text-xl text-zinc-100 font-bold">{{ game.mName }}</h1>
        <p class="text-xs text-zinc-400">{{ game.mShortDescription }}</p>
      </div>
      <img
        class="transition group-focus:blur absolute inset-0 z-0"
        :src="useObject(game.mBannerObjectId)"
      />
    </NuxtLink>
  </div>
 </template>
 <script setup lang="ts">
 import { invoke } from "@tauri-apps/api/core";
 import type { Game } from "~/types";
 const newGames = await invoke<Game[]>("fetch_library", {
  hardRefresh: true,
 });
 </script>
--- a/tvmode/pages/store.vue
+++ b/tvmode/pages/store.vue
@ -0,0 +1 @@
 <template></template>
--- a/tvmode/public/favicon.ico
+++ b/tvmode/public/favicon.ico
--- a/tvmode/public/robots.txt
+++ b/tvmode/public/robots.txt
@ -0,0 +1,2 @@
 User-Agent: *
 Disallow:
--- a/tvmode/tailwind.config.js
+++ b/tvmode/tailwind.config.js
@ -0,0 +1,22 @@
 /** @type {import('tailwindcss').Config} */
 export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
    "../shared/components/**/*.vue",
    "../shared/error.vue",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter"],
        display: ["Motiva Sans"],
      },
    },
  },
  plugins: [],
 };
--- a/tvmode/tsconfig.json
+++ b/tvmode/tsconfig.json
@ -0,0 +1,5 @@
 {
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
  "exclude": ["src-tauri/**/*"]
 }
--- a/tvmode/types.ts
+++ b/tvmode/types.ts
@ -0,0 +1,96 @@
 import type { Component } from "vue";
 export type NavigationItem = {
  prefix: string;
  route: string;
  label: string;
 };
 export type QuickActionNav = {
  icon: Component;
  notifications?: number;
  action: () => Promise<void>;
 };
 export type User = {
  id: string;
  username: string;
  admin: boolean;
  displayName: string;
  profilePictureObjectId: string;
 };
 export type AppState = {
  status: AppStatus;
  user?: User;
 };
 export type Game = {
  id: string;
  mName: string;
  mShortDescription: string;
  mDescription: string;
  mIconObjectId: string;
  mBannerObjectId: string;
  mCoverObjectId: string;
  mImageLibraryObjectIds: string[];
  mImageCarouselObjectIds: string[];
 };
 export type Collection = {
  id: string;
  name: string;
  isDefault: boolean;
  entries: Array<{ gameId: string; game: Game }>;
 };
 export type GameVersion = {
  launchCommandTemplate: string;
 };
 export enum AppStatus {
  NotConfigured = "NotConfigured",
  Offline = "Offline",
  SignedOut = "SignedOut",
  SignedIn = "SignedIn",
  SignedInNeedsReauth = "SignedInNeedsReauth",
  ServerUnavailable = "ServerUnavailable",
 }
 export enum GameStatusEnum {
  Remote = "Remote",
  Queued = "Queued",
  Downloading = "Downloading",
  Validating = "Validating",
  Installed = "Installed",
  Updating = "Updating",
  Uninstalling = "Uninstalling",
  SetupRequired = "SetupRequired",
  Running = "Running",
  PartiallyInstalled = "PartiallyInstalled",
 }
 export type GameStatus = {
  type: GameStatusEnum;
  version_name?: string;
  install_dir?: string;
 };
 export enum DownloadableType {
  Game = "Game",
  Tool = "Tool",
  DLC = "DLC",
  Mod = "Mod",
 }
 export type DownloadableMetadata = {
  id: string;
  version: string;
  downloadType: DownloadableType;
 };
 export type Settings = {
  autostart: boolean;
  maxDownloadThreads: number;
  forceOffline: boolean;
 };
--- a/tvmode/yarn.lock
+++ b/tvmode/yarn.lock
Author	SHA1	Message	Date
DecDuck	dbf9c8e8e5	feat: prototype big picture mode	2025-09-23 18:05:35 +10:00
DecDuck	864640d6ae	feat: finish big picture navigation	2025-09-23 16:37:25 +10:00
DecDuck	e29d5c8ead	partial: mutationobserver	2025-09-23 15:38:30 +10:00
DecDuck	70cecdad19	Update README.md	2025-09-11 08:16:33 +10:00