@axium/storage 0.18.10 → 0.18.12

package/dist/client/frontend.d.ts

@@ -1,2 +1,8 @@
 import type { StorageItemMetadata } from '@axium/storage/common';
 export declare function copyShortURL(item: StorageItemMetadata): Promise<void>;
+/**
+ * Formats an item name
+ */
+export declare function formatItemName(item?: {
+    name?: string | null;
+} | null): string;

package/dist/client/frontend.js

@@ -1,6 +1,15 @@
-import { copy } from '@axium/client/clipboard';
+import { copy } from '@axium/client/gui';
 import { encodeUUID } from 'utilium';
+import { text } from '@axium/client';
 export function copyShortURL(item) {
     const { href } = new URL('/f/' + encodeUUID(item.id).toBase64({ alphabet: 'base64url', omitPadding: true }), location.origin);
     return copy('text/plain', href);
 }
+/**
+ * Formats an item name
+ */
+export function formatItemName(item) {
+    if (!item?.name)
+        return text('storage.generic.no_name_in_dialog');
+    return item.name.length > 23 ? item.name.slice(0, 20) + '...' : item.name;
+}

package/lib/List.svelte

@@ -7,10 +7,10 @@
 	import { formatBytes } from '@axium/core/format';
 	import { forMime as iconForMime } from '@axium/core/icons';
 	import { getDirectoryMetadata, updateItemMetadata } from '@axium/storage/client';
-	import { copyShortURL } from '@axium/storage/client/frontend';
+	import { copyShortURL, formatItemName } from '@axium/storage/client/frontend';
 	import type { StorageItemMetadata } from '@axium/storage/common';
 	import Preview from './Preview.svelte';
-	import { copy } from '@axium/client/clipboard';
+	import { copy } from '@axium/client/gui';
 
 	let {
 		items = $bindable(),
@@ -21,11 +21,7 @@
 
 	let activeIndex = $state<number>(0);
 	const activeItem = $derived(items[activeIndex]);
-	const activeItemName = $derived(
-		activeItem?.name
-			? `<strong>${activeItem.name.length > 23 ? activeItem.name.slice(0, 20) + '...' : activeItem.name}</strong>`
-			: 'this'
-	);
+	const activeItemName = $derived(formatItemName(activeItem));
 	const dialogs = $state<Record<string, HTMLDialogElement>>({});
 </script>
 
@@ -90,28 +86,28 @@
 			>
 				{@render action('rename', 'pencil', i)}
 				{@render action('share:' + item.id, 'user-group', i)}
-				<AccessControlDialog
-					bind:dialog={dialogs['share:' + item.id]}
-					{item}
-					itemType="storage"
-					editable={(item.acl?.find(
-						a =>
-							a.userId == user?.id ||
-							(a.role && user?.roles.includes(a.role)) ||
-							(a.tag && user?.tags?.includes(a.tag)) ||
-							(!a.userId && !a.role && !a.tag)
-					)?.manage as boolean | undefined) ?? true}
-				/>
 				{@render action('download', 'download', i)}
 				{@render action('trash', 'trash', i)}
 			</div>
+			<AccessControlDialog
+				bind:dialog={dialogs['share:' + item.id]}
+				{item}
+				itemType="storage"
+				editable={(item.acl?.find(
+					a =>
+						a.userId == user?.id ||
+						(a.role && user?.roles.includes(a.role)) ||
+						(a.tag && user?.tags?.includes(a.tag)) ||
+						(!a.userId && !a.role && !a.tag)
+				)?.manage as boolean | undefined) ?? true}
+			/>
 		</div>
 	{:else}
 		<p class="list-empty">{emptyText}</p>
 	{/each}
 </div>
 
-<dialog bind:this={dialogs.preview} class="preview">
+<dialog bind:this={dialogs.preview} class="preview" onclick={e => e.stopPropagation()}>
 	{#if activeItem}
 		<Preview
 			item={activeItem}
@@ -146,7 +142,7 @@
 		items.splice(activeIndex, 1);
 	}}
 >
-	<p>{@html text('storage.List.trash_confirm', { $html: true, name: activeItemName })}</p>
+	<p>{text('storage.List.trash_confirm', { name: activeItemName })}</p>
 </FormDialog>
 <FormDialog
 	bind:dialog={dialogs.download}
@@ -159,7 +155,7 @@
 		} else open(activeItem!.dataURL, '_blank');
 	}}
 >
-	<p>{@html text('storage.generic.download_confirm', { $html: true, name: activeItemName })}</p>
+	<p>{text('storage.generic.download_confirm', { name: activeItemName })}</p>
 </FormDialog>
 
 <style>

package/lib/SidebarItem.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
 	import { text } from '@axium/client';
 	import { page } from '$app/state';
-	import { copy } from '@axium/client/clipboard';
+	import { copy } from '@axium/client/gui';
 	import { FormDialog, Icon } from '@axium/client/components';
 	import * as icon from '@axium/core/icons';
 	import { deleteItem, updateItemMetadata } from '@axium/storage/client';
 	import type { StorageItemMetadata } from '@axium/storage/common';
 	import { getDirectory, selection, toggle, toggleRange } from '@axium/storage/sidebar';
 	import SidebarItem from './SidebarItem.svelte';
+	import { formatItemName } from '@axium/storage/client/frontend';
 
 	let {
 		item = $bindable(),
@@ -53,9 +54,7 @@
 
 	let children = $state<StorageItemMetadata[]>([]);
 
-	const itemName = $derived(
-		item.name ? `<strong>${item.name.length > 23 ? item.name.slice(0, 20) + '...' : item.name}</strong>` : 'this'
-	);
+	const itemName = $derived(formatItemName(item));
 </script>
 
 {#snippet action(name: string, i: string, label: string)}
@@ -86,7 +85,7 @@
 					<SidebarItem bind:item={children[i]} bind:items={children} />
 				{/each}
 			{:catch error}
-				<i class="error-text">{error.message}</i>
+				<i class="error">{error.message}</i>
 			{/await}
 		</div>
 	</details>
@@ -134,7 +133,7 @@
 		if (index !== -1) items.splice(index, 1);
 	}}
 >
-	<p>{@html text('storage.SidebarItem.delete_confirm', { $html: true, name: itemName })}</p>
+	<p>{text('storage.SidebarItem.delete_confirm', { name: itemName })}</p>
 </FormDialog>
 <FormDialog
 	bind:dialog={dialogs.download}
@@ -145,7 +144,7 @@
 >
 	<p>
 		{text('storage.SidebarItem.download_disclaimer')} <br />
-		{@html text('storage.generic.download_confirm', { $html: true, name: itemName })}
+		{text('storage.generic.download_confirm', { name: itemName })}
 	</p>
 </FormDialog>
 

package/locales/en.json

@@ -44,12 +44,22 @@
 			}
 		}
 	},
+	"permission": {
+		"storage": {
+			"read": "Read",
+			"download": "Download",
+			"write": "Write",
+			"comment": "Comment",
+			"manage": "Manage"
+		}
+	},
 	"storage": {
 		"generic": {
 			"copy_id": "Copy ID",
 			"download": "Download",
 			"download_confirm": "Are you sure you want to download {name}?",
 			"name": "Name",
+			"no_name_in_dialog": "this",
 			"no_item": "No item is selected",
 			"rename": "Rename",
 			"trash": "Trash"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/storage",
-	"version": "0.18.10",
+	"version": "0.18.12",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "User file storage for Axium",
 	"funding": {
@@ -40,7 +40,7 @@
 		"build": "tsc"
 	},
 	"peerDependencies": {
-		"@axium/client": ">=0.17.0",
+		"@axium/client": ">=0.18.0",
 		"@axium/core": ">=0.19.0",
 		"@axium/server": ">=0.39.0",
 		"@sveltejs/kit": "^2.27.3",

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

@@ -6,6 +6,7 @@
 	import { forMime as iconForMime } from '@axium/core/icons';
 	import { deleteItem, updateItemMetadata } from '@axium/storage/client';
 	import type { PageProps } from './$types';
+	import { formatItemName } from '@axium/storage/client/frontend';
 
 	const { data }: PageProps = $props();
 	let items = $state(data.items);
@@ -14,11 +15,7 @@
 
 	let activeIndex = $state<number>(-1);
 	const activeItem = $derived(activeIndex == -1 ? null : items[activeIndex]);
-	const activeItemName = $derived(
-		activeItem?.name
-			? `<strong>${activeItem.name.length > 23 ? activeItem.name.slice(0, 20) + '...' : activeItem.name}</strong>`
-			: 'this'
-	);
+	const activeItemName = $derived(formatItemName(activeItem));
 
 	function action(index: number, dialog: () => HTMLDialogElement) {
 		return (e: Event) => {
@@ -68,7 +65,7 @@
 		items.splice(activeIndex, 1);
 	}}
 >
-	<p>{@html text('page.files.trash_page.restore_confirm', { $html: true, name: activeItemName })}</p>
+	<p>{text('page.files.trash_page.restore_confirm', { name: activeItemName })}</p>
 </FormDialog>
 <FormDialog
 	bind:dialog={deleteDialog}
@@ -81,7 +78,7 @@
 	}}
 >
 	<p>
-		{@html text('page.files.trash_page.delete_confirm', { $html: true, name: activeItemName })}
+		{text('page.files.trash_page.delete_confirm', { name: activeItemName })}
 	</p>
 </FormDialog>
 

package/routes/tsconfig.json

@@ -7,5 +7,6 @@
 		"target": "esnext",
 		"rootDir": ".."
 	},
-	"include": ["**/*", "../lib/*"]
+	"include": ["**/*", "../lib/*"],
+	"references": [{ "path": ".." }]
 }