@axium/storage 0.3.17 → 0.4.0

package/dist/client.d.ts

@@ -13,7 +13,7 @@ export declare function downloadItem(fileId: string): Promise<Blob>;
 export declare function updateItemMetadata(fileId: string, metadata: StorageItemUpdate): Promise<StorageItemMetadata>;
 export declare function deleteItem(fileId: string): Promise<StorageItemMetadata>;
 export declare function getUserFiles(userId: string): Promise<UserFilesInfo>;
-export interface _Sidebar {
+export interface SidebarContext {
     selection: ItemSelection<string, StorageItemMetadata>;
     items: StorageItemMetadata[];
     getDirectory(id: string, assignTo?: StorageItemMetadata[]): Promise<StorageItemMetadata[]>;

package/dist/server.js

@@ -62,7 +62,8 @@ export async function currentUsage(userId) {
         .select(eb => eb.fn.countAll().as('items'))
         .select(eb => eb.fn.sum('size').as('bytes'))
         .executeTakeFirstOrThrow();
-    result.bytes ||= 0;
+    result.bytes = Number(result.bytes || 0);
+    result.items = Number(result.items);
     return result;
 }
 export async function get(itemId) {

package/lib/StorageList.svelte

@@ -5,9 +5,8 @@
 	import { deleteItem, getDirectoryMetadata, updateItemMetadata } from '@axium/storage/client';
 	import type { StorageItemMetadata } from '@axium/storage/common';
 
-	const { id }: { id: string } = $props();
+	let { id, items = $bindable([]) }: { id: string; items?: StorageItemMetadata[] } = $props();
 
-	let items = $state<StorageItemMetadata[]>([]);
 	let activeIndex = $state<number>(-1);
 	let activeItem = $derived(items[activeIndex]);
 	const dialogs = $state<Record<string, HTMLDialogElement>>({});
@@ -36,7 +35,7 @@
 {/snippet}
 
 <div class="StorageList">
-	{#await getDirectoryMetadata(id).then(data => (items = data)) then}
+	{#await items.length || getDirectoryMetadata(id).then(data => (items = data)) then}
 		<div class="StorageListItem header">
 			<span></span>
 			<span>Name</span>
@@ -45,7 +44,7 @@
 		</div>
 		{#each items as item, i (item.id)}
 			<div class="StorageListItem">
-				<Icon i={iconForMime(item.type)} />
+				<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>

package/lib/StorageSidebar.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { getDirectoryMetadata, type _Sidebar } from '@axium/storage/client';
+	import { getDirectoryMetadata, type SidebarContext } from '@axium/storage/client';
 	import type { StorageItemMetadata } from '@axium/storage/common';
 	import { ItemSelection } from '@axium/storage/selection';
 	import { setContext } from 'svelte';
 	import StorageSidebarItem from './StorageSidebarItem.svelte';
 
-	const { root }: { root: string | StorageItemMetadata[] } = $props();
+	let { root, sidebar = $bindable() }: { root: string | StorageItemMetadata[]; sidebar?: SidebarContext } = $props();
 
 	let items = $state<StorageItemMetadata[]>([]);
 
 	const allItems: StorageItemMetadata[] = [];
 
-	const sidebar = $state<_Sidebar>({
+	sidebar = {
 		selection: new ItemSelection(allItems),
 		items: allItems,
 		async getDirectory(id: string, assignTo?: StorageItemMetadata[]) {
@@ -20,19 +20,24 @@
 			assignTo = data;
 			return data;
 		},
-	});
+	};
 
-	setContext('files:sidebar', () => sidebar);
+	setContext('storage:sidebar', () => sidebar);
 
-	if (typeof root == 'string') allItems.push(...items);
+	if (typeof root != 'string') {
+		allItems.push(...root);
+		items = root;
+	}
 </script>
 
-<div id="FilesSidebar">
+<div id="StorageSidebar">
 	{#await typeof root == 'string' ? sidebar.getDirectory(root, items) : root}
 		<i>Loading...</i>
 	{:then}
 		{#each items as _, i (_.id)}
 			<StorageSidebarItem bind:item={items[i]} bind:items />
+		{:else}
+			<i>No files yet</i>
 		{/each}
 	{:catch error}
 		<i style:color="#c44">{error.message}</i>

package/lib/StorageSidebarItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import * as icon from '@axium/core/icons';
 	import { ClipboardCopy, FormDialog, Icon } from '@axium/server/components';
-	import { deleteItem, updateItemMetadata, type _Sidebar } from '@axium/storage/client';
+	import { deleteItem, updateItemMetadata, type SidebarContext } from '@axium/storage/client';
 	import type { StorageItemMetadata } from '@axium/storage/common';
 	import { getContext } from 'svelte';
 	import StorageSidebarItem from './StorageSidebarItem.svelte';
@@ -17,7 +17,7 @@
 		debug?: boolean;
 	} = $props();
 
-	const sb = getContext<() => _Sidebar>('files:sidebar')();
+	const sb = getContext<() => SidebarContext>('storage:sidebar')();
 
 	const dialogs = $state<Record<string, HTMLDialogElement>>({});
 	let popover = $state<HTMLDivElement>();

package/package.json

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