rimecms 0.25.14 → 0.26.0

package/dist/panel/components/sections/collection/{grid/grid-item → folder}/FolderWithActions.svelte

@@ -1,20 +1,21 @@
 <script lang="ts">
 	import { goto, invalidateAll } from '$app/navigation';
-	import { apiUrl } from '../../../../../../core/api/index.js';
-	import type { Directory } from '../../../../../../core/collections/upload/upload.js';
-	import type { BuiltCollectionClient } from '../../../../../../core/config/types.js';
-	import { PARAMS } from '../../../../../../core/constant.js';
-	import { withDirectoriesSuffix } from '../../../../../../core/naming.js';
-	import type { GenericDoc } from '../../../../../../core/types/doc.js';
-	import Button from '../../../../ui/button/button.svelte';
-	import ContextMenu from '../../../../ui/context-menu/ContextMenu.svelte';
-	import ContextMenuItem from '../../../../ui/context-menu/ContextMenuItem.svelte';
-	import * as Dialog from '../../../../ui/dialog/index.js';
-	import { API_PROXY, getAPIProxyContext } from '../../../../../context/api-proxy.svelte.js';
-	import { panelUrl } from '../../../../../util/url.js';
-	import { trycatchFetch } from '../../../../../../util/function.js';
+	import { apiUrl } from '../../../../../core/api/index.js';
+	import type { Directory } from '../../../../../core/collections/upload/upload.js';
+	import type { BuiltCollectionClient } from '../../../../../core/config/types.js';
+	import { PARAMS } from '../../../../../core/constant.js';
+	import { withDirectoriesSuffix } from '../../../../../core/naming.js';
+	import type { GenericDoc } from '../../../../../core/types/doc.js';
+	import Button from '../../../ui/button/button.svelte';
+	import ContextMenu from '../../../ui/context-menu/ContextMenu.svelte';
+	import ContextMenuItem from '../../../ui/context-menu/ContextMenuItem.svelte';
+	import * as Dialog from '../../../ui/dialog/index.js';
+	import { API_PROXY, getAPIProxyContext } from '../../../../context/api-proxy.svelte.js';
+	import { panelUrl } from '../../../../util/url.js';
+	import { trycatchFetch } from '../../../../../util/function.js';
+	import { Pencil, Trash2 } from '@lucide/svelte';
 	import { toast } from 'svelte-sonner';
-	import { t__ } from '../../../../../../core/i18n/index.js';
+	import { t__ } from '../../../../../core/i18n/index.js';
 	import Folder from './Folder.svelte';
 	import FolderEdit from './FolderEdit.svelte';
 
@@ -24,15 +25,23 @@
 		onDelete?: (path: string) => void;
 		onDocumentDrop: (args: { documentId: string; path: string }) => void;
 		draggable?: 'true';
+		display?: 'grid' | 'list';
 	};
-	const { folder, collection, onDelete, onDocumentDrop, draggable }: Props = $props();
+	const {
+		folder,
+		collection,
+		onDelete,
+		onDocumentDrop,
+		draggable,
+		display = 'grid'
+	}: Props = $props();
 
 	let deleteConfirmOpen = $state(false);
 	let editFolderDialogOpen = $state(false);
 	let message = $state('');
 	let rootElement = $state<HTMLButtonElement>();
 	let isDragging = $state(false);
-	const isRoot = $derived(folder.name === '...');
+	const isFolderUpperPath = $derived(folder.name === '...');
 	const APIProxy = getAPIProxyContext(API_PROXY.ROOT);
 	const childFilesURL = $derived(
 		`${apiUrl(collection.kebab)}?where[_path][equals]=${folder.id}&select=id`
@@ -144,7 +153,7 @@
 <button
 	bind:this={rootElement}
 	onclick={handleGoToFolder}
-	class="rz-folder"
+	class="rz-folder rz-folder--{display}"
 	class:rz-folder--dragging={isDragging}
 	ondragleave={handleDragLeave}
 	ondragover={!isDragging ? handleDragEnter : null}
@@ -153,7 +162,7 @@
 	draggable={draggable === 'true' ? 'true' : null}
 	ondragstart={draggable === 'true' ? handleDragStart : null}
 >
-	{#if !isRoot}
+	{#if !isFolderUpperPath}
 		<ContextMenu>
 			<!--  -->
 			{#snippet trigger()}
@@ -161,13 +170,19 @@
 			{/snippet}
 			<!--  -->
 			{#snippet content()}
-				<ContextMenuItem onclick={handleGetDeleteInfos}>Delete</ContextMenuItem>
-				<ContextMenuItem onclick={() => (editFolderDialogOpen = true)}>Edit</ContextMenuItem>
+				<ContextMenuItem onclick={handleGetDeleteInfos}>
+					<Trash2 size="12" /> Delete
+				</ContextMenuItem>
+				<ContextMenuItem onclick={() => (editFolderDialogOpen = true)}>
+					<Pencil size="12" /> Edit
+				</ContextMenuItem>
 			{/snippet}
 			<!--  -->
 		</ContextMenu>
 	{:else}
-		<Folder>{folder.name}</Folder>
+		<div>
+			<Folder>{folder.name}</Folder>
+		</div>
 	{/if}
 
 	<span></span>
@@ -200,7 +215,6 @@
 
 	.rz-folder {
 		width: 100%;
-		aspect-ratio: 4 / 5;
 		padding: var(--rz-size-5);
 		border-radius: var(--rz-radius-lg);
 
@@ -211,7 +225,34 @@
 		}
 	}
 
-	.rz-folder:hover {
+	.rz-folder.rz-folder--grid {
+		aspect-ratio: 4 / 5;
+	}
+	.rz-folder.rz-folder--list {
+		height: var(--rz-row-height);
+		padding: var(--rz-size-1-5);
+
+		:global {
+			> div {
+				padding: 0;
+				display: flex;
+				gap: var(--rz-size-4);
+				align-items: center;
+				justify-content: flex-start;
+				h3 {
+					font-size: var(--rz-text-md);
+				}
+				svg {
+					display: block;
+					height: auto;
+					width: 2rem;
+					transform: translateY(-0.12em);
+				}
+			}
+		}
+	}
+
+	.rz-folder.rz-folder--grid:hover {
 		background-color: var(--rz-folder-hover-bg);
 	}
 </style>

package/dist/panel/components/sections/collection/{grid/grid-item → folder}/FolderWithActions.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { Directory } from '../../../../../../core/collections/upload/upload.js';
-import type { BuiltCollectionClient } from '../../../../../../core/config/types.js';
+import type { Directory } from '../../../../../core/collections/upload/upload.js';
+import type { BuiltCollectionClient } from '../../../../../core/config/types.js';
 type Props = {
     folder: Directory;
     collection: BuiltCollectionClient;
@@ -9,6 +9,7 @@ type Props = {
         path: string;
     }) => void;
     draggable?: 'true';
+    display?: 'grid' | 'list';
 };
 declare const FolderWithActions: import("svelte").Component<Props, {}, "">;
 type FolderWithActions = ReturnType<typeof FolderWithActions>;

package/dist/panel/components/sections/collection/grid/CollectionGrid.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
+	import { t__ } from '../../../../../core/i18n/index.js';
+	import ContextMenu from '../../../ui/context-menu/ContextMenu.svelte';
+	import ContextMenuItem from '../../../ui/context-menu/ContextMenuItem.svelte';
 	import type { CollectionContext } from '../../../../context/collection.svelte.js';
+	import { FolderPlus } from '@lucide/svelte';
 	import Empty from '../Empty.svelte';
-	import Folder from './grid-item/FolderWithActions.svelte';
+	import Folder from '../folder/FolderWithActions.svelte';
+	import CreateDirectoryDialog from './create-directory-dialog/CreateDirectoryDialog.svelte';
 	import GridItem from './grid-item/GridItem.svelte';
 
 	type Props = { collection: CollectionContext };
 	const { collection }: Props = $props();
+	let createDirectoryDialogOpen = $state(false);
 
 	const currentPathDocuments = $derived(
 		collection.docs.filter((doc) => doc._path === collection.upload.currentPath)
@@ -15,6 +21,14 @@
 		collection.upload.directories = collection.upload.directories.filter((dir) => dir.id !== path);
 	}
 
+	const hasContentUnfiltered = $derived(
+		!collection.isFiltered &&
+			(collection.docs.length ||
+				collection.upload.directories.length ||
+				collection.upload.parentDirectory)
+	);
+	const hasDocsFiltered = $derived(collection.isFiltered && collection.docs.length);
+
 	/**
 	 * When a document is moved into a folder
 	 * change the document path inside collection.docs
@@ -34,37 +48,55 @@
 	);
 </script>
 
-{#if collection.docs.length || collection.upload.directories || collection.upload.parentDirectory}
+{#if hasContentUnfiltered || hasDocsFiltered}
 	<div class="rz-page-collection__grid">
-		<!-- Parent directory -->
-		{#if collection.upload.parentDirectory}
-			<Folder
-				{onDocumentDrop}
-				folder={{ ...collection.upload.parentDirectory, name: '...' }}
-				collection={collection.config}
-			/>
-		{/if}
-
-		<!-- All children directories -->
-		{#each collection.upload.directories as folder (folder.id)}
-			<Folder
-				draggable="true"
-				{onDocumentDrop}
-				{folder}
-				collection={collection.config}
-				onDelete={onDeleteFolder}
-			/>
-		{/each}
+		<div class="rz-page-collection__grid-inner">
+			<!-- Parent directory -->
+			{#if collection.upload.parentDirectory && !collection.isFiltered}
+				<Folder
+					{onDocumentDrop}
+					folder={{ ...collection.upload.parentDirectory, name: '...' }}
+					collection={collection.config}
+				/>
+			{/if}
 
-		<!-- All children docs -->
-		{#each currentPathDocuments as doc (doc.id)}
-			{@const checked = collection.selected.includes(doc.id)}
-			{#if dragEnabled}
-				<GridItem draggable="true" {doc} {checked} />
-			{:else}
-				<GridItem {doc} {checked} />
+			<!-- All children directories -->
+			{#if !collection.isFiltered}
+				{#each collection.upload.directories as folder (folder.id)}
+					<Folder
+						draggable="true"
+						{onDocumentDrop}
+						{folder}
+						collection={collection.config}
+						onDelete={onDeleteFolder}
+					/>
+				{/each}
 			{/if}
-		{/each}
+
+			<!-- All children docs -->
+			{#each currentPathDocuments as doc (doc.id)}
+				{@const checked = collection.selected.includes(doc.id)}
+				{#if dragEnabled}
+					<GridItem draggable="true" {doc} {checked} />
+				{:else}
+					<GridItem {doc} {checked} />
+				{/if}
+			{/each}
+
+			<ContextMenu>
+				{#snippet trigger()}
+					<div class="rz-collection-grid__context-menu-trigger"></div>
+				{/snippet}
+				{#snippet content()}
+					<ContextMenuItem onclick={() => (createDirectoryDialogOpen = true)}>
+						<FolderPlus size="14" />
+						{t__('common.create_folder')}
+					</ContextMenuItem>
+				{/snippet}
+			</ContextMenu>
+
+			<CreateDirectoryDialog {collection} bind:open={createDirectoryDialogOpen} />
+		</div>
 	</div>
 {:else}
 	<Empty {collection} />
@@ -72,8 +104,18 @@
 
 <style>
 	.rz-page-collection__grid {
+		position: relative;
+		min-height: calc(100vh - 16rem);
+		z-index: 0;
+	}
+	.rz-page-collection__grid-inner {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
 		gap: var(--rz-size-4);
 	}
+	.rz-collection-grid__context-menu-trigger {
+		position: absolute;
+		inset: 0;
+		z-index: -1;
+	}
 </style>

package/dist/panel/components/sections/collection/{header/create-folder/CreateFolder.svelte → grid/create-directory-dialog/CreateDirectoryDialog.svelte}

@@ -12,14 +12,13 @@
 		setDocumentFormContext,
 		type FormSuccessData
 	} from '../../../../../context/documentForm.svelte.js';
-	import { FolderPlus } from '@lucide/svelte';
 
-	type Props = { collection: CollectionContext };
-	const { collection }: Props = $props();
+	type Props = { collection: CollectionContext; open: boolean };
+	let { collection, open = $bindable() }: Props = $props();
 
 	const configCtx = getConfigContext();
 	const directoriesConfig = configCtx.getCollection(withDirectoriesSuffix(collection.config.slug));
-	let open = $state(false);
+
 	setAPIProxyContext(API_PROXY.DOCUMENT);
 	let formElement = $state<HTMLFormElement>();
 
@@ -60,19 +59,6 @@
 <svelte:window onkeydown={handleKeyDown} />
 
 <Dialog.Root bind:open>
-	<Dialog.Trigger>
-		{#snippet child(props)}
-			<Button
-				disabled={collection.selectMode}
-				onclick={() => (open = true)}
-				size="icon-sm"
-				variant="ghost"
-				{...props}
-			>
-				<FolderPlus size={17} />
-			</Button>
-		{/snippet}
-	</Dialog.Trigger>
 	<Dialog.Content class="rz-status-dialog">
 		{#snippet child({ props })}
 			<form use:form.enhance action={form.buildPanelActionUrl()} bind:this={formElement} {...props}>

package/dist/panel/components/sections/collection/grid/create-directory-dialog/CreateDirectoryDialog.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CollectionContext } from '../../../../../context/collection.svelte.js';
+type Props = {
+    collection: CollectionContext;
+    open: boolean;
+};
+declare const CreateDirectoryDialog: import("svelte").Component<Props, {}, "open">;
+type CreateDirectoryDialog = ReturnType<typeof CreateDirectoryDialog>;
+export default CreateDirectoryDialog;

package/dist/panel/components/sections/collection/header/Header.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { type CollectionContext } from '../../../../context/collection.svelte.js';
 	import { getContext } from 'svelte';
-	import CreateUploadFolder from './create-folder/CreateFolder.svelte';
 	import DisplayMode from './DisplayMode.svelte';
 	import SelectUI from './SelectUI.svelte';
 	import Separator from './Separator.svelte';
@@ -17,11 +16,6 @@
 	<DisplayMode />
 {/if}
 
-{#if collection.config.upload && collection.isGrid()}
-	<Separator />
-	<CreateUploadFolder {collection} />
-{/if}
-
 {#if showSelectUI}
 	<Separator />
 	<SelectUI />

package/dist/panel/components/sections/collection/header/SearchInput.svelte

@@ -6,54 +6,55 @@
 	import { getContext } from 'svelte';
 
 	const collection = getContext<CollectionContext>('rime.collectionList');
-	let filterValue = $state('');
+	let searchValue = $state('');
 
 	$effect(() => {
-		collection.filterBy(filterValue);
+		collection.filterBy(searchValue);
 	});
 </script>
 
 <div class="rz-header-search-input">
-	<div class="rz-header-search-input__icon">
-		<Search size={16} />
-	</div>
 	<Input
-		class="rz-header-search-input__input"
+		name="search"
+		icon={Search}
 		placeholder={t__('common.search', `${collection.length} document(s)`)}
 		type="text"
-		bind:value={filterValue}
+		bind:value={searchValue}
 	/>
 </div>
 
-<style>
-	.rz-header-search-input {
+<style>/**************************************/
+
+/* Font */
+
+/**************************************/
+
+.rz-header-search-input {
 		position: relative;
 		display: none;
 		height: var(--rz-size-11);
 		align-items: center;
 		width: var(--rz-size-80);
 
-		& :global(.rz-input) {
-			height: var(--rz-size-9);
-			width: 100%;
-			padding-left: var(--rz-size-12);
-			font-size: var(--rz-text-sm);
-			&:focus-visible {
-				box-shadow:
+		:global {
+			.rz-input {
+				height: var(--rz-size-9);
+				font-size: var(--rz-text-sm);
+			}
+			.rz-input-wrapper {
+				width: 100%;
+				&:focus-visible {
+					box-shadow:
 		0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
 		0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-ring) / var(--rz-ring-opacity, 1));
+				}
 			}
 		}
 	}
 
-	@container (min-width: 720px) {
+@container (min-width: 720px) {
 		.rz-header-search-input {
 			display: flex;
 		}
 	}
-
-	.rz-header-search-input__icon {
-		position: absolute;
-		left: var(--rz-size-3);
-	}
 </style>

package/dist/panel/components/sections/collection/header/SelectUI.svelte

@@ -24,13 +24,26 @@
 
 	{#if collection.selectMode}
 		{#if collection.isAllSelected}
-			<Button variant="text" icon={SquareMinus} onclick={() => (collection.selected = [])}>Deselect All</Button>
+			<Button
+				variant="text"
+				size="sm"
+				icon={SquareMinus}
+				onclick={() => (collection.selected = [])}
+			>
+				Deselect All
+			</Button>
 		{:else}
-			<Button variant="text" icon={SquareCheck} onclick={collection.selectAll}>
+			<Button variant="text" size="sm" icon={SquareCheck} onclick={collection.selectAll}>
 				{t__('common.select_all')}
 			</Button>
 		{/if}
-		<Button disabled={selectedCount === 0} icon={Trash} variant="text" onclick={collection.deleteSelection}>
+		<Button
+			disabled={selectedCount === 0}
+			size="sm"
+			icon={Trash}
+			variant="text"
+			onclick={collection.deleteSelection}
+		>
 			{t__('common.delete', `${selectedCount} doc${pluralSuffix}`)}
 		</Button>
 	{/if}

package/dist/panel/components/sections/collection/list/CollectionList.svelte

@@ -1,15 +1,48 @@
 <script lang="ts">
 	import type { CollectionContext } from '../../../../context/collection.svelte.js';
 	import Empty from '../Empty.svelte';
+	import Folder from '../folder/FolderWithActions.svelte';
 	import Row from './row/Row.svelte';
-
 	type Props = { collection: CollectionContext };
 	const { collection }: Props = $props();
+
+	const documents = $derived.by(() => {
+		return collection.isUpload
+			? collection.docs.filter((doc) => doc._path === collection.upload.currentPath)
+			: collection.docs;
+	});
+
+	function onDeleteFolder(path: string) {
+		collection.upload.directories = collection.upload.directories.filter((dir) => dir.id !== path);
+	}
 </script>
 
 {#if collection.docs.length}
 	<div class="rz-page-collection__list">
-		{#each collection.docs as doc, index (index)}
+		<!-- Parent directory -->
+		{#if collection.isUpload && collection.upload.parentDirectory && !collection.isFiltered}
+			<Folder
+				onDocumentDrop={() => {}}
+				folder={{ ...collection.upload.parentDirectory, name: '...' }}
+				display="list"
+				collection={collection.config}
+			/>
+		{/if}
+
+		{#if !collection.isFiltered && collection.isUpload}
+			{#each collection.upload.directories as folder (folder.id)}
+				<Folder
+					draggable="true"
+					onDocumentDrop={() => {}}
+					{folder}
+					collection={collection.config}
+					display="list"
+					onDelete={onDeleteFolder}
+				/>
+			{/each}
+		{/if}
+
+		{#each documents as doc, index (index)}
 			{@const checked = collection.selected.includes(doc.id)}
 			<Row {doc} {checked} />
 		{/each}

package/dist/panel/components/sections/document/Document.svelte

@@ -204,13 +204,19 @@
 	</Dialog.Root>
 </form>
 
-<style>
-	.rz-document {
+<style>/**************************************/
+
+/* Font */
+
+/**************************************/
+
+.rz-document {
 		container: rz-document / inline-size;
 		min-height: 100vh;
 		position: relative;
 	}
-	.rz-document__fields {
+
+.rz-document__fields {
 		display: grid;
 		gap: var(--rz-size-4);
 		min-height: calc(100vh - var(--rz-size-14));
@@ -220,17 +226,18 @@
 		padding: var(--rz-size-5) var(--rz-page-gutter);
 		padding-bottom: var(--rz-size-24);
 	}
-	.rz-document__infos {
+
+.rz-document__infos {
 		border-top: var(--rz-border);
-		padding-left: var(--rz-page-gutter);
-		padding-right: var(--rz-page-gutter);
-		padding-top: var(--rz-size-6);
-		padding-bottom: var(--rz-size-6);
+		padding-inline: var(--rz-page-gutter);
+		padding-block: var(--rz-size-6);
 	}
-	.rz-document__metas {
+
+.rz-document__metas {
 		font-size: var(--rz-text-xs);
 	}
-	.rz-document__metas span {
+
+.rz-document__metas span {
 		font-variation-settings: 'wght' 600;
 		font-weight: 600;
 	}

package/dist/panel/components/sections/document/upload-header/UploadHeader.svelte

@@ -105,20 +105,25 @@
 	{/if}
 </div>
 
-<style>
-	.rz-doc-upload-header {
+<style>/**************************************/
+
+/* Font */
+
+/**************************************/
+
+.rz-doc-upload-header {
 		container: inline-size;
 		padding: 0 var(--rz-fields-padding);
 	}
 
-	.rz-doc-upload-header__file {
+.rz-doc-upload-header__file {
 		min-height: 250px;
 		border: var(--rz-border);
 		overflow: hidden;
 		border-radius: var(--radius-md);
 	}
 
-	.rz-doc-upload-header__preview {
+.rz-doc-upload-header__preview {
 		width: 100%;
 		display: flex;
 		align-items: center;
@@ -131,7 +136,7 @@
 		border-top-left-radius: var(--rz-radius-md);
 	}
 
-	@container (min-width:28rem) {
+@container (min-width:28rem) {
 		.rz-doc-upload-header__file {
 			display: flex;
 		}
@@ -142,12 +147,11 @@
 			border-bottom-left-radius: var(--rz-radius-md);
 		}
 		.rz-doc-upload-header__info {
-			padding-left: var(--rz-size-8);
-			padding-right: var(--rz-size-8);
+			padding-inline: var(--rz-size-8);
 		}
 	}
 
-	.rz-doc-upload-header__prewiew-grid {
+.rz-doc-upload-header__prewiew-grid {
 		width: 100%;
 		height: 100%;
 		--dark: hsl(var(--rz-gray-11) / 1);
@@ -195,35 +199,37 @@
 			0 var(--half-size);
 	}
 
-	.rz-doc-upload-header__prewiew-grid img {
+.rz-doc-upload-header__prewiew-grid img {
 		height: 100%;
 		width: 100%;
 		-o-object-fit: contain;
 		   object-fit: contain;
 	}
 
-	.rz-doc-upload-header__info {
+.rz-doc-upload-header__info {
 		flex: 1;
 		font-size: var(--rz-text-sm);
-		padding-left: var(--rz-size-4);
-		padding-right: var(--rz-size-4);
-		padding-top: var(--rz-size-4);
-		padding-bottom: var(--rz-size-4);
+		padding-inline: var(--rz-size-4);
+		padding-block: var(--rz-size-4);
 	}
-	.rz-doc-upload-header__info h4 {
+
+.rz-doc-upload-header__info h4 {
 		opacity: 0.4;
 		margin-bottom: var(--rz-size-1);
 		font-size: var(--rz-text-xs);
 	}
-	.rz-doc-upload-header__info a {
+
+.rz-doc-upload-header__info a {
 		margin-bottom: var(--rz-size-3);
 		display: block;
 		text-decoration: underline;
 	}
-	.rz-doc-upload-header__info p {
+
+.rz-doc-upload-header__info p {
 		margin-bottom: var(--rz-size-3);
 	}
-	.rz-doc-upload-header__prewiew-file {
+
+.rz-doc-upload-header__prewiew-file {
 		display: flex;
 		flex-direction: column;
 		align-items: center;