@axium/storage 0.4.3 → 0.5.0

package/dist/client.d.ts

@@ -1,4 +1,4 @@
-import type { StorageItemMetadata, StorageItemUpdate, UserFilesInfo } from './common.js';
+import type { StorageItemMetadata, StorageItemUpdate, UserStorage, UserStorageInfo } from './common.js';
 export declare function parseItem(result: StorageItemMetadata): StorageItemMetadata;
 export interface UploadOptions {
     parentId?: string;
@@ -7,8 +7,15 @@ export interface UploadOptions {
 export declare function uploadItem(file: Blob | File, opt?: UploadOptions): Promise<StorageItemMetadata>;
 export declare function updateItem(fileId: string, data: Blob): Promise<StorageItemMetadata>;
 export declare function getItemMetadata(fileId: string): Promise<StorageItemMetadata>;
+/**
+ * Gets the metadata for all items in a directory.
+ */
 export declare function getDirectoryMetadata(parentId: string): Promise<StorageItemMetadata[]>;
 export declare function downloadItem(fileId: string): Promise<Blob>;
 export declare function updateItemMetadata(fileId: string, metadata: StorageItemUpdate): Promise<StorageItemMetadata>;
 export declare function deleteItem(fileId: string): Promise<StorageItemMetadata>;
-export declare function getUserFiles(userId: string): Promise<UserFilesInfo>;
+export declare function getUserStorage(userId: string): Promise<UserStorage>;
+export declare function getUserStorageInfo(userId: string): Promise<UserStorageInfo>;
+export declare function getUserTrash(userId: string): Promise<StorageItemMetadata[]>;
+export declare function itemsSharedWith(userId: string): Promise<StorageItemMetadata[]>;
+export declare function getUserStorageRoot(userId: string): Promise<StorageItemMetadata[]>;

package/dist/client.js

@@ -45,6 +45,9 @@ export async function getItemMetadata(fileId) {
     const result = await fetchAPI('GET', 'storage/item/:id', undefined, fileId);
     return parseItem(result);
 }
+/**
+ * Gets the metadata for all items in a directory.
+ */
 export async function getDirectoryMetadata(parentId) {
     const result = await fetchAPI('GET', 'storage/directory/:id', undefined, parentId);
     for (const item of result)
@@ -67,9 +70,30 @@ export async function deleteItem(fileId) {
     const result = await fetchAPI('DELETE', 'storage/item/:id', undefined, fileId);
     return parseItem(result);
 }
-export async function getUserFiles(userId) {
+export async function getUserStorage(userId) {
     const result = await fetchAPI('GET', 'users/:id/storage', undefined, userId);
     for (const item of result.items)
         parseItem(item);
     return result;
 }
+export async function getUserStorageInfo(userId) {
+    return await fetchAPI('OPTIONS', 'users/:id/storage', undefined, userId);
+}
+export async function getUserTrash(userId) {
+    const result = await fetchAPI('GET', 'users/:id/storage/trash', undefined, userId);
+    for (const item of result)
+        parseItem(item);
+    return result;
+}
+export async function itemsSharedWith(userId) {
+    const result = await fetchAPI('GET', 'users/:id/storage/shared', undefined, userId);
+    for (const item of result)
+        parseItem(item);
+    return result;
+}
+export async function getUserStorageRoot(userId) {
+    const result = await fetchAPI('GET', 'users/:id/storage/root', undefined, userId);
+    for (const item of result)
+        parseItem(item);
+    return result;
+}

package/dist/common.d.ts

@@ -2,11 +2,17 @@ import * as z from 'zod';
 declare module '@axium/core/api' {
     interface _apiTypes {
         'users/:id/storage': {
-            OPTIONS: {
-                usage: StorageUsage;
-                limits: StorageLimits;
-            };
-            GET: UserFilesInfo;
+            OPTIONS: UserStorageInfo;
+            GET: UserStorage;
+        };
+        'users/:id/storage/root': {
+            GET: StorageItemMetadata[];
+        };
+        'users/:id/storage/trash': {
+            GET: StorageItemMetadata[];
+        };
+        'users/:id/storage/shared': {
+            GET: StorageItemMetadata[];
         };
         'storage/item/:id': {
             GET: StorageItemMetadata;
@@ -30,11 +36,13 @@ export interface StorageUsage {
     bytes: number;
     items: number;
 }
-export interface UserFilesInfo {
-    items: StorageItemMetadata[];
+export interface UserStorageInfo {
     limits: StorageLimits;
     usage: StorageUsage;
 }
+export interface UserStorage extends UserStorageInfo {
+    items: StorageItemMetadata[];
+}
 /**
  * An update to file metadata.
  */

package/dist/plugin.d.ts

@@ -41,6 +41,7 @@ declare const _default: {
         "./components": string;
         "./components/*": string;
     };
+    routes: string;
     files: string[];
     scripts: {
         build: string;
@@ -49,6 +50,7 @@ declare const _default: {
         "@axium/client": string;
         "@axium/core": string;
         "@axium/server": string;
+        "@sveltejs/kit": string;
         utilium: string;
     };
     dependencies: {

package/dist/plugin.js

@@ -7,6 +7,7 @@ import { sql } from 'kysely';
 import pkg from '../package.json' with { type: 'json' };
 import './common.js';
 import './server.js';
+import { App } from '@axium/server/apps';
 async function statusText() {
     const { storage: items } = await count('storage');
     const { size } = await database
@@ -60,6 +61,11 @@ async function clean(opt) {
         .executeTakeFirstOrThrow()
         .then(done);
 }
+new App({
+    id: 'files',
+    name: 'Files',
+    version: pkg.version,
+});
 export default {
     ...pkg,
     statusText,

package/dist/server.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/unbound-method */
 import { Permission } from '@axium/core/access';
 import { checkAuthForItem, checkAuthForUser, getSessionAndUser } from '@axium/server/auth';
 import { addConfigDefaults, config } from '@axium/server/config';
@@ -325,10 +326,72 @@ addRoute({
         const userId = event.params.id;
         await checkAuthForUser(event, userId);
         const [items, usage, limits] = await Promise.all([
-            database.selectFrom('storage').where('userId', '=', userId).selectAll().execute(),
+            database.selectFrom('storage').where('userId', '=', userId).where('trashedAt', '==', null).selectAll().execute(),
             currentUsage(userId),
             getLimits(userId),
         ]).catch(withError('Could not fetch data'));
         return { usage, limits, items: items.map(parseItem) };
     },
 });
+addRoute({
+    path: '/api/users/:id/storage/root',
+    params: { id: z.uuid() },
+    async GET(event) {
+        if (!config.storage.enabled)
+            error(503, 'User storage is disabled');
+        const userId = event.params.id;
+        await checkAuthForUser(event, userId);
+        const items = await database
+            .selectFrom('storage')
+            .where('userId', '=', userId)
+            .where('trashedAt', '==', null)
+            .where('parentId', '==', null)
+            .selectAll()
+            .execute()
+            .catch(withError('Could not get storage items'));
+        return items.map(parseItem);
+    },
+});
+addRoute({
+    path: '/api/users/:id/storage/shared',
+    params: { id: z.uuid() },
+    async GET(event) {
+        if (!config.storage.enabled)
+            error(503, 'User storage is disabled');
+        const userId = event.params.id;
+        await checkAuthForUser(event, userId);
+        const items = await database
+            .selectFrom('storage')
+            .where('trashedAt', '==', null)
+            .where(({ and, not, exists, selectFrom }) => {
+            const existsInAcl = (column) => exists(selectFrom('acl.storage')
+                .whereRef('itemId', '=', `storage.${column}`)
+                .where('userId', '=', userId)
+                .where('permission', '!=', Permission.None));
+            // Exclude items that are in a directory shared with the user
+            return and([existsInAcl('id'), not(existsInAcl('parentId'))]);
+        })
+            .selectAll()
+            .execute()
+            .catch(withError('Could not get storage items'));
+        return items.map(parseItem);
+    },
+});
+addRoute({
+    path: '/api/users/:id/storage/trash',
+    params: { id: z.uuid() },
+    async GET(event) {
+        if (!config.storage.enabled)
+            error(503, 'User storage is disabled');
+        const userId = event.params.id;
+        await checkAuthForUser(event, userId);
+        const items = await database
+            .selectFrom('storage')
+            .where('userId', '=', userId)
+            .where('trashedAt', '!=', null)
+            .selectAll()
+            .execute()
+            .catch(withError('Could not get trash'));
+        return items.map(parseItem);
+    },
+});

package/lib/{StorageList.svelte → List.svelte}

@@ -2,10 +2,10 @@
 	import { formatBytes } from '@axium/core/format';
 	import { forMime as iconForMime } from '@axium/core/icons';
 	import { FormDialog, Icon } from '@axium/server/components';
-	import { deleteItem, getDirectoryMetadata, updateItemMetadata } from '@axium/storage/client';
+	import { getDirectoryMetadata, updateItemMetadata } from '@axium/storage/client';
 	import type { StorageItemMetadata } from '@axium/storage/common';
 
-	let { id, items = $bindable([]) }: { id: string; items?: StorageItemMetadata[] } = $props();
+	let { items = $bindable([]), appMode }: { appMode?: boolean; items: StorageItemMetadata[] } = $props();
 
 	let activeIndex = $state<number>(-1);
 	let activeItem = $derived(items[activeIndex]);
@@ -13,51 +13,55 @@
 </script>
 
 {#snippet action(name: string, icon: string, i: number)}
-	<Icon
-		i={icon}
-		--size="14px"
+	<span
+		class="action"
 		onclick={(e: Event) => {
 			e.stopPropagation();
 			e.preventDefault();
 			activeIndex = i;
 			dialogs[name].showModal();
 		}}
-		class="action"
-	/>
+	>
+		<Icon i={icon} --size="14px" />
+	</span>
 {/snippet}
 
 {#snippet _itemName()}
-	{#if activeItem.name}
+	{#if activeItem?.name}
 		<strong>{activeItem.name.length > 23 ? activeItem.name.slice(0, 20) + '...' : activeItem.name}</strong>
 	{:else}
 		this
 	{/if}
 {/snippet}
 
+{#snippet _item(item: StorageItemMetadata, i: number)}
+	<div class="StorageListItem">
+		<dfn title={item.type}><Icon i={iconForMime(item.type)} /></dfn>
+		<span class="name">{item.name}</span>
+		<span>{item.modifiedAt.toLocaleString()}</span>
+		<span>{formatBytes(item.size)}</span>
+		{@render action('rename', 'pencil', i)}
+		{@render action('download', 'download', i)}
+		{@render action('trash', 'trash', i)}
+	</div>
+{/snippet}
+
 <div class="StorageList">
-	{#await items.length || getDirectoryMetadata(id).then(data => (items = data)) then}
-		<div class="StorageListItem header">
-			<span></span>
-			<span>Name</span>
-			<span>Last Modified</span>
-			<span>Size</span>
-		</div>
-		{#each items as item, i (item.id)}
-			<div class="StorageListItem">
-				<dfn title={item.type}><Icon i={iconForMime(item.type)} /></dfn>
-				<span class="name">{item.name}</span>
-				<span>{item.modifiedAt.toLocaleString()}</span>
-				<span>{formatBytes(item.size)}</span>
-				{@render action('rename', 'edit', i)}
-				{@render action('download', 'download', i)}
-				{@render action('delete', 'delete', i)}
-			</div>
+	<div class="StorageListItem SL_header">
+		<span></span>
+		<span>Name</span>
+		<span>Last Modified</span>
+		<span>Size</span>
+	</div>
+	{#each items as item, i (item.id)}
+		{#if item.type == 'inode/directory' && appMode}
+			<a class="StorageListItem-container" href="/files/{item.id}">{@render _item(item, i)}</a>
 		{:else}
-			<i>Empty.</i>
-		{/each}
-	{:catch error}
-		<i style:color="#c44">{error.message}</i>
-	{/await}
+			{@render _item(item, i)}
+		{/if}
+	{:else}
+		<i>Empty.</i>
+	{/each}
 </div>
 
 <FormDialog
@@ -74,25 +78,28 @@
 	</div>
 </FormDialog>
 <FormDialog
-	bind:dialog={dialogs.delete}
-	submitText="Delete"
+	bind:dialog={dialogs.trash}
+	submitText="Trash"
 	submitDanger
 	submit={async () => {
-		await deleteItem(activeItem.id);
+		await updateItemMetadata(activeItem.id, { trash: true });
 		if (activeIndex != -1) items.splice(activeIndex, 1);
 	}}
 >
-	<p>Are you sure you want to delete {@render _itemName()}?</p>
+	<p>Are you sure you want to trash {@render _itemName()}?</p>
 </FormDialog>
 <FormDialog
 	bind:dialog={dialogs.download}
 	submitText="Download"
 	submit={async () => {
-		open(activeItem.dataURL, '_blank');
+		if (activeItem.type == 'inode/directory') {
+			const children = await getDirectoryMetadata(activeItem.id);
+			for (const child of children) open(child.dataURL, '_blank');
+		} else open(activeItem.dataURL, '_blank');
 	}}
 >
 	<p>
-		We are not responsible for the contents of this file. <br />
+		We are not responsible for the contents of this {activeItem.type == 'inode/directory' ? 'folder' : 'file'}. <br />
 		Are you sure you want to download {@render _itemName()}?
 	</p>
 </FormDialog>
@@ -104,25 +111,30 @@
 		padding: 0.5em;
 	}
 
-	.StorageListItem.header {
+	.StorageListItem.SL_header {
 		font-weight: bold;
 		border-bottom: 1px solid #bbc;
 	}
 
+	.StorageListItem-container {
+		text-decoration: none;
+		color: inherit;
+	}
+
 	.StorageListItem {
 		display: grid;
-		grid-template-columns: 1em 4fr 15em 5em repeat(1em, 3);
+		grid-template-columns: 1em 4fr 15em 5em repeat(3, 1em);
 		align-items: center;
 		gap: 0.5em;
+		padding: 0.5em 0;
 	}
 
 	.StorageListItem:not(:last-child) {
-		padding: 0.5em 0;
 		border-bottom: 1px solid #bbc;
 	}
 
-	.StorageListItem:not(.header):hover {
-		background-color: #8888;
+	.StorageListItem:not(.SL_header):hover {
+		background-color: #7777;
 	}
 
 	.action {

package/lib/{StorageSidebar.svelte → Sidebar.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { StorageItemMetadata } from '@axium/storage/common';
-	import StorageSidebarItem from './StorageSidebarItem.svelte';
+	import SidebarItem from './SidebarItem.svelte';
 	import { items as sb_items, getDirectory } from '@axium/storage/sidebar';
 
 	let { root }: { root: string | StorageItemMetadata[] } = $props();
@@ -18,7 +18,7 @@
 		<i>Loading...</i>
 	{:then}
 		{#each items as _, i (_.id)}
-			<StorageSidebarItem bind:item={items[i]} bind:items />
+			<SidebarItem bind:item={items[i]} bind:items />
 		{:else}
 			<i>No files yet</i>
 		{/each}

package/lib/{StorageSidebarItem.svelte → SidebarItem.svelte}

@@ -4,7 +4,7 @@
 	import { deleteItem, updateItemMetadata } from '@axium/storage/client';
 	import type { StorageItemMetadata } from '@axium/storage/common';
 	import { debug, getDirectory, selection, toggle, toggleRange } from '@axium/storage/sidebar';
-	import StorageSidebarItem from './StorageSidebarItem.svelte';
+	import SidebarItem from './SidebarItem.svelte';
 
 	let {
 		item = $bindable(),
@@ -84,7 +84,7 @@
 				<i>Loading...</i>
 			{:then}
 				{#each children as _, i (_.id)}
-					<StorageSidebarItem bind:item={children[i]} bind:items={children} />
+					<SidebarItem bind:item={children[i]} bind:items={children} />
 				{/each}
 			{:catch error}
 				<i style:color="#c44">{error.message}</i>

package/lib/Usage.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { formatBytes } from '@axium/core/format';
+	import { NumberBar } from '@axium/server/components';
+	import { getUserStorageInfo } from '@axium/storage/client';
+	import type { UserStorageInfo } from '@axium/storage/common';
+
+	const { userId, info }: { userId: string; info?: UserStorageInfo } = $props();
+</script>
+
+{#await info || getUserStorageInfo(userId)}
+	<p>Loading...</p>
+{:then info}
+	<p>
+		<NumberBar
+			max={info.limits.user_size * 1_000_000}
+			value={info.usage.bytes}
+			text="Using {formatBytes(info.usage.bytes)} of {formatBytes(info.limits.user_size * 1_000_000)}"
+			--fill="#345"
+		/>
+	</p>
+{:catch error}
+	<p>Couldn't load your uploads.</p>
+	<p>{error.message}</p>
+{/await}

package/lib/index.ts

@@ -1,3 +1,4 @@
-export { default as StorageList } from './StorageList.svelte';
-export { default as StorageSidebar } from './StorageSidebar.svelte';
-export { default as StorageSidebarItem } from './StorageSidebarItem.svelte';
+export { default as StorageList } from './List.svelte';
+export { default as StorageSidebar } from './Sidebar.svelte';
+export { default as StorageSidebarItem } from './SidebarItem.svelte';
+export { default as StorageUsage } from './Usage.svelte';

package/lib/tsconfig.json

@@ -4,8 +4,7 @@
 		"rootDir": "..",
 		"noEmit": true,
 		"module": "preserve",
-		"moduleResolution": "Bundler",
-		"allowImportingTsExtensions": true
+		"moduleResolution": "Bundler"
 	},
 	"include": ["**/*.svelte", "**/*.ts"],
 	"exclude": [],

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/storage",
-	"version": "0.4.3",
+	"version": "0.5.0",
 	"author": "James Prevett <axium@jamespre.dev> (https://jamespre.dev)",
 	"description": "User file storage for Axium",
 	"funding": {
@@ -26,9 +26,11 @@
 		"./components": "./lib/index.js",
 		"./components/*": "./lib/*.svelte"
 	},
+	"routes": "routes",
 	"files": [
 		"dist",
-		"lib"
+		"lib",
+		"routes"
 	],
 	"scripts": {
 		"build": "tsc"
@@ -37,6 +39,7 @@
 		"@axium/client": ">=0.1.0",
 		"@axium/core": ">=0.5.0",
 		"@axium/server": ">=0.19.2",
+		"@sveltejs/kit": "^2.27.3",
 		"utilium": "^2.3.8"
 	},
 	"dependencies": {

package/routes/files/+layout.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { Icon } from '@axium/server/components';
+	import { capitalize } from 'utilium';
+	import { StorageUsage } from '@axium/storage/components';
+	import type { Session } from '@axium/core';
+	import type { LayoutProps, LayoutRouteId } from './$types';
+
+	type SidebarTab = 'files' | 'trash' | 'shared' | 'usage';
+
+	let { children, data }: LayoutProps = $props();
+</script>
+
+{#snippet tab(text: string, i: string, href: LayoutRouteId, isDefault: boolean = false)}
+	<a class={['item', data.route.id == href || (data.route.id == '/files/[id]' && isDefault)]} {href}><Icon {i} />{capitalize(text)}</a>
+{/snippet}
+
+<div class="app">
+	<div class="sidebar">
+		{@render tab('Files', 'folders', '/files', true)}
+		{@render tab('Trash', 'trash', '/files/trash')}
+		{@render tab('Shared', 'user-group', '/files/shared')}
+
+		<div class="usage">
+			<StorageUsage userId={data.session.userId} />
+		</div>
+	</div>
+
+	<div class="content">
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	.sidebar {
+		width: 20em;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5em;
+	}
+
+	.item {
+		padding: 0.5em;
+		border-radius: 0.25em;
+	}
+
+	.item:hover {
+		background-color: #446;
+		cursor: pointer;
+	}
+
+	.item.active {
+		background-color: #447;
+	}
+
+	.usage {
+		align-self: flex-end;
+	}
+</style>

package/routes/files/+layout.ts

@@ -0,0 +1,16 @@
+import { getCurrentSession } from '@axium/client/user';
+import { redirect } from '@sveltejs/kit';
+import type { LayoutLoadEvent } from './$types';
+
+export const ssr = false;
+
+export async function load({ url, route }: LayoutLoadEvent) {
+	const session = await getCurrentSession().catch(() => null);
+
+	if (!session) redirect(307, '/login?after=' + url.pathname);
+
+	return {
+		session: await getCurrentSession(),
+		route,
+	};
+}

package/routes/files/+page.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { StorageList } from '@axium/storage/components';
+	import type { PageProps } from './$types';
+
+	const { data }: PageProps = $props();
+</script>
+
+<StorageList appMode bind:items={data.items} />

package/routes/files/+page.ts

@@ -0,0 +1,12 @@
+import { getUserStorageRoot } from '@axium/storage/client';
+import type { LoadEvent } from '@sveltejs/kit';
+
+export const ssr = false;
+
+export async function load({ parent }: LoadEvent) {
+	const { session } = await parent();
+
+	return {
+		items: await getUserStorageRoot(session.userId),
+	};
+}

package/routes/files/[id]/+page.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Icon } from '@axium/server/components';
+	import { StorageList } from '@axium/storage/components';
+	import type { PageProps } from './$types';
+	import { updateItemMetadata } from '@axium/storage/client';
+
+	const { data }: PageProps = $props();
+
+	const item = $state(data.item);
+</script>
+
+{#if item.trashedAt}
+	<p>This item is trashed</p>
+	<button
+		onclick={async e => {
+			e.preventDefault();
+			await updateItemMetadata(item.id, { trash: false });
+		}}
+	>
+		<Icon i="trash-can-undo" /> Restore
+	</button>
+{:else if item.type == 'inode/directory'}
+	<StorageList items={data.items!} />
+{:else}
+	<p>No preview available.</p>
+{/if}

package/routes/files/[id]/+page.ts

@@ -0,0 +1,17 @@
+import type { PageLoadEvent } from './$types';
+import { getDirectoryMetadata, getItemMetadata } from '@axium/storage/client';
+import type { StorageItemMetadata } from '@axium/storage/common';
+
+export const ssr = false;
+
+export async function load({ parent, params }: PageLoadEvent) {
+	const item = await getItemMetadata(params.id);
+
+	let items: StorageItemMetadata[] | undefined;
+
+	if (item.type == 'inode/directory') {
+		items = await getDirectoryMetadata(item.id);
+	}
+
+	return { item, items };
+}

package/routes/files/shared/+page.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { formatBytes } from '@axium/core/format';
+	import { forMime as iconForMime } from '@axium/core/icons';
+	import { Icon } from '@axium/server/components';
+	import type { PageProps } from './$types';
+
+	const { data }: PageProps = $props();
+</script>
+
+<div class="SharedItemList">
+	<div class="SharedItem list-header">
+		<span></span>
+		<span>Name</span>
+		<span>Last Modified</span>
+		<span>Size</span>
+	</div>
+	{#each data.items as item, i (item.id)}
+		<div class="SharedItem">
+			<dfn title={item.type}><Icon i={iconForMime(item.type)} /></dfn>
+			<span class="name">{item.name}</span>
+			<span>{item.modifiedAt.toLocaleString()}</span>
+			<span>{formatBytes(item.size)}</span>
+		</div>
+	{:else}
+		<i>Empty.</i>
+	{/each}
+</div>
+
+<style>
+	.SharedItemList {
+		display: flex;
+		flex-direction: column;
+		padding: 0.5em;
+	}
+
+	.SharedItem.list-header {
+		font-weight: bold;
+		border-bottom: 1px solid #bbc;
+	}
+
+	.SharedItem {
+		display: grid;
+		grid-template-columns: 1em 4fr 15em 5em;
+		align-items: center;
+		gap: 0.5em;
+		padding: 0.5em 0;
+	}
+
+	.SharedItem:not(:last-child) {
+		border-bottom: 1px solid #bbc;
+	}
+
+	.SharedItem:not(.list-header):hover {
+		background-color: #7777;
+	}
+
+	.action {
+		visibility: hidden;
+	}
+
+	.SharedItem:hover .action {
+		visibility: visible;
+	}
+
+	.action:hover {
+		cursor: pointer;
+	}
+</style>

package/routes/files/shared/+page.ts

@@ -0,0 +1,12 @@
+import type { LoadEvent } from '@sveltejs/kit';
+import { itemsSharedWith } from '@axium/storage/client';
+
+export const ssr = false;
+
+export async function load({ parent }: LoadEvent) {
+	const { session } = await parent();
+
+	return {
+		items: await itemsSharedWith(session.userId),
+	};
+}

package/routes/files/trash/+page.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { formatBytes } from '@axium/core/format';
+	import { forMime as iconForMime } from '@axium/core/icons';
+	import { FormDialog, Icon } from '@axium/server/components';
+	import { deleteItem } from '@axium/storage/client';
+	import type { PageProps } from './$types';
+
+	const { data }: PageProps = $props();
+	let items = $state(data.items);
+	let dialog = $state<HTMLDialogElement>();
+
+	let activeIndex = $state<number>(-1);
+	const activeItem = $derived(items[activeIndex]);
+</script>
+
+<div class="TrashList">
+	<div class="TrashItem list-header">
+		<span></span>
+		<span>Name</span>
+		<span>Last Modified</span>
+		<span>Size</span>
+	</div>
+	{#each items as item, i (item.id)}
+		<div class="TrashItem">
+			<dfn title={item.type}><Icon i={iconForMime(item.type)} /></dfn>
+			<span class="name">{item.name}</span>
+			<span>{item.modifiedAt.toLocaleString()}</span>
+			<span>{formatBytes(item.size)}</span>
+			<span
+				class="action"
+				onclick={(e: Event) => {
+					e.stopPropagation();
+					e.preventDefault();
+					activeIndex = i;
+					dialog?.showModal();
+				}}
+			>
+				<Icon i="trash" --size="14px" --fill="#c44" />
+			</span>
+		</div>
+	{:else}
+		<i>Empty.</i>
+	{/each}
+</div>
+
+<FormDialog
+	bind:dialog
+	submitText="Delete"
+	submitDanger
+	submit={async () => {
+		await deleteItem(activeItem.id);
+		if (activeIndex != -1) items.splice(activeIndex, 1);
+	}}
+>
+	<p>
+		Are you sure you want to permanently delete
+		{#if activeItem?.name}<strong>{activeItem.name.length > 23 ? activeItem.name.slice(0, 20) + '...' : activeItem.name}</strong>
+		{:else}this
+		{/if}?
+	</p>
+</FormDialog>
+
+<style>
+	.TrashList {
+		display: flex;
+		flex-direction: column;
+		padding: 0.5em;
+	}
+
+	.TrashItem.list-header {
+		font-weight: bold;
+		border-bottom: 1px solid #bbc;
+	}
+
+	.TrashItem {
+		display: grid;
+		grid-template-columns: 1em 4fr 15em 5em 1em;
+		align-items: center;
+		gap: 0.5em;
+		padding: 0.5em 0;
+	}
+
+	.TrashItem:not(:last-child) {
+		border-bottom: 1px solid #bbc;
+	}
+
+	.TrashItem:not(.list-header):hover {
+		background-color: #7777;
+	}
+
+	.action {
+		visibility: hidden;
+	}
+
+	.TrashItem:hover .action {
+		visibility: visible;
+	}
+
+	.action:hover {
+		cursor: pointer;
+	}
+</style>

package/routes/files/trash/+page.ts

@@ -0,0 +1,12 @@
+import { getUserTrash } from '@axium/storage/client';
+import type { LoadEvent } from '@sveltejs/kit';
+
+export const ssr = false;
+
+export async function load({ parent }: LoadEvent) {
+	const { session } = await parent();
+
+	return {
+		items: await getUserTrash(session.userId),
+	};
+}

package/routes/tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"extends": ["../tsconfig.json", "../.svelte-kit/tsconfig.json"],
+	"compilerOptions": {
+		"moduleResolution": "bundler",
+		"module": "esnext",
+		"noEmit": true,
+		"target": "esnext",
+		"rootDir": ".."
+	},
+	"include": ["**/*", "../lib/*"]
+}