@axium/storage 0.15.0 → 0.15.1

package/dist/client/3rd-party.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { StorageItemMetadata } from '../common.js';
+export declare const previews: Map<string, Snippet<[item: StorageItemMetadata<Record<string, unknown>>]>>;
+export interface Opener {
+    /** Mime types supported by this opener */
+    types: string[];
+    name: string;
+    /** Get a URL to open the item with another plugin */
+    openURL(item: StorageItemMetadata): string;
+}
+export declare const openers: Opener[];

package/dist/client/3rd-party.js

@@ -0,0 +1,2 @@
+export const previews = new Map();
+export const openers = [];

package/lib/List.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { AccessControlDialog, FormDialog, Icon } from '@axium/client/components';
+	import { AccessControlDialog, FormDialog, Icon, Popover } from '@axium/client/components';
 	import '@axium/client/styles/list';
 	import type { AccessControllable, UserPublic } from '@axium/core';
 	import { formatBytes } from '@axium/core/format';
 	import { forMime as iconForMime } from '@axium/core/icons';
 	import { downloadItem, getDirectoryMetadata, updateItemMetadata } from '@axium/storage/client';
-	import previews from '@axium/storage/client/previews';
+	import { openers, previews } from '@axium/storage/client/3rd-party';
 	import type { StorageItemMetadata } from '@axium/storage/common';
 
 	let {
@@ -22,7 +22,7 @@
 
 {#snippet action(name: string, icon: string, i: number, preview: boolean = false)}
 	<span
-		class={[!preview && 'action']}
+		class={['icon-text', !preview ? 'action' : 'preview-action']}
 		onclick={() => {
 			activeIndex = i;
 			dialogs[name].showModal();
@@ -48,6 +48,7 @@
 		<span>Size</span>
 	</div>
 	{#each items as item, i (item.id)}
+		{@const itemOpeners = openers.filter(opener => opener.types.includes(item.type))}
 		<div
 			class="list-item"
 			onclick={async () => {
@@ -71,7 +72,7 @@
 				{@render action('rename', 'pencil', i)}
 				{@render action('share' + item.id, 'user-group', i)}
 				<AccessControlDialog
-					bind:dialog={dialogs['share' + item.id]}
+					bind:dialog={dialogs['share:' + item.id]}
 					{item}
 					itemType="storage"
 					editable={(item.acl?.find(
@@ -85,13 +86,33 @@
 				{@render action('download', 'download', i)}
 				{@render action('trash', 'trash', i)}
 				<dialog bind:this={dialogs['preview:' + item.id]} class="preview">
-					<div class="title">{item.name}</div>
-					<div class="actions">
-						{@render action('rename', 'pencil', i, true)}
-						{@render action('share' + item.id, 'user-group', i, true)}
-						{@render action('download', 'download', i, true)}
-						{@render action('trash', 'trash', i, true)}
-						<span onclick={() => dialogs['preview:' + item.id].close()}><Icon i="xmark" --size="20px" /></span>
+					<div class="preview-top-bar">
+						<div class="title">{item.name}</div>
+						{#if itemOpeners.length}
+							{@const [first, ...others] = itemOpeners}
+							<div class="openers">
+								<span>Open with <a href={first.openURL(item)} target="_blank">{first.name}</a></span>
+								{#if others.length}
+									<Popover>
+										{#snippet toggle()}
+											<span class="popover-toggle"><Icon i="caret-down" /></span>
+										{/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', i, true)}
+							{@render action('share:' + item.id, 'user-group', i, true)}
+							{@render action('download', 'download', i, true)}
+							{@render action('trash', 'trash', i, true)}
+							<span class="mobile-hide" onclick={() => dialogs['preview:' + item.id].close()}>
+								<Icon i="xmark" --size="20px" />
+							</span>
+						</div>
 					</div>
 					<div class="content">
 						{#if item.type.startsWith('image/')}
@@ -108,12 +129,13 @@
 								<p>PDF not displayed? <a href={item.dataURL} download={item.name}>Download</a></p>
 							</object>
 						{:else if item.type.startsWith('text/')}
-							<pre class="preview-text">{#await downloadItem(item.id).then(b => b.text()) then content}{content}{/await}</pre>
+							<pre
+								class="full-fill preview-text">{#await downloadItem(item.id).then( b => b.text() ) then content}{content}{/await}</pre>
 						{:else if previews.has(item.type)}
 							{@render previews.get(item.type)!(item)}
 						{:else}
-							<div class="no-preview">
-								<Icon i="eye-slash" />
+							<div class="full-fill no-preview">
+								<Icon i="eye-slash" --size="50px" />
 								<span>Preview not available</span>
 							</div>
 						{/if}
@@ -175,28 +197,45 @@
 		inset: 0;
 		width: 100%;
 		height: 100%;
-		background-color: #0008;
+		background-color: #000a;
 		border: none;
 		padding: 1em;
 		word-wrap: normal;
+		anchor-scope: --preview-openers;
 
-		.title,
-		.actions {
-			align-items: center;
+		.preview-action:hover {
+			cursor: pointer;
+		}
+
+		.preview-top-bar {
 			display: flex;
 			align-items: center;
 			gap: 1em;
+			justify-content: space-between;
+			padding: 0;
 			position: absolute;
-			top: 1em;
+			inset: 0.5em 1em 0;
+			height: fit-content;
+
+			> div {
+				display: flex;
+				gap: 1em;
+				align-items: center;
+			}
+		}
+
+		.openers {
 			padding: 1em;
-			height: 1em;
+			border: 1px solid var(--border-accent);
+			border-radius: 1em;
+			height: 2em;
+			anchor-name: --preview-openers;
 		}
 
-		.title {
-			left: 1em;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
+		.openers :global([popover]) {
+			inset: anchor(bottom) anchor(right) auto anchor(left);
+			position-anchor: --preview-openers;
+			width: anchor-size(width);
 		}
 
 		.actions {
@@ -207,11 +246,14 @@
 			position: absolute;
 			inset: 3em 10em 0;
 
-			.preview-text {
+			.full-fill {
 				position: absolute;
 				inset: 0;
 				width: 100%;
 				height: 100%;
+			}
+
+			.preview-text {
 				white-space: pre-wrap;
 				overflow-y: scroll;
 				line-height: 1.6;
@@ -229,13 +271,27 @@
 		}
 
 		@media (width < 700px) {
-			.actions {
-				top: 3em;
-				left: 1em;
+			.preview-top-bar {
+				flex-direction: column;
+
+				.actions {
+					justify-content: space-around;
+					width: 100%;
+
+					.preview-action {
+						padding: 1em;
+						flex: 1 1 0;
+						border-radius: 1em;
+						border: 1px solid var(--border-accent);
+						padding: 1em;
+						justify-content: center;
+						display: flex;
+					}
+				}
 			}
 
 			.content {
-				inset: 5em 1em 0;
+				inset: 10em 1em 0;
 			}
 		}
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/storage",
-	"version": "0.15.0",
+	"version": "0.15.1",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "User file storage for Axium",
 	"funding": {

package/dist/client/previews.d.ts

@@ -1,4 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { StorageItemMetadata } from '../common.js';
-declare const _default: Map<string, Snippet<[item: StorageItemMetadata<Record<string, unknown>>]>>;
-export default _default;

package/dist/client/previews.js

@@ -1 +0,0 @@
-export default new Map();