feat: prototype big picture mode

tvmode/app.vue

@@ -1,3 +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/nav.ts

@@ -1,3 +0,0 @@
-class TVModeNavigator {
-    
-};

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

@@ -1,5 +1,25 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  compatibilityDate: '2025-07-15',
-  devtools: { enabled: true }
-})
+  compatibilityDate: "2024-04-03",
+
+  postcss: {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  },
+
+  ssr: false,
+
+  extends: ["../shared", "../libs/drop-base"],
+
+  app: {
+    baseURL: "/tvmode",
+  },
+
+  devtools: {
+    enabled: false,
+  },
+
+  
+});

tvmode/package.json

@@ -10,8 +10,15 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "nuxt": "^4.1.2",
-    "vue": "^3.5.21",
-    "vue-router": "^4.5.1"
+    "@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/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

@@ -1,18 +1,5 @@
 {
   // https://nuxt.com/docs/guide/concepts/typescript
-  "files": [],
-  "references": [
-    {
-      "path": "./.nuxt/tsconfig.app.json"
-    },
-    {
-      "path": "./.nuxt/tsconfig.server.json"
-    },
-    {
-      "path": "./.nuxt/tsconfig.shared.json"
-    },
-    {
-      "path": "./.nuxt/tsconfig.node.json"
-    }
-  ]
+  "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;
+};