Merge remote-tracking branch 'origin/develop' into db-store

.github/workflows/release.yml

@@ -17,6 +17,9 @@ jobs:
     steps:
       - name: Check out the repo
         uses: actions/checkout@v3
+        with:
+          submodules: true
+          token: ${{ secrets.PAT_TOKEN }}
 
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v2

.yarnrc

@@ -1 +0,0 @@
-"@drop:registry" "https://lab.deepcore.dev/api/v4/projects/57/packages/npm/"

Dockerfile

@@ -1,14 +1,16 @@
 # pull pre-configured and updated build environment
-FROM debian:12.10-slim AS build-system
+FROM debian:testing-20250317-slim AS build-system
 
 # setup workdir
 RUN mkdir /build
 WORKDIR /build
 
 # install dependencies and build
+RUN apt-get update -y
+RUN apt-get install node-corepack -y
 RUN corepack enable
 COPY . .
-RUN NUXT_TELEMETRY_DISABLED=1 yarn install
+RUN NUXT_TELEMETRY_DISABLED=1 yarn install --network-timeout 1000000
 RUN NUXT_TELEMETRY_DISABLED=1 yarn build
 
 # create run environment for Drop

README.md

@@ -1,20 +1,15 @@
 <div align="center">
-<img src="https://raw.githubusercontent.com/Drop-OSS/media-sources/refs/heads/main/drop.svg" width="400rem"/>
+<img src="https://raw.githubusercontent.com/Drop-OSS/media-sources/refs/heads/main/drop.svg" width="200rem"/>
 </div>
-<div align="center">
+<br/>
-	<a href="CONTRIBUTING.md">Contribution guide</a>&nbsp;&nbsp;&nbsp;
-	<a href="https://deepcore.dev">Our website</a>&nbsp;&nbsp;&nbsp;
-</div>
-<br>
-<br>
-
-[![GitHub License](https://img.shields.io/github/license/Drop-OSS/drop-app)](LICENSE)
-[![Gitlab Pipeline Status](https://img.shields.io/gitlab/pipeline-status/drop-oss%2Fdrop?gitlab_url=https%3A%2F%2Flab.deepcore.dev)](https://lab.deepcore.dev/drop-oss/drop/-/pipelines)
-[![Discord](https://img.shields.io/discord/1291622805124812871?label=discord)](https://discord.gg/ACq4qZp4a9)
-[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-%23FE5196?logo=conventionalcommits&logoColor=white)](https://conventionalcommits.org)
 
 # Drop
 
+[![Website](https://img.shields.io/badge/website-000000?style=for-the-badge&logo=About.me&logoColor=white)](https://droposs.org)
+[![GitHub License](https://img.shields.io/badge/AGPL--3.0-red?style=for-the-badge)](LICENSE)
+[![Discord](https://img.shields.io/badge/Discord-5865F2?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/ACq4qZp4a9)
+[![Open Collective](https://img.shields.io/badge/OpenCollective-1F87FF?style=for-the-badge&logo=OpenCollective&logoColor=white)](https://opencollective.com/drop-oss)
+
 Drop is an open-source game distribution platform, like GameVault or Steam. It's designed to distribute and shared DRM-free game quickly, all while being incredibly flexible, beautiful and fast.
 
 ## Philosophy

components/AccountSidebar.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="flex grow flex-col gap-y-5 overflow-y-auto px-6 py-4">
+    <span class="inline-flex items-center gap-x-2 font-semibold text-zinc-100">
+      <UserIcon class="size-5" /> Account Settings
+    </span>
+    <nav class="flex flex-1 flex-col">
+      <ul role="list" class="flex flex-1 flex-col gap-y-7">
+        <li>
+          <ul role="list" class="-mx-2 space-y-1">
+            <li v-for="(item, itemIdx) in navigation" :key="item.route">
+              <NuxtLink
+                :href="item.route"
+                :class="[
+                  itemIdx == currentPageIndex
+                    ? 'bg-zinc-800 text-white'
+                    : 'text-zinc-400 hover:bg-zinc-800 hover:text-white',
+                  'group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold',
+                ]"
+              >
+                <component
+                  :is="item.icon"
+                  class="size-6 shrink-0"
+                  aria-hidden="true"
+                />
+                {{ item.label }}
+                <span
+                  v-if="item.count !== undefined"
+                  class="ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-zinc-900 px-2.5 py-0.5 text-center text-xs/5 font-medium text-white ring-1 ring-inset ring-zinc-700"
+                  aria-hidden="true"
+                  >{{ item.count }}</span
+                >
+              </NuxtLink>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  BellIcon,
+  CalendarIcon,
+  ChartPieIcon,
+  DocumentDuplicateIcon,
+  FolderIcon,
+  HomeIcon,
+  LockClosedIcon,
+  UsersIcon,
+  WrenchScrewdriverIcon,
+} from "@heroicons/vue/24/outline";
+import { UserIcon } from "@heroicons/vue/24/solid";
+import type { Component } from "vue";
+
+const notifications = useNotifications();
+
+const navigation: (NavigationItem & { icon: Component; count?: number })[] = [
+  { label: "Home", route: "/account", icon: HomeIcon, prefix: "/account" },
+  {
+    label: "Security",
+    route: "/account/security",
+    prefix: "/account/security",
+    icon: LockClosedIcon,
+  },
+  {
+    label: "Notifications",
+    route: "/account/notifications",
+    prefix: "/account/notifications",
+    icon: BellIcon,
+    count: notifications.value.length,
+  },
+  {
+    label: "Settings",
+    route: "/account/settings",
+    prefix: "/account/settings",
+    icon: WrenchScrewdriverIcon,
+  },
+];
+
+const currentPageIndex = useCurrentNavigationIndex(navigation);
+</script>

components/AddLibraryButton.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="inline-flex group hover:scale-105 transition-all duration-200">
+  <div class="inline-flex w-full group hover:scale-105 transition-all duration-200">
     <LoadingButton
       :loading="isLibraryLoading"
       @click="() => toggleLibrary()"
       :style="'none'"
-      class="transition w-48 inline-flex items-center justify-center h-full gap-x-2 rounded-none rounded-l-md bg-white/10 hover:bg-white/20 text-zinc-100 backdrop-blur px-5 py-3 active:scale-95"
+      class="transition w-full inline-flex items-center justify-center h-full gap-x-2 rounded-none rounded-l-md bg-white/10 hover:bg-white/20 text-zinc-100 backdrop-blur px-5 py-3 active:scale-95"
     >
       {{ inLibrary ? "In Library" : "Add to Library" }}
       <CheckIcon v-if="inLibrary" class="-mr-0.5 h-5 w-5" aria-hidden="true" />

components/CarouselPagination.vue

@@ -4,7 +4,7 @@
       v-for="(_, i) in amount"
       @click="() => slideTo(i)"
       :class="[
-        currentSlide == i ? 'bg-blue-600 w-6' : 'bg-zinc-700 w-3',
+        carousel.currentSlide == i ? 'bg-blue-600 w-6' : 'bg-zinc-700 w-3',
         'transition-all cursor-pointer h-2 rounded-full',
       ]"
     />
@@ -12,16 +12,14 @@
 </template>
 
 <script setup lang="ts">
-const maxSlide = inject("maxSlide", ref(1));
+import { injectCarousel } from "vue3-carousel";
-const minSlide = inject("minSlide", ref(1));
-const currentSlide = inject("currentSlide", ref(1));
-const nav: { slideTo?: (index: number) => any } = inject("nav", {});
 
-const amount = computed(() => maxSlide.value - minSlide.value + 1);
+const carousel = inject(injectCarousel)!!;
+
+const amount = carousel.maxSlide - carousel.minSlide + 1;
 
 function slideTo(index: number) {
-  if (!nav.slideTo) return console.warn(`error moving slide: nav not defined`);
+  const offsetIndex = index + carousel.minSlide;
-  const offsetIndex = index + minSlide.value;
+  carousel.nav.slideTo(offsetIndex);
-  nav.slideTo(offsetIndex);
 }
 </script>

components/GameCarousel.vue

@@ -1,17 +1,22 @@
 <template>
-  <VueCarousel :itemsToShow="moveAmount" :itemsToScroll="moveAmount / 2">
+  <div ref="currentComponent">
-    <VueSlide
+    {{ singlePage }}
-      class="justify-start"
+    <ClientOnly>
-      v-for="(game, gameIdx) in games"
+      <VueCarousel :itemsToShow="singlePage" :itemsToScroll="singlePage">
-      :key="gameIdx"
+        <VueSlide
-    >
+          class="justify-start"
-      <GamePanel :game="game" />
+          v-for="(game, gameIdx) in games"
-    </VueSlide>
+          :key="gameIdx"
+        >
+          <GamePanel :game="game" />
+        </VueSlide>
 
-    <template #addons>
+        <template #addons>
-      <VueNavigation />
+          <VueNavigation />
-    </template>
+        </template>
-  </VueCarousel>
+      </VueCarousel>
+    </ClientOnly>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -21,8 +26,11 @@ import type { SerializeObject } from "nitropack";
 const props = defineProps<{
   items: Array<SerializeObject<Game>>;
   min?: number;
+  width?: number;
 }>();
 
+const currentComponent = ref<HTMLDivElement>();
+
 const min = computed(() => Math.max(props.min ?? 8, props.items.length));
 const games: Ref<Array<SerializeObject<Game> | undefined>> = computed(() =>
   Array(min.value)
@@ -30,10 +38,13 @@ const games: Ref<Array<SerializeObject<Game> | undefined>> = computed(() =>
     .map((_, i) => props.items[i])
 );
 
-const moveAmount = ref(1);
+const singlePage = ref(1);
-const moveFactor = 1.8 / 400;
+const sizeOfCard = 192 + 10;
 
 onMounted(() => {
-  moveAmount.value = moveFactor * window.innerWidth;
+  singlePage.value =
+    (props.width ??
+      currentComponent.value?.parentElement?.clientWidth ??
+      window.innerWidth) / sizeOfCard;
 });
 </script>

components/GamePanel.vue

@@ -35,12 +35,12 @@
 import type { SerializeObject } from "nitropack";
 
 const props = defineProps<{
-  game?: SerializeObject<{
+  game: SerializeObject<{
     id: string;
     mCoverId: string;
     mName: string;
     mShortDescription: string;
-  }>;
+  }> | undefined;
   href?: string;
 }>();
 </script>

components/LibraryDirectory.vue

@@ -1,22 +1,22 @@
 <template>
-  <div class="flex-1 overflow-y-auto px-4 py-5">
+  <div class="flex grow flex-col overflow-y-auto px-6 py-4">
-    <h2 class="text-lg font-semibold tracking-tight text-zinc-100 mb-3">
+    <span class="inline-flex items-center gap-x-2 font-semibold text-zinc-100">
-      Your Library
+      <Bars3Icon class="size-6" /> Library
-    </h2>
+    </span>
 
     <!-- Search bar -->
-    <div class="relative mb-3">
+    <div class="mt-5 relative">
       <input
         type="text"
         name="search"
         id="search"
         autocomplete="off"
-        class="block w-full rounded-md bg-zinc-900 py-1 pl-8 pr-2 text-sm text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600"
+        class="block w-full rounded-md bg-zinc-900 py-2 pl-9 pr-2 text-sm text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600"
         placeholder="Search library..."
         v-model="searchQuery"
       />
       <MagnifyingGlassIcon
-        class="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400"
+        class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400"
         aria-hidden="true"
       />
     </div>
@@ -25,13 +25,13 @@
       name="list"
       tag="ul"
       role="list"
-      class="space-y-1"
+      class="mt-2 space-y-0.5"
       v-if="filteredLibrary.length > 0"
     >
       <li v-for="game in filteredLibrary" :key="game.id" class="flex">
         <NuxtLink
           :to="`/library/game/${game.id}`"
-          class="flex flex-row items-center w-full p-1.5 rounded-md transition-all duration-200 hover:bg-zinc-800 hover:scale-105 hover:shadow-lg active:scale-95"
+          class="flex flex-row items-center w-full p-1 rounded-md transition-all duration-200 hover:bg-zinc-800 hover:scale-105 hover:shadow-lg active:scale-95"
         >
           <img
             :src="useObject(game.mCoverId)"
@@ -39,7 +39,7 @@
             alt=""
           />
           <div class="min-w-0 flex-1 pl-2.5">
-            <p class="text-xs font-medium text-zinc-100 truncate text-left">
+            <p class="text-sm font-semibold text-display text-zinc-200 truncate text-left">
               {{ game.mName }}
             </p>
           </div>
@@ -57,7 +57,8 @@
 </template>
 
 <script setup lang="ts">
-import { MagnifyingGlassIcon } from "@heroicons/vue/24/solid";
+import { HomeIcon } from "@heroicons/vue/24/outline";
+import { Bars3Icon, MagnifyingGlassIcon } from "@heroicons/vue/24/solid";
 
 const library = await useLibrary();
 

composables/request.ts

@@ -31,11 +31,22 @@ export const $dropFetch: DropFetch = async (request, opts) => {
   if (!getCurrentInstance()?.proxy) {
     return (await $fetch(request, opts)) as any;
   }
+  const id = request.toString();
+
+  const state = useState(id);
+  if (state.value) {
+    // Deep copy
+    const object = JSON.parse(JSON.stringify(state.value));
+    // Never use again on client
+    state.value = undefined;
+    return object;
+  }
+
   const headers = useRequestHeaders(["cookie"]);
-  const { data, error } = await useFetch(request, {
+  const data = await $fetch(request, {
     ...opts,
     headers: { ...opts?.headers, ...headers },
   } as any);
-  if (error.value) throw error.value;
+  if (import.meta.server) state.value = data;
-  return data.value as any;
+  return data as any;
 };

middleware/require-user.global.ts

@@ -1,9 +1,4 @@
-const whitelistedPrefixes = [
+const whitelistedPrefixes = ["/auth", "/api", "/setup"];
-  "/auth/signin",
-  "/auth/register",
-  "/api",
-  "/setup",
-];
 const requireAdmin = ["/admin"];
 
 export default defineNuxtRouteMiddleware(async (to, from) => {

nuxt.config.ts

@@ -28,12 +28,6 @@ export default defineNuxtConfig({
     "/signout": { prerender: true },
 
     "/api/**": { cors: true },
-
-    "/api/v1/client/object/*": {
-      security: {
-        rateLimiter: false,
-      },
-    },
   },
 
   nitro: {
@@ -80,5 +74,7 @@ export default defineNuxtConfig({
       },
       strictTransportSecurity: false,
     },
+    rateLimiter: false,
+    xssValidator: false,
   },
 });

package.json

@@ -11,7 +11,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@drop/droplet": "^0.7.0",
+    "@drop-oss/droplet": "^0.7.2",
     "@headlessui/vue": "^1.7.23",
     "@heroicons/vue": "^2.1.5",
     "@nuxt/fonts": "^0.11.0",
@@ -24,13 +24,14 @@
     "axios": "^1.7.7",
     "bcryptjs": "^2.4.3",
     "cookie-es": "^1.2.2",
+    "crypto": "^1.0.1",
     "fast-fuzzy": "^1.12.0",
     "file-type-mime": "^0.4.3",
     "jdenticon": "^3.3.0",
     "lru-cache": "^11.1.0",
     "micromark": "^4.0.1",
     "moment": "^2.30.1",
-    "nuxt": "^3.13.2",
+    "nuxt": "3.15.4",
     "nuxt-security": "2.2.0",
     "prisma": "^6.1.0",
     "sanitize-filename": "^1.6.3",
@@ -41,6 +42,7 @@
     "uuid": "^10.0.0",
     "vue": "latest",
     "vue-router": "latest",
+    "vue3-carousel": "^0.15.0",
     "vue3-carousel-nuxt": "^1.1.5",
     "vuedraggable": "^4.1.0"
   },
@@ -48,23 +50,17 @@
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",
     "@types/bcryptjs": "^2.4.6",
+    "@types/node": "^22.13.16",
     "@types/turndown": "^5.0.5",
     "@types/uuid": "^10.0.0",
     "autoprefixer": "^10.4.20",
     "h3": "^1.13.0",
-    "nitropack": "2.11.6",
     "postcss": "^8.4.47",
     "sass": "^1.79.4",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.8.2",
     "vue-tsc": "^2.2.8"
   },
-  "optionalDependencies": {
-    "@drop/droplet-darwin-arm64": "^0.7.0",
-    "@drop/droplet-linux-arm64-gnu": "^0.7.0",
-    "@drop/droplet-linux-x64-gnu": "^0.7.0",
-    "@drop/droplet-win32-x64-msvc": "^0.7.0"
-  },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
   "overrides": {
     "vue3-carousel-nuxt": {

pages/account.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="flex flex-col lg:flex-row grow">
+    <TransitionRoot as="template" :show="sidebarOpen">
+      <Dialog class="relative z-50 lg:hidden" @close="sidebarOpen = false">
+        <TransitionChild
+          as="template"
+          enter="transition-opacity ease-linear duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="transition-opacity ease-linear duration-300"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <div class="fixed inset-0 bg-zinc-900/80" />
+        </TransitionChild>
+
+        <div class="fixed inset-0 flex">
+          <TransitionChild
+            as="template"
+            enter="transition ease-in-out duration-300 transform"
+            enter-from="-translate-x-full"
+            enter-to="translate-x-0"
+            leave="transition ease-in-out duration-300 transform"
+            leave-from="translate-x-0"
+            leave-to="-translate-x-full"
+          >
+            <DialogPanel class="relative mr-16 flex w-full max-w-xs flex-1">
+              <TransitionChild
+                as="template"
+                enter="ease-in-out duration-300"
+                enter-from="opacity-0"
+                enter-to="opacity-100"
+                leave="ease-in-out duration-300"
+                leave-from="opacity-100"
+                leave-to="opacity-0"
+              >
+                <div
+                  class="absolute top-0 left-full flex w-16 justify-center pt-5"
+                >
+                  <button
+                    type="button"
+                    class="-m-2.5 p-2.5"
+                    @click="sidebarOpen = false"
+                  >
+                    <span class="sr-only">Close sidebar</span>
+                    <XMarkIcon class="size-6 text-white" aria-hidden="true" />
+                  </button>
+                </div>
+              </TransitionChild>
+              <!-- Sidebar component, swap this element with another sidebar if you like -->
+              <div class="bg-zinc-900 w-full">
+                <AccountSidebar />
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+
+    <!-- Static sidebar for desktop -->
+    <div
+      class="hidden lg:flex lg:inset-y-0 lg:z-50 lg:shrink-0 lg:basis-[18rem] lg:flex-col lg:border-r-2 lg:border-zinc-800"
+    >
+      <!-- Sidebar component, swap this element with another sidebar if you like -->
+      <AccountSidebar />
+    </div>
+
+    <div
+      class="block flex items-center gap-x-2 bg-zinc-950 px-2 py-1 shadow-xs sm:px-4 lg:hidden border-b border-zinc-700"
+    >
+      <button
+        type="button"
+        class="-m-2.5 p-2.5 text-zinc-400 lg:hidden"
+        @click="sidebarOpen = true"
+      >
+        <span class="sr-only">Open sidebar</span>
+        <Bars3Icon class="size-6" aria-hidden="true" />
+      </button>
+      <div
+        class="flex-1 text-sm/6 font-semibold uppercase font-display text-zinc-400"
+      >
+        Account
+      </div>
+    </div>
+
+    <div class="px-4 py-10 sm:px-6 lg:px-8 lg:py-6">
+      <NuxtPage />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import {
+  Dialog,
+  DialogPanel,
+  TransitionChild,
+  TransitionRoot,
+} from "@headlessui/vue";
+import {
+  Bars3Icon,
+  CalendarIcon,
+  ChartPieIcon,
+  DocumentDuplicateIcon,
+  FolderIcon,
+  HomeIcon,
+  UsersIcon,
+  XMarkIcon,
+} from "@heroicons/vue/24/outline";
+
+const router = useRouter();
+const sidebarOpen = ref(false);
+
+router.afterEach(() => {
+  sidebarOpen.value = false;
+});
+
+useHead({
+  title: "Account",
+});
+</script>

pages/account/index.vue

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

pages/account/notifications.vue

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

pages/account/security.vue

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

pages/account/settings.vue

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

pages/library.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col lg:flex-row grow">
+  <div class="flex flex-col lg:flex-row">
     <TransitionRoot as="template" :show="sidebarOpen">
       <Dialog class="relative z-50 lg:hidden" @close="sidebarOpen = false">
         <TransitionChild
@@ -59,7 +59,7 @@
 
     <!-- Static sidebar for desktop -->
     <div
-      class="hidden lg:block lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col lg:border-r-2 lg:border-zinc-800"
+      class="hidden lg:flex lg:inset-y-0 lg:z-50 lg:shrink-0 lg:basis-[18rem] lg:flex-col lg:border-r-2 lg:border-zinc-800"
     >
       <!-- Sidebar component, swap this element with another sidebar if you like -->
       <LibraryDirectory />
@@ -83,7 +83,7 @@
       </div>
     </div>
 
-    <div class="px-4 py-10 sm:px-6 lg:px-8 lg:py-6 grow">
+    <div class="px-4 py-10 sm:px-6 lg:px-8 lg:py-6">
       <NuxtPage />
     </div>
   </div>

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

@@ -7,7 +7,7 @@
           class="transition text-sm/6 font-semibold text-zinc-400 hover:text-zinc-100 inline-flex gap-x-2 items-center duration-200 hover:scale-105"
         >
           <ArrowLeftIcon class="h-4 w-4" aria-hidden="true" />
-          Back to Collections
+          Back to Library
         </NuxtLink>
       </div>
       <h2 class="text-2xl font-bold font-display text-zinc-100">

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

@@ -1,111 +1,199 @@
 <template>
-  <div v-if="game">
+  <div
-    <!-- header -->
+    class="mx-auto w-full relative flex flex-col justify-center pt-72 overflow-hidden"
-    <div class="relative">
+  >
-      <!-- Content -->
+    <!-- Banner background with gradient overlays -->
-      <div class="p-4">
+    <div class="absolute inset-0 z-0 rounded-xl overflow-hidden">
-        <!-- Back button -->
+      <img
+        :src="useObject(game.mBannerId)"
+        class="w-full h-[24rem] object-cover blur-sm scale-105"
+      />
+      <div
+        class="absolute inset-0 bg-gradient-to-t from-zinc-900 to-transparent opacity-90"
+      />
+      <div
+        class="absolute inset-0 bg-gradient-to-r from-zinc-900/95 via-zinc-900/80 to-transparent opacity-90"
+      />
+    </div>
+
+    <div class="relative z-10">
+      <div class="px-4 sm:px-8pb-4">
         <div class="flex items-center gap-x-3 mb-4">
           <NuxtLink
             to="/library"
-            class="px-2 py-1 rounded bg-zinc-900 transition text-sm/6 font-semibold text-zinc-400 hover:text-zinc-100 inline-flex gap-x-2 items-center duration-200 hover:scale-105"
+            class="transition text-sm/6 font-semibold text-zinc-400 hover:text-zinc-100 inline-flex gap-x-2 items-center duration-200 hover:scale-105"
           >
             <ArrowLeftIcon class="h-4 w-4" aria-hidden="true" />
-            Back to Collections
+            Back to Library
           </NuxtLink>
         </div>
 
-        <div
+        <!-- Game title and description -->
-          class="flex flex-col lg:flex-row items-center lg:items-start gap-6 w-full lg:w-fit bg-zinc-900 p-4 rounded-xl"
+        <h1
+          class="text-3xl sm:text-5xl text-zinc-100 font-bold font-display drop-shadow-lg"
         >
-          <img
+          {{ game.mName }}
-            :src="useObject(game.mCoverId)"
+        </h1>
-            class="w-32 h-auto rounded shadow-md transition-all duration-300 hover:scale-105 hover:rotate-[-2deg] hover:shadow-xl"
+        <p class="mt-4 mb-8 text-sm sm:text-lg text-zinc-400 max-w-3xl">
-            alt=""
+          {{ game.mShortDescription }}
-          />
+        </p>
-          <div>
+
-            <h1 class="text-3xl font-bold font-display text-zinc-100">
+        <div class="flex items-stretch flex-col lg:flex-row gap-3">
-              {{ game.mName }}
+          <button
-            </h1>
+            type="button"
-            <p class="mt-2 text-lg text-zinc-400">
+            class="inline-flex items-center justify-center gap-x-2 rounded-md bg-blue-600 px-3.5 py-2.5 text-base font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-blue-500/25 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
-              {{ game.mShortDescription }}
+          >
-            </p>
+            Open in Launcher
-            <!-- Buttons -->
+            <ArrowTopRightOnSquareIcon
-            <div class="flex flex-col lg:flex-row mt-4 flex gap-3">
+              class="-mr-0.5 h-5 w-5"
-              <button
+              aria-hidden="true"
-                type="button"
+            />
-                class="inline-flex items-center justify-center gap-x-2 rounded-md bg-blue-600 px-3.5 py-2.5 text-base font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-blue-500/25 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+          </button>
-              >
+          <div class="relative z-50">
-                Open in Launcher
+            <AddLibraryButton class="font-bold" :gameId="game.id" />
-                <ArrowTopRightOnSquareIcon
+          </div>
-                  class="-mr-0.5 h-5 w-5"
+          <NuxtLink
-                  aria-hidden="true"
+            :to="`/store/${game.id}`"
-                />
+            class="inline-flex items-center justify-center gap-x-2 rounded-md bg-zinc-800 px-3.5 py-2.5 text-base font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-105 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
-              </button>
+          >
-              <AddLibraryButton class="font-bold" :gameId="game.id" />
+            View in Store
-              <NuxtLink
+            <ArrowUpRightIcon class="-mr-0.5 h-5 w-5" aria-hidden="true" />
-                :to="`/store/${game.id}`"
+          </NuxtLink>
-                class="inline-flex items-center justify-center gap-x-2 rounded-md bg-zinc-800 px-3.5 py-2.5 text-base font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-105 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
+        </div>
-              >
+      </div>
-                View in Store
+
-                <ArrowUpRightIcon class="-mr-0.5 h-5 w-5" aria-hidden="true" />
+      <!-- Main content -->
-              </NuxtLink>
+      <div class="w-full bg-zinc-900 px-4 sm:px-8 py-3 sm:py-6">
+        <div class="mt-8 flex flex-col gap-5 sm:gap-10">
+          <div class="col-start-1 lg:col-start-2 space-y-6">
+            <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
+              </h2>
+              <div class="relative">
+                <VueCarousel :items-to-show="1">
+                  <VueSlide v-for="image in game.mImageCarousel" :key="image">
+                    <img
+                      class="w-fit h-48 lg:h-96 rounded"
+                      :src="useObject(image)"
+                    />
+                  </VueSlide>
+                  <VueSlide v-if="game.mImageCarousel.length == 0">
+                    <div
+                      class="h-48 lg:h-96 aspect-[1/2] flex items-center justify-center text-zinc-700 font-bold font-display"
+                    >
+                      No images
+                    </div>
+                  </VueSlide>
+
+                  <template #addons>
+                    <VueNavigation />
+                    <CarouselPagination class="py-2 px-12" />
+                  </template>
+                </VueCarousel>
+              </div>
+            </div>
+          </div>
+
+          <div class="space-y-6">
+            <div class="bg-zinc-800/50 rounded-xl p-6 backdrop-blur-sm">
+              <div
+                v-html="descriptionHTML"
+                class="prose prose-invert prose-blue overflow-y-auto custom-scrollbar max-w-none"
+              ></div>
             </div>
           </div>
         </div>
       </div>
     </div>
-
-    <div class="min-h-[300px]" />
   </div>
 </template>
 
 <script setup lang="ts">
 import {
+  ArrowLeftIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  PhotoIcon,
   ArrowTopRightOnSquareIcon,
   ArrowUpRightIcon,
-  TrashIcon,
-  ArrowLeftIcon,
-  PlusIcon,
 } from "@heroicons/vue/20/solid";
-import { type Game, type GameVersion, type Collection } from "@prisma/client";
+import { BuildingStorefrontIcon } from "@heroicons/vue/24/outline";
+import { micromark } from "micromark";
+import type { Game } from "@prisma/client";
 
 const route = useRoute();
+const id = route.params.id.toString();
 
-const collections = await useCollections();
+const rawGame = await $dropFetch<Game>(`/api/v1/games/${id}`);
-const library = await useLibrary();
+const game = computed(() => {
-const game = [...collections.value, library.value]
+  if (!rawGame) {
-  .map((e) => e.entries.map((e) => e.game))
+    throw createError({ statusCode: 404, message: "Game not found" });
-  .flat()
+  }
-  .find((e) => e.id == route.params.id);
+  return rawGame;
+});
 
-if (game === undefined)
+// Convert markdown to HTML
-  throw createError({
+const descriptionHTML = computed(() =>
-    statusCode: 404,
+  micromark(game.value.mDescription ?? "")
-    statusMessage: JSON.stringify(collections.value),
+);
-  });
+
+const currentImageIndex = ref(0);
+
+function nextImage() {
+  if (!game.value?.mImageCarousel) return;
+  currentImageIndex.value =
+    (currentImageIndex.value + 1) % game.value.mImageCarousel.length;
+}
+
+function previousImage() {
+  if (!game.value?.mImageCarousel) return;
+  currentImageIndex.value =
+    (currentImageIndex.value - 1 + game.value.mImageCarousel.length) %
+    game.value.mImageCarousel.length;
+}
 </script>
 
 <style scoped>
-/* Fade transition for main content */
+.slide-enter-active,
-.fade-enter-active,
+.slide-leave-active {
-.fade-leave-active {
+  transition: all 0.3s ease;
-  transition: all 0.2s ease;
+  position: absolute;
 }
 
-.fade-enter-from,
+.slide-enter-from {
-.fade-leave-to {
   opacity: 0;
-  transform: translateX(30px);
+  transform: translateX(100%);
-}
-/* Hide scrollbar for Chrome, Safari and Opera */
-.no-scrollbar::-webkit-scrollbar {
-  display: none;
 }
 
-/* Hide scrollbar for IE, Edge and Firefox */
+.slide-leave-to {
-.no-scrollbar {
+  opacity: 0;
-  -ms-overflow-style: none; /* IE and Edge */
+  transform: translateX(-100%);
-  scrollbar-width: none; /* Firefox */
+}
+
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: rgb(82 82 91) transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: rgb(82 82 91);
+  border-radius: 3px;
+}
+
+:deep(.relative) {
+  z-index: 10;
+}
+
+:deep(.dropdown-content) {
+  z-index: 20;
 }
 </style>

pages/library/index.vue

@@ -1,11 +1,10 @@
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col gap-y-8">
     <div class="max-w-2xl">
-      <h2 class="text-2xl font-bold font-display text-zinc-100">
+      <h2 class="text-2xl font-bold font-display text-zinc-100">Library</h2>
-        Your Collections
-      </h2>
       <p class="mt-2 text-zinc-400">
-        Organize your games into collections for easy access.
+        Organize your games into collections for easy access, and access all
+        your games.
       </p>
     </div>
 
@@ -13,16 +12,16 @@
     <TransitionGroup
       name="collection-list"
       tag="div"
-      class="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"
+      class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"
     >
       <!-- Collection buttons (wrap each in a div for grid layout) -->
       <div
         v-for="collection in collections"
         :key="collection.id"
-        class="flex flex-row rounded-lg overflow-hidden transition-all duration-200 text-left w-full hover:scale-105"
+        class="flex flex-row rounded-lg overflow-hidden transition-all duration-200 text-left w-full hover:scale-105 focus:scale-105"
       >
         <NuxtLink
-          class="grow p-4 bg-zinc-800/50 hover:bg-zinc-800"
+          class="grow p-4 bg-zinc-800/50 hover:bg-zinc-800 focus:bg-zinc-800 focus:outline-none"
           :href="`/library/collection/${collection.id}`"
         >
           <h3 class="text-lg font-semibold text-zinc-100">
@@ -36,7 +35,7 @@
         <!-- Delete button (only show for non-default collections) -->
         <button
           @click="() => (currentlyDeleting = collection)"
-          class="group px-3 ml-[2px] bg-zinc-800/50 hover:bg-zinc-800 group"
+          class="group px-3 ml-[2px] bg-zinc-800/50 hover:bg-zinc-800 group focus:bg-zinc-800 focus:outline-none"
         >
           <TrashIcon
             class="transition-all size-5 text-zinc-400 group-hover:text-red-400 group-hover:rotate-[8deg]"
@@ -70,6 +69,20 @@
         </button>
       </div>
     </TransitionGroup>
+
+    <!-- game library grid -->
+    <div>
+      <h1 class="text-zinc-100 text-xl font-bold font-display">
+        All Games
+      </h1>
+      <div class="mt-4 flex flex-row flex-wrap justify-left gap-4">
+        <GamePanel
+          v-for="game in games"
+          :game="game"
+          :href="`/library/game/${game?.id}`"
+        />
+      </div>
+    </div>
   </div>
 
   <CreateCollectionModal v-model="collectionCreateOpen" />
@@ -86,15 +99,14 @@ import {
 import { type Collection, type Game, type GameVersion } from "@prisma/client";
 import { PlusIcon } from "@heroicons/vue/20/solid";
 
-const gamesData = await $dropFetch<(Game & { versions: GameVersion[] })[]>(
-  "/api/v1/store/recent"
-);
-
 const collections = await useCollections();
 const collectionCreateOpen = ref(false);
 
 const currentlyDeleting = ref<Collection | undefined>();
 
+const library = await useLibrary();
+const games = library.value.entries.map((e) => e.game);
+
 useHead({
   title: "Home",
 });

prisma/migrations/20250401082200_add_save_slots/migration.sql

@@ -0,0 +1,24 @@
+-- AlterEnum
+ALTER TYPE "ClientCapabilities" ADD VALUE 'save';
+
+-- CreateTable
+CREATE TABLE "SaveSlot" (
+    "gameId" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "index" INTEGER NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "playtime" DOUBLE PRECISION NOT NULL,
+    "lastUsedClientId" TEXT NOT NULL,
+    "data" TEXT[],
+
+    CONSTRAINT "SaveSlot_pkey" PRIMARY KEY ("gameId","userId","index")
+);
+
+-- AddForeignKey
+ALTER TABLE "SaveSlot" ADD CONSTRAINT "SaveSlot_gameId_fkey" FOREIGN KEY ("gameId") REFERENCES "Game"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "SaveSlot" ADD CONSTRAINT "SaveSlot_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "SaveSlot" ADD CONSTRAINT "SaveSlot_lastUsedClientId_fkey" FOREIGN KEY ("lastUsedClientId") REFERENCES "Client"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/migrations/20250401082605_add_save_slot_limits_to_application_settings/migration.sql

@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "ApplicationSettings" ADD COLUMN     "saveSlotCountLimit" INTEGER NOT NULL DEFAULT 5,
+ADD COLUMN     "saveSlotSizeLimit" DOUBLE PRECISION NOT NULL DEFAULT 10;

prisma/migrations/20250401083942_rename_save_to_cloud_saves/migration.sql

@@ -0,0 +1,14 @@
+/*
+  Warnings:
+
+  - The values [save] on the enum `ClientCapabilities` will be removed. If these variants are still used in the database, this will fail.
+
+*/
+-- AlterEnum
+BEGIN;
+CREATE TYPE "ClientCapabilities_new" AS ENUM ('peerAPI', 'userStatus', 'cloudSaves');
+ALTER TABLE "Client" ALTER COLUMN "capabilities" TYPE "ClientCapabilities_new"[] USING ("capabilities"::text::"ClientCapabilities_new"[]);
+ALTER TYPE "ClientCapabilities" RENAME TO "ClientCapabilities_old";
+ALTER TYPE "ClientCapabilities_new" RENAME TO "ClientCapabilities";
+DROP TYPE "ClientCapabilities_old";
+COMMIT;

prisma/migrations/20250401084907_add_history_limit/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "ApplicationSettings" ADD COLUMN     "saveSlotHistoryLimit" INTEGER NOT NULL DEFAULT 3;

prisma/migrations/20250401085406_add_default_to_playtime/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "SaveSlot" ALTER COLUMN "playtime" SET DEFAULT 0;

prisma/migrations/20250401091937_add_history_and_hashes/migration.sql

@@ -0,0 +1,10 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `data` on the `SaveSlot` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "SaveSlot" DROP COLUMN "data",
+ADD COLUMN     "history" TEXT[],
+ADD COLUMN     "historyChecksums" TEXT[];

prisma/schema/app.prisma

@@ -3,6 +3,10 @@ model ApplicationSettings {
 
     enabledAuthencationMechanisms AuthMec[]
     metadataProviders             String[]
+
+    saveSlotCountLimit   Int   @default(5)
+    saveSlotSizeLimit    Float @default(10) // MB
+    saveSlotHistoryLimit Int   @default(3)
 }
 
 enum Platform {

prisma/schema/client.prisma

@@ -1,6 +1,7 @@
 enum ClientCapabilities {
     PeerAPI    @map("peerAPI") // other clients can use the HTTP API to P2P with this client
     UserStatus @map("userStatus") // this client can report this user's status (playing, online, etc etc)
+    CloudSaves       @map("cloudSaves") // ability to save to save slots
 }
 
 // References a device
@@ -16,6 +17,8 @@ model Client {
     lastConnected DateTime
 
     peerAPI ClientPeerAPIConfiguration?
+
+    lastAccessedSaves SaveSlot[]
 }
 
 model ClientPeerAPIConfiguration {

prisma/schema/content.prisma

@@ -31,9 +31,10 @@ model Game {
     mImageLibrary  String[] // linked to objects in s3
 
     versions        GameVersion[]
-    libraryBasePath String            @unique // Base dir for all the game versions
+    libraryBasePath String        @unique // Base dir for all the game versions
-    
+
     collections CollectionEntry[]
+    saves       SaveSlot[]
 
     @@unique([metadataSource, metadataId], name: "metadataKey")
 }
@@ -48,9 +49,9 @@ model GameVersion {
 
     platform Platform
 
-    launchCommand String @default("") // Command to run to start. Platform-specific. Windows games on Linux will wrap this command in Proton/Wine
+    launchCommand String   @default("") // Command to run to start. Platform-specific. Windows games on Linux will wrap this command in Proton/Wine
     launchArgs    String[]
-    setupCommand  String @default("") // Command to setup game (dependencies and such)
+    setupCommand  String   @default("") // Command to setup game (dependencies and such)
     setupArgs     String[]
     onlySetup     Boolean  @default(false)
 
@@ -64,6 +65,26 @@ model GameVersion {
     @@id([gameId, versionName])
 }
 
+// A save slot for a game
+model SaveSlot {
+    gameId String
+    game   Game   @relation(fields: [gameId], references: [id], onDelete: Cascade)
+    userId String
+    user   User   @relation(fields: [userId], references: [id], onDelete: Cascade)
+    index  Int
+
+    createdAt DateTime @default(now())
+    playtime  Float    @default(0) // hours
+
+    lastUsedClientId String
+    lastUsedClient   Client @relation(fields: [lastUsedClientId], references: [id])
+
+    history          String[] // list of objects
+    historyChecksums String[] // list of hashes
+
+    @@id([gameId, userId, index], name: "id")
+}
+
 model Developer {
     id String @id @default(uuid())
 

prisma/schema/user.prisma

@@ -16,6 +16,8 @@ model User {
 
     tokens   APIToken[]
     sessions Session[]
+
+    saves SaveSlot[]
 }
 
 model Notification {

server/api/v1/admin/game/metadata.post.ts

@@ -29,7 +29,7 @@ export default defineEventHandler(async (h3) => {
   const description = options.description;
   const gameId = options.id;
 
-  if (!(id || name || description)) {
+  if (!id || !name || !description) {
     dump();
 
     throw createError({

server/api/v1/client/capability/index.post.ts

@@ -21,14 +21,14 @@ export default defineClientEventHandler(async (h3, { clientId }) => {
       statusMessage: "configuration must be an object",
     });
 
-  if (!(rawCapability in validCapabilities))
+  const capability = rawCapability as InternalClientCapability;
+
+  if (!validCapabilities.includes(capability))
     throw createError({
       statusCode: 400,
       statusMessage: "Invalid capability.",
     });
 
-  const capability = rawCapability as InternalClientCapability;
-
   const isValid = await capabilityManager.validateCapabilityConfiguration(
     capability,
     configuration

server/api/v1/client/saves/[gameid]/[slotindex]/index.delete.ts

@@ -0,0 +1,53 @@
+import { ClientCapabilities } from "@prisma/client";
+import { defineClientEventHandler } from "~/server/internal/clients/event-handler";
+import prisma from "~/server/internal/db/database";
+
+export default defineClientEventHandler(
+  async (h3, { fetchClient, fetchUser }) => {
+    const client = await fetchClient();
+    if (!client.capabilities.includes(ClientCapabilities.CloudSaves))
+      throw createError({
+        statusCode: 403,
+        statusMessage: "Capability not allowed.",
+      });
+    const user = await fetchUser();
+    const gameId = getRouterParam(h3, "gameid");
+    if (!gameId)
+      throw createError({
+        statusCode: 400,
+        statusMessage: "No gameID in route params",
+      });
+
+    const slotIndexString = getRouterParam(h3, "slotindex");
+    if (!slotIndexString)
+      throw createError({
+        statusCode: 400,
+        statusMessage: "No slotIndex in route params",
+      });
+    const slotIndex = parseInt(slotIndexString);
+    if (Number.isNaN(slotIndex))
+      throw createError({
+        statusCode: 400,
+        statusMessage: "Invalid slotIndex",
+      });
+
+    const game = await prisma.game.findUnique({
+      where: { id: gameId },
+      select: { id: true },
+    });
+    if (!game)
+      throw createError({ statusCode: 400, statusMessage: "Invalid game ID" });
+
+    const save = await prisma.saveSlot.delete({
+      where: {
+        id: {
+          userId: user.id,
+          gameId: gameId,
+          index: slotIndex,
+        },
+      },
+    });
+    if (!save)
+      throw createError({ statusCode: 404, statusMessage: "Save not found" });
+  }
+);

server/api/v1/client/saves/[gameid]/[slotindex]/index.get.ts

@@ -0,0 +1,55 @@
+import { ClientCapabilities } from "@prisma/client";
+import { defineClientEventHandler } from "~/server/internal/clients/event-handler";
+import prisma from "~/server/internal/db/database";
+
+export default defineClientEventHandler(
+  async (h3, { fetchClient, fetchUser }) => {
+    const client = await fetchClient();
+    if (!client.capabilities.includes(ClientCapabilities.CloudSaves))
+      throw createError({
+        statusCode: 403,
+        statusMessage: "Capability not allowed.",
+      });
+    const user = await fetchUser();
+    const gameId = getRouterParam(h3, "gameid");
+    if (!gameId)
+      throw createError({
+        statusCode: 400,
+        statusMessage: "No gameID in route params",
+      });
+
+    const slotIndexString = getRouterParam(h3, "slotindex");
+    if (!slotIndexString)
+      throw createError({
+        statusCode: 400,
+        statusMessage: "No slotIndex in route params",
+      });
+    const slotIndex = parseInt(slotIndexString);
+    if (Number.isNaN(slotIndex))
+      throw createError({
+        statusCode: 400,
+        statusMessage: "Invalid slotIndex",
+      });
+
+    const game = await prisma.game.findUnique({
+      where: { id: gameId },
+      select: { id: true },
+    });
+    if (!game)
+      throw createError({ statusCode: 400, statusMessage: "Invalid game ID" });
+
+    const save = await prisma.saveSlot.findUnique({
+      where: {
+        id: {
+          userId: user.id,
+          gameId: gameId,
+          index: slotIndex,
+        },
+      },
+    });
+    if (!save)
+      throw createError({ statusCode: 404, statusMessage: "Save not found" });
+
+    return save;
+  }
+);

server/api/v1/client/saves/[gameid]/[slotindex]/push.post.ts

@@ -0,0 +1,52 @@
+import { ClientCapabilities } from "@prisma/client";
+import { defineClientEventHandler } from "~/server/internal/clients/event-handler";
+import prisma from "~/server/internal/db/database";
+import saveManager from "~/server/internal/saves";
+
+export default defineClientEventHandler(
+  async (h3, { fetchClient, fetchUser }) => {
+    const client = await fetchClient();
+    if (!client.capabilities.includes(ClientCapabilities.CloudSaves))
+      throw createError({
+        statusCode: 403,
+        statusMessage: "Capability not allowed.",
+      });
+    const user = await fetchUser();
+    const gameId = getRouterParam(h3, "gameid");
+    if (!gameId)
+      throw createError({
+        statusCode: 400,
+        statusMessage: "No gameID in route params",
+      });
+
+    const slotIndexString = getRouterParam(h3, "slotindex");
+    if (!slotIndexString)
+      throw createError({
+        statusCode: 400,
+        statusMessage: "No slotIndex in route params",
+      });
+    const slotIndex = parseInt(slotIndexString);
+    if (Number.isNaN(slotIndex))
+      throw createError({
+        statusCode: 400,
+        statusMessage: "Invalid slotIndex",
+      });
+
+    const game = await prisma.game.findUnique({
+      where: { id: gameId },
+      select: { id: true },
+    });
+    if (!game)
+      throw createError({ statusCode: 400, statusMessage: "Invalid game ID" });
+
+    await saveManager.pushSave(
+      gameId,
+      user.id,
+      slotIndex,
+      h3.node.req,
+      client.id
+    );
+
+    return;
+  }
+);

server/api/v1/client/saves/[gameid]/index.get.ts

@@ -0,0 +1,37 @@
+import { ClientCapabilities } from "@prisma/client";
+import { defineClientEventHandler } from "~/server/internal/clients/event-handler";
+import prisma from "~/server/internal/db/database";
+
+export default defineClientEventHandler(
+  async (h3, { fetchClient, fetchUser }) => {
+    const client = await fetchClient();
+    if (!client.capabilities.includes(ClientCapabilities.CloudSaves))
+      throw createError({
+        statusCode: 403,
+        statusMessage: "Capability not allowed.",
+      });
+    const user = await fetchUser();
+    const gameId = getRouterParam(h3, "gameid");
+    if (!gameId)
+      throw createError({
+        statusCode: 400,
+        statusMessage: "No gameID in route params",
+      });
+
+    const game = await prisma.game.findUnique({
+      where: { id: gameId },
+      select: { id: true },
+    });
+    if (!game)
+      throw createError({ statusCode: 400, statusMessage: "Invalid game ID" });
+
+    const saves = await prisma.saveSlot.findMany({
+      where: {
+        userId: user.id,
+        gameId: gameId,
+      },
+    });
+
+    return saves;
+  }
+);

server/api/v1/client/saves/[gameid]/index.post.ts

@@ -0,0 +1,62 @@
+import { ClientCapabilities } from "@prisma/client";
+import { defineClientEventHandler } from "~/server/internal/clients/event-handler";
+import { applicationSettings } from "~/server/internal/config/application-configuration";
+import prisma from "~/server/internal/db/database";
+
+export default defineClientEventHandler(
+  async (h3, { fetchClient, fetchUser }) => {
+    const client = await fetchClient();
+    if (!client.capabilities.includes(ClientCapabilities.CloudSaves))
+      throw createError({
+        statusCode: 403,
+        statusMessage: "Capability not allowed.",
+      });
+    const user = await fetchUser();
+    const gameId = getRouterParam(h3, "gameid");
+    if (!gameId)
+      throw createError({
+        statusCode: 400,
+        statusMessage: "No gameID in route params",
+      });
+
+    const game = await prisma.game.findUnique({
+      where: { id: gameId },
+      select: { id: true },
+    });
+    if (!game)
+      throw createError({ statusCode: 400, statusMessage: "Invalid game ID" });
+
+    const saves = await prisma.saveSlot.findMany({
+      where: {
+        userId: user.id,
+        gameId: gameId,
+      },
+      orderBy: {
+        index: "asc",
+      },
+    });
+
+    const limit = await applicationSettings.get("saveSlotCountLimit");
+    if (saves.length + 1 > limit)
+      throw createError({
+        statusCode: 400,
+        statusMessage: "Out of save slots",
+      });
+
+    let firstIndex = 0;
+    for (const save of saves) {
+      if (firstIndex == save.index) firstIndex++;
+    }
+
+    const newSlot = await prisma.saveSlot.create({
+      data: {
+        userId: user.id,
+        gameId: gameId,
+        index: firstIndex,
+        lastUsedClientId: client.id,
+      },
+    });
+
+    return newSlot;
+  }
+);

server/api/v1/client/saves/index.get.ts

@@ -0,0 +1,23 @@
+import { ClientCapabilities } from "@prisma/client";
+import { defineClientEventHandler } from "~/server/internal/clients/event-handler";
+import prisma from "~/server/internal/db/database";
+
+export default defineClientEventHandler(
+  async (h3, { fetchClient, fetchUser }) => {
+    const client = await fetchClient();
+    if (!client.capabilities.includes(ClientCapabilities.CloudSaves))
+      throw createError({
+        statusCode: 403,
+        statusMessage: "Capability not allowed.",
+      });
+    const user = await fetchUser();
+
+    const saves = await prisma.saveSlot.findMany({
+      where: {
+        userId: user.id,
+      },
+    });
+
+    return saves;
+  }
+);

server/api/v1/client/saves/settings.get.ts

@@ -0,0 +1,20 @@
+import { ClientCapabilities } from "@prisma/client";
+import { defineClientEventHandler } from "~/server/internal/clients/event-handler";
+import { applicationSettings } from "~/server/internal/config/application-configuration";
+import prisma from "~/server/internal/db/database";
+
+export default defineClientEventHandler(
+  async (h3, { fetchClient, fetchUser }) => {
+    const client = await fetchClient();
+    if (!client.capabilities.includes(ClientCapabilities.CloudSaves))
+      throw createError({
+        statusCode: 403,
+        statusMessage: "Capability not allowed.",
+      });
+
+    const slotLimit = await applicationSettings.get("saveSlotCountLimit");
+    const sizeLimit = await applicationSettings.get("saveSlotSizeLimit");
+    const history = await applicationSettings.get("saveSlotHistoryLimit");
+    return { slotLimit, sizeLimit, history };
+  }
+);

server/internal/clients/ca.ts

@@ -1,6 +1,6 @@
 import path from "path";
 import fs from "fs";
-import droplet from "@drop/droplet";
+import droplet from "@drop-oss/droplet";
 import { CertificateStore, fsCertificateStore } from "./ca-store";
 
 export type CertificateBundle = {

server/internal/clients/capabilities.ts

@@ -4,7 +4,6 @@ import { useCertificateAuthority } from "~/server/plugins/ca";
 import prisma from "../db/database";
 import { ClientCapabilities } from "@prisma/client";
 
-
 // These values are technically mapped to the database,
 // but Typescript/Prisma doesn't let me link them
 // They are also what are required by clients in the API
@@ -12,6 +11,7 @@ import { ClientCapabilities } from "@prisma/client";
 export enum InternalClientCapability {
   PeerAPI = "peerAPI",
   UserStatus = "userStatus",
+  CloudSaves = "cloudSaves",
 }
 
 export const validCapabilities = Object.values(InternalClientCapability);
@@ -19,6 +19,7 @@ export const validCapabilities = Object.values(InternalClientCapability);
 export type CapabilityConfiguration = {
   [InternalClientCapability.PeerAPI]: { endpoints: string[] };
   [InternalClientCapability.UserStatus]: {};
+  [InternalClientCapability.CloudSaves]: {};
 };
 
 class CapabilityManager {
@@ -75,6 +76,7 @@ class CapabilityManager {
       return valid;
     },
     [InternalClientCapability.UserStatus]: async () => true, // No requirements for user status
+    [InternalClientCapability.CloudSaves]: async () => true, // No requirements for cloud saves
   };
 
   async validateCapabilityConfiguration(
@@ -82,6 +84,7 @@ class CapabilityManager {
     configuration: object
   ) {
     const validationFunction = this.validationFunctions[capability];
+    if (!validationFunction) return false;
     return validationFunction(configuration);
   }
 
@@ -90,8 +93,11 @@ class CapabilityManager {
     rawCapability: object,
     clientId: string
   ) {
-    switch (capability) {
+    const upsertFunctions: EnumDictionary<
-      case InternalClientCapability.PeerAPI:
+      InternalClientCapability,
+      () => Promise<void> | void
+    > = {
+      [InternalClientCapability.PeerAPI]: async function () {
         const configuration =
           rawCapability as CapabilityConfiguration[InternalClientCapability.PeerAPI];
 
@@ -127,9 +133,32 @@ class CapabilityManager {
             },
           },
         });
-        return;
+      },
-    }
+      [InternalClientCapability.UserStatus]: function (): Promise<void> | void {
-    throw new Error("Cannot upsert client capability for: " + capability);
+        throw new Error("Function not implemented.");
+      },
+      [InternalClientCapability.CloudSaves]: async function () {
+        const currentClient = await prisma.client.findUnique({
+          where: { id: clientId },
+          select: {
+            capabilities: true,
+          },
+        });
+        if (!currentClient) throw new Error("Invalid client ID");
+        if (currentClient.capabilities.includes(ClientCapabilities.CloudSaves))
+          return;
+
+        await prisma.client.update({
+          where: { id: clientId },
+          data: {
+            capabilities: {
+              push: ClientCapabilities.CloudSaves,
+            },
+          },
+        });
+      },
+    };
+    await upsertFunctions[capability]();
   }
 }
 

server/internal/clients/event-handler.ts

@@ -1,6 +1,6 @@
 import { Client, User } from "@prisma/client";
 import { EventHandlerRequest, H3Event } from "h3";
-import droplet from "@drop/droplet";
+import droplet from "@drop-oss/droplet";
 import prisma from "../db/database";
 import { useCertificateAuthority } from "~/server/plugins/ca";
 
@@ -25,6 +25,16 @@ export function defineClientEventHandler<T>(handler: EventHandlerFunction<T>) {
 
     let clientId: string;
     switch (method) {
+      case "Debug":
+        if (!process.dev) throw createError({ statusCode: 403 });
+        const client = await prisma.client.findFirst({ select: { id: true } });
+        if (!client)
+          throw createError({
+            statusCode: 400,
+            statusMessage: "No clients created.",
+          });
+        clientId = client.id;
+        break;
       case "Nonce":
         clientId = parts[0];
         const nonce = parts[1];
@@ -49,7 +59,9 @@ export function defineClientEventHandler<T>(handler: EventHandlerFunction<T>) {
         }
 
         const certificateAuthority = useCertificateAuthority();
-        const certBundle = await certificateAuthority.fetchClientCertificate(clientId);
+        const certBundle = await certificateAuthority.fetchClientCertificate(
+          clientId
+        );
         // This does the blacklist check already
         if (!certBundle)
           throw createError({

server/internal/library/index.ts

@@ -13,7 +13,7 @@ import { fuzzy } from "fast-fuzzy";
 import { recursivelyReaddir } from "../utils/recursivedirs";
 import taskHandler from "../tasks";
 import { parsePlatform } from "../utils/parseplatform";
-import droplet from "@drop/droplet";
+import droplet from "@drop-oss/droplet";
 import notificationSystem from "../notifications";
 
 class LibraryManager {

server/internal/objects/fsBackend.ts

@@ -1,4 +1,10 @@
-import { Object, ObjectBackend, ObjectMetadata, ObjectReference, Source } from "./objectHandler";
+import {
+  Object,
+  ObjectBackend,
+  ObjectMetadata,
+  ObjectReference,
+  Source,
+} from "./objectHandler";
 
 import sanitize from "sanitize-filename";
 
@@ -44,6 +50,12 @@ export class FsObjectBackend extends ObjectBackend {
 
     return false;
   }
+  async startWriteStream(id: ObjectReference) {
+    const objectPath = path.join(this.baseObjectPath, sanitize(id));
+    if (!fs.existsSync(objectPath)) return undefined;
+
+    return fs.createWriteStream(objectPath);
+  }
   async create(
     id: string,
     source: Source,
@@ -68,6 +80,23 @@ export class FsObjectBackend extends ObjectBackend {
 
     return id;
   }
+  async createWithWriteStream(id: string, metadata: ObjectMetadata) {
+    const objectPath = path.join(this.baseObjectPath, sanitize(id));
+    const metadataPath = path.join(
+      this.baseMetadataPath,
+      `${sanitize(id)}.json`
+    );
+    if (fs.existsSync(objectPath) || fs.existsSync(metadataPath))
+      return undefined;
+
+    // Write metadata
+    fs.writeFileSync(metadataPath, JSON.stringify(metadata));
+
+    // Create file so write passes
+    fs.writeFileSync(objectPath, "");
+
+    return this.startWriteStream(id);
+  }
   async delete(id: ObjectReference): Promise<boolean> {
     const objectPath = path.join(this.baseObjectPath, sanitize(id));
     if (!fs.existsSync(objectPath)) return true;

server/internal/objects/objectHandler.ts

@@ -15,7 +15,7 @@
  */
 
 import { parse as getMimeTypeBuffer } from "file-type-mime";
-import { Readable } from "stream";
+import Stream, { Readable, Writable } from "stream";
 import { getMimeType as getMimeTypeStream } from "stream-mime-type";
 import { v4 as uuidv4 } from "uuid";
 
@@ -46,11 +46,16 @@ export abstract class ObjectBackend {
   // They don't check permissions to provide any utilities
   abstract fetch(id: ObjectReference): Promise<Source | undefined>;
   abstract write(id: ObjectReference, source: Source): Promise<boolean>;
+  abstract startWriteStream(id: ObjectReference): Promise<Writable | undefined>;
   abstract create(
     id: string,
     source: Source,
     metadata: ObjectMetadata
   ): Promise<ObjectReference | undefined>;
+  abstract createWithWriteStream(
+    id: string,
+    metadata: ObjectMetadata
+  ): Promise<Writable | undefined>;
   abstract delete(id: ObjectReference): Promise<boolean>;
   abstract fetchMetadata(
     id: ObjectReference
@@ -60,30 +65,31 @@ export abstract class ObjectBackend {
     metadata: ObjectMetadata
   ): Promise<boolean>;
 
+  private async fetchMimeType(source: Source) {
+    if (source instanceof ReadableStream) {
+      source = Readable.from(source);
+    }
+    if (source instanceof Readable) {
+      const { stream, mime } = await getMimeTypeStream(source);
+      return { source: Readable.from(stream), mime: mime };
+    }
+    if (source instanceof Buffer) {
+      const mime =
+        getMimeTypeBuffer(new Uint8Array(source).buffer)?.mime ??
+        "application/octet-stream";
+      return { source: source, mime };
+    }
+
+    return { source: undefined, mime: undefined };
+  }
+
   async createFromSource(
     id: string,
     sourceFetcher: () => Promise<Source>,
     metadata: { [key: string]: string },
     permissions: Array<string>
   ) {
-    async function fetchMimeType(source: Source) {
+    const { source, mime } = await this.fetchMimeType(await sourceFetcher());
-      if (source instanceof ReadableStream) {
-        source = Readable.from(source);
-      }
-      if (source instanceof Readable) {
-        const { stream, mime } = await getMimeTypeStream(source);
-        return { source: Readable.from(stream), mime: mime };
-      }
-      if (source instanceof Buffer) {
-        const mime =
-          getMimeTypeBuffer(new Uint8Array(source).buffer)?.mime ??
-          "application/octet-stream";
-        return { source: source, mime };
-      }
-
-      return { source: undefined, mime: undefined };
-    }
-    const { source, mime } = await fetchMimeType(await sourceFetcher());
     if (!mime)
       throw new Error("Unable to calculate MIME type - is the source empty?");
 
@@ -94,6 +100,18 @@ export abstract class ObjectBackend {
     });
   }
 
+  async createWithStream(
+    id: string,
+    metadata: { [key: string]: string },
+    permissions: Array<string>
+  ) {
+    return this.createWithWriteStream(id, {
+      permissions,
+      userMetadata: metadata,
+      mime: "application/octet-stream",
+    });
+  }
+
   async fetchWithPermissions(id: ObjectReference, userId?: string) {
     const metadata = await this.fetchMetadata(id);
     if (!metadata) return;

server/internal/saves/index.ts

@@ -0,0 +1,124 @@
+import Stream, { Readable } from "stream";
+import prisma from "../db/database";
+import { applicationSettings } from "../config/application-configuration";
+import objectHandler from "../objects";
+import { v4 as uuidv4 } from "uuid";
+import crypto from "crypto";
+import { IncomingMessage } from "http";
+
+class SaveManager {
+  async deleteObjectFromSave(
+    gameId: string,
+    userId: string,
+    index: number,
+    objectId: string
+  ) {
+    await objectHandler.delete(objectId);
+  }
+
+  async pushSave(
+    gameId: string,
+    userId: string,
+    index: number,
+    stream: IncomingMessage,
+    clientId: string | undefined = undefined
+  ) {
+    const save = await prisma.saveSlot.findUnique({
+      where: {
+        id: {
+          userId,
+          gameId,
+          index,
+        },
+      },
+    });
+    if (!save)
+      throw createError({ statusCode: 404, statusMessage: "Save not found" });
+
+    const newSaveObjectId = uuidv4();
+    const newSaveStream = await objectHandler.createWithStream(
+      newSaveObjectId,
+      { saveSlot: JSON.stringify({ userId, gameId, index }) },
+      []
+    );
+    if (!newSaveStream)
+      throw createError({
+        statusCode: 500,
+        statusMessage: "Failed to create writing stream to storage backend.",
+      });
+
+    let hash: string | undefined;
+    const hashPromise = Stream.promises.pipeline(
+      stream,
+      crypto.createHash("sha256").setEncoding("hex"),
+      async function (source) {
+        // Not sure how to get this to be typed
+        // @ts-expect-error
+        hash = (await source.toArray())[0];
+      }
+    );
+
+    const uploadStream = Stream.promises.pipeline(stream, newSaveStream);
+
+    await Promise.all([hashPromise, uploadStream]);
+
+    if (!hash) {
+      await objectHandler.delete(newSaveObjectId);
+      throw createError({
+        statusCode: 500,
+        statusMessage: "Hash failed to generate",
+      });
+    }
+
+    const newSave = await prisma.saveSlot.update({
+      where: {
+        id: {
+          userId,
+          gameId,
+          index,
+        },
+      },
+      data: {
+        history: {
+          push: newSaveObjectId,
+        },
+        historyChecksums: {
+          push: hash,
+        },
+        ...(clientId && { lastUsedClientId: clientId }),
+      },
+    });
+
+    const historyLimit = await applicationSettings.get("saveSlotHistoryLimit");
+    if (newSave.history.length > historyLimit) {
+      // Delete previous
+      const safeFromIndex = newSave.history.length - historyLimit;
+
+      const toDelete = newSave.history.slice(0, safeFromIndex);
+      const toKeepObjects = newSave.history.slice(safeFromIndex);
+      const toKeepHashes = newSave.historyChecksums.slice(safeFromIndex);
+
+      // Delete objects first, so if we error out, we don't lose track of objects in backend
+      for (const objectId of toDelete) {
+        await this.deleteObjectFromSave(gameId, userId, index, objectId);
+      }
+
+      await prisma.saveSlot.update({
+        where: {
+          id: {
+            userId,
+            gameId,
+            index,
+          },
+        },
+        data: {
+          history: toKeepObjects,
+          historyChecksums: toKeepHashes,
+        },
+      });
+    }
+  }
+}
+
+export const saveManager = new SaveManager();
+export default saveManager;

server/internal/tasks/index.ts

@@ -1,4 +1,4 @@
-import droplet from "@drop/droplet";
+import droplet from "@drop-oss/droplet";
 import { MinimumRequestObject } from "~/server/h3";
 import aclManager from "../acls";