@axium/storage 0.18.8 → 0.18.9

package/dist/client/web_hook.d.ts

@@ -0,0 +1,8 @@
+import en from '../../locales/en.json';
+import '../common.js';
+type en = typeof en;
+declare module '@axium/client/locales' {
+    interface Locale extends en {
+    }
+}
+export {};

package/dist/client/web_hook.js

@@ -0,0 +1,4 @@
+import { extendLocale } from '@axium/client';
+import en from '../../locales/en.json' with { type: 'json' };
+import '../common.js';
+extendLocale('en', en);

package/lib/Add.svelte

@@ -3,6 +3,7 @@
 	import { FormDialog, Icon, Popover, Upload } from '@axium/client/components';
 	import { uploadItem } from '@axium/storage/client';
 	import type { StorageItemMetadata } from '@axium/storage/common';
+	import { text } from '@axium/client';
 
 	const { parentId, onAdd }: { parentId?: string; onAdd?(item: StorageItemMetadata): void } = $props();
 
@@ -31,18 +32,18 @@
 
 <Popover>
 	{#snippet toggle()}
-		<button class="icon-text"><Icon i="plus" />Add</button>
+		<button class="icon-text"><Icon i="plus" />{text('storage.Add.text')}</button>
 	{/snippet}
 
-	<span class="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)}
+	<span class="menu-item" onclick={() => uploadDialog.showModal()}><Icon i="upload" />{text('storage.Add.upload')}</span>
+	{@render _item('inode/directory', text('storage.Add.new_folder'))}
+	{@render _item('text/plain', text('storage.Add.plain_text'))}
+	{@render _item('text/x-uri', text('storage.Add.url'), true)}
 </Popover>
 
 <FormDialog
 	bind:dialog={uploadDialog}
-	submitText="Upload"
+	submitText={text('storage.Add.upload')}
 	cancel={() => (files = new DataTransfer().files)}
 	submit={async () => {
 		for (const [i, file] of Array.from(files!).entries()) {
@@ -61,7 +62,7 @@
 
 <FormDialog
 	bind:dialog={createDialog}
-	submitText="Create"
+	submitText={text('storage.Add.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 });
@@ -69,12 +70,12 @@
 	}}
 >
 	<div>
-		<label for="name">Name</label>
+		<label for="name">{text('storage.generic.name')}</label>
 		<input name="name" type="text" required />
 	</div>
 	{#if createIncludesContent}
 		<div>
-			<label for="content">Content</label>
+			<label for="content">{text('storage.Add.content')}</label>
 			<input name="content" type="text" size="40" required />
 		</div>
 	{/if}

package/lib/List.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import { contextMenu } from '@axium/client/attachments';
 	import { AccessControlDialog, FormDialog, Icon } from '@axium/client/components';
 	import '@axium/client/styles/list';
@@ -14,12 +15,17 @@
 	let {
 		items = $bindable(),
 		appMode,
-		emptyText = 'Folder is empty.',
+		emptyText = text('storage.List.empty'),
 		user,
 	}: { appMode?: boolean; items: (StorageItemMetadata & AccessControllable)[]; emptyText?: string; user?: UserPublic } = $props();
 
 	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 dialogs = $state<Record<string, HTMLDialogElement>>({});
 </script>
 
@@ -35,20 +41,12 @@
 	</span>
 {/snippet}
 
-{#snippet _itemName()}
-	{#if activeItem?.name}
-		<strong>{activeItem.name.length > 23 ? activeItem.name.slice(0, 20) + '...' : activeItem.name}</strong>
-	{:else}
-		this
-	{/if}
-{/snippet}
-
 <div class="list">
 	<div class="list-item list-header">
 		<span></span>
-		<span>Name</span>
-		<span>Last Modified</span>
-		<span>Size</span>
+		<span>{text('storage.generic.name')}</span>
+		<span>{text('storage.List.last_modified')}</span>
+		<span>{text('storage.List.size')}</span>
 	</div>
 	{#each items as item, i (item.id)}
 		<div
@@ -61,12 +59,20 @@
 				else items = await getDirectoryMetadata(item.id);
 			}}
 			{@attach contextMenu(
-				{ i: 'pencil', text: 'Rename', action: () => ((activeIndex = i), dialogs.rename.showModal()) },
-				{ i: 'user-group', text: 'Share', action: () => ((activeIndex = i), dialogs['share:' + item.id].showModal()) },
-				{ i: 'download', text: 'Download', action: () => ((activeIndex = i), dialogs.download.showModal()) },
-				{ i: 'link-horizontal', text: 'Copy Link', action: () => ((activeIndex = i), copyShortURL(item)) },
-				{ i: 'trash', text: 'Trash', action: () => ((activeIndex = i), dialogs.trash.showModal()) },
-				user?.preferences?.debug && { i: 'hashtag', text: 'Copy ID', action: () => copy('text/plain', item.id) }
+				{ i: 'pencil', text: text('storage.generic.rename'), action: () => ((activeIndex = i), dialogs.rename.showModal()) },
+				{
+					i: 'user-group',
+					text: text('storage.List.share'),
+					action: () => ((activeIndex = i), dialogs['share:' + item.id].showModal()),
+				},
+				{ i: 'download', text: text('storage.generic.download'), action: () => ((activeIndex = i), dialogs.download.showModal()) },
+				{ i: 'link-horizontal', text: text('storage.List.copy_link'), action: () => ((activeIndex = i), copyShortURL(item)) },
+				{ i: 'trash', text: text('storage.generic.trash'), action: () => ((activeIndex = i), dialogs.trash.showModal()) },
+				user?.preferences?.debug && {
+					i: 'hashtag',
+					text: text('storage.generic.copy_id'),
+					action: () => copy('text/plain', item.id),
+				}
 			)}
 		>
 			<dfn class="type" title={item.type}><Icon i={iconForMime(item.type)} /></dfn>
@@ -118,33 +124,33 @@
 
 <FormDialog
 	bind:dialog={dialogs.rename}
-	submitText="Rename"
+	submitText={text('storage.generic.rename')}
 	submit={async (data: { name: string }) => {
-		if (!activeItem) throw 'No item is selected';
+		if (!activeItem) throw text('storage.generic.no_item');
 		await updateItemMetadata(activeItem.id, data);
 		activeItem.name = data.name;
 	}}
 >
 	<div>
-		<label for="name">Name</label>
+		<label for="name">{text('storage.generic.name')}</label>
 		<input name="name" type="text" required value={activeItem?.name} />
 	</div>
 </FormDialog>
 <FormDialog
 	bind:dialog={dialogs.trash}
-	submitText="Trash"
+	submitText={text('storage.generic.trash')}
 	submitDanger
 	submit={async () => {
-		if (!activeItem) throw 'No item is selected';
+		if (!activeItem) throw text('storage.generic.no_item');
 		await updateItemMetadata(activeItem.id, { trash: true });
 		items.splice(activeIndex, 1);
 	}}
 >
-	<p>Are you sure you want to trash {@render _itemName()}?</p>
+	<p>{@html text('storage.List.trash_confirm', { $html: true, name: activeItemName })}</p>
 </FormDialog>
 <FormDialog
 	bind:dialog={dialogs.download}
-	submitText="Download"
+	submitText={text('storage.generic.download')}
 	submit={async () => {
 		if (activeItem!.type == 'inode/directory') {
 			/** @todo ZIP support */
@@ -153,7 +159,7 @@
 		} else open(activeItem!.dataURL, '_blank');
 	}}
 >
-	<p>Are you sure you want to download {@render _itemName()}?</p>
+	<p>{@html text('storage.generic.download_confirm', { $html: true, name: activeItemName })}</p>
 </FormDialog>
 
 <style>

package/lib/Preview.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import { FormDialog, Icon, Popover } from '@axium/client/components';
 	import type { AccessControllable } from '@axium/core';
 	import { downloadItem, getDirectoryMetadata, updateItemMetadata } from '@axium/storage/client';
@@ -35,7 +36,7 @@
 	{#if itemOpeners.length}
 		{@const [first, ...others] = itemOpeners}
 		<div class="openers">
-			<span>Open with <a href={first.openURL(item)} target="_blank">{first.name}</a></span>
+			<span>{text('storage.Preview.open_with')} <a href={first.openURL(item)} target="_blank">{first.name}</a></span>
 			{#if others.length}
 				<Popover>
 					{#snippet toggle()}
@@ -79,20 +80,20 @@
 	{:else if item.type == 'application/pdf'}
 		<object data={item.dataURL} type="application/pdf" width="100%" height="100%">
 			<embed src={item.dataURL} type="application/pdf" width="100%" height="100%" />
-			<p>PDF not displayed? <a href={item.dataURL} download={item.name}>Download</a></p>
+			<a href={item.dataURL} download={item.name}>{text('storage.Preview.pdf_fallback_download')}</a>
 		</object>
 	{:else if item.type.startsWith('text/')}
 		{#await downloadItem(item.id).then(b => b.text())}
 			<div class="full-fill no-preview">
 				<Icon i="cloud-arrow-down" --size="50px" />
-				<span>Loading</span>
+				<span>{text('storage.Preview.loading')}</span>
 			</div>
 		{:then content}
 			<pre class="full-fill preview-text">{content}</pre>
 		{:catch}
 			<div class="full-fill no-preview">
 				<Icon i="cloud-exclamation" --size="50px" />
-				<span>Error loading preview. You might not have permission to view this file.</span>
+				<span>{text('storage.Preview.error_loading')}</span>
 			</div>
 		{/await}
 	{:else if previews.has(item.type)}
@@ -100,39 +101,39 @@
 	{:else}
 		<div class="full-fill no-preview">
 			<Icon i="eye-slash" --size="50px" />
-			<span>Preview not available</span>
+			<span>{text('storage.Preview.preview_unavailable')}</span>
 		</div>
 	{/if}
 </div>
 
 <FormDialog
 	bind:dialog={dialogs.rename}
-	submitText="Rename"
+	submitText={text('storage.generic.rename')}
 	submit={async (data: { name: string }) => {
 		await updateItemMetadata(item.id, data);
 		item.name = data.name;
 	}}
 >
 	<div>
-		<label for="name">Name</label>
+		<label for="name">{text('storage.generic.name')}</label>
 		<input name="name" type="text" required value={item.name} />
 	</div>
 </FormDialog>
 <FormDialog
 	bind:dialog={dialogs.trash}
-	submitText="Trash"
+	submitText={text('storage.generic.trash')}
 	submitDanger
 	submit={async () => {
-		if (!item) throw 'No item is selected';
+		if (!item) throw text('storage.generic.no_item');
 		await updateItemMetadata(item.id, { trash: true });
 		onDelete();
 	}}
 >
-	<p>Are you sure you want to trash this?</p>
+	<p>{text('storage.Preview.trash_confirm')}</p>
 </FormDialog>
 <FormDialog
 	bind:dialog={dialogs.download}
-	submitText="Download"
+	submitText={text('storage.generic.download')}
 	submit={async () => {
 		if (item!.type == 'inode/directory') {
 			/** @todo ZIP support */
@@ -141,7 +142,7 @@
 		} else open(item!.dataURL, '_blank');
 	}}
 >
-	<p>Are you sure you want to download this?</p>
+	<p>{text('storage.Preview.download_confirm')}</p>
 </FormDialog>
 
 <style>
@@ -176,7 +177,7 @@
 
 	.openers {
 		padding: 1em;
-		border: 1px solid var(--border-accent);
+		border: var(--border-accent);
 		border-radius: 1em;
 		height: 2em;
 		anchor-name: --preview-openers;
@@ -232,7 +233,7 @@
 					padding: 1em;
 					flex: 1 1 0;
 					border-radius: 1em;
-					border: 1px solid var(--border-accent);
+					border: var(--border-accent);
 					padding: 1em;
 					justify-content: center;
 					display: flex;

package/lib/Sidebar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import type { StorageItemMetadata } from '@axium/storage/common';
 	import SidebarItem from './SidebarItem.svelte';
 	import { items as sb_items, getDirectory } from '@axium/storage/sidebar';
@@ -15,12 +16,12 @@
 
 <div id="StorageSidebar">
 	{#await typeof root == 'string' ? getDirectory(root, items) : root}
-		<i>Loading...</i>
+		<i>{text('generic.loading')}</i>
 	{:then}
 		{#each items as _, i (_.id)}
 			<SidebarItem bind:item={items[i]} bind:items />
 		{:else}
-			<i>No files yet</i>
+			<i>{text('storage.Sidebar.no_files')}</i>
 		{/each}
 	{:catch error}
 		<i class="error-text">{error.message}</i>

package/lib/SidebarItem.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import { page } from '$app/state';
 	import { copy } from '@axium/client/clipboard';
 	import { FormDialog, Icon } from '@axium/client/components';
@@ -51,9 +52,13 @@
 	}
 
 	let children = $state<StorageItemMetadata[]>([]);
+
+	const itemName = $derived(
+		item.name ? `<strong>${item.name.length > 23 ? item.name.slice(0, 20) + '...' : item.name}</strong>` : 'this'
+	);
 </script>
 
-{#snippet action(name: string, i: string, text: string)}
+{#snippet action(name: string, i: string, label: string)}
 	<div
 		onclick={e => {
 			e.stopPropagation();
@@ -63,18 +68,10 @@
 		class="action icon-text"
 	>
 		<Icon {i} --size="14px" />
-		{text}
+		{label}
 	</div>
 {/snippet}
 
-{#snippet _itemName()}
-	{#if item.name}
-		<strong>{item.name.length > 23 ? item.name.slice(0, 20) + '...' : item.name}</strong>
-	{:else}
-		this
-	{/if}
-{/snippet}
-
 {#if item.type == 'inode/directory'}
 	<details>
 		<summary class={['StorageSidebarItem', selection.has(item.id) && 'selected']} {onclick} {oncontextmenu} {onpointerup}>
@@ -83,7 +80,7 @@
 		</summary>
 		<div>
 			{#await getDirectory(item.id, children)}
-				<i>Loading...</i>
+				<i>{text('generic.loading')}</i>
 			{:then}
 				{#each children as _, i (_.id)}
 					<SidebarItem bind:item={children[i]} bind:items={children} />
@@ -101,35 +98,35 @@
 {/if}
 
 <div popover bind:this={popover}>
-	{@render action('rename', 'pen', 'Rename')}
-	{@render action('delete', 'trash', 'Delete')}
+	{@render action('rename', 'pen', text('storage.generic.rename'))}
+	{@render action('delete', 'trash', text('storage.SidebarItem.delete'))}
 	{#if item.type == 'cas_item'}
-		{@render action('download', 'download', 'Download')}
+		{@render action('download', 'download', text('storage.generic.download'))}
 	{/if}
 	{#if page.data.session?.user.preferences.debug}
 		<div class="action icon-text" onclick={() => copy('text/plain', item.id)}>
 			<Icon i="copy" --size="14px" />
-			Copy ID
+			{text('storage.generic.copy_id')}
 		</div>
 	{/if}
 </div>
 
 <FormDialog
 	bind:dialog={dialogs.rename}
-	submitText="Rename"
+	submitText={text('storage.generic.rename')}
 	submit={async (data: { name: string }) => {
 		await updateItemMetadata(item.id, data);
 		item.name = data.name;
 	}}
 >
 	<div>
-		<label for="name">Name</label>
+		<label for="name">{text('storage.generic.name')}</label>
 		<input name="name" type="text" required value={item.name} />
 	</div>
 </FormDialog>
 <FormDialog
 	bind:dialog={dialogs.delete}
-	submitText="Delete"
+	submitText={text('storage.SidebarItem.delete')}
 	submitDanger
 	submit={async () => {
 		await deleteItem(item.id);
@@ -137,18 +134,18 @@
 		if (index !== -1) items.splice(index, 1);
 	}}
 >
-	<p>Are you sure you want to delete {@render _itemName()}?</p>
+	<p>{@html text('storage.SidebarItem.delete_confirm', { $html: true, name: itemName })}</p>
 </FormDialog>
 <FormDialog
 	bind:dialog={dialogs.download}
-	submitText="Download"
+	submitText={text('storage.generic.download')}
 	submit={async () => {
 		open(item.dataURL, '_blank');
 	}}
 >
 	<p>
-		We are not responsible for the contents of this file. <br />
-		Are you sure you want to download {@render _itemName()}?
+		{text('storage.SidebarItem.download_disclaimer')} <br />
+		{@html text('storage.generic.download_confirm', { $html: true, name: itemName })}
 	</p>
 </FormDialog>
 

package/lib/Usage.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import { formatBytes } from '@axium/core/format';
 	import { NumberBar } from '@axium/client/components';
 	import { getUserStats } from '@axium/storage/client';
@@ -8,7 +9,7 @@
 </script>
 
 {#if !info && !userId}
-	<p>Log in to see storage usage.</p>
+	<p>{text('storage.Usage.login_prompt')}</p>
 {:else}
 	{#await info || getUserStats(userId!) then info}
 		<p>
@@ -23,7 +24,7 @@
 			</a>
 		</p>
 	{:catch error}
-		<p>Couldn't load your uploads.</p>
+		<p>{text('storage.Usage.error')}</p>
 		<p>{error.message}</p>
 	{/await}
 {/if}

package/locales/en.json

@@ -0,0 +1,96 @@
+{
+	"app_name": {
+		"files": "Files"
+	},
+	"page": {
+		"files": {
+			"title": "Files",
+			"detail_title": "Files — {name}",
+			"trashed": "This item is trashed",
+			"restore": "Restore",
+			"back": "Back",
+			"rename": "Rename",
+			"share": "Share",
+			"download": "Download",
+			"copy_link": "Copy Link",
+			"trash": "Trash",
+			"rename_submit": "Rename",
+			"trash_folder_confirm": "Are you sure you want to trash this folder?",
+			"download_folder_confirm": "Are you sure you want to download this folder?",
+			"shared": {
+				"title": "Files - Shared With You",
+				"empty": "No items have been shared with you."
+			},
+			"tab": {
+				"files": "Files",
+				"trash": "Trash",
+				"shared": "Shared"
+			},
+			"trash_page": {
+				"title": "Files — Trash",
+				"empty": "Trash is empty.",
+				"last_modified": "Last Modified",
+				"restore": "Restore",
+				"restore_confirm": "Restore {name}?",
+				"delete": "Delete",
+				"delete_confirm": "Are you sure you want to permanently delete {name}?"
+			},
+			"usage": {
+				"title": "Your Storage Usage",
+				"heading": "Storage Usage",
+				"bar_text": "Using {used} of {total}",
+				"bar_text_unlimited": "Using {used}",
+				"empty": "You have not uploaded any files yet."
+			}
+		}
+	},
+	"storage": {
+		"generic": {
+			"copy_id": "Copy ID",
+			"download": "Download",
+			"download_confirm": "Are you sure you want to download {name}?",
+			"name": "Name",
+			"no_item": "No item is selected",
+			"rename": "Rename",
+			"trash": "Trash"
+		},
+		"Add": {
+			"content": "Content",
+			"create": "Create",
+			"new_folder": "New Folder",
+			"plain_text": "Plain Text",
+			"text": "Add",
+			"upload": "Upload",
+			"url": "URL"
+		},
+		"List": {
+			"copy_link": "Copy Link",
+			"empty": "Folder is empty.",
+			"last_modified": "Last Modified",
+			"share": "Share",
+			"size": "Size",
+			"trash_confirm": "Are you sure you want to trash {name}?"
+		},
+		"Preview": {
+			"download_confirm": "Are you sure you want to download this?",
+			"error_loading": "Error loading preview. You might not have permission to view this file.",
+			"loading": "Loading",
+			"open_with": "Open with",
+			"pdf_fallback_download": "PDF couldn't be previewed. Click here to download.",
+			"preview_unavailable": "Preview not available",
+			"trash_confirm": "Are you sure you want to trash this?"
+		},
+		"Sidebar": {
+			"no_files": "No files yet"
+		},
+		"SidebarItem": {
+			"delete": "Delete",
+			"delete_confirm": "Are you sure you want to delete {name}?",
+			"download_disclaimer": "We are not responsible for the contents of this file."
+		},
+		"Usage": {
+			"error": "Couldn't load your uploads.",
+			"login_prompt": "Log in to see storage usage."
+		}
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/storage",
-	"version": "0.18.8",
+	"version": "0.18.9",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "User file storage for Axium",
 	"funding": {
@@ -31,6 +31,7 @@
 	"files": [
 		"dist",
 		"lib",
+		"locales",
 		"build",
 		"routes",
 		"db.json"
@@ -39,7 +40,7 @@
 		"build": "tsc"
 	},
 	"peerDependencies": {
-		"@axium/client": ">=0.15.0",
+		"@axium/client": ">=0.17.0",
 		"@axium/core": ">=0.19.0",
 		"@axium/server": ">=0.36.0",
 		"@sveltejs/kit": "^2.27.3",
@@ -56,7 +57,7 @@
 			"routes": "./routes",
 			"cli": "./dist/server/cli.js",
 			"db": "./db.json",
-			"web_client_hooks": "./dist/common.js"
+			"web_client_hooks": "./dist/client/web_hook.js"
 		},
 		"client": {
 			"cli": "./dist/client/cli.js",
@@ -65,7 +66,6 @@
 		"apps": [
 			{
 				"id": "files",
-				"name": "Files",
 				"icon": "folders"
 			}
 		],

package/routes/files/+layout.ts

@@ -1,3 +1,4 @@
+import { text } from '@axium/client';
 import { getCurrentSession } from '@axium/client/user';
 import type { Session, User } from '@axium/core';
 import type { LayoutRouteId } from './$types';
@@ -10,9 +11,14 @@ export async function load({ url, route, parent }) {
 	session ||= await getCurrentSession().catch(() => null);
 
 	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') },
+		{
+			name: text('page.files.tab.files'),
+			href: '/files',
+			icon: 'folders',
+			active: route.id.endsWith('/files/[id]') || route.id.endsWith('/files'),
+		},
+		{ name: text('page.files.tab.trash'), href: '/files/trash', icon: 'trash', active: route.id.endsWith('/files/trash') },
+		{ name: text('page.files.tab.shared'), href: '/files/shared', icon: 'user-group', active: route.id.endsWith('/files/shared') },
 	] satisfies { name: string; href: LayoutRouteId; icon: string; active: boolean }[];
 
 	return { session, tabs };

package/routes/files/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import { Add, List } from '@axium/storage/components';
 
 	const { data } = $props();
@@ -6,7 +7,7 @@
 </script>
 
 <svelte:head>
-	<title>Files</title>
+	<title>{text('page.files.title')}</title>
 </svelte:head>
 
 <List appMode bind:items user={data.session?.user} />

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import { AccessControlDialog, FormDialog, Icon } from '@axium/client/components';
 	import { Add, List, Preview } from '@axium/storage/components';
 	import type { PageProps } from './$types';
@@ -17,18 +18,19 @@
 </script>
 
 <svelte:head>
-	<title>Files — {item.name}</title>
+	<title>{text('page.files.detail_title', { name: item.name })}</title>
 </svelte:head>
 
 {#if item.trashedAt}
-	<p>This item is trashed</p>
+	<p>{text('page.files.trashed')}</p>
 	<button
 		onclick={async e => {
 			e.preventDefault();
 			await updateItemMetadata(item.id, { trash: false });
 		}}
 	>
-		<Icon i="trash-can-undo" /> Restore
+		<Icon i="trash-can-undo" />
+		{text('page.files.restore')}
 	</button>
 {:else}
 	<AccessControlDialog
@@ -63,12 +65,12 @@
 		{/snippet}
 
 		<div class="folder-actions">
-			{@render action('folder-arrow-up', 'Back', () => (location.href = parentHref))}
-			{@render action('pencil', 'Rename', () => dialogs.rename.showModal())}
-			{@render action('user-group', 'Share', () => shareDialog.showModal())}
-			{@render action('download', 'Download', () => dialogs.download.showModal())}
-			{@render action('link-horizontal', 'Copy Link', () => copyShortURL(item))}
-			{@render action('trash', 'Trash', () => dialogs.trash.showModal())}
+			{@render action('folder-arrow-up', text('page.files.back'), () => (location.href = parentHref))}
+			{@render action('pencil', text('page.files.rename'), () => dialogs.rename.showModal())}
+			{@render action('user-group', text('page.files.share'), () => shareDialog.showModal())}
+			{@render action('download', text('page.files.download'), () => dialogs.download.showModal())}
+			{@render action('link-horizontal', text('page.files.copy_link'), () => copyShortURL(item))}
+			{@render action('trash', text('page.files.trash'), () => dialogs.trash.showModal())}
 		</div>
 
 		<List appMode bind:items user={data.session?.user} />
@@ -76,38 +78,38 @@
 
 		<FormDialog
 			bind:dialog={dialogs.rename}
-			submitText="Rename"
+			submitText={text('page.files.rename_submit')}
 			submit={async (data: { name: string }) => {
 				await updateItemMetadata(item.id, data);
 				item.name = data.name;
 			}}
 		>
 			<div>
-				<label for="name">Name</label>
+				<label for="name">{text('storage.generic.name')}</label>
 				<input name="name" type="text" required value={item.name} />
 			</div>
 		</FormDialog>
 		<FormDialog
 			bind:dialog={dialogs.trash}
-			submitText="Trash"
+			submitText={text('page.files.trash')}
 			submitDanger
 			submit={async () => {
 				await updateItemMetadata(item.id, { trash: true });
 				location.href = parentHref;
 			}}
 		>
-			<p>Are you sure you want to trash this folder?</p>
+			<p>{text('page.files.trash_folder_confirm')}</p>
 		</FormDialog>
 		<FormDialog
 			bind:dialog={dialogs.download}
-			submitText="Download"
+			submitText={text('page.files.download')}
 			submit={async () => {
 				/** @todo ZIP support */
 				const children = await getDirectoryMetadata(item.id);
 				for (const child of children) open(child.dataURL, '_blank');
 			}}
 		>
-			<p>Are you sure you want to download this folder?</p>
+			<p>{text('page.files.download_folder_confirm')}</p>
 		</FormDialog>
 	{:else}
 		<div class="preview-container">

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import { List } from '@axium/storage/components';
 
 	const { data } = $props();
@@ -6,7 +7,7 @@
 </script>
 
 <svelte:head>
-	<title>Files - Shared With You</title>
+	<title>{text('page.files.shared.title')}</title>
 </svelte:head>
 
-<List appMode bind:items emptyText="No items have been shared with you." user={data.session?.user} />
+<List appMode bind:items emptyText={text('page.files.shared.empty')} user={data.session?.user} />

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import { FormDialog, Icon } from '@axium/client/components';
 	import '@axium/client/styles/list';
 	import { formatBytes } from '@axium/core/format';
@@ -13,6 +14,11 @@
 
 	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'
+	);
 
 	function action(index: number, dialog: () => HTMLDialogElement) {
 		return (e: Event) => {
@@ -25,15 +31,15 @@
 </script>
 
 <svelte:head>
-	<title>Files - Trash</title>
+	<title>{text('page.files.trash_page.title')}</title>
 </svelte:head>
 
 <div class="list">
 	<div class="list-item list-header">
 		<span></span>
-		<span>Name</span>
-		<span>Last Modified</span>
-		<span>Size</span>
+		<span>{text('storage.generic.name')}</span>
+		<span>{text('page.files.trash_page.last_modified')}</span>
+		<span>{text('storage.List.size')}</span>
 	</div>
 	{#each items as item, i (item.id)}
 		<div class="list-item">
@@ -49,39 +55,33 @@
 			</span>
 		</div>
 	{:else}
-		<p class="list-empty">Trash is empty.</p>
+		<p class="list-empty">{text('page.files.trash_page.empty')}</p>
 	{/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"
+	submitText={text('page.files.trash_page.restore')}
 	submit={async () => {
-		if (!activeItem) throw 'No item is selected';
+		if (!activeItem) throw text('storage.generic.no_item');
 		await updateItemMetadata(activeItem.id, { trash: false });
 		items.splice(activeIndex, 1);
 	}}
 >
-	<p>Restore {@render _name()}?</p>
+	<p>{@html text('page.files.trash_page.restore_confirm', { $html: true, name: activeItemName })}</p>
 </FormDialog>
 <FormDialog
 	bind:dialog={deleteDialog}
-	submitText="Delete"
+	submitText={text('page.files.trash_page.delete')}
 	submitDanger
 	submit={async () => {
-		if (!activeItem) throw 'No item is selected';
+		if (!activeItem) throw text('storage.generic.no_item');
 		await deleteItem(activeItem.id);
 		items.splice(activeIndex, 1);
 	}}
 >
 	<p>
-		Are you sure you want to permanently delete {@render _name()}?
+		{@html text('page.files.trash_page.delete_confirm', { $html: true, name: activeItemName })}
 	</p>
 </FormDialog>
 

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { text } from '@axium/client';
 	import { NumberBar } from '@axium/client/components';
 	import '@axium/client/styles/list';
 	import { formatBytes } from '@axium/core/format';
@@ -10,15 +11,19 @@
 	let items = $state(data.info.items.filter(i => i.type != 'inode/directory').sort((a, b) => Math.sign(b.size - a.size)));
 	const usedBytes = $state(data.info.usedBytes);
 
-	let barText = $derived(`Using ${formatBytes(usedBytes)} ${limits.user_size ? 'of ' + formatBytes(limits.user_size * 1_000_000) : ''}`);
+	let barText = $derived(
+		limits.user_size
+			? text('page.files.usage.bar_text', { used: formatBytes(usedBytes), total: formatBytes(limits.user_size * 1_000_000) })
+			: text('page.files.usage.bar_text_unlimited', { used: formatBytes(usedBytes) })
+	);
 </script>
 
 <svelte:head>
-	<title>Your Storage Usage</title>
+	<title>{text('page.files.usage.title')}</title>
 </svelte:head>
 
-<h2>Storage Usage</h2>
+<h2>{text('page.files.usage.heading')}</h2>
 
 <p><NumberBar max={limits.user_size * 1_000_000} value={usedBytes} text={barText} /></p>
 
-<List bind:items emptyText="You have not uploaded any files yet." user={data.session?.user} />
+<List bind:items emptyText={text('page.files.usage.empty')} user={data.session?.user} />