@axium/storage 0.6.0 → 0.6.2

package/lib/Add.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import { forMime } from '@axium/core/icons';
+	import { FormDialog, Icon, Popover, Upload } from '@axium/server/components';
+	import { uploadItem } from '@axium/storage/client';
+	import type { StorageItemMetadata } from '@axium/storage/common';
+
+	const { parentId, onadd }: { parentId?: string; onadd?(item: StorageItemMetadata): void } = $props();
+
+	let uploadDialog = $state<HTMLDialogElement>()!;
+	let input = $state<HTMLInputElement>();
+
+	let createDialog = $state<HTMLDialogElement>()!;
+	let createType = $state<string>();
+	let createIncludesContent = $state(false);
+</script>
+
+{#snippet _item(type: string, text: string, includeContent: boolean = false)}
+	<span
+		class="icon-text add-menu-item"
+		onclick={() => {
+			createType = type;
+			createIncludesContent = includeContent;
+			createDialog.showModal();
+		}}
+	>
+		<Icon i={forMime(type)} />
+		{text}
+	</span>
+{/snippet}
+
+<Popover>
+	{#snippet toggle()}
+		<button class="icon-text"><Icon i="plus" />Add</button>
+	{/snippet}
+
+	<div class="add-menu">
+		<span class="icon-text add-menu-item" onclick={() => uploadDialog.showModal()}><Icon i="upload" />Upload</span>
+		{@render _item('inode/directory', 'New Folder')}
+		{@render _item('text/plain', 'Plain Text')}
+		{@render _item('text/x-uri', 'URL', true)}
+	</div>
+</Popover>
+
+<FormDialog
+	bind:dialog={uploadDialog}
+	submitText="Upload"
+	submit={async () => {
+		for (const file of input?.files!) {
+			const item = await uploadItem(file, { parentId });
+			onadd?.(item);
+		}
+	}}
+>
+	<Upload bind:input multiple />
+</FormDialog>
+
+<FormDialog
+	bind:dialog={createDialog}
+	submitText="Create"
+	submit={async (data: { name: string; content?: string }) => {
+		const file = new File(createIncludesContent ? [data.content!] : [], data.name, { type: createType });
+		const item = await uploadItem(file, { parentId });
+		onadd?.(item);
+	}}
+>
+	<div>
+		<label for="name">Name</label>
+		<input name="name" type="text" required />
+	</div>
+	{#if createIncludesContent}
+		<div>
+			<label for="content">Content</label>
+			<input name="content" type="text" size="40" required />
+		</div>
+	{/if}
+</FormDialog>
+
+<style>
+	.add-menu {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.add-menu-item {
+		border-radius: 0.5em;
+		padding: 0.25em 0.25em;
+	}
+
+	.add-menu-item:hover {
+		cursor: pointer;
+		background-color: #4455;
+	}
+</style>

package/lib/List.svelte

@@ -6,7 +6,11 @@
 	import type { StorageItemMetadata } from '@axium/storage/common';
 	import '../styles/list.css';
 
-	let { items = $bindable([]), appMode }: { appMode?: boolean; items: StorageItemMetadata[] } = $props();
+	let {
+		items = $bindable(),
+		appMode,
+		emptyText = 'Folder is empty.',
+	}: { appMode?: boolean; items: StorageItemMetadata[]; emptyText?: string } = $props();
 
 	let activeIndex = $state<number>(-1);
 	let activeItem = $derived(activeIndex == -1 ? null : items[activeIndex]);
@@ -40,7 +44,7 @@
 		<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>{item.type == 'inode/directory' ? '—' : formatBytes(item.size)}</span>
 		{@render action('rename', 'pencil', i)}
 		{@render action('download', 'download', i)}
 		{@render action('trash', 'trash', i)}
@@ -61,7 +65,7 @@
 			{@render _item(item, i)}
 		{/if}
 	{:else}
-		<p class="list-empty">Folder is empty.</p>
+		<p class="list-empty">{emptyText}</p>
 	{/each}
 </div>
 
@@ -69,8 +73,9 @@
 	bind:dialog={dialogs.rename}
 	submitText="Rename"
 	submit={async (data: { name: string }) => {
-		await updateItemMetadata(activeItem!.id, data);
-		activeItem!.name = data.name;
+		if (!activeItem) throw 'No item is selected';
+		await updateItemMetadata(activeItem.id, data);
+		activeItem.name = data.name;
 	}}
 >
 	<div>
@@ -83,8 +88,9 @@
 	submitText="Trash"
 	submitDanger
 	submit={async () => {
-		await updateItemMetadata(activeItem!.id, { trash: true });
-		if (activeIndex != -1) items.splice(activeIndex, 1);
+		if (!activeItem) throw 'No item is selected';
+		await updateItemMetadata(activeItem.id, { trash: true });
+		items.splice(activeIndex, 1);
 	}}
 >
 	<p>Are you sure you want to trash {@render _itemName()}?</p>
@@ -107,10 +113,6 @@
 
 <style>
 	.list-item {
-		display: grid;
 		grid-template-columns: 1em 4fr 15em 5em repeat(3, 1em);
-		align-items: center;
-		gap: 0.5em;
-		padding: 0.5em 0;
 	}
 </style>

package/lib/Usage.svelte

@@ -8,14 +8,16 @@
 </script>
 
 {#await info || getUserStorageInfo(userId) then info}
-	<a href="/files/usage">
-		<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"
-		/>
-	</a>
+	<p>
+		<a href="/files/usage">
+			<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"
+			/>
+		</a>
+	</p>
 {:catch error}
 	<p>Couldn't load your uploads.</p>
 	<p>{error.message}</p>

package/lib/index.ts

@@ -1,3 +1,4 @@
+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';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/storage",
-	"version": "0.6.0",
+	"version": "0.6.2",
 	"author": "James Prevett <axium@jamespre.dev> (https://jamespre.dev)",
 	"description": "User file storage for Axium",
 	"funding": {
@@ -40,7 +40,7 @@
 	"peerDependencies": {
 		"@axium/client": ">=0.1.0",
 		"@axium/core": ">=0.5.0",
-		"@axium/server": ">=0.19.2",
+		"@axium/server": ">=0.20.2",
 		"@sveltejs/kit": "^2.27.3",
 		"utilium": "^2.3.8"
 	},

package/routes/files/+layout.svelte

@@ -2,15 +2,14 @@
 	import { Icon } from '@axium/server/components';
 	import { StorageUsage } from '@axium/storage/components';
 	import { capitalize } from 'utilium';
-	import type { LayoutProps } from './$types';
 
-	let { children, data }: LayoutProps = $props();
+	let { children, data } = $props();
 </script>
 
 <div class="app">
 	<div class="sidebar">
 		{#each data.tabs as { href, name, icon: i, active }}
-			<a {href} class={['item', active && 'active']}><Icon {i} /> {capitalize(name)}</a>
+			<a {href} class={['item', 'icon-text', active && 'active']}><Icon {i} /> {capitalize(name)}</a>
 		{/each}
 
 		<div class="usage">
@@ -42,9 +41,6 @@
 	.item {
 		padding: 0.3em 0.5em;
 		border-radius: 0.25em 1em 1em 0.25em;
-		display: inline-flex;
-		align-items: center;
-		gap: 1em;
 	}
 
 	.item:hover {

package/routes/files/+layout.ts

@@ -15,8 +15,5 @@ export async function load({ url, route }: LayoutLoadEvent) {
 		{ name: 'shared', href: '/files/shared', icon: 'user-group', active: route.id.endsWith('/files/shared') },
 	] satisfies { name: string; href: LayoutRouteId; icon: string; active: boolean }[];
 
-	return {
-		session: await getCurrentSession(),
-		tabs,
-	};
+	return { session, tabs };
 }

package/routes/files/+page.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
-	import { StorageList } from '@axium/storage/components';
-	import type { PageProps } from './$types';
+	import { StorageAdd, StorageList } from '@axium/storage/components';
 
-	const { data }: PageProps = $props();
+	const { data } = $props();
+	let items = $state(data.items!);
 </script>
 
 <svelte:head>
 	<title>Files</title>
 </svelte:head>
 
-<StorageList appMode bind:items={data.items} />
+<StorageList appMode bind:items />
+<StorageAdd onadd={item => items.push(item)} />

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

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import { Icon } from '@axium/server/components';
-	import { StorageList } from '@axium/storage/components';
+	import { StorageAdd, StorageList } 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);
 </script>
 
@@ -24,7 +25,8 @@
 		<Icon i="trash-can-undo" /> Restore
 	</button>
 {:else if item.type == 'inode/directory'}
-	<StorageList appMode bind:items={data.items!} />
+	<StorageList appMode bind:items />
+	<StorageAdd parentId={item.id} onadd={item => items.push(item)} />
 {:else}
 	<p>No preview available.</p>
 {/if}

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

@@ -2,16 +2,26 @@
 	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 { deleteItem, updateItemMetadata } from '@axium/storage/client';
 	import '@axium/storage/styles/list';
 	import type { PageProps } from './$types';
 
 	const { data }: PageProps = $props();
 	let items = $state(data.items);
-	let dialog = $state<HTMLDialogElement>();
+	let restoreDialog = $state<HTMLDialogElement>()!;
+	let deleteDialog = $state<HTMLDialogElement>()!;
 
 	let activeIndex = $state<number>(-1);
-	const activeItem = $derived(items[activeIndex]);
+	const activeItem = $derived(activeIndex == -1 ? null : items[activeIndex]);
+
+	function action(index: number, dialog: () => HTMLDialogElement) {
+		return (e: Event) => {
+			e.stopPropagation();
+			e.preventDefault();
+			activeIndex = index;
+			dialog().showModal();
+		};
+	}
 </script>
 
 <svelte:head>
@@ -31,16 +41,11 @@
 			<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 class="action" onclick={action(i, () => restoreDialog)}>
+				<Icon i="rotate-left" --size="14px" />
+			</span>
+			<span class="action" onclick={action(i, () => deleteDialog)}>
+				<Icon i="trash-can-xmark" --size="14px" --fill="#c44" />
 			</span>
 		</div>
 	{:else}
@@ -48,25 +53,40 @@
 	{/each}
 </div>
 
+{#snippet _name()}
+	{#if activeItem?.name}<strong>{activeItem.name.length > 23 ? activeItem.name.slice(0, 20) + '...' : activeItem.name}</strong>
+	{:else}this
+	{/if}
+{/snippet}
+
+<FormDialog
+	bind:dialog={restoreDialog}
+	submitText="Restore"
+	submit={async () => {
+		if (!activeItem) throw 'No item is selected';
+		await updateItemMetadata(activeItem.id, { trash: false });
+		items.splice(activeIndex, 1);
+	}}
+>
+	<p>Restore {@render _name()}?</p>
+</FormDialog>
 <FormDialog
-	bind:dialog
+	bind:dialog={deleteDialog}
 	submitText="Delete"
 	submitDanger
 	submit={async () => {
+		if (!activeItem) throw 'No item is selected';
 		await deleteItem(activeItem.id);
-		if (activeIndex != -1) items.splice(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}?
+		Are you sure you want to permanently delete {@render _name()}?
 	</p>
 </FormDialog>
 
 <style>
 	.list-item {
-		grid-template-columns: 1em 4fr 15em 5em 1em !important;
+		grid-template-columns: 1em 4fr 15em 5em 1em 1em;
 	}
 </style>

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

@@ -4,14 +4,13 @@
 	import { FormDialog, Icon, NumberBar } from '@axium/server/components';
 	import { deleteItem, updateItemMetadata } from '@axium/storage/client';
 	import type { StorageItemUpdate } from '@axium/storage/common';
+	import { StorageList } from '@axium/storage/components';
+	import '@axium/storage/styles/list';
 
 	const { data } = $props();
-	const {
-		info: { limits },
-		session,
-	} = data;
+	const { limits } = data.info;
 
-	const items = $state(data.info.items.filter(i => i.type != 'inode/directory').sort((a, b) => Math.sign(b.size - a.size)));
+	let items = $state(data.info.items.filter(i => i.type != 'inode/directory').sort((a, b) => Math.sign(b.size - a.size)));
 	const usage = $state(data.info.usage);
 
 	let dialogs = $state<Record<string, HTMLDialogElement>>({});
@@ -23,71 +22,13 @@
 </svelte:head>
 
 {#snippet action(name: string, i: string = 'pen')}
-	<button style:display="contents" onclick={() => dialogs[name].showModal()}>
+	<span class="action" onclick={() => dialogs[name].showModal()}>
 		<Icon {i} --size="16px" />
-	</button>
+	</span>
 {/snippet}
 
-<div class="flex-content">
-	<div class="list main">
-		<h2>Storage Usage</h2>
+<h2>Storage Usage</h2>
 
-		<p><NumberBar max={limits.user_size * 1_000_000} value={usage?.bytes} text={barText} --fill="#345" /></p>
+<p><NumberBar max={limits.user_size * 1_000_000} value={usage?.bytes} text={barText} --fill="#345" /></p>
 
-		{#each items as item}
-			<div class="item">
-				<Icon i={forMime(item.type)} />
-				<p>{item.name}</p>
-				<p>{item.type}</p>
-				<p>Owned by {item.userId === session?.userId ? 'You' : item.userId}</p>
-				<p>{formatBytes(item.size)}</p>
-				<p>Uploaded {item.modifiedAt.toLocaleString()}</p>
-				<span>{@render action('rename#' + item.id)}</span>
-				<span>{@render action('delete#' + item.id, 'trash')}</span>
-			</div>
-			<FormDialog
-				bind:dialog={dialogs['rename#' + item.id]}
-				submit={(data: StorageItemUpdate) => updateItemMetadata(item.id, data).then(n => (item.name = n.name))}
-				submitText="Update"
-			>
-				<div>
-					<label for="name">Name</label>
-					<input name="name" type="text" value={item.name || ''} required />
-				</div>
-			</FormDialog>
-			<FormDialog
-				bind:dialog={dialogs['delete#' + item.id]}
-				submit={async (data: StorageItemUpdate) => {
-					await deleteItem(item.id);
-					dialogs['delete#' + item.id].close();
-					items.splice(items.indexOf(item), 1);
-				}}
-				submitText="Delete"
-				submitDanger
-			>
-				<p>
-					Are you sure you want to delete this file?<br />
-					This action can't be undone.
-				</p>
-			</FormDialog>
-		{/each}
-	</div>
-</div>
-
-<style>
-	.list {
-		width: 80%;
-		padding-top: 4em;
-	}
-
-	.item {
-		display: grid;
-		align-items: center;
-		width: 100%;
-		gap: 1em;
-		text-wrap: nowrap;
-		border-top: 1px solid #8888;
-		padding-bottom: 1em;
-		grid-template-columns: 2em 1.5fr 1fr 1fr 5em 1fr 2em 2em;
-	}
-</style>
+<StorageList bind:items emptyText="You have not uploaded any files yet." />

package/styles/list.css

@@ -4,9 +4,9 @@
 	padding: 0.5em;
 }
 
-.list-item.list-header {
+.list-header {
 	font-weight: bold;
-	border-bottom: 1px solid #bbc;
+	border-bottom: 1.5px solid #bbc;
 }
 
 .list-item-container {
@@ -18,17 +18,20 @@
 	display: grid;
 	grid-template-columns: 1em 4fr 15em 5em repeat(3, 1em);
 	align-items: center;
-	gap: 0.5em;
-	padding: 0.5em 0;
+	gap: 1em;
+	padding: 0.5em;
+	overflow: hidden;
+	text-wrap: nowrap;
 }
 
-.list-item:not(:last-child) {
-	border-bottom: 1px solid #bbc;
+.list-item:not(.list-header, :first-child) {
+	border-top: 1px solid #bbc;
 }
 
 .list-item:not(.list-header):hover {
 	background-color: #7777;
 }
+
 p.list-empty {
 	text-align: center;
 	color: #888;
@@ -40,10 +43,7 @@ p.list-empty {
 	visibility: hidden;
 }
 
-.item:hover .action {
+.list-item:hover .action {
 	visibility: visible;
-}
-
-.action:hover {
 	cursor: pointer;
 }