@axium/storage 0.17.0 → 0.18.0

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,7 +21,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.
          */
-        fromBase64: (string: string) => Uint8Array<ArrayBuffer>;
+        fromBase64: (string: string, options?: FromBase64Options) => Uint8Array<ArrayBuffer>;
         /**
          * Creates a new `Uint8Array` from a base16-encoded string.
          * @returns A new `Uint8Array` instance.
@@ -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/lib/List.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
+	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 { 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';
 
@@ -57,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();
@@ -144,10 +155,40 @@
 </FormDialog>
 
 <style>
+	.item-actions {
+		display: contents;
+	}
+
 	.list-item {
 		grid-template-columns: 1em 4fr 15em 5em repeat(4, 1em);
 	}
 
+	@media (width < 700px) {
+		.item-actions {
+			display: none;
+		}
+
+		.list-item {
+			grid-template-columns: 1em 2fr 1fr;
+			row-gap: 0.25em;
+
+			.modified {
+				grid-row: 2;
+				grid-column: 2;
+			}
+
+			.size {
+				grid-row: 2;
+				grid-column: 3;
+				text-align: right;
+
+				&:not(.file-size) {
+					display: none;
+				}
+			}
+		}
+	}
+
 	dialog.preview {
 		inset: 0;
 		width: 100%;

package/lib/Preview.svelte

@@ -3,7 +3,9 @@
 	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,
@@ -24,7 +26,7 @@
 
 {#snippet action(name: string, icon: string)}
 	<span class="icon-text preview-action" onclick={() => dialogs[name].showModal()}>
-		<Icon i={icon} --size="18px" />
+		<Icon i={icon} />
 	</span>
 {/snippet}
 
@@ -50,13 +52,16 @@
 		{@render action('rename', 'pencil')}
 		{#if shareDialog}
 			<span class="icon-text preview-action" onclick={() => shareDialog.showModal()}>
-				<Icon i="user-group" --size="18px" />
+				<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="mobile-hide" onclick={() => previewDialog.close()}>
+			<span class="icon-text preview-action mobile-hide" onclick={() => previewDialog.close()}>
 				<Icon i="xmark" --size="20px" />
 			</span>
 		{/if}
@@ -144,6 +149,10 @@
 		anchor-scope: --preview-openers;
 	}
 
+	.preview-action {
+		--size: 18px;
+	}
+
 	.preview-action:hover {
 		cursor: pointer;
 	}

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.17.0",
+	"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/[id]/+page.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
-	import { AccessControlDialog, Icon } from '@axium/client/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 = $derived(data.item);
 	const user = $derived(data.session?.user);
-	let shareDialog = $state<HTMLDialogElement>();
+	let shareDialog = $state<HTMLDialogElement>()!;
+	const dialogs = $state<Record<string, HTMLDialogElement>>({});
 
 	const parentHref = $derived('/files' + (item.parentId ? '/' + item.parentId : ''));
 </script>
@@ -28,34 +30,85 @@
 	>
 		<Icon i="trash-can-undo" /> Restore
 	</button>
-{:else if item.type == 'inode/directory'}
-	<button
-		class="icon-text"
-		onclick={e => {
-			e.preventDefault();
-			location.href = parentHref;
-		}}
-	>
-		<Icon i="folder-arrow-up" /> Back
-	</button>
-	<List appMode bind:items user={data.session?.user} />
-	<Add parentId={item.id} onAdd={item => items.push(item)} />
 {:else}
-	<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>
+	<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>
@@ -64,4 +117,10 @@
 		width: 100%;
 		height: 100%;
 	}
+
+	.folder-actions {
+		display: flex;
+		gap: 1em;
+		align-items: center;
+	}
 </style>