@axium/storage 0.5.5 → 0.6.1

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

@@ -9,12 +9,14 @@
 
 {#await info || getUserStorageInfo(userId) 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"
-		/>
+		<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>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/storage",
-	"version": "0.5.5",
+	"version": "0.6.1",
 	"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

@@ -10,7 +10,7 @@
 <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 +42,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/[id]/+page.svelte

@@ -6,6 +6,7 @@
 
 	const { data }: PageProps = $props();
 
+	let items = $state(data.items!);
 	const item = $state(data.item);
 </script>
 
@@ -24,7 +25,7 @@
 		<Icon i="trash-can-undo" /> Restore
 	</button>
 {:else if item.type == 'inode/directory'}
-	<StorageList appMode bind:items={data.items!} />
+	<StorageList appMode bind:items />
 {: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

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { formatBytes } from '@axium/core/format';
+	import { forMime } from '@axium/core/icons';
+	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 { limits } = data.info;
+
+	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>>({});
+	let barText = $derived(`Using ${formatBytes(usage?.bytes)} of ${formatBytes(limits.user_size * 1_000_000)}`);
+</script>
+
+<svelte:head>
+	<title>Your Storage Usage</title>
+</svelte:head>
+
+{#snippet action(name: string, i: string = 'pen')}
+	<span class="action" onclick={() => dialogs[name].showModal()}>
+		<Icon {i} --size="16px" />
+	</span>
+{/snippet}
+
+<h2>Storage Usage</h2>
+
+<p><NumberBar max={limits.user_size * 1_000_000} value={usage?.bytes} text={barText} --fill="#345" /></p>
+
+<StorageList bind:items emptyText="You have not uploaded any files yet." />

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

@@ -0,0 +1,14 @@
+import { getUserStorage } from '@axium/storage/client';
+import { redirect } from '@sveltejs/kit';
+
+export const ssr = false;
+
+export async function load({ parent }) {
+	const { session } = await parent();
+
+	if (!session) redirect(307, '/login?after=/files/usage');
+
+	const info = await getUserStorage(session.userId);
+
+	return { info };
+}

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;
 }