improved preview

website/src/lib/components/explorer/ExplorerRow.svelte

@@ -228,6 +228,10 @@
 
 <ContextMenu.Root
     onOpenChange={(open) => {
+        if (open && fileId !== undefined) {
+            // the file is open for good once its menu is
+            engine.keepPreview([fileId]);
+        }
         if (open && !selected && kind !== 'root') {
             select([path]);
         }

website/src/lib/components/file-list/FileListNodeLabel.svelte

@@ -19,7 +19,7 @@
         FileStack,
         FileX,
     } from '@lucide/svelte';
-    import { getContext } from 'svelte';
+    import { getContext, untrack } from 'svelte';
     import { i18n } from '$lib/i18n/i18n.svelte';
     import MetadataDialog from '$lib/components/file-list/metadata/MetadataDialog.svelte';
     import { editMetadata } from '$lib/components/file-list/metadata/utils.svelte';
@@ -94,6 +94,12 @@
             selected &&
             selectedElementIds($selection)[0]?.ids[0] === elementId(node)
     );
+    $effect(() => {
+        // the file is open for good once its info or its appearance is (the desktop app)
+        if (openEditMetadata || openEditStyle) {
+            untrack(() => engine.keepPreview([node.fileId]));
+        }
+    });
 
     // the desktop app: the files are linked to the file system, they are closed rather than deleted
     let desktop = $derived($workspace !== undefined);
@@ -114,6 +120,8 @@
 <ContextMenu.Root
     onOpenChange={(open) => {
         if (open) {
+            // the file is open for good once its menu is (the desktop app)
+            engine.keepPreview([node.fileId]);
             if (!selected) {
                 engine.selectNode(node);
             }

website/src/lib/components/file-list/sortable-file-list.ts

@@ -69,10 +69,12 @@ export class SortableFileList {
                 setTimeout(() => this.updateToSelection(e), 50),
             onDeselect: (e: Sortable.SortableEvent) =>
                 setTimeout(() => this.updateToSelection(e), 50),
-            onStart: () => {
+            onStart: (e: Sortable.SortableEvent) => {
                 // all the nodes, not only the elements: the comments are the anchors of the Svelte blocks
                 this._snapshot = Array.from(container.childNodes);
                 dragging.set(sortableLevel);
+                // the files that are dragged (or whose elements are) are open for good
+                engine.keepPreview(this.draggedFiles(e));
             },
             onEnd: () => dragging.set(null),
             onSort: (e: Sortable.SortableEvent) => this.onSort(e),
@@ -84,6 +86,17 @@ export class SortableFileList {
         );
     }
 
+    /** The files of what is dragged: the dragged files, or the file of the dragged elements. */
+    private draggedFiles(e: Sortable.SortableEvent): string[] {
+        if (this._parent) {
+            return [this._parent.fileId];
+        }
+        const elements: HTMLElement[] = e.items.length > 0 ? e.items : [e.item];
+        return elements
+            .map((element) => element.getAttribute('data-id'))
+            .filter((id): id is string => id !== null);
+    }
+
     /** The node of a child of the list. */
     childNode(id: string): FileTreeNode | undefined {
         const parent = this._parent;