@axium/storage 0.5.2 → 0.5.4

package/dist/plugin.d.ts

@@ -40,6 +40,7 @@ declare const _default: {
         "./sidebar": string;
         "./components": string;
         "./components/*": string;
+        "./styles/*": string;
     };
     routes: string;
     files: string[];

package/dist/plugin.js

@@ -56,7 +56,7 @@ async function clean(opt) {
     const nDaysAgo = new Date(Date.now() - 86400000 * config.storage.trash_duration);
     await database
         .deleteFrom('storage')
-        .where('trashedAt', '!=', null)
+        .where('trashedAt', 'is not', null)
         .where('trashedAt', '<', nDaysAgo)
         .executeTakeFirstOrThrow()
         .then(done);

package/dist/server.js

@@ -157,7 +157,7 @@ addRoute({
         const items = await database
             .selectFrom('storage')
             .where('parentId', '=', itemId)
-            .where('trashedAt', '!=', null)
+            .where('trashedAt', 'is', null)
             .selectAll()
             .execute();
         return items.map(parseItem);
@@ -326,7 +326,7 @@ addRoute({
         const userId = event.params.id;
         await checkAuthForUser(event, userId);
         const [items, usage, limits] = await Promise.all([
-            database.selectFrom('storage').where('userId', '=', userId).where('trashedAt', '!=', null).selectAll().execute(),
+            database.selectFrom('storage').where('userId', '=', userId).where('trashedAt', 'is', null).selectAll().execute(),
             currentUsage(userId),
             getLimits(userId),
         ]).catch(withError('Could not fetch data'));
@@ -344,14 +344,21 @@ addRoute({
         const items = await database
             .selectFrom('storage')
             .where('userId', '=', userId)
-            .where('trashedAt', '!=', null)
-            .where('parentId', '=', null)
+            .where('trashedAt', 'is', null)
+            .where('parentId', 'is', null)
             .selectAll()
             .execute()
             .catch(withError('Could not get storage items'));
         return items.map(parseItem);
     },
 });
+function existsInACL(column, userId) {
+    return (eb) => eb.exists(eb
+        .selectFrom('acl.storage')
+        .whereRef('itemId', '=', `item.${column}`)
+        .where('userId', '=', userId)
+        .where('permission', '!=', Permission.None));
+}
 addRoute({
     path: '/api/users/:id/storage/shared',
     params: { id: z.uuid() },
@@ -361,17 +368,11 @@ addRoute({
         const userId = event.params.id;
         await checkAuthForUser(event, userId);
         const items = await database
-            .selectFrom('storage')
-            .where('trashedAt', '!=', null)
-            .where(({ and, not, exists, selectFrom }) => {
-            const existsInAcl = (column) => exists(selectFrom('acl.storage')
-                .whereRef('itemId', '=', `storage.${column}`)
-                .where('userId', '=', userId)
-                .where('permission', '!=', Permission.None));
-            // Exclude items that are in a directory shared with the user
-            return and([existsInAcl('id'), not(existsInAcl('parentId'))]);
-        })
-            .selectAll()
+            .selectFrom('storage as item')
+            .selectAll('item')
+            .where('trashedAt', 'is', null)
+            .where(existsInACL('id', userId))
+            .where(eb => eb.not(existsInACL('parentId', userId)))
             .execute()
             .catch(withError('Could not get storage items'));
         return items.map(parseItem);
@@ -388,7 +389,7 @@ addRoute({
         const items = await database
             .selectFrom('storage')
             .where('userId', '=', userId)
-            .where('trashedAt', '!=', null)
+            .where('trashedAt', 'is not', null)
             .selectAll()
             .execute()
             .catch(withError('Could not get trash'));

package/lib/List.svelte

@@ -4,6 +4,7 @@
 	import { FormDialog, Icon } from '@axium/server/components';
 	import { getDirectoryMetadata, updateItemMetadata } from '@axium/storage/client';
 	import type { StorageItemMetadata } from '@axium/storage/common';
+	import '../styles/list.css';
 
 	let { items = $bindable([]), appMode }: { appMode?: boolean; items: StorageItemMetadata[] } = $props();
 
@@ -35,7 +36,7 @@
 {/snippet}
 
 {#snippet _item(item: StorageItemMetadata, i: number)}
-	<div class="StorageListItem">
+	<div class="list-item">
 		<dfn title={item.type}><Icon i={iconForMime(item.type)} /></dfn>
 		<span class="name">{item.name}</span>
 		<span>{item.modifiedAt.toLocaleString()}</span>
@@ -46,8 +47,8 @@
 	</div>
 {/snippet}
 
-<div class="StorageList">
-	<div class="StorageListItem SL_header">
+<div class="list">
+	<div class="list-item list-header">
 		<span></span>
 		<span>Name</span>
 		<span>Last Modified</span>
@@ -55,12 +56,12 @@
 	</div>
 	{#each items as item, i (item.id)}
 		{#if item.type == 'inode/directory' && appMode}
-			<a class="StorageListItem-container" href="/files/{item.id}">{@render _item(item, i)}</a>
+			<a class="list-item-container" href="/files/{item.id}">{@render _item(item, i)}</a>
 		{:else}
 			{@render _item(item, i)}
 		{/if}
 	{:else}
-		<i>Empty.</i>
+		<p class="list-empty">Folder is empty.</p>
 	{/each}
 </div>
 
@@ -105,47 +106,11 @@
 </FormDialog>
 
 <style>
-	.StorageList {
-		display: flex;
-		flex-direction: column;
-		padding: 0.5em;
-	}
-
-	.StorageListItem.SL_header {
-		font-weight: bold;
-		border-bottom: 1px solid #bbc;
-	}
-
-	.StorageListItem-container {
-		text-decoration: none;
-		color: inherit;
-	}
-
-	.StorageListItem {
+	.list-item {
 		display: grid;
 		grid-template-columns: 1em 4fr 15em 5em repeat(3, 1em);
 		align-items: center;
 		gap: 0.5em;
 		padding: 0.5em 0;
 	}
-
-	.StorageListItem:not(:last-child) {
-		border-bottom: 1px solid #bbc;
-	}
-
-	.StorageListItem:not(.SL_header):hover {
-		background-color: #7777;
-	}
-
-	.action {
-		visibility: hidden;
-	}
-
-	.StorageListItem:hover .action {
-		visibility: visible;
-	}
-
-	.action:hover {
-		cursor: pointer;
-	}
 </style>

package/lib/Usage.svelte

@@ -7,9 +7,7 @@
 	const { userId, info }: { userId: string; info?: UserStorageInfo } = $props();
 </script>
 
-{#await info || getUserStorageInfo(userId)}
-	<p>Loading...</p>
-{:then info}
+{#await info || getUserStorageInfo(userId) then info}
 	<p>
 		<NumberBar
 			max={info.limits.user_size * 1_000_000}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/storage",
-	"version": "0.5.2",
+	"version": "0.5.4",
 	"author": "James Prevett <axium@jamespre.dev> (https://jamespre.dev)",
 	"description": "User file storage for Axium",
 	"funding": {
@@ -24,7 +24,8 @@
 		"./*": "./dist/*.js",
 		"./sidebar": "./lib/sidebar.svelte.js",
 		"./components": "./lib/index.js",
-		"./components/*": "./lib/*.svelte"
+		"./components/*": "./lib/*.svelte",
+		"./styles/*": "./styles/*.css"
 	},
 	"routes": "routes",
 	"files": [

package/routes/files/+layout.svelte

@@ -1,58 +1,69 @@
 <script lang="ts">
 	import { Icon } from '@axium/server/components';
-	import { capitalize } from 'utilium';
 	import { StorageUsage } from '@axium/storage/components';
-	import type { Session } from '@axium/core';
-	import type { LayoutProps, LayoutRouteId } from './$types';
-
-	type SidebarTab = 'files' | 'trash' | 'shared' | 'usage';
+	import { capitalize } from 'utilium';
+	import type { LayoutProps } from './$types';
 
 	let { children, data }: LayoutProps = $props();
 </script>
 
-{#snippet tab(text: string, i: string, href: LayoutRouteId, isDefault: boolean = false)}
-	<a class={['item', data.route.id == href || (data.route.id == '/files/[id]' && isDefault)]} {href}><Icon {i} />{capitalize(text)}</a>
-{/snippet}
-
 <div class="app">
 	<div class="sidebar">
-		{@render tab('Files', 'folders', '/files', true)}
-		{@render tab('Trash', 'trash', '/files/trash')}
-		{@render tab('Shared', 'user-group', '/files/shared')}
+		{#each data.tabs as { href, name, icon: i, active }}
+			<a {href} class={['item', active && 'active']}><Icon {i} /> {capitalize(name)}</a>
+		{/each}
 
 		<div class="usage">
 			<StorageUsage userId={data.session.userId} />
 		</div>
 	</div>
 
-	<div class="content">
+	<div class="files-content">
 		{@render children()}
 	</div>
 </div>
 
 <style>
+	.app {
+		display: grid;
+		grid-template-columns: 15em 1fr;
+		height: 100%;
+	}
+
 	.sidebar {
-		width: 20em;
-		display: flex;
+		grid-column: 1;
+		width: 100%;
+		display: inline-flex;
 		flex-direction: column;
 		gap: 0.5em;
+		padding-left: 1em;
 	}
 
 	.item {
-		padding: 0.5em;
-		border-radius: 0.25em;
+		padding: 0.3em 0.5em;
+		border-radius: 0.25em 1em 1em 0.25em;
+		display: inline-flex;
+		align-items: center;
+		gap: 1em;
 	}
 
 	.item:hover {
-		background-color: #446;
+		background-color: #333;
 		cursor: pointer;
 	}
 
 	.item.active {
-		background-color: #447;
+		background-color: #334;
 	}
 
 	.usage {
-		align-self: flex-end;
+		margin-top: auto;
+	}
+
+	.files-content {
+		grid-column: 2;
+		padding: 1em;
+		overflow-x: hidden;
+		overflow-y: scroll;
 	}
 </style>

package/routes/files/+layout.ts

@@ -1,6 +1,6 @@
 import { getCurrentSession } from '@axium/client/user';
 import { redirect } from '@sveltejs/kit';
-import type { LayoutLoadEvent } from './$types';
+import type { LayoutLoadEvent, LayoutRouteId } from './$types';
 
 export const ssr = false;
 
@@ -9,8 +9,14 @@ export async function load({ url, route }: LayoutLoadEvent) {
 
 	if (!session) redirect(307, '/login?after=' + url.pathname);
 
+	const tabs = [
+		{ name: 'files', href: '/files', icon: 'folders', active: route.id.endsWith('/files/[id]') || route.id.endsWith('/files') },
+		{ name: 'trash', href: '/files/trash', icon: 'trash', active: route.id.endsWith('/files/trash') },
+		{ 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(),
-		route,
+		tabs,
 	};
 }

package/routes/files/+page.svelte

@@ -5,4 +5,8 @@
 	const { data }: PageProps = $props();
 </script>
 
+<svelte:head>
+	<title>Files</title>
+</svelte:head>
+
 <StorageList appMode bind:items={data.items} />

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

@@ -9,6 +9,10 @@
 	const item = $state(data.item);
 </script>
 
+<svelte:head>
+	<title>Files - Preview - {item.name}</title>
+</svelte:head>
+
 {#if item.trashedAt}
 	<p>This item is trashed</p>
 	<button
@@ -20,7 +24,7 @@
 		<Icon i="trash-can-undo" /> Restore
 	</button>
 {:else if item.type == 'inode/directory'}
-	<StorageList items={data.items!} />
+	<StorageList appMode bind:items={data.items!} />
 {:else}
 	<p>No preview available.</p>
 {/if}

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

@@ -2,67 +2,37 @@
 	import { formatBytes } from '@axium/core/format';
 	import { forMime as iconForMime } from '@axium/core/icons';
 	import { Icon } from '@axium/server/components';
+	import '@axium/storage/styles/list';
 	import type { PageProps } from './$types';
 
 	const { data }: PageProps = $props();
 </script>
 
-<div class="SharedItemList">
-	<div class="SharedItem list-header">
+<svelte:head>
+	<title>Files - Shared With You</title>
+</svelte:head>
+
+<div class="list">
+	<div class="list-item list-header">
 		<span></span>
 		<span>Name</span>
 		<span>Last Modified</span>
 		<span>Size</span>
 	</div>
 	{#each data.items as item, i (item.id)}
-		<div class="SharedItem">
+		<div class="list-item">
 			<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>
 		</div>
 	{:else}
-		<i>Empty.</i>
+		<p class="list-empty">No items have been shared with you.</p>
 	{/each}
 </div>
 
 <style>
-	.SharedItemList {
-		display: flex;
-		flex-direction: column;
-		padding: 0.5em;
-	}
-
-	.SharedItem.list-header {
-		font-weight: bold;
-		border-bottom: 1px solid #bbc;
-	}
-
-	.SharedItem {
-		display: grid;
-		grid-template-columns: 1em 4fr 15em 5em;
-		align-items: center;
-		gap: 0.5em;
-		padding: 0.5em 0;
-	}
-
-	.SharedItem:not(:last-child) {
-		border-bottom: 1px solid #bbc;
-	}
-
-	.SharedItem:not(.list-header):hover {
-		background-color: #7777;
-	}
-
-	.action {
-		visibility: hidden;
-	}
-
-	.SharedItem:hover .action {
-		visibility: visible;
-	}
-
-	.action:hover {
-		cursor: pointer;
+	.list-item {
+		grid-template-columns: 1em 4fr 15em 5em !important;
 	}
 </style>

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

@@ -3,6 +3,7 @@
 	import { forMime as iconForMime } from '@axium/core/icons';
 	import { FormDialog, Icon } from '@axium/server/components';
 	import { deleteItem } from '@axium/storage/client';
+	import '@axium/storage/styles/list';
 	import type { PageProps } from './$types';
 
 	const { data }: PageProps = $props();
@@ -13,15 +14,19 @@
 	const activeItem = $derived(items[activeIndex]);
 </script>
 
-<div class="TrashList">
-	<div class="TrashItem list-header">
+<svelte:head>
+	<title>Files - Trash</title>
+</svelte:head>
+
+<div class="list">
+	<div class="list-item list-header">
 		<span></span>
 		<span>Name</span>
 		<span>Last Modified</span>
 		<span>Size</span>
 	</div>
 	{#each items as item, i (item.id)}
-		<div class="TrashItem">
+		<div class="list-item">
 			<dfn title={item.type}><Icon i={iconForMime(item.type)} /></dfn>
 			<span class="name">{item.name}</span>
 			<span>{item.modifiedAt.toLocaleString()}</span>
@@ -39,7 +44,7 @@
 			</span>
 		</div>
 	{:else}
-		<i>Empty.</i>
+		<p class="list-empty">Trash is empty.</p>
 	{/each}
 </div>
 
@@ -61,42 +66,7 @@
 </FormDialog>
 
 <style>
-	.TrashList {
-		display: flex;
-		flex-direction: column;
-		padding: 0.5em;
-	}
-
-	.TrashItem.list-header {
-		font-weight: bold;
-		border-bottom: 1px solid #bbc;
-	}
-
-	.TrashItem {
-		display: grid;
-		grid-template-columns: 1em 4fr 15em 5em 1em;
-		align-items: center;
-		gap: 0.5em;
-		padding: 0.5em 0;
-	}
-
-	.TrashItem:not(:last-child) {
-		border-bottom: 1px solid #bbc;
-	}
-
-	.TrashItem:not(.list-header):hover {
-		background-color: #7777;
-	}
-
-	.action {
-		visibility: hidden;
-	}
-
-	.TrashItem:hover .action {
-		visibility: visible;
-	}
-
-	.action:hover {
-		cursor: pointer;
+	.list-item {
+		grid-template-columns: 1em 4fr 15em 5em 1em !important;
 	}
 </style>