@axium/storage 0.16.7 → 0.18.0

package/db.json

@@ -62,6 +62,18 @@
 					}
 				}
 			}
+		},
+		{
+			"delta": true,
+			"alter_tables": {
+				"storage": {
+					"alter_columns": {
+						"name": {
+							"ops": ["set_required"]
+						}
+					}
+				}
+			}
 		}
 	],
 	"wipe": ["storage", "acl.storage"],

package/dist/client/frontend.d.ts

@@ -0,0 +1,2 @@
+import type { StorageItemMetadata } from '@axium/storage/common';
+export declare function copyShortURL(item: StorageItemMetadata): Promise<void>;

package/dist/client/frontend.js

@@ -0,0 +1,6 @@
+import { copy } from '@axium/client/clipboard';
+import { encodeUUID } from 'utilium';
+export function copyShortURL(item) {
+    const { href } = new URL('/f/' + encodeUUID(item.id).toBase64({ alphabet: 'base64url', omitPadding: true }), location.origin);
+    return copy('text/plain', href);
+}

package/dist/polyfills.d.ts

@@ -7,6 +7,10 @@ https://github.com/microsoft/TypeScript/issues/61695
 
 @todo Remove when TypeScript 5.9 is released
 */
+interface FromBase64Options {
+    alphabet?: 'base64' | 'base64url';
+    lastChunkHandling?: 'loose' | 'strict' | 'stop-before-partial';
+}
 declare global {
     interface Uint8ArrayConstructor {
         /**
@@ -17,12 +21,12 @@ declare global {
          * @throws {SyntaxError} If the input string contains characters outside the specified alphabet, or if the last
          * chunk is inconsistent with the `lastChunkHandling` option.
          */
-        fromBase64: (string: string) => Uint8Array;
+        fromBase64: (string: string, options?: FromBase64Options) => Uint8Array<ArrayBuffer>;
         /**
          * Creates a new `Uint8Array` from a base16-encoded string.
          * @returns A new `Uint8Array` instance.
          */
-        fromHex: (string: string) => Uint8Array;
+        fromHex: (string: string) => Uint8Array<ArrayBuffer>;
     }
     interface Uint8Array {
         /**
@@ -30,7 +34,10 @@ declare global {
          * @param options If provided, sets the alphabet and padding behavior used.
          * @returns A base64-encoded string.
          */
-        toBase64: () => string;
+        toBase64: (options?: {
+            alphabet?: 'base64' | 'base64url';
+            omitPadding?: boolean;
+        }) => string;
         /**
          * Sets the `Uint8Array` from a base64-encoded string.
          * @param string The base64-encoded string.
@@ -39,7 +46,7 @@ declare global {
          * @throws {SyntaxError} If the input string contains characters outside the specified alphabet, or if the last
          * chunk is inconsistent with the `lastChunkHandling` option.
          */
-        setFromBase64?: (string: string) => {
+        setFromBase64?: (string: string, options?: FromBase64Options) => {
             read: number;
             written: number;
         };

package/dist/polyfills.js

@@ -15,8 +15,13 @@ Uint8Array.prototype.toHex ??=
         });
 Uint8Array.prototype.toBase64 ??=
     (debug('Using a polyfill of Uint8Array.prototype.toBase64'),
-        function toBase64() {
-            return btoa(String.fromCharCode(...this));
+        function toBase64(options = {}) {
+            let base64 = btoa(String.fromCharCode(...this));
+            if (options.omitPadding)
+                base64 = base64.replaceAll('=', '');
+            if (options.alphabet == 'base64url')
+                base64 = base64.replaceAll('+', '-').replaceAll('/', '_');
+            return base64;
         });
 Uint8Array.fromHex ??=
     (debug('Using a polyfill of Uint8Array.fromHex'),
@@ -27,3 +32,32 @@ Uint8Array.fromHex ??=
             }
             return bytes;
         });
+Uint8Array.fromBase64 ??=
+    (debug('Using a polyfill of Uint8Array.fromBase64'),
+        function fromBase64(base64, options) {
+            if (options?.alphabet == 'base64url')
+                base64 = base64.replaceAll('-', '+').replaceAll('_', '/');
+            const lastChunkBytes = base64.length % 4; // # bytes in last chunk if it is partial
+            switch (options?.lastChunkHandling) {
+                case 'loose':
+                    if (lastChunkBytes)
+                        base64 += '='.repeat(4 - lastChunkBytes);
+                    break;
+                case 'strict':
+                    if (lastChunkBytes)
+                        throw new SyntaxError('unexpected incomplete base64 chunk');
+                    break;
+                case 'stop-before-partial':
+                    if (!lastChunkBytes)
+                        break;
+                    if (lastChunkBytes == 2 && base64.at(-1) == '=' && base64.at(-2) != '=')
+                        throw new SyntaxError('unexpected incomplete base64 chunk');
+                    base64 = base64.slice(0, -lastChunkBytes);
+            }
+            const binary = atob(base64);
+            const bytes = new Uint8Array(binary.length);
+            for (let i = 0; i < binary.length; i++) {
+                bytes[i] = binary.charCodeAt(i);
+            }
+            return bytes;
+        });

package/dist/server/db.d.ts

@@ -1,24 +1,10 @@
 import { type Schema } from '@axium/server/database';
-import type { Generated, Selectable } from 'kysely';
+import type { Selectable } from 'kysely';
+import type schema from '../../db.json';
 import type { StorageItemMetadata, StorageStats } from '../common.js';
 import '../polyfills.js';
 declare module '@axium/server/database' {
-    interface Schema {
-        storage: {
-            createdAt: Generated<Date>;
-            hash: Uint8Array | null;
-            id: Generated<string>;
-            immutable: Generated<boolean>;
-            modifiedAt: Generated<Date>;
-            name: string;
-            parentId: string | null;
-            size: number;
-            trashedAt: Date | null;
-            type: string;
-            userId: string;
-            metadata: Generated<Record<string, unknown>>;
-        };
-        'acl.storage': DBAccessControl & DBBool<'read' | 'write' | 'manage' | 'download' | 'comment'>;
+    interface Schema extends FromSchemaFile<typeof schema> {
     }
 }
 /**

package/lib/List.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
-	import { AccessControlDialog, FormDialog, Icon, Popover } from '@axium/client/components';
+	import { contextMenu } from '@axium/client/attachments';
+	import { AccessControlDialog, FormDialog, Icon } from '@axium/client/components';
 	import '@axium/client/styles/list';
 	import type { AccessControllable, UserPublic } from '@axium/core';
 	import { formatBytes } from '@axium/core/format';
 	import { forMime as iconForMime } from '@axium/core/icons';
-	import { errorText } from '@axium/core/io';
-	import { downloadItem, getDirectoryMetadata, updateItemMetadata } from '@axium/storage/client';
-	import { openers, previews } from '@axium/storage/client/3rd-party';
+	import { getDirectoryMetadata, updateItemMetadata } from '@axium/storage/client';
+	import { copyShortURL } from '@axium/storage/client/frontend';
 	import type { StorageItemMetadata } from '@axium/storage/common';
+	import Preview from './Preview.svelte';
 
 	let {
 		items = $bindable(),
@@ -58,13 +59,22 @@
 				} else if (appMode) location.href = '/files/' + item.id;
 				else items = await getDirectoryMetadata(item.id);
 			}}
+			{@attach contextMenu(
+				{ i: 'pencil', text: 'Rename', action: () => dialogs.rename.showModal() },
+				{ i: 'user-group', text: 'Share', action: () => dialogs['share:' + item.id].showModal() },
+				{ i: 'download', text: 'Download', action: () => dialogs.download.showModal() },
+				{ i: 'link-horizontal', text: 'Copy Link', action: () => copyShortURL(item) },
+				{ i: 'trash', text: 'Trash', action: () => dialogs.trash.showModal() }
+			)}
 		>
-			<dfn title={item.type}><Icon i={iconForMime(item.type)} /></dfn>
+			<dfn class="type" title={item.type}><Icon i={iconForMime(item.type)} /></dfn>
 			<span class="name">{item.name}</span>
-			<span>{item.modifiedAt.toLocaleString()}</span>
-			<span>{item.type == 'inode/directory' ? '—' : formatBytes(item.size)}</span>
+			<span class="modified mobile-subtle">{item.modifiedAt.toLocaleString()}</span>
+			<span class={['size', item.type != 'inode/directory' && 'file-size', 'mobile-subtle']}
+				>{item.type == 'inode/directory' ? '—' : formatBytes(item.size)}</span
+			>
 			<div
-				style:display="contents"
+				class="item-actions"
 				onclick={e => {
 					e.stopPropagation();
 					e.stopImmediatePropagation();
@@ -95,73 +105,12 @@
 
 <dialog bind:this={dialogs.preview} class="preview">
 	{#if activeItem}
-		{@const { type, dataURL } = activeItem}
-		{@const itemOpeners = openers.filter(opener => opener.types.includes(type))}
-		<div class="preview-top-bar">
-			<div class="title">{activeItem.name}</div>
-			{#if itemOpeners.length}
-				{@const [first, ...others] = itemOpeners}
-				<div class="openers">
-					<span>Open with <a href={first.openURL(activeItem)} target="_blank">{first.name}</a></span>
-					{#if others.length}
-						<Popover>
-							{#snippet toggle()}
-								<span class="popover-toggle"><Icon i="caret-down" /></span>
-							{/snippet}
-							{#each others as opener}
-								<a href={opener.openURL(activeItem)} target="_blank">{opener.name}</a>
-							{/each}
-						</Popover>
-					{/if}
-				</div>
-			{/if}
-			<div class="actions">
-				{@render action('rename', 'pencil', i, true)}
-				{@render action('share:' + activeItem.id, 'user-group', i, true)}
-				{@render action('download', 'download', i, true)}
-				{@render action('trash', 'trash', i, true)}
-				<span class="mobile-hide" onclick={() => dialogs.preview.close()}>
-					<Icon i="xmark" --size="20px" />
-				</span>
-			</div>
-		</div>
-		<div class="content">
-			{#if type.startsWith('image/')}
-				<img src={dataURL} alt={activeItem.name} width="100%" />
-			{:else if type.startsWith('audio/')}
-				<audio src={dataURL} controls></audio>
-			{:else if type.startsWith('video/')}
-				<video src={dataURL} controls width="100%">
-					<track kind="captions" />
-				</video>
-			{:else if type == 'application/pdf'}
-				<object data={dataURL} type="application/pdf" width="100%" height="100%">
-					<embed src={dataURL} type="application/pdf" width="100%" height="100%" />
-					<p>PDF not displayed? <a href={dataURL} download={activeItem.name}>Download</a></p>
-				</object>
-			{:else if type.startsWith('text/')}
-				{#await downloadItem(activeItem.id).then(b => b.text())}
-					<div class="full-fill no-preview">
-						<Icon i="cloud-arrow-down" --size="50px" />
-						<span>Loading</span>
-					</div>
-				{:then content}
-					<pre class="full-fill preview-text">{content}</pre>
-				{:catch}
-					<div class="full-fill no-preview">
-						<Icon i="cloud-exclamation" --size="50px" />
-						<span>Error loading preview. You might not have permission to view this file.</span>
-					</div>
-				{/await}
-			{:else if previews.has(type)}
-				{@render previews.get(type)!(activeItem)}
-			{:else}
-				<div class="full-fill no-preview">
-					<Icon i="eye-slash" --size="50px" />
-					<span>Preview not available</span>
-				</div>
-			{/if}
-		</div>
+		<Preview
+			item={activeItem}
+			previewDialog={dialogs.preview}
+			shareDialog={dialogs['share:' + activeItem.id]}
+			onDelete={() => items.splice(activeIndex, 1)}
+		/>
 	{/if}
 </dialog>
 
@@ -206,110 +155,47 @@
 </FormDialog>
 
 <style>
+	.item-actions {
+		display: contents;
+	}
+
 	.list-item {
 		grid-template-columns: 1em 4fr 15em 5em repeat(4, 1em);
 	}
 
-	dialog.preview {
-		inset: 0;
-		width: 100%;
-		height: 100%;
-		background-color: #000a;
-		border: none;
-		padding: 1em;
-		word-wrap: normal;
-		anchor-scope: --preview-openers;
-
-		.preview-action:hover {
-			cursor: pointer;
+	@media (width < 700px) {
+		.item-actions {
+			display: none;
 		}
 
-		.preview-top-bar {
-			display: flex;
-			align-items: center;
-			gap: 1em;
-			justify-content: space-between;
-			padding: 0;
-			position: absolute;
-			inset: 0.5em 1em 0;
-			height: fit-content;
+		.list-item {
+			grid-template-columns: 1em 2fr 1fr;
+			row-gap: 0.25em;
 
-			> div {
-				display: flex;
-				gap: 1em;
-				align-items: center;
+			.modified {
+				grid-row: 2;
+				grid-column: 2;
 			}
-		}
-
-		.openers {
-			padding: 1em;
-			border: 1px solid var(--border-accent);
-			border-radius: 1em;
-			height: 2em;
-			anchor-name: --preview-openers;
-		}
-
-		.openers :global([popover]) {
-			inset: anchor(bottom) anchor(right) auto anchor(left);
-			position-anchor: --preview-openers;
-			width: anchor-size(width);
-		}
-
-		.actions {
-			right: 0;
-		}
 
-		.content {
-			position: absolute;
-			inset: 3em 10em 0;
+			.size {
+				grid-row: 2;
+				grid-column: 3;
+				text-align: right;
 
-			.full-fill {
-				position: absolute;
-				inset: 0;
-				width: 100%;
-				height: 100%;
-			}
-
-			.preview-text {
-				white-space: pre-wrap;
-				overflow-y: scroll;
-				line-height: 1.6;
-				background-color: var(--bg-menu);
-				font-family: monospace;
-			}
-		}
-
-		.no-preview {
-			display: flex;
-			flex-direction: column;
-			gap: 1em;
-			align-items: center;
-			justify-content: center;
-		}
-
-		@media (width < 700px) {
-			.preview-top-bar {
-				flex-direction: column;
-
-				.actions {
-					justify-content: space-around;
-					width: 100%;
-
-					.preview-action {
-						padding: 1em;
-						flex: 1 1 0;
-						border-radius: 1em;
-						border: 1px solid var(--border-accent);
-						padding: 1em;
-						justify-content: center;
-						display: flex;
-					}
+				&:not(.file-size) {
+					display: none;
 				}
 			}
-
-			.content {
-				inset: 10em 1em 0;
-			}
 		}
 	}
+
+	dialog.preview {
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		background-color: #000a;
+		border: none;
+		padding: 1em;
+		word-wrap: normal;
+	}
 </style>

package/lib/Preview.svelte

@@ -0,0 +1,247 @@
+<script lang="ts">
+	import { FormDialog, Icon, Popover } from '@axium/client/components';
+	import type { AccessControllable } from '@axium/core';
+	import { downloadItem, getDirectoryMetadata, updateItemMetadata } from '@axium/storage/client';
+	import { openers, previews } from '@axium/storage/client/3rd-party';
+	import { copyShortURL } from '@axium/storage/client/frontend';
+	import type { StorageItemMetadata } from '@axium/storage/common';
+	import '@axium/storage/polyfills';
+
+	const {
+		item,
+		shareDialog,
+		previewDialog,
+		onDelete = () => {},
+	}: {
+		item: StorageItemMetadata & AccessControllable;
+		shareDialog?: HTMLDialogElement;
+		previewDialog?: HTMLDialogElement;
+		onDelete?(): unknown;
+	} = $props();
+
+	const itemOpeners = openers.filter(opener => opener.types.includes(item.type));
+
+	let dialogs = $state<Record<string, HTMLDialogElement>>({});
+</script>
+
+{#snippet action(name: string, icon: string)}
+	<span class="icon-text preview-action" onclick={() => dialogs[name].showModal()}>
+		<Icon i={icon} />
+	</span>
+{/snippet}
+
+<div class="preview-top-bar">
+	<div class="title">{item.name}</div>
+	{#if itemOpeners.length}
+		{@const [first, ...others] = itemOpeners}
+		<div class="openers">
+			<span>Open with <a href={first.openURL(item)} target="_blank">{first.name}</a></span>
+			{#if others.length}
+				<Popover>
+					{#snippet toggle()}
+						<span class="popover-toggle"><Icon i="caret-down" /></span>
+					{/snippet}
+					{#each others as opener}
+						<a href={opener.openURL(item)} target="_blank">{opener.name}</a>
+					{/each}
+				</Popover>
+			{/if}
+		</div>
+	{/if}
+	<div class="actions">
+		{@render action('rename', 'pencil')}
+		{#if shareDialog}
+			<span class="icon-text preview-action" onclick={() => shareDialog.showModal()}>
+				<Icon i="user-group" />
+			</span>
+		{/if}
+		{@render action('download', 'download')}
+		<span class="icon-text preview-action" onclick={() => copyShortURL(item)}>
+			<Icon i="link-horizontal" />
+		</span>
+		{@render action('trash', 'trash')}
+		{#if previewDialog}
+			<span class="icon-text preview-action mobile-hide" onclick={() => previewDialog.close()}>
+				<Icon i="xmark" --size="20px" />
+			</span>
+		{/if}
+	</div>
+</div>
+<div class="preview-content">
+	{#if item.type.startsWith('image/')}
+		<img src={item.dataURL} alt={item.name} width="100%" />
+	{:else if item.type.startsWith('audio/')}
+		<audio src={item.dataURL} controls></audio>
+	{:else if item.type.startsWith('video/')}
+		<video src={item.dataURL} controls width="100%">
+			<track kind="captions" />
+		</video>
+	{:else if item.type == 'application/pdf'}
+		<object data={item.dataURL} type="application/pdf" width="100%" height="100%">
+			<embed src={item.dataURL} type="application/pdf" width="100%" height="100%" />
+			<p>PDF not displayed? <a href={item.dataURL} download={item.name}>Download</a></p>
+		</object>
+	{:else if item.type.startsWith('text/')}
+		{#await downloadItem(item.id).then(b => b.text())}
+			<div class="full-fill no-preview">
+				<Icon i="cloud-arrow-down" --size="50px" />
+				<span>Loading</span>
+			</div>
+		{:then content}
+			<pre class="full-fill preview-text">{content}</pre>
+		{:catch}
+			<div class="full-fill no-preview">
+				<Icon i="cloud-exclamation" --size="50px" />
+				<span>Error loading preview. You might not have permission to view this file.</span>
+			</div>
+		{/await}
+	{:else if previews.has(item.type)}
+		{@render previews.get(item.type)!(item)}
+	{:else}
+		<div class="full-fill no-preview">
+			<Icon i="eye-slash" --size="50px" />
+			<span>Preview not available</span>
+		</div>
+	{/if}
+</div>
+
+<FormDialog
+	bind:dialog={dialogs.rename}
+	submitText="Rename"
+	submit={async (data: { name: string }) => {
+		await updateItemMetadata(item.id, data);
+		item.name = data.name;
+	}}
+>
+	<div>
+		<label for="name">Name</label>
+		<input name="name" type="text" required value={item.name} />
+	</div>
+</FormDialog>
+<FormDialog
+	bind:dialog={dialogs.trash}
+	submitText="Trash"
+	submitDanger
+	submit={async () => {
+		if (!item) throw 'No item is selected';
+		await updateItemMetadata(item.id, { trash: true });
+		onDelete();
+	}}
+>
+	<p>Are you sure you want to trash this?</p>
+</FormDialog>
+<FormDialog
+	bind:dialog={dialogs.download}
+	submitText="Download"
+	submit={async () => {
+		if (item!.type == 'inode/directory') {
+			/** @todo ZIP support */
+			const children = await getDirectoryMetadata(item.id);
+			for (const child of children) open(child.dataURL, '_blank');
+		} else open(item!.dataURL, '_blank');
+	}}
+>
+	<p>Are you sure you want to download this?</p>
+</FormDialog>
+
+<style>
+	:host {
+		anchor-scope: --preview-openers;
+	}
+
+	.preview-action {
+		--size: 18px;
+	}
+
+	.preview-action:hover {
+		cursor: pointer;
+	}
+
+	.preview-top-bar {
+		display: flex;
+		align-items: center;
+		gap: 1em;
+		justify-content: space-between;
+		padding: 0;
+		position: absolute;
+		inset: 0.5em 1em 0;
+		height: fit-content;
+
+		> div {
+			display: flex;
+			gap: 1em;
+			align-items: center;
+		}
+	}
+
+	.openers {
+		padding: 1em;
+		border: 1px solid var(--border-accent);
+		border-radius: 1em;
+		height: 2em;
+		anchor-name: --preview-openers;
+	}
+
+	.openers :global([popover]) {
+		inset: anchor(bottom) anchor(right) auto anchor(left);
+		position-anchor: --preview-openers;
+		width: anchor-size(width);
+	}
+
+	.actions {
+		right: 0;
+	}
+
+	.preview-content {
+		position: absolute;
+		inset: 3em 10em 0;
+
+		.full-fill {
+			position: absolute;
+			inset: 0;
+			width: 100%;
+			height: 100%;
+		}
+
+		.preview-text {
+			white-space: pre-wrap;
+			overflow-y: scroll;
+			line-height: 1.6;
+			background-color: var(--bg-menu);
+			font-family: monospace;
+		}
+	}
+
+	.no-preview {
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+		align-items: center;
+		justify-content: center;
+	}
+
+	@media (width < 700px) {
+		.preview-top-bar {
+			flex-direction: column;
+
+			.actions {
+				justify-content: space-around;
+				width: 100%;
+
+				.preview-action {
+					padding: 1em;
+					flex: 1 1 0;
+					border-radius: 1em;
+					border: 1px solid var(--border-accent);
+					padding: 1em;
+					justify-content: center;
+					display: flex;
+				}
+			}
+		}
+
+		.preview-content {
+			inset: 10em 1em 0;
+		}
+	}
+</style>

package/lib/index.ts

@@ -1,5 +1,6 @@
-export { default as StorageAdd } from './Add.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';
+export { default as Add } from './Add.svelte';
+export { default as List } from './List.svelte';
+export { default as Preview } from './Preview.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
+export { default as SidebarItem } from './SidebarItem.svelte';
+export { default as Usage } from './Usage.svelte';

package/lib/tsconfig.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/storage",
-	"version": "0.16.7",
+	"version": "0.18.0",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "User file storage for Axium",
 	"funding": {
@@ -39,7 +39,7 @@
 		"build": "tsc"
 	},
 	"peerDependencies": {
-		"@axium/client": ">=0.13.0",
+		"@axium/client": ">=0.14.1",
 		"@axium/core": ">=0.19.0",
 		"@axium/server": ">=0.35.0",
 		"@sveltejs/kit": "^2.27.3",

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

@@ -0,0 +1,9 @@
+import { decodeUUID } from 'utilium';
+import '@axium/storage/polyfills';
+
+export const ssr = false;
+
+export async function load({ params }) {
+	const uuid = decodeUUID(Uint8Array.fromBase64(params.id, { alphabet: 'base64url' }));
+	location.href = '/files/' + uuid;
+}

package/routes/files/+layout.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import SidebarLayout from '@axium/client/components/SidebarLayout';
-	import { StorageUsage } from '@axium/storage/components';
+	import { Usage } from '@axium/storage/components';
 
 	let { children, data } = $props();
 </script>
 
 <SidebarLayout tabs={data.tabs}>
 	{#snippet bottom()}
-		<StorageUsage userId={data.session?.userId} />
+		<Usage userId={data.session?.userId} />
 	{/snippet}
 
 	{@render children()}

package/routes/files/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { StorageAdd, StorageList } from '@axium/storage/components';
+	import { Add, List } from '@axium/storage/components';
 
 	const { data } = $props();
 	let items = $state(data.items!);
@@ -9,5 +9,5 @@
 	<title>Files</title>
 </svelte:head>
 
-<StorageList appMode bind:items user={data.session?.user} />
-<StorageAdd onAdd={item => items.push(item)} />
+<List appMode bind:items user={data.session?.user} />
+<Add onAdd={item => items.push(item)} />

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

@@ -1,13 +1,19 @@
 <script lang="ts">
-	import { Icon } from '@axium/client/components';
-	import { StorageAdd, StorageList } from '@axium/storage/components';
+	import { AccessControlDialog, FormDialog, Icon } from '@axium/client/components';
+	import { Add, List, Preview } from '@axium/storage/components';
 	import type { PageProps } from './$types';
-	import { updateItemMetadata } from '@axium/storage/client';
+	import { getDirectoryMetadata, updateItemMetadata } from '@axium/storage/client';
+	import { copyShortURL } from '@axium/storage/client/frontend';
 
 	const { data }: PageProps = $props();
 
 	let items = $state(data.items!);
-	const item = $state(data.item);
+	const item = $derived(data.item);
+	const user = $derived(data.session?.user);
+	let shareDialog = $state<HTMLDialogElement>()!;
+	const dialogs = $state<Record<string, HTMLDialogElement>>({});
+
+	const parentHref = $derived('/files' + (item.parentId ? '/' + item.parentId : ''));
 </script>
 
 <svelte:head>
@@ -24,18 +30,97 @@
 	>
 		<Icon i="trash-can-undo" /> Restore
 	</button>
-{:else if item.type == 'inode/directory'}
-	<button
-		class="icon-text"
-		onclick={e => {
-			e.preventDefault();
-			location.href = '/files' + (item.parentId ? '/' + item.parentId : '');
-		}}
-	>
-		<Icon i="folder-arrow-up" /> Back
-	</button>
-	<StorageList appMode bind:items user={data.session?.user} />
-	<StorageAdd parentId={item.id} onAdd={item => items.push(item)} />
 {:else}
-	<p>No preview available.</p>
+	<AccessControlDialog
+		bind:dialog={shareDialog}
+		{item}
+		itemType="storage"
+		editable={(item.acl?.find(
+			a =>
+				a.userId == user?.id ||
+				(a.role && user?.roles.includes(a.role)) ||
+				(a.tag && user?.tags?.includes(a.tag)) ||
+				(!a.userId && !a.role && !a.tag)
+		)?.manage as boolean | undefined) ?? true}
+	/>
+	{#if item.type == 'inode/directory'}
+		{#snippet action(i: string, text: string, handler: (e: Event) => unknown)}
+			<button
+				class="icon-text"
+				onclick={e => {
+					e.preventDefault();
+					handler(e);
+				}}
+			>
+				<Icon {i} />
+				<span class="mobile-hide">{text}</span>
+			</button>
+		{/snippet}
+
+		<div class="folder-actions">
+			{@render action('folder-arrow-up', 'Back', () => (location.href = parentHref))}
+			{@render action('pencil', 'Rename', () => dialogs.rename.showModal())}
+			{@render action('user-group', 'Share', () => shareDialog.showModal())}
+			{@render action('download', 'Download', () => dialogs.download.showModal())}
+			{@render action('link-horizontal', 'Copy Link', () => copyShortURL(item))}
+			{@render action('trash', 'Trash', () => dialogs.trash.showModal())}
+		</div>
+
+		<List appMode bind:items user={data.session?.user} />
+		<Add parentId={item.id} onAdd={item => items.push(item)} />
+
+		<FormDialog
+			bind:dialog={dialogs.rename}
+			submitText="Rename"
+			submit={async (data: { name: string }) => {
+				await updateItemMetadata(item.id, data);
+				item.name = data.name;
+			}}
+		>
+			<div>
+				<label for="name">Name</label>
+				<input name="name" type="text" required value={item.name} />
+			</div>
+		</FormDialog>
+		<FormDialog
+			bind:dialog={dialogs.trash}
+			submitText="Trash"
+			submitDanger
+			submit={async () => {
+				await updateItemMetadata(item.id, { trash: true });
+				location.href = parentHref;
+			}}
+		>
+			<p>Are you sure you want to trash this folder?</p>
+		</FormDialog>
+		<FormDialog
+			bind:dialog={dialogs.download}
+			submitText="Download"
+			submit={async () => {
+				/** @todo ZIP support */
+				const children = await getDirectoryMetadata(item.id);
+				for (const child of children) open(child.dataURL, '_blank');
+			}}
+		>
+			<p>Are you sure you want to download this folder?</p>
+		</FormDialog>
+	{:else}
+		<div class="preview-container">
+			<Preview {item} {shareDialog} onDelete={() => (location.href = parentHref)} />
+		</div>
+	{/if}
 {/if}
+
+<style>
+	.preview-container {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+
+	.folder-actions {
+		display: flex;
+		gap: 1em;
+		align-items: center;
+	}
+</style>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { StorageList } from '@axium/storage/components';
+	import { List } from '@axium/storage/components';
 
 	const { data } = $props();
 	let items = $state(data.items!);
@@ -9,4 +9,4 @@
 	<title>Files - Shared With You</title>
 </svelte:head>
 
-<StorageList appMode bind:items emptyText="No items have been shared with you." user={data.session?.user} />
+<List appMode bind:items emptyText="No items have been shared with you." user={data.session?.user} />

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

@@ -2,7 +2,7 @@
 	import { NumberBar } from '@axium/client/components';
 	import '@axium/client/styles/list';
 	import { formatBytes } from '@axium/core/format';
-	import { StorageList } from '@axium/storage/components';
+	import { List } from '@axium/storage/components';
 
 	const { data } = $props();
 	const { limits } = data.info;
@@ -21,4 +21,4 @@
 
 <p><NumberBar max={limits.user_size * 1_000_000} value={usedBytes} text={barText} /></p>
 
-<StorageList bind:items emptyText="You have not uploaded any files yet." user={data.session?.user} />
+<List bind:items emptyText="You have not uploaded any files yet." user={data.session?.user} />

package/routes/+layout.ts

@@ -1 +0,0 @@
-import '@axium/storage/common';