fix metadata and style dialogs

website/src/lib/components/file-list/metadata/MetadataDialog.svelte

@@ -4,12 +4,12 @@
     import { Textarea } from '$lib/components/ui/textarea';
     import { Label } from '$lib/components/ui/label/index.js';
     import * as Popover from '$lib/components/ui/popover';
-    import { dbUtils } from '$lib/db';
     import { Save } from '@lucide/svelte';
     import { ListFileItem, ListTrackItem, type ListItem } from '../file-list';
     import { GPXTreeElement, Track, type AnyGPXTreeElement, Waypoint, GPXFile } from 'gpx';
     import { i18n } from '$lib/i18n.svelte';
     import { editMetadata } from '$lib/components/file-list/metadata/utils.svelte';
+    import { fileActionManager } from '$lib/logic/file-action-manager';
 
     let {
         node,
@@ -53,7 +53,7 @@
         <Button
             variant="outline"
             onclick={() => {
-                dbUtils.applyToFile(item.getFileId(), (file) => {
+                fileActionManager.applyToFile(item.getFileId(), (file) => {
                     if (item instanceof ListFileItem && node instanceof GPXFile) {
                         file.metadata.name = name;
                         file.metadata.desc = description;

website/src/lib/components/file-list/style/StyleDialog.svelte

@@ -4,7 +4,6 @@
     import { Label } from '$lib/components/ui/label/index.js';
     import { Slider } from '$lib/components/ui/slider';
     import * as Popover from '$lib/components/ui/popover';
-    import { dbUtils, getFile, settings } from '$lib/db';
     import { Save } from '@lucide/svelte';
     import {
         ListFileItem,
@@ -12,10 +11,14 @@
         type ListItem,
     } from '$lib/components/file-list/file-list';
     import { editStyle } from '$lib/components/file-list/style/utils.svelte';
-    import { selection } from '../Selection';
-    import { gpxLayers } from '$lib/stores';
     import { i18n } from '$lib/i18n.svelte';
     import type { LineStyleExtension } from 'gpx';
+    import { settings } from '$lib/logic/settings';
+    import { selection } from '$lib/logic/selection';
+    import { fileStateCollection } from '$lib/logic/file-state';
+    import { gpxLayers } from '$lib/components/map/gpx-layer/gpx-layers';
+    import { untrack } from 'svelte';
+    import { fileActions } from '$lib/logic/file-actions';
 
     let {
         item,
@@ -40,8 +43,8 @@
 
         $selection.forEach((item) => {
             if (item instanceof ListFileItem) {
-                let file = getFile(item.getFileId());
+                let file = fileStateCollection.getFile(item.getFileId());
-                let layer = gpxLayers.get(item.getFileId());
+                let layer = gpxLayers.getLayer(item.getFileId());
                 if (file && layer) {
                     let style = file.getStyle();
                     color = layer.layerColor;
@@ -53,8 +56,8 @@
                     }
                 }
             } else if (item instanceof ListTrackItem) {
-                let file = getFile(item.getFileId());
+                let file = fileStateCollection.getFile(item.getFileId());
-                let layer = gpxLayers.get(item.getFileId());
+                let layer = gpxLayers.getLayer(item.getFileId());
                 if (file && layer) {
                     color = layer.layerColor;
                     let track = file.trk[item.getTrackIndex()];
@@ -81,7 +84,7 @@
 
     $effect(() => {
         if ($selection && open) {
-            setStyleInputs();
+            untrack(() => setStyleInputs());
         }
     });
 
@@ -102,9 +105,9 @@
         if (widthChanged) {
             style['gpx_style:width'] = width;
         }
-        dbUtils.setStyleToSelection(style);
+        fileActions.setStyleToSelection(style);
 
-        if (item instanceof ListFileItem && $selection.size === gpxLayers.size) {
+        if (item instanceof ListFileItem && $selection.size === fileStateCollection.size) {
             if (style['gpx_style:opacity']) {
                 $defaultOpacity = style['gpx_style:opacity'];
             }

website/src/lib/components/map/gpx-layer/gpx-layers.ts

@@ -35,6 +35,10 @@ export class GPXLayerCollection {
             }
         );
     }
+
+    getLayer(fileId: string): GPXLayer | undefined {
+        return this._layers.get(fileId);
+    }
 }
 
 export const gpxLayers = new GPXLayerCollection();

website/src/lib/logic/file-action-manager.ts

@@ -153,7 +153,7 @@ export class FileActionManager {
             .filter((file) => file !== undefined) as GPXFile[];
         updatedFileIds = updatedFiles.map((file) => file._data.id);
 
-        selection.update(updatedFiles, deletedFileIds);
+        selection.updateFiles(updatedFiles, deletedFileIds);
 
         // @ts-ignore
         return db.transaction('rw', db.fileids, db.files, async () => {

website/src/lib/logic/selection.ts

@@ -33,6 +33,10 @@ export class Selection {
         return this._selection.subscribe(run, invalidate);
     }
 
+    update(updater: (value: SelectionTreeType) => SelectionTreeType) {
+        this._selection.update(updater);
+    }
+
     selectItem(item: ListItem) {
         this._selection.update(($selection) => {
             $selection.clear();
@@ -119,7 +123,7 @@ export class Selection {
         });
     }
 
-    update(updatedFiles: GPXFile[], deletedFileIds: string[]) {
+    updateFiles(updatedFiles: GPXFile[], deletedFileIds: string[]) {
         let removedItems: ListItem[] = [];
         applyToOrderedItemsFromFile(get(this._selection).getSelected(), (fileId, level, items) => {
             let file = updatedFiles.find((file) => file._data.id === fileId);