includio-cms 0.0.42 → 0.0.44

package/dist/admin/components/media/media-library.svelte

@@ -14,6 +14,7 @@
 	import { getInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 	import Skeleton from '../../../components/ui/skeleton/skeleton.svelte';
+	import TagCombobox from './tag-combobox.svelte';
 
 	const lang: Record<
 		InterfaceLanguage,
@@ -21,7 +22,6 @@
 			fileDeletedToast: string;
 			allTabs: string;
 			fileDeleteLabel: string;
-			fileTagLabel: string;
 			fileNameLabel: string;
 			fileUrlLabel: string;
 			fileAltLabel: string;
@@ -31,7 +31,6 @@
 	> = {
 		pl: {
 			fileDeleteLabel: 'Usuń plik',
-			fileTagLabel: 'Tag',
 			fileNameLabel: 'Nazwa',
 			fileUrlLabel: 'URL',
 			fileAltLabel: 'Tekst alternatywny',
@@ -42,7 +41,6 @@
 		},
 		en: {
 			fileDeleteLabel: 'Delete file',
-			fileTagLabel: 'Tag',
 			fileNameLabel: 'Name',
 			fileUrlLabel: 'URL',
 			fileAltLabel: 'Alt text',
@@ -76,7 +74,7 @@
 		})
 	);
 
-	let folders = $derived(await remotes.getMediaFolders());
+	let foldersQuery = $derived(remotes.getMediaFolders());
 
 	async function deleteFileCommand() {
 		if (currentFile) {
@@ -87,6 +85,15 @@
 		}
 	}
 
+	async function onTagUpdate(folderId: string) {
+		if (currentFile) {
+			await remotes.setMediaFileFolder({ folderId, fileId: currentFile.id });
+			currentFile = { ...currentFile, folderId };
+			await foldersQuery.refresh();
+			await filesQuery.refresh();
+		}
+	}
+
 	onMount(() => {
 		if (Array.isArray(selected)) {
 			selected = selected.filter((id) => !id.startsWith('/uploads'));
@@ -96,29 +103,45 @@
 	});
 </script>
 
+{#snippet filePreview(file: MediaFile)}
+	{#if file.type === 'image'}
+		<img class="pointer-events-none h-full w-full object-contain" src={file.url} alt={file.name} />
+	{:else if file.type === 'video'}
+		<img
+			class="pointer-events-none h-full w-full object-contain"
+			src={file.thumbnailUrl}
+			alt={file.name}
+		/>
+	{:else}
+		<Pdf class="pointer-events-none h-full w-full  object-contain" />
+	{/if}
+{/snippet}
+
 <div class="flex gap-6 p-6">
 	<div class="grow">
 		<div class="mb-6 flex items-center justify-between">
 			<div>
-				<Tabs.Root
-					value="all"
-					onValueChange={(val) => {
-						if (val === 'all') {
-							selectedFolder = null;
-						} else {
-							selectedFolder = val;
-						}
-					}}
-				>
-					<Tabs.List>
-						<Tabs.Trigger value="all">{lang[interfaceLanguage.current].allTabs}</Tabs.Trigger>
-						{#each folders as folder}
-							{#if !folder.parentId}
-								<Tabs.Trigger value={folder.id}>{folder.name}</Tabs.Trigger>
-							{/if}
-						{/each}
-					</Tabs.List>
-				</Tabs.Root>
+				{#await foldersQuery then folders}
+					<Tabs.Root
+						value="all"
+						onValueChange={(val) => {
+							if (val === 'all') {
+								selectedFolder = null;
+							} else {
+								selectedFolder = val;
+							}
+						}}
+					>
+						<Tabs.List>
+							<Tabs.Trigger value="all">{lang[interfaceLanguage.current].allTabs}</Tabs.Trigger>
+							{#each folders as folder}
+								{#if !folder.parentId}
+									<Tabs.Trigger value={folder.id}>{folder.name}</Tabs.Trigger>
+								{/if}
+							{/each}
+						</Tabs.List>
+					</Tabs.Root>
+				{/await}
 			</div>
 			<div class="flex items-center gap-2">
 				<FileUpload
@@ -157,21 +180,7 @@
 								}
 							}}
 						>
-							{#if file.type === 'image'}
-								<img
-									class="pointer-events-none h-full w-full object-contain"
-									src={file.url}
-									alt={file.name}
-								/>
-							{:else if file.type === 'video'}
-								<img
-									class="pointer-events-none h-full w-full object-contain"
-									src={file.thumbnailUrl}
-									alt={file.name}
-								/>
-							{:else}
-								<Pdf class="pointer-events-none h-full w-full  object-contain" />
-							{/if}
+							{@render filePreview(file)}
 						</button>
 					{/each}
 				{/await}
@@ -179,7 +188,7 @@
 		</div>
 	</div>
 
-	<div class="w-[25.375rem] shrink-0">
+	<div class="w-101.5 shrink-0">
 		<Item.Root class="sticky top-6 p-0" variant="outline">
 			<Item.Content class="h-full">
 				{#key currentFile}
@@ -199,20 +208,14 @@
 								<div
 									class="aspect-square w-[40.2%] shrink-0 overflow-hidden rounded-2xl border p-1"
 								>
-									<img
-										src={currentFile.url}
-										alt={currentFile.name}
-										class="size-full rounded-lg object-contain"
-									/>
+									<div class="size-full overflow-hidden rounded-lg">
+										{@render filePreview(currentFile)}
+									</div>
 								</div>
 								<div class="mr-2.5 w-[50.2%] shrink-0 space-y-4">
-									<div class="grid grid-cols-1 gap-2">
-										<Label>{lang[interfaceLanguage.current].fileTagLabel}</Label>
-										<Input
-											disabled
-											value={folders.find((folder) => folder.id === currentFile?.folderId)?.name}
-										/>
-									</div>
+									{#await foldersQuery then folders}
+										<TagCombobox {folders} onSelect={onTagUpdate} value={currentFile.folderId} />
+									{/await}
 									<div class="grid grid-cols-1 gap-2">
 										<Label>{lang[interfaceLanguage.current].fileNameLabel}</Label>
 										<Input disabled value={currentFile.name} />

package/dist/admin/components/media/tag-combobox.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+	import * as Popover from '../../../components/ui/popover/index.js';
+	import * as Command from '../../../components/ui/command/index.js';
+	import Label from '../../../components/ui/label/label.svelte';
+	import type { MediaFolder } from '../../../types/media.js';
+	import { tick } from 'svelte';
+	import Button from '../../../components/ui/button/button.svelte';
+	import SelectorIcon from '@tabler/icons-svelte/icons/selector';
+	import { cn } from '../../../utils.js';
+	import CheckIcon from '@tabler/icons-svelte/icons/check';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
+	import { getInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getRemotes } from '../../../sveltekit/index.js';
+
+	const lang: Record<
+		InterfaceLanguage,
+		{
+			label: string;
+			placeholder: string;
+			empty: string;
+		}
+	> = {
+		pl: {
+			label: 'Ustaw tag',
+			placeholder: 'Wybierz tag...',
+			empty: 'Brak dostępnych tagów o takiej nazwie. Moesz go dodać klikając Enter.'
+		},
+		en: {
+			label: 'Set tag',
+			placeholder: 'Select tag...',
+			empty: 'No tags found with that name. You can add it by pressing Enter.'
+		}
+	};
+
+	const interfaceLanguage = getInterfaceLanguage();
+	const remotes = getRemotes();
+
+	type Props = {
+		folders: MediaFolder[];
+		onSelect?: (folderId: string) => void;
+		value: string | null;
+	};
+
+	let { onSelect, folders, value }: Props = $props();
+
+	let open = $state(false);
+	let triggerRef = $state<HTMLButtonElement>(null!);
+
+	const selectedValue = $derived(folders.find((f) => f.id === value)?.name);
+
+	// We want to refocus the trigger button when the user selects
+	// an item from the list so users can continue navigating the
+	// rest of the form with the keyboard.
+	function closeAndFocusTrigger() {
+		open = false;
+		tick().then(() => {
+			triggerRef.focus();
+		});
+	}
+
+	async function handleKeyDown(event: KeyboardEvent) {
+		const target = event.target as HTMLInputElement;
+
+		if (event.key === 'Enter') {
+			const existingFolder = folders.find(
+				(folder) => folder.name.toLowerCase() === target.value.toLowerCase()
+			);
+
+			if (existingFolder) {
+				value = existingFolder.id;
+			} else {
+				const newFolder = await remotes.createFolder({
+					name: target.value
+				});
+
+				folders = [...folders, newFolder];
+				value = newFolder.id;
+
+				closeAndFocusTrigger();
+				onSelect?.(newFolder.id);
+			}
+		}
+	}
+</script>
+
+<div class="grid grid-cols-1 gap-2">
+	<Label>Tag</Label>
+	<Popover.Root bind:open>
+		<Popover.Trigger bind:ref={triggerRef}>
+			{#snippet child({ props })}
+				<Button
+					{...props}
+					variant="outline"
+					class="w-full justify-between"
+					role="combobox"
+					aria-expanded={open}
+				>
+					{selectedValue || lang[interfaceLanguage.current].label}
+					<SelectorIcon class="opacity-50" />
+				</Button>
+			{/snippet}
+		</Popover.Trigger>
+		<Popover.Content class="w-[200px] p-0">
+			<Command.Root>
+				<Command.Input
+					onkeydown={handleKeyDown}
+					placeholder={lang[interfaceLanguage.current].placeholder}
+				/>
+				<Command.List>
+					<Command.Empty>{lang[interfaceLanguage.current].empty}</Command.Empty>
+					<Command.Group value="folders">
+						{#each folders as folder (folder.id)}
+							<Command.Item
+								value={folder.id}
+								onSelect={() => {
+									value = folder.id;
+									closeAndFocusTrigger();
+									onSelect?.(folder.id);
+								}}
+							>
+								<CheckIcon class={cn(value !== folder.id && 'text-transparent')} />
+								{folder.name}
+							</Command.Item>
+						{/each}
+					</Command.Group>
+				</Command.List>
+			</Command.Root>
+		</Popover.Content>
+	</Popover.Root>
+</div>

package/dist/admin/components/media/tag-combobox.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { MediaFolder } from '../../../types/media.js';
+type Props = {
+    folders: MediaFolder[];
+    onSelect?: (folderId: string) => void;
+    value: string | null;
+};
+declare const TagCombobox: import("svelte").Component<Props, {}, "">;
+type TagCombobox = ReturnType<typeof TagCombobox>;
+export default TagCombobox;

package/dist/admin/components/media/utils.d.ts

@@ -0,0 +1,3 @@
+import type { ImageFieldData } from '../../../types/fields.js';
+import type { MediaFile } from '../../../types/media.js';
+export declare function isProperImageObject(file: ImageFieldData | MediaFile): file is ImageFieldData;

package/dist/admin/components/media/utils.js

@@ -0,0 +1,3 @@
+export function isProperImageObject(file) {
+    return 'data' in file;
+}

package/dist/admin/remote/media.remote.d.ts

@@ -7,10 +7,14 @@ export declare const setMediaFileAlt: import("@sveltejs/kit").RemoteCommand<{
     alt: string | null;
     fileId: string;
 }, Promise<void>>;
+export declare const setMediaFileFolder: import("@sveltejs/kit").RemoteCommand<{
+    folderId: string | null;
+    fileId: string;
+}, Promise<import("../../types/media.js").MediaFile>>;
 export declare const createFolder: import("@sveltejs/kit").RemoteCommand<{
     name: string;
     parentId?: string | null | undefined;
-}, Promise<void>>;
+}, Promise<import("../../types/media.js").MediaFolder>>;
 export declare const getMedia: import("@sveltejs/kit").RemoteQueryFunction<void, import("../../types/media.js").MediaFile[]>;
 export declare const getMediaFiles: import("@sveltejs/kit").RemoteQueryFunction<{
     data: {

package/dist/admin/remote/media.remote.js

@@ -1,5 +1,5 @@
 import { command, query } from '$app/server';
-import { setAlt } from '../../core/server/media/operations/updateFile.js';
+import { setAlt, updateMediaFileFolder } from '../../core/server/media/operations/updateFile.js';
 import z from 'zod';
 import { createFolderSchema } from '../components/media/schema.js';
 import { createMediaFolder } from '../../core/server/media/operations/createMediaFolder.js';
@@ -26,9 +26,17 @@ export const setMediaFileAlt = command(setMediaFileAltSchema, async ({ fileId, a
     requireAuth();
     await setAlt(fileId, alt);
 });
+const setMediaFolderSchema = z.object({
+    fileId: z.string().uuid(),
+    folderId: z.string().uuid().nullable()
+});
+export const setMediaFileFolder = command(setMediaFolderSchema, async ({ fileId, folderId }) => {
+    requireAuth();
+    return updateMediaFileFolder(fileId, folderId);
+});
 export const createFolder = command(createFolderSchema, async (data) => {
     requireAuth();
-    await createMediaFolder(data.name, data.parentId);
+    return createMediaFolder(data.name, data.parentId);
 });
 export const getMedia = query(async () => {
     return getFiles({

package/dist/core/server/media/operations/updateFile.d.ts

@@ -1,2 +1,3 @@
 import type { MediaFile } from '../../../../types/media.js';
 export declare function setAlt(fileId: string, alt: string | null): Promise<MediaFile>;
+export declare function updateMediaFileFolder(fileId: string, folderId: string | null): Promise<MediaFile>;

package/dist/core/server/media/operations/updateFile.js

@@ -5,3 +5,9 @@ export async function setAlt(fileId, alt) {
         data: { alt }
     });
 }
+export async function updateMediaFileFolder(fileId, folderId) {
+    return getCMS().databaseAdapter.updateMediaFile({
+        id: fileId,
+        data: { folderId }
+    });
+}

package/dist/db-postgres/index.js

@@ -240,7 +240,7 @@ export function pg(config) {
                     ? inArray(schema.mediaFilesTable.mimeType, options.data.mimeTypes)
                     : undefined));
             }
-            return await query;
+            return await query.orderBy(desc(schema.mediaFilesTable.createdAt));
         },
         getMediaFile: async (options) => {
             const query = db.select().from(schema.mediaFilesTable);

package/dist/files-local/index.js

@@ -4,6 +4,11 @@ import { readFile, writeFile } from 'node:fs/promises';
 import sharp from 'sharp';
 import ffmpeg from 'fluent-ffmpeg';
 const fullDir = process.env.NODE_ENV === 'production' ? `/data/uploads` : `./static/uploads`;
+// Ustawienie ścieżek do ffmpeg
+const ffmpegPath = process.env.FFMPEG_PATH || '/usr/bin/ffmpeg';
+const ffprobePath = process.env.FFPROBE_PATH || '/usr/bin/ffprobe';
+ffmpeg.setFfmpegPath(ffmpegPath);
+ffmpeg.setFfprobePath(ffprobePath);
 // Funkcja pomocnicza do przetwarzania wideo
 async function processVideo(filepath, filename) {
     return new Promise((resolve) => {

package/dist/sveltekit/components/image.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+	import { isProperImageObject } from '../../admin/components/media/utils.js';
 	import type { ImageFieldData } from '../../types/fields.js';
+	import type { MediaFile } from '../../types/media.js';
 	import type { HTMLImgAttributes } from 'svelte/elements';
 
 	type Props = HTMLImgAttributes & {
-		data: ImageFieldData;
+		data: ImageFieldData | MediaFile;
 		pictureClass?: string;
 	};
 
@@ -17,17 +19,29 @@
 </script>
 
 <picture class={pictureClass}>
-	{#each Object.values(data.styles) as style}
-		<source srcset={style.url} type={style.mimeType} media={style.media} />
-	{/each}
+	{#if isProperImageObject(data)}
+		{#each Object.values(data.styles) as style}
+			<source srcset={style.url} type={style.mimeType} media={style.media} />
+		{/each}
 
-	<img
-		src={data.data.url}
-		alt={data.data.alt}
-		width={data.data.width}
-		height={data.data.height}
-		class={className}
-		{loading}
-		{...restProps}
-	/>
+		<img
+			src={data.data.url}
+			alt={data.data.alt}
+			width={data.data.width}
+			height={data.data.height}
+			class={className}
+			{loading}
+			{...restProps}
+		/>
+	{:else}
+		<img
+			src={data.url}
+			alt={data.alt}
+			width={data.width}
+			height={data.height}
+			class={className}
+			{loading}
+			{...restProps}
+		/>
+	{/if}
 </picture>

package/dist/sveltekit/components/image.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { ImageFieldData } from '../../types/fields.js';
+import type { MediaFile } from '../../types/media.js';
 import type { HTMLImgAttributes } from 'svelte/elements';
 type Props = HTMLImgAttributes & {
-    data: ImageFieldData;
+    data: ImageFieldData | MediaFile;
     pictureClass?: string;
 };
 declare const Image: import("svelte").Component<Props, {}, "">;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "includio-cms",
-	"version": "0.0.42",
+	"version": "0.0.44",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",

package/dist/admin/components/media/create-folder.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">
-	import { defaults, superForm } from 'sveltekit-superforms';
-	import { zod, zodClient } from 'sveltekit-superforms/adapters';
-	import { createFolderSchema } from './schema.js';
-	import { getRemotes } from '../../context/remotes.js';
-
-	const remotes = getRemotes();
-
-	type Props = {
-		parentId?: string | null;
-	};
-
-	let { parentId = $bindable(null) }: Props = $props();
-
-	const form = superForm(defaults(zod(createFolderSchema)), {
-		validators: zodClient(createFolderSchema),
-		SPA: true,
-		onUpdate: async ({ form }) => {
-			if (form.valid) {
-				await remotes.createFolder(form.data);
-				remotes.getMedia().refresh();
-			}
-		}
-	});
-
-	const { form: formData, enhance } = form;
-</script>
-
-<form use:enhance method="POST">
-	<input bind:value={$formData.name} placeholder="Nazwa folderu" required />
-	<button type="submit">Utwórz folder</button>
-</form>

package/dist/admin/components/media/create-folder.svelte.d.ts

@@ -1,6 +0,0 @@
-type Props = {
-    parentId?: string | null;
-};
-declare const CreateFolder: import("svelte").Component<Props, {}, "parentId">;
-type CreateFolder = ReturnType<typeof CreateFolder>;
-export default CreateFolder;

package/dist/admin/components/media/folder-tree.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-	import { getRemotes } from '../../context/remotes.js';
-	import TreeNode from './tree-node.svelte';
-
-	const remotes = getRemotes();
-
-	type Props = {
-		selected: string | null;
-		onSelect: (id: string | null) => void;
-	};
-
-	let { selected = $bindable(), onSelect }: Props = $props();
-</script>
-
-{#await remotes.getMediaFolders() then folders}
-	<ul>
-		<li on:click={() => onSelect(null)} class:selected={selected === null}>📁 Wszystkie</li>
-		{#each folders as folder}
-			{#if !folder.parentId}
-				<TreeNode {folder} bind:selected {onSelect} {folders} />
-			{/if}
-		{/each}
-	</ul>
-{/await}

package/dist/admin/components/media/folder-tree.svelte.d.ts

@@ -1,7 +0,0 @@
-type Props = {
-    selected: string | null;
-    onSelect: (id: string | null) => void;
-};
-declare const FolderTree: import("svelte").Component<Props, {}, "selected">;
-type FolderTree = ReturnType<typeof FolderTree>;
-export default FolderTree;

package/dist/admin/components/media/tree-node.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">
-	import type { MediaFolder } from '../../../types/media.js';
-	import TreeNode from './tree-node.svelte';
-
-	type Props = {
-		folder: MediaFolder;
-		selected: string | null;
-		onSelect: (id: string | null) => void;
-		folders: MediaFolder[];
-		level?: number;
-	};
-
-	let { folder, selected = $bindable(), onSelect, folders, level = 0 }: Props = $props();
-
-	let children = getChildren(folder.id, folders);
-
-	function getChildren(parentId: string | null, all: MediaFolder[]) {
-		return all.filter((f) => f.parentId === parentId);
-	}
-</script>
-
-<li>
-	<div onclick={() => onSelect(folder.id)} class:selected={selected === folder.id}>
-		📁 {folder.name}
-	</div>
-	{#if children.length}
-		<ul style:margin-left={`${level * 12}px`}>
-			{#each children as child}
-				<TreeNode folder={child} {selected} {onSelect} {folders} level={level + 1} />
-			{/each}
-		</ul>
-	{/if}
-</li>
-
-<style>
-	.selected {
-		font-weight: bold;
-		color: blue;
-	}
-</style>

package/dist/admin/components/media/tree-node.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { MediaFolder } from '../../../types/media.js';
-import TreeNode from './tree-node.svelte';
-type Props = {
-    folder: MediaFolder;
-    selected: string | null;
-    onSelect: (id: string | null) => void;
-    folders: MediaFolder[];
-    level?: number;
-};
-declare const TreeNode: import("svelte").Component<Props, {}, "selected">;
-type TreeNode = ReturnType<typeof TreeNode>;
-export default TreeNode;