feat: prototype big picture mode

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
-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)
+## Internals
 
-## Current features
-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
+It uses a Tauri base with Nuxt 3 + TailwindCSS on top of it, so we can re-use components from the web UI.
 
 ## 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).

main/app.vue

@@ -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",
 });

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" />
-        </NuxtLink>
         <nav class="inline-flex items-center mt-0.5">
           <ol class="inline-flex items-center gap-x-6">
             <NuxtLink

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);

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"
                 >

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>

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>

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>

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,
-  };
-};

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,
+  },
+
+  
 });

main/pages/library/[id]/index.vue

@@ -18,21 +18,11 @@
     <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 -->
           <GameStatusButton
@@ -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;

main/tailwind.config.js

@@ -7,6 +7,7 @@ export default {
     "./plugins/**/*.{js,ts}",
     "./app.vue",
     "./error.vue",
+    "../shared/components/**/*.vue"
   ],
   theme: {
     extend: {

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;
-};

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>

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;
+}

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");
 };

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>

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,
+  },
+});

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"
+}

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')],
+};

shared/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json",
+  "exclude": ["src-tauri/**/*"]
+}

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;
+};

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 PlaytimeData = v4::PlaytimeData;
-    pub type GamePlaytimeStats = v4::GamePlaytimeStats;
-    pub type PlaytimeSession = v4::PlaytimeSession;
+    // pub type DatabaseCompatInfo = v2::DatabaseCompatInfo;
 
     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(),
-                }
             }
         }
 

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),
-    PlaytimeError(String),
+    OpenerError(tauri_plugin_opener::Error)
 }
 
 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}")
     }

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,
-            // 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
+            open_process_logs
         ])
         .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)

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())
-}

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);
-    }
-}

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)
-    }
-}

src-tauri/src/playtime/mod.rs

@@ -1,3 +0,0 @@
-pub mod commands;
-pub mod events;
-pub mod manager;

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) {
-        Ok(()) => {
-            // Start playtime tracking after successful launch
-            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);
-        }
+    match process_manager_lock.launch_process(id, &state_lock) {
+        Ok(()) => {}
+        Err(e) => 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)

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);
 

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"

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

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.

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>

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;
+}

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>

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();

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>

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,
+  },
+
+  
+});

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"
+  }
+}

tvmode/pages/index.vue

@@ -0,0 +1 @@
+<template></template>

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>

tvmode/pages/store.vue

@@ -0,0 +1 @@
+<template></template>

tvmode/public/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:

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: [],
+};

tvmode/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json",
+  "exclude": ["src-tauri/**/*"]
+}

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;
+};