basic uploads page

prisma/migrations/20240706074316_size_key/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - Added the required column `size` to the `Upload` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE `Upload` ADD COLUMN `size` BIGINT NOT NULL;

prisma/migrations/20240706074424_am_i_crazy/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - You are about to alter the column `size` on the `Upload` table. The data in that column could be lost. The data in that column will be cast from `BigInt` to `Int`.
+
+*/
+-- AlterTable
+ALTER TABLE `Upload` MODIFY `size` INTEGER NOT NULL;

prisma/schema.prisma

@@ -53,6 +53,7 @@ model Upload {
 
     fileName     String   @db.LongText
     internalName String   @db.LongText
+    size         Int
     public       Boolean  @default(true)
     uploaded     DateTime @default(now())
 }

src/lib/components/File.svelte

@@ -35,9 +35,13 @@
 	>
 		<div class="flex overflow-x-scroll flex-col my-auto overflow-y-clip">
 			{#if url}
-				<a href={url} class="font-bold text-blue">{file.name}</a>
+				<a
+					href={url}
+					class="font-bold overflow-ellipsis whitespace-nowrap text-blue overflow-x-clip"
+					>{file.name}</a
+				>
 			{:else}
-				<p>{file.name}</p>
+				<p class="overflow-ellipsis whitespace-nowrap overflow-x-clip">{file.name}</p>
 			{/if}
 
 			<div class="flex gap-0.5">

src/lib/components/ThemeHandler.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { browser } from '$app/environment';
+	import { get } from 'svelte/store';
 	import { darkMode } from '../stores';
 
 	if (browser) {
@@ -8,9 +9,11 @@
 		$darkMode = localStorage.getItem('darkMode') === 'true';
 
 		darkMode.subscribe(() => {
-			console.log(`[ThemeHandler.svelte] Current theme is ${$darkMode ? 'dark' : 'light'} mode`);
+			console.log(
+				`[ThemeHandler.svelte] Current theme is ${get(darkMode) ? 'dark' : 'light'} mode`
+			);
 
-			localStorage.setItem('darkMode', $darkMode);
+			localStorage.setItem('darkMode', get(darkMode).toString());
 
 			if ($darkMode) {
 				console.log('[ThemeHandler.svelte] Setting dark mode from store');

src/lib/server/database.ts

@@ -92,7 +92,8 @@ export async function createUpload(
 	id: string,
 	uploaderId: number,
 	fileName: string,
-	internalName: string
+	internalName: string,
+	size: number
 ) {
 	const settings = await prisma.userSettings.findFirst({
 		where: { id: uploaderId }
@@ -104,6 +105,7 @@ export async function createUpload(
 			uploaderId,
 			fileName,
 			internalName,
+			size,
 			public: settings?.newPostsPublic
 		}
 	});

src/lib/stores.ts

@@ -1,7 +1,7 @@
 import { writable, type Writable } from 'svelte/store';
 import type { UserSafe } from '../app';
 
-export const darkMode = writable(true);
+export const darkMode: Writable<boolean> = writable(true);
 export const user: Writable<UserSafe> = writable();
 
 // too lazy to do types for this

src/routes/(app)/uploads/+page.server.ts

@@ -0,0 +1,25 @@
+import prisma from '$lib/server/database.js';
+import { error } from '@sveltejs/kit';
+
+export async function load({ locals, url }) {
+	if (!locals.user) return error(403, { status: 403, message: 'Forbidden' });
+
+	if (+(url.searchParams.get('i') || 0) < 0) error(400, { status: 403, message: 'Invalid Index' });
+
+	const totalUploads = await prisma.upload.count();
+	if (+(url.searchParams.get('i') || 0) >= Math.ceil(totalUploads / 15))
+		error(400, { status: 403, message: 'Invalid Index' });
+
+	const uploads = prisma.upload.findMany({
+		skip: +(url.searchParams.get('i') || 0) * 15,
+		take: 15,
+		where: {
+			uploaderId: locals.user.id
+		},
+		orderBy: {
+			uploaded: 'desc'
+		}
+	});
+
+	return { uploads, totalUploads };
+}

src/routes/(app)/uploads/+page.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { File, ChevronLeft, ChevronRight } from 'lucide-svelte';
+	import { bytesToHumanReadable } from '$lib';
+	import { fade } from 'svelte/transition';
+	import { writable, get } from 'svelte/store';
+	import { goto } from '$app/navigation';
+	import { browser } from '$app/environment';
+	import { page } from '$app/stores';
+
+	export let data;
+
+	let pageIndex = writable(Number($page.url.searchParams.get('i')) || 0);
+	pageIndex.subscribe((_) => {
+		if (browser) {
+			goto('/uploads?i=' + get(pageIndex));
+		}
+	});
+</script>
+
+{#await data.uploads then uploads}
+	<div class="grid grid-cols-5 grid-rows-3 gap-2">
+		{#each uploads as upload, i}
+			<a
+				in:fade|global={{ duration: 500, delay: 100 * i }}
+				href="/file/{upload.id}"
+				class="flex flex-col gap-2 p-2 mx-auto w-full rounded-lg shadow-lg bg-crust"
+			>
+				<div class="flex w-full rounded-lg aspect-video bg-mantle">
+					<File size="32" class="m-auto text-surface2"></File>
+				</div>
+				<div>
+					<p class="font-bold overflow-ellipsis whitespace-nowrap overflow-x-clip">
+						{upload.fileName}
+					</p>
+					<p class="text-sm text-overlay1">{bytesToHumanReadable(upload.size)}</p>
+				</div>
+			</a>
+		{/each}
+	</div>
+	<div class="flex mx-auto mt-2 space-x-1 rounded-md bg-crust w-fit">
+		<button
+			class="p-2 my-auto hover:text-overlay2"
+			on:click={() => {
+				if ($pageIndex <= 0) return;
+				$pageIndex -= 1;
+			}}
+		>
+			<ChevronLeft></ChevronLeft>
+		</button>
+		<p class="p-2 my-auto">{$pageIndex + 1} / {Math.ceil(data.totalUploads / 15)}</p>
+		<button
+			class="p-2 my-auto hover:text-overlay2"
+			on:click={() => {
+				if ($pageIndex >= Math.ceil(data.totalUploads / 15) - 1) return;
+				$pageIndex += 1;
+			}}
+			><ChevronRight></ChevronRight>
+		</button>
+	</div>
+{/await}

src/routes/api/upload/+server.ts

@@ -35,7 +35,7 @@ export const POST = async ({ request, cookies }) => {
 	if (!object)
 		return error(500, { status: 500, message: 'Internal Server Error - Contact Administrator' });
 
-	const objectRecord = await createUpload(id, user.id, file.name, internalName);
+	const objectRecord = await createUpload(id, user.id, file.name, internalName, file.size);
 	if (!objectRecord)
 		return error(500, { status: 500, message: 'Internal Server Error - Contact Administrator' });