Merge branch 'develop' into bigpicturemode

main/app.vue

@@ -1,5 +1,5 @@
 <template>
-    <NuxtLoadingIndicator color="#2563eb" />
+  <NuxtLoadingIndicator color="#2563eb" />
   <NuxtLayout class="select-none w-screen h-screen">
     <NuxtPage />
     <ModalStack />
@@ -7,14 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import "~/composables/downloads.js";
-
 import { invoke } from "@tauri-apps/api/core";
-import { useAppState } from "./composables/app-state.js";
-import {
-  initialNavigation,
-  setupHooks,
-} from "./composables/state-navigation.js";
 
 const router = useRouter();
 

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

@@ -298,7 +298,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/.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,72 @@
+<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"
+              :tvnavDebug="`nav-link-${nav.label}`"
+            >
+              {{ 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,254 @@
+const NAVIGATE_MODIFIED_PROP = "tvnav-id";
+const NAVIGATE_INTERACT_ID = "tvnav-iid";
+const NAVIGATE_DEBUG_TAG = "tvnavdebug";
+
+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, string];
+
+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();
+    const debugName = el.getAttribute(NAVIGATE_DEBUG_TAG);
+    return [rect.left, rect.right, rect.top, rect.bottom, debugName ?? ""];
+  }
+
+  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;
+    });
+  }
+
+  /*
+    let left = current[0] - target[1]; // Our left edge vs their right left (they're to our left)
+    if (left < 0) {
+      left = target[0] - current[1];
+      console.log("to the right");
+    } // If we're less, it's our right edge vs their left edge
+    
+    let top = current[2] - target[3]; // Our top edge vs their bottom edge
+    if (top < 0) {
+      top = target[2] - current[3];
+      console.log("undernearth");
+    } // Our bottom edge vs their top edge
+    console.log(top);
+  */
+
+  private getCenter(position: Position) {
+    return [
+      position[0] + 0.5 * (position[1] - position[0]),
+      position[2] + 0.5 * (position[3] - position[2]),
+    ];
+  }
+
+  private findOuterDistance(
+    current: Position,
+    target: Position,
+    bias: Direction
+  ) {
+    const centerCurrent = this.getCenter(current);
+    const centerTarget = this.getCenter(target);
+
+    return Math.sqrt(
+      Math.pow(
+        centerCurrent[0] - centerTarget[0],
+        ["left", "right"].includes(bias) ? 2 : 4
+      ) +
+        Math.pow(
+          centerCurrent[1] - centerTarget[1],
+          ["up", "down"].includes(bias) ? 2 : 4
+        )
+    );
+  }
+
+  private findElementWithPredicate(
+    check: (current: Position, target: Position) => boolean,
+    direction: Direction
+  ) {
+    const current = this.getCurrentPosition();
+    // We want things in the x direction, with a limit on the y
+    let distance = Infinity;
+    let element = null;
+    const nodes = this.getUniqueNavNodes();
+    for (const newElement of nodes) {
+      const target = this.getCurrentPosition(newElement);
+      if (this.isSamePosition(current, target)) continue;
+      if (target.every((v) => v == 0)) continue; // This element doesn't exist
+      const newDistance = this.findOuterDistance(current, target, direction);
+      console.log(
+        `distance of ${newDistance} between ${current[4]} and ${target[4]}`
+      );
+      // 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,
+      "up"
+    );
+
+    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,
+      "down"
+    );
+
+    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,
+      "right"
+    );
+
+    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,
+      "left"
+    );
+
+    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,56 @@
+<template>
+  <div class=" p-8">
+    <div class="mb-4 flex gap-x-2">
+      <div
+        class="relative transition-transform duration-300 hover:scale-105 active:scale-95"
+      >
+        <div
+          class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
+        >
+          <MagnifyingGlassIcon
+            class="h-5 w-5 text-zinc-400"
+            aria-hidden="true"
+          />
+        </div>
+        <input
+          type="text"
+          class="block w-full rounded-lg border-0 bg-zinc-800/50 py-2 pl-10 pr-3 text-zinc-100 placeholder:text-zinc-500 focus:bg-zinc-800 focus:ring-2 focus:ring-inset focus:ring-blue-500 sm:text-sm sm:leading-6"
+          placeholder="Search library..."
+        />
+      </div>
+      <button
+        
+        class="p-1 flex items-center justify-center transition-transform duration-300 size-10 hover:scale-110 active:scale-90 rounded-lg bg-zinc-800/50 text-zinc-100"
+      >
+        <ArrowPathIcon class="size-4" />
+      </button>
+    </div>
+    <div class="grid grid-cols-4 gap-4">
+      <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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ArrowPathIcon, MagnifyingGlassIcon } from "@heroicons/vue/16/solid";
+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;
+};