feat: prototype big picture mode

main/app.vue

@@ -1,21 +1,13 @@
 <template>
   <NuxtLoadingIndicator color="#2563eb" />
-  <NuxtLayout ref="rootNode" class="select-none w-screen h-screen">
+  <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";
-import { createTVNavigator } from "./composables/tvmode.js";
 
 const router = useRouter();
 
@@ -42,11 +34,6 @@ router.beforeEach(async () => {
   await fetchState();
 });
 
-const rootNode = ref<HTMLElement>();
-onMounted(() => {
-  const navigator = createTVNavigator(rootNode);
-});
-
 setupHooks();
 initialNavigation(state);
 

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>
+        <Wordmark class="h-8 mb-0.5" />
         <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>
 

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/composables/tvmode.ts

@@ -1,176 +0,0 @@
-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];
-
-const NAVIGATE_LEFT_ID = "tvnav-left";
-const NAVIGATE_RIGHT_ID = "tvnav-right";
-const NAVIGATE_UP_ID = "tvnav-up";
-const NAVIGATE_DOWN_ID = "tvnav-down";
-
-interface NavigationJump {
-  distance: number;
-  id: string;
-}
-
-class TVModeNavigator {
-  private rootNode: Ref<HTMLElement | undefined>;
-  private navigationNodes: Map<string, Array<Element>> = new Map();
-
-  constructor(rootNode: Ref<HTMLElement | undefined>) {
-    this.rootNode = rootNode;
-
-    const thisRef = this;
-    const observer = new MutationObserver((v, k) => {
-      this.onMutation(thisRef, v, k);
-    });
-    observer.observe(document.getRootNode(), {
-      childList: true,
-      subtree: true,
-    });
-  }
-
-  recursivelyFindInteractable(element: Element): Array<Element> {
-    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;
-      }
-
-      // 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;
-  }
-
-  private getNavJumpKey(direction: Direction) {
-    switch (direction) {
-      case "down":
-        return NAVIGATE_DOWN_ID;
-      case "left":
-        return NAVIGATE_LEFT_ID;
-      case "right":
-        return NAVIGATE_RIGHT_ID;
-      case "up":
-        return NAVIGATE_UP_ID;
-    }
-
-    throw "Invalid direction";
-  }
-
-  getNavJump(
-    element: Element,
-    direction: Direction
-  ): NavigationJump | undefined {
-    const key = this.getNavJumpKey(direction);
-    const value = element.getAttribute(key);
-    if (!value) return undefined;
-    const [id, distance] = value.split("/");
-    return {
-      distance: parseFloat(distance),
-      id,
-    };
-  }
-
-  onMutation(
-    self: TVModeNavigator,
-    mutationlist: Array<MutationRecord>,
-    observer: unknown
-  ) {
-    for (const mutation of mutationlist) {
-      for (const node of mutation.removedNodes) {
-        if (node.nodeType !== Node.ELEMENT_NODE) continue;
-        const el = node as Element;
-        const id = el.getAttribute(NAVIGATE_MODIFIED_PROP);
-        if (id) {
-          self.navigationNodes.delete(id);
-        }
-      }
-
-      for (const node of mutation.addedNodes) {
-        if (!node) continue;
-        if (node.nodeType !== Node.ELEMENT_NODE) continue;
-        const el = node as Element;
-
-        const existingId = el.getAttribute(NAVIGATE_MODIFIED_PROP);
-        if (existingId) {
-          self.navigationNodes.delete(existingId);
-        }
-
-        const interactiveNodes = self.recursivelyFindInteractable(el);
-
-        const id = crypto.randomUUID();
-        el.setAttribute(NAVIGATE_MODIFIED_PROP, id);
-
-        self.navigationNodes.set(id, interactiveNodes);
-      }
-    }
-
-    const interactiveElements = this.navigationNodes.values().toArray().flat();
-    for (const element of interactiveElements) {
-      const currentId = self.getInteractionId(element);
-      const directionJumps: Map<Direction, NavigationJump> = new Map();
-      for (const direction of Directions) {
-        const jump = self.getNavJump(element, direction);
-        if (jump) {
-          directionJumps.set(direction, jump);
-        }
-      }
-
-      const lowerX = element.clientLeft;
-      const upperX = element.clientLeft + element.clientWidth;
-      const lowerY = element.clientTop;
-      const upperY = element.clientTop + element.clientHeight;
-
-      for (const otherElement of interactiveElements) {
-        const otherId = self.getInteractionId(otherElement);
-        if (otherId == currentId) continue; // Skip us
-
-        const otherLowerX = otherElement.clientLeft;
-        const otherUpperX = otherElement.clientLeft + otherElement.clientWidth;
-        const otherLowerY = otherElement.clientTop;
-        const otherUpperY = otherElement.clientTop + otherElement.clientHeight;
-
-        for (const direction of Directions) {
-          let jump;
-          switch (direction) {
-            case "down":
-              const leeway =
-                0.1 * (element.clientWidth + otherElement.clientWidth);
-              if (
-                lowerX - leeway < otherUpperX ||
-                upperX + leeway > otherLowerX
-              )
-                break;
-              jump = {
-                id: otherId,
-                distance: upperY - otherUpperY,
-              } satisfies NavigationJump;
-              console.log(jump);
-              break;
-          }
-        }
-      }
-    }
-  }
-}
-
-export const createTVNavigator = (rootNode: Ref<HTMLElement | undefined>) =>
-  new TVModeNavigator(rootNode);

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/tailwind.config.js

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

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/lib.rs

@@ -361,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/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/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;
+};