@axium/storage 0.20.5 → 0.21.0

package/dist/client/cli.js

@@ -1,6 +1,6 @@
 import { configDir, session } from '@axium/client/cli/config';
 import { formatBytes } from '@axium/core/format';
-import * as io from '@axium/core/node/io';
+import * as io from 'ioium/node';
 import { Option, program } from 'commander';
 import { statSync, unlinkSync } from 'node:fs';
 import { stat } from 'node:fs/promises';

package/dist/client/config.js

@@ -1,5 +1,5 @@
 import { configDir } from '@axium/client/cli/config';
-import { debug, readJSON, writeJSON } from '@axium/core/node/io';
+import { debug, readJSON, writeJSON } from 'ioium/node';
 import { join } from 'node:path/posix';
 import * as z from 'zod';
 import { Sync } from './sync.js';

package/dist/client/local.js

@@ -1,7 +1,7 @@
 import { cacheDir, session } from '@axium/client/cli/config';
 import { userInfo } from '@axium/client/user';
 import { UserPublic } from '@axium/core';
-import * as io from '@axium/core/node/io';
+import * as io from 'ioium/node';
 import { ENOENT, ENOTDIR } from 'node:constants';
 import { stat } from 'node:fs/promises';
 import { join } from 'node:path';

package/dist/client/sync.js

@@ -1,6 +1,6 @@
 import { configDir, saveConfig } from '@axium/client/cli/config';
 import { fetchAPI } from '@axium/client/requests';
-import * as io from '@axium/core/node/io';
+import * as io from 'ioium/node';
 import mime from 'mime';
 import { createHash } from 'node:crypto';
 import * as fs from 'node:fs';

package/dist/polyfills.js

@@ -7,7 +7,7 @@ https://github.com/microsoft/TypeScript/issues/61695
 
 @todo Remove when TypeScript 5.9 is released
 */
-import { debug } from '@axium/core/io';
+import { debug } from 'ioium';
 Uint8Array.prototype.toHex ??=
     (debug('Using a polyfill of Uint8Array.prototype.toHex'),
         function toHex() {

package/dist/server/cli.js

@@ -1,8 +1,8 @@
 import { formatBytes, parseByteSize } from '@axium/core';
-import { io } from '@axium/core/node';
 import { lookupUser } from '@axium/server/cli';
 import { count, database } from '@axium/server/database';
 import { Option, program } from 'commander';
+import * as io from 'ioium/node';
 import { styleText } from 'node:util';
 import * as z from 'zod';
 import { parseItem } from './db.js';

package/dist/server/hooks.js

@@ -1,6 +1,6 @@
 import { getConfig } from '@axium/core';
 import { formatBytes } from '@axium/core/format';
-import { done, start } from '@axium/core/node/io';
+import { done, start } from 'ioium/node';
 import { count, database } from '@axium/server/database';
 import { mkdirSync } from 'node:fs';
 import '../common.js';

package/lib/List.svelte

@@ -7,7 +7,7 @@
 	import type { AccessControllable, UserPublic } from '@axium/core';
 	import { formatBytes } from '@axium/core/format';
 	import { forMime as iconForMime } from '@axium/core/icons';
-	import { errorText } from '@axium/core/io';
+	import { errorText } from 'ioium';
 	import { getDirectoryMetadata, updateItemMetadata } from '@axium/storage/client';
 	import { copyShortURL, formatItemName } from '@axium/storage/client/frontend';
 	import { StorageItemSorting, type StorageItemMetadata } from '@axium/storage/common';

package/lib/Preview.css

@@ -54,6 +54,10 @@
 	justify-content: center;
 	flex-direction: column;
 
+	&.no-top-bar {
+		top: 1em;
+	}
+
 	.full-fill {
 		position: absolute;
 		inset: 0;

package/lib/Preview.svelte

@@ -14,11 +14,14 @@
 		shareDialog,
 		previewDialog,
 		onDelete = () => {},
+		noTopBar,
 	}: {
 		item: StorageItemMetadata & AccessControllable;
 		shareDialog?: HTMLDialogElement;
 		previewDialog?: HTMLDialogElement;
 		onDelete?(): unknown;
+		/** Set when the preview is displayed for an item not inside a directory (e.g. when sharing links to files) */
+		noTopBar?: boolean;
 	} = $props();
 
 	const itemOpeners = openers.filter(opener => opener.types.includes(item.type));
@@ -32,44 +35,47 @@
 	</span>
 {/snippet}
 
-<div class="preview-top-bar">
-	<div class="title">{item.name}</div>
-	{#if itemOpeners.length}
-		{@const [first, ...others] = itemOpeners}
-		<div class="openers">
-			<span>{text('storage.Preview.open_with')} <a href={first.openURL(item)} target="_blank">{first.name}</a></span>
-			{#if others.length}
-				<Popover>
-					{#snippet toggle()}
-						<Icon i="caret-down" />
-					{/snippet}
-					{#each others as opener}
-						<a href={opener.openURL(item)} target="_blank">{opener.name}</a>
-					{/each}
-				</Popover>
-			{/if}
-		</div>
-	{/if}
-	<div class="actions">
-		{@render action('rename', 'pencil')}
-		{#if shareDialog}
-			<span class="icon-text preview-action" onclick={() => shareDialog.showModal()}>
-				<Icon i="user-group" />
-			</span>
+{#if !noTopBar}
+	<div class="preview-top-bar">
+		<div class="title">{item.name}</div>
+
+		{#if itemOpeners.length}
+			{@const [first, ...others] = itemOpeners}
+			<div class="openers">
+				<span>{text('storage.Preview.open_with')} <a href={first.openURL(item)} target="_blank">{first.name}</a></span>
+				{#if others.length}
+					<Popover>
+						{#snippet toggle()}
+							<Icon i="caret-down" />
+						{/snippet}
+						{#each others as opener}
+							<a href={opener.openURL(item)} target="_blank">{opener.name}</a>
+						{/each}
+					</Popover>
+				{/if}
+			</div>
 		{/if}
-		{@render action('download', 'download')}
-		<span class="icon-text preview-action" onclick={() => copyShortURL(item)}>
-			<Icon i="link-horizontal" />
-		</span>
-		{@render action('trash', 'trash')}
-		{#if previewDialog}
-			<span class="icon-text preview-action mobile-hide" onclick={() => previewDialog.close()}>
-				<Icon i="xmark" --size="20px" />
+		<div class="actions">
+			{@render action('rename', 'pencil')}
+			{#if shareDialog}
+				<span class="icon-text preview-action" onclick={() => shareDialog.showModal()}>
+					<Icon i="user-group" />
+				</span>
+			{/if}
+			{@render action('download', 'download')}
+			<span class="icon-text preview-action" onclick={() => copyShortURL(item)}>
+				<Icon i="link-horizontal" />
 			</span>
-		{/if}
+			{@render action('trash', 'trash')}
+			{#if previewDialog}
+				<span class="icon-text preview-action mobile-hide" onclick={() => previewDialog.close()}>
+					<Icon i="xmark" --size="20px" />
+				</span>
+			{/if}
+		</div>
 	</div>
-</div>
-<div class="preview-content">
+{/if}
+<div class={['preview-content', noTopBar && 'no-top-bar']}>
 	{#if item.type.startsWith('image/')}
 		<img src={item.dataURL} alt={item.name} />
 	{:else if item.type.startsWith('audio/')}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/storage",
-	"version": "0.20.5",
+	"version": "0.21.0",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "User file storage for Axium",
 	"funding": {
@@ -41,7 +41,7 @@
 	},
 	"peerDependencies": {
 		"@axium/client": ">=0.20.0",
-		"@axium/core": ">=0.23.0",
+		"@axium/core": ">=0.24.0",
 		"@axium/server": ">=0.39.0",
 		"@sveltejs/kit": "^2.27.3",
 		"utilium": "^2.6.3"

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

@@ -36,32 +36,32 @@
 	<AccessControlDialog bind:dialog={shareDialog} {item} itemType="storage" {user} />
 	{#if item.parents}
 		<p class="parents" data-sveltekit-reload>
+			<a href="/files">~</a>
 			{#each item.parents as { id, name } (id)}<a href="/files/{id}">{name}</a>{/each}
 		</p>
 	{/if}
-	{#if item.type == 'inode/directory'}
-		{#snippet action(i: string, text: string, handler: (e: Event) => unknown)}
-			<button
-				class="icon-text"
-				onclick={e => {
-					e.preventDefault();
-					handler(e);
-				}}
-			>
-				<Icon {i} />
-				<span class="mobile-hide">{text}</span>
-			</button>
-		{/snippet}
-
-		<div class="folder-actions">
-			{@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>
+	{#snippet action(i: string, text: string, handler: (e: Event) => unknown)}
+		<button
+			class="icon-text"
+			onclick={e => {
+				e.preventDefault();
+				handler(e);
+			}}
+		>
+			<Icon {i} />
+			<span class="mobile-hide">{text}</span>
+		</button>
+	{/snippet}
 
+	<div class="folder-actions">
+		{@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>
+	{#if item.type == 'inode/directory'}
 		<List appMode bind:items user={data.session?.user} />
 		<Add parentId={item.id} onAdd={item => items.push(item)} />
 
@@ -102,7 +102,7 @@
 		</FormDialog>
 	{:else}
 		<div class="preview-container">
-			<Preview {item} {shareDialog} onDelete={() => (location.href = parentHref)} />
+			<Preview {item} {shareDialog} onDelete={() => (location.href = parentHref)} noTopBar />
 		</div>
 	{/if}
 {/if}
@@ -111,7 +111,11 @@
 	.preview-container {
 		position: relative;
 		width: 100%;
-		height: 100%;
+		height: calc(100% - 5em);
+
+		@media (width < 700px) {
+			height: calc(100% - 6em);
+		}
 	}
 
 	.folder-actions {
@@ -123,7 +127,7 @@
 	.parents {
 		margin-top: 0;
 
-		a::before {
+		a:not(:first-child)::before {
 			content: ' / ';
 			color: #888;
 		}