rename "vertical file list" to "file tree"

website/src/lib/components/Map.svelte

@@ -28,7 +28,7 @@
 		easing: () => 1
 	};
 
-	const { distanceUnits, elevationProfile, verticalFileView, bottomPanelSize, rightPanelSize } =
+	const { distanceUnits, elevationProfile, treeFileView, bottomPanelSize, rightPanelSize } =
 		settings;
 	let scaleControl = new mapboxgl.ScaleControl({
 		unit: $distanceUnits
@@ -202,10 +202,7 @@
 		}
 	});
 
-	$: if (
+	$: if ($map && (!$treeFileView || !$elevationProfile || $bottomPanelSize || $rightPanelSize)) {
-		$map &&
-		(!$verticalFileView || !$elevationProfile || $bottomPanelSize || $rightPanelSize)
-	) {
 		$map.resize();
 	}
 </script>

website/src/lib/components/Menu.svelte

@@ -22,7 +22,7 @@
 		Sun,
 		Moon,
 		Layers,
-		GalleryVertical,
+		ListTree,
 		Languages,
 		Settings,
 		Info,
@@ -83,7 +83,7 @@
 		velocityUnits,
 		temperatureUnits,
 		elevationProfile,
-		verticalFileView,
+		treeFileView,
 		currentBasemap,
 		previousBasemap,
 		currentOverlays,
@@ -243,7 +243,7 @@
 						{/if}
 						<Shortcut key="H" ctrl={true} />
 					</Menubar.Item>
-					{#if $verticalFileView}
+					{#if $treeFileView}
 						{#if $selection.getSelected().some((item) => item instanceof ListFileItem)}
 							<Menubar.Separator />
 							<Menubar.Item
@@ -284,7 +284,7 @@
 						{$_('menu.center')}
 						<Shortcut key="⏎" ctrl={true} />
 					</Menubar.Item>
-					{#if $verticalFileView}
+					{#if $treeFileView}
 						<Menubar.Separator />
 						<Menubar.Item on:click={copySelection} disabled={$selection.size === 0}>
 							<ClipboardCopy size="16" class="mr-1" />
@@ -327,9 +327,9 @@
 						{$_('menu.elevation_profile')}
 						<Shortcut key="P" ctrl={true} />
 					</Menubar.CheckboxItem>
-					<Menubar.CheckboxItem bind:checked={$verticalFileView}>
+					<Menubar.CheckboxItem bind:checked={$treeFileView}>
-						<GalleryVertical size="16" class="mr-1" />
+						<ListTree size="16" class="mr-1" />
-						{$_('menu.vertical_file_view')}
+						{$_('menu.tree_file_view')}
 						<Shortcut key="L" ctrl={true} />
 					</Menubar.CheckboxItem>
 					<Menubar.Separator />
@@ -567,7 +567,7 @@
 			$elevationProfile = !$elevationProfile;
 			e.preventDefault();
 		} else if (e.key === 'l' && (e.metaKey || e.ctrlKey)) {
-			$verticalFileView = !$verticalFileView;
+			$treeFileView = !$treeFileView;
 			e.preventDefault();
 		} else if (e.key === 'h' && (e.metaKey || e.ctrlKey)) {
 			if ($allHidden) {

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

@@ -17,9 +17,9 @@
 	setContext('orientation', orientation);
 	setContext('recursive', recursive);
 
-	const { verticalFileView } = settings;
+	const { treeFileView } = settings;
 
-	verticalFileView.subscribe(($vertical) => {
+	treeFileView.subscribe(($vertical) => {
 		if ($vertical) {
 			selection.update(($selection) => {
 				$selection.forEach((item) => {

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

@@ -39,19 +39,19 @@
 		node instanceof GPXFile && item instanceof ListFileItem
 			? node.metadata.name
 			: node instanceof Track
-				? node.name ?? `${$_('gpx.track')} ${(item as ListTrackItem).trackIndex + 1}`
+				? (node.name ?? `${$_('gpx.track')} ${(item as ListTrackItem).trackIndex + 1}`)
 				: node instanceof TrackSegment
 					? `${$_('gpx.segment')} ${(item as ListTrackSegmentItem).segmentIndex + 1}`
 					: node instanceof Waypoint
-						? node.name ?? `${$_('gpx.waypoint')} ${(item as ListWaypointItem).waypointIndex + 1}`
+						? (node.name ?? `${$_('gpx.waypoint')} ${(item as ListWaypointItem).waypointIndex + 1}`)
 						: node instanceof GPXFile && item instanceof ListWaypointsItem
 							? $_('gpx.waypoints')
 							: '';
 
-	const { verticalFileView } = settings;
+	const { treeFileView } = settings;
 
 	function openIfSelectedChild() {
-		if (collapsible && get(verticalFileView) && $selection.hasAnyChildren(item, false)) {
+		if (collapsible && get(treeFileView) && $selection.hasAnyChildren(item, false)) {
 			collapsible.openNode();
 		}
 	}

website/src/lib/components/gpx-layer/GPXLayer.ts

@@ -89,7 +89,7 @@ function getMarkerForSymbol(symbol: string | undefined, layerColor: string) {
     </svg>`;
 }
 
-const { directionMarkers, verticalFileView, defaultOpacity, defaultWeight } = settings;
+const { directionMarkers, treeFileView, defaultOpacity, defaultWeight } = settings;
 
 export class GPXLayer {
     map: mapboxgl.Map;
@@ -271,7 +271,7 @@ export class GPXLayer {
                             return;
                         }
 
-                        if (get(verticalFileView)) {
+                        if (get(treeFileView)) {
                             if ((e.ctrlKey || e.metaKey) && get(selection).hasAnyChildren(new ListWaypointsItem(this.fileId), false)) {
                                 addSelectItem(new ListWaypointItem(this.fileId, marker._waypoint._data.index));
                             } else {
@@ -415,7 +415,7 @@ export class GPXLayer {
         }
 
         let item = undefined;
-        if (get(verticalFileView) && file.getSegments().length > 1) { // Select inner item
+        if (get(treeFileView) && file.getSegments().length > 1) { // Select inner item
             item = file.children[trackIndex].children.length > 1 ? new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex) : new ListTrackItem(this.fileId, trackIndex);
         } else {
             item = new ListFileItem(this.fileId);

website/src/lib/components/toolbar/tools/Waypoint.svelte

@@ -34,11 +34,11 @@
 		label: ''
 	};
 
-	const { verticalFileView } = settings;
+	const { treeFileView } = settings;
 
 	$: canCreate = $selection.size > 0;
 
-	$: if ($verticalFileView && $selection) {
+	$: if ($treeFileView && $selection) {
 		selectedWaypoint.update(() => {
 			if ($selection.size === 1) {
 				let item = $selection.getSelected()[0];

website/src/lib/db.ts

@@ -85,7 +85,7 @@ export const settings = {
     elevationProfile: dexieSettingStore('elevationProfile', true),
     additionalDatasets: dexieSettingStore<string[]>('additionalDatasets', []),
     elevationFill: dexieSettingStore<'slope' | 'surface' | undefined>('elevationFill', undefined),
-    verticalFileView: dexieSettingStore<boolean>('fileView', false),
+    treeFileView: dexieSettingStore<boolean>('fileView', false),
     minimizeRoutingMenu: dexieSettingStore('minimizeRoutingMenu', false),
     routing: dexieSettingStore('routing', true),
     routingProfile: dexieSettingStore('routingProfile', 'bike'),

website/src/lib/docs/en/files-and-stats.mdx

@@ -37,11 +37,11 @@ You can also navigate through the files using the arrow keys on your keyboard, a
 
 By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
 
-### Vertical layout
+### Tree layout
 
-As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
+As mentioned in the [view options section](./menu/view), you can switch to a tree layout for the files list.
-The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](./gpx).
+This layout is ideal for managing a large number of open files, as it organizes them into a vertical list on the right side of the map.
-Indeed, this layout allows you to inspect the content of the files through collapsible sections.
+In addition, the file tree view enables you to inspect the [tracks, segments, and points of interest](../gpx) contained inside the files through collapsible sections.
 
 You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal file items.
 Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.

website/src/lib/docs/en/getting-started.mdx

@@ -25,7 +25,7 @@ This is where you can access common actions such as opening, closing, and export
 
 At the bottom of the interface, you will find the list of files currently open in the application.
 You can click on a file to select it and display its statistics below the list.
-In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a vertical layout for advanced file management.
+In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a tree layout for advanced file management.
 
 ## Toolbar
 

website/src/lib/docs/en/menu/edit.mdx

@@ -10,7 +10,7 @@ title: Edit actions
 # { title }
 
 Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
-Moreover, when the vertical layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
+Moreover, when the tree layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
 Therefore, we will refer to the elements that can be modified by these actions as *file items*.
 Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
 
@@ -37,7 +37,7 @@ Create a new track in the selected file.
 
 <DocsNote>
 
-This action is only available when the vertical layout of the files list is enabled.
+This action is only available when the tree layout of the files list is enabled.
 Additionally, the selection must be a single file.
 
 </DocsNote>
@@ -48,7 +48,7 @@ Create a new segment in the selected track.
 
 <DocsNote>
 
-This action is only available when the vertical layout of the files list is enabled.
+This action is only available when the tree layout of the files list is enabled.
 Additionally, the selection must be a single track.
 
 </DocsNote>
@@ -67,7 +67,7 @@ Copy the selected file items to the clipboard.
 
 <DocsNote>
 
-This action is only available when the vertical layout of the files list is enabled.
+This action is only available when the tree layout of the files list is enabled.
 
 </DocsNote>
 
@@ -77,7 +77,7 @@ Cut the selected file items to the clipboard.
 
 <DocsNote>
 
-This action is only available when the vertical layout of the files list is enabled.
+This action is only available when the tree layout of the files list is enabled.
 
 </DocsNote>
 
@@ -87,7 +87,7 @@ Paste the file items from the clipboard to the current hierarchy level if they a
 
 <DocsNote>
 
-This action is only available when the vertical layout of the files list is enabled.
+This action is only available when the tree layout of the files list is enabled.
     
 </DocsNote>
 

website/src/lib/docs/en/menu/view.mdx

@@ -3,7 +3,7 @@ title: View options
 ---
 
 <script lang="ts">
-    import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
+    import { ChartArea, ListTree, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
     import DocsNote from '$lib/components/docs/DocsNote.svelte';
 </script>
 
@@ -15,10 +15,11 @@ This menu provides options to rearrange the interface and the map view.
 
 Hide the elevation profile to make room for the map, or show it to inspect the current selection.
 
-### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Vertical file list
+### <ListTree size="16" class="inline-block" style="margin-bottom: 2px" /> File tree
 
-Switch between a vertical and a horizontal layout for the file list.
+Toggle the tree layout for the [file list](../files-and-stats).
-The [vertical file list](../files-and-stats) is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](../gpx).
+This layout is ideal for managing a large number of open files, as it organizes them into a vertical list on the right side of the map.
+In addition, the file tree view enables you to inspect the [tracks, segments, and points of interest](../gpx) contained inside the files through collapsible sections.
 
 ### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap
 

website/src/locales/en.json

@@ -33,7 +33,7 @@
         "select_all": "Select all",
         "view": "View",
         "elevation_profile": "Elevation profile",
-        "vertical_file_view": "Vertical file list",
+        "tree_file_view": "File tree",
         "switch_basemap": "Switch to previous basemap",
         "toggle_overlays": "Toggle overlays",
         "toggle_3d": "Toggle 3D",

website/src/routes/[[language]]/app/+page.svelte

@@ -20,7 +20,7 @@
 	import { _ } from 'svelte-i18n';
 
 	const {
-		verticalFileView,
+		treeFileView,
 		elevationProfile,
 		bottomPanelSize,
 		rightPanelSize,
@@ -95,12 +95,12 @@
 			>
 				<Toolbar />
 			</div>
-			<Map class="h-full {$verticalFileView ? '' : 'horizontal'}" />
+			<Map class="h-full {$treeFileView ? '' : 'horizontal'}" />
 			<StreetViewControl />
 			<LayerControl />
 			<GPXLayers />
 			<Toaster richColors />
-			{#if !$verticalFileView}
+			{#if !$treeFileView}
 				<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
 					<FileList orientation="horizontal" />
 				</div>
@@ -129,7 +129,7 @@
 			{/if}
 		</div>
 	</div>
-	{#if $verticalFileView}
+	{#if $treeFileView}
 		<Resizer orientation="col" bind:after={$rightPanelSize} minAfter={100} maxAfter={400} />
 		<FileList orientation="vertical" recursive={true} style="width: {$rightPanelSize}px" />
 	{/if}