@axium/storage 0.16.7 → 0.17.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/polyfills.d.ts

@@ -17,12 +17,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) => 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 {
         /**

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,12 @@
 <script lang="ts">
-	import { AccessControlDialog, FormDialog, Icon, Popover } from '@axium/client/components';
+	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 type { StorageItemMetadata } from '@axium/storage/common';
+	import Preview from './Preview.svelte';
 
 	let {
 		items = $bindable(),
@@ -95,73 +94,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>
 
@@ -218,98 +156,5 @@
 		border: none;
 		padding: 1em;
 		word-wrap: normal;
-		anchor-scope: --preview-openers;
-
-		.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;
-		}
-
-		.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;
-					}
-				}
-			}
-
-			.content {
-				inset: 10em 1em 0;
-			}
-		}
 	}
 </style>

package/lib/Preview.svelte

@@ -0,0 +1,238 @@
+<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 type { StorageItemMetadata } from '@axium/storage/common';
+
+	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} --size="18px" />
+	</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" --size="18px" />
+			</span>
+		{/if}
+		{@render action('download', 'download')}
+		{@render action('trash', 'trash')}
+		{#if previewDialog}
+			<span class="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: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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/storage",
-	"version": "0.16.7",
+	"version": "0.17.0",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "User file storage for Axium",
 	"funding": {

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,17 @@
 <script lang="ts">
-	import { Icon } from '@axium/client/components';
-	import { StorageAdd, StorageList } from '@axium/storage/components';
+	import { AccessControlDialog, Icon } from '@axium/client/components';
+	import { Add, List, Preview } from '@axium/storage/components';
 	import type { PageProps } from './$types';
 	import { updateItemMetadata } from '@axium/storage/client';
 
 	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 parentHref = $derived('/files' + (item.parentId ? '/' + item.parentId : ''));
 </script>
 
 <svelte:head>
@@ -29,13 +33,35 @@
 		class="icon-text"
 		onclick={e => {
 			e.preventDefault();
-			location.href = '/files' + (item.parentId ? '/' + item.parentId : '');
+			location.href = parentHref;
 		}}
 	>
 		<Icon i="folder-arrow-up" /> Back
 	</button>
-	<StorageList appMode bind:items user={data.session?.user} />
-	<StorageAdd parentId={item.id} onAdd={item => items.push(item)} />
+	<List appMode bind:items user={data.session?.user} />
+	<Add parentId={item.id} onAdd={item => items.push(item)} />
 {:else}
-	<p>No preview available.</p>
+	<div class="preview-container">
+		<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}
+		/>
+		<Preview {item} {shareDialog} onDelete={() => (location.href = parentHref)} />
+	</div>
 {/if}
+
+<style>
+	.preview-container {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+</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';