@axium/storage 0.6.1 → 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

@@ -7,7 +7,7 @@
 	import '../styles/list.css';
 
 	let {
-		items = $bindable([]),
+		items = $bindable(),
 		appMode,
 		emptyText = 'Folder is empty.',
 	}: { appMode?: boolean; items: StorageItemMetadata[]; emptyText?: string } = $props();

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.1",
+	"version": "0.6.2",
 	"author": "James Prevett <axium@jamespre.dev> (https://jamespre.dev)",
 	"description": "User file storage for Axium",
 	"funding": {

package/routes/files/+layout.svelte

@@ -2,9 +2,8 @@
 	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">

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,6 +1,6 @@
 <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';
 
@@ -26,6 +26,7 @@
 	</button>
 {:else if item.type == 'inode/directory'}
 	<StorageList appMode bind:items />
+	<StorageAdd parentId={item.id} onadd={item => items.push(item)} />
 {:else}
 	<p>No preview available.</p>
 {/if}