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

<script lang="ts">
    import GPXLayers from '$lib/components/map/gpx-layer/GPXLayers.svelte';
    import ElevationProfile from '$lib/components/elevation-profile/ElevationProfile.svelte';
    import FileList from '$lib/components/file-list/FileList.svelte';
    import Explorer from '$lib/components/explorer/Explorer.svelte';
    import GPXStatistics from '$lib/components/GPXStatistics.svelte';
    import Map from '$lib/components/map/Map.svelte';
    import Menu from '$lib/components/Menu.svelte';
    import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
    import StreetViewControl from '$lib/components/map/street-view-control/StreetViewControl.svelte';
    import LayerControl from '$lib/components/map/layer-control/LayerControl.svelte';
    import CoordinatesPopup from '$lib/components/map/CoordinatesPopup.svelte';
    import Resizer from '$lib/components/Resizer.svelte';
    import { Toaster } from '$lib/components/ui/sonner';
    import * as AlertDialog from '$lib/components/ui/alert-dialog';
    import { i18n } from '$lib/i18n/i18n.svelte';
    import { settings } from '$lib/state/settings';
    import { loadFiles } from '$lib/actions/file-actions';
    import { onMount } from 'svelte';
    import { page } from '$app/state';
    import { goto } from '$app/navigation';
    import { get } from 'svelte/store';
    import { getURLForLanguage } from '$lib/utils';
    import { inDesktopApp } from '$lib/engine/backend';
    import { openLinksInBrowser } from '$lib/desktop/links';
    import { hoveredPoint, slicedStatistics } from '$lib/state/selection-statistics';
    import { engine } from '$lib/engine';
    import { boundsManager } from '$lib/state/bounds';
    import { getURLForGoogleDriveFile } from '$lib/components/embedding/embedding';

    const outdated = engine.outdated;
    const workspace = engine.workspace;

    const {
        treeFileView,
        elevationProfile,
        bottomPanelSize,
        rightPanelSize,
        explorerPanelSize,
        additionalDatasets,
        elevationFill,
    } = settings;

    let bottomPanelWidth: number | undefined = $state();
    // the file list and the explorer share the right panel, half of it each until it is resized
    let rightPanelHeight = $state(0);
    let explorerHeight = $derived(
        $treeFileView
            ? Math.min(
                  Math.max($explorerPanelSize > 0 ? $explorerPanelSize : rightPanelHeight / 2, 60),
                  Math.max(rightPanelHeight - 80, 60)
              )
            : rightPanelHeight
    );
    let bottomPanelOrientation = $derived(
        bottomPanelWidth && bottomPanelWidth >= 540 && $elevationProfile ? 'horizontal' : 'vertical'
    );

    // the language of the page, which is in its address (none for English)
    let language = $derived(page.params.language ?? 'en');
    // whether the language that was chosen last was gone back to (the desktop app)
    let languageRestored = $state(false);

    $effect(() => {
        if (languageRestored) {
            settings.language.set(language);
        }
    });

    onMount(async () => {
        // files that the system opens with the app while it runs
        engine.onFilesOpened((ids) => boundsManager.fitBoundsOnLoad(ids));
        settings.connect(await engine.openStorage());

        if (inDesktopApp()) {
            openLinksInBrowser();
            // the window of the desktop app always opens the same page, in English: it goes to the
            // language that was chosen last
            const saved = get(settings.language);
            if (saved !== undefined && saved !== language) {
                await goto(
                    `${getURLForLanguage(saved, page.url.pathname)}${page.url.search}${page.url.hash}`,
                    { replaceState: true }
                );
            }
            languageRestored = true;
        }

        let files: string[] = JSON.parse(page.url.searchParams.get('files') || '[]');
        let ids: string[] = JSON.parse(page.url.searchParams.get('ids') || '[]');
        let urls: string[] = files.concat(ids.map(getURLForGoogleDriveFile));

        if (urls.length > 0) {
            let downloads: Promise<File | null>[] = [];
            urls.forEach((url) => {
                downloads.push(
                    fetch(url)
                        .then((response) => response.blob())
                        .then((blob) => new File([blob], url.split('/').pop() ?? ''))
                );
            });

            Promise.all(downloads).then((files) => {
                loadFiles(files.filter((file) => file !== null));
            });
        }
    });
</script>

<div class="fixed mt-[100%] -z-10 text-transparent">
    <h1>{i18n._('metadata.home_title')} — {i18n._('metadata.app_title')}</h1>
    <p>{i18n._('metadata.description')}</p>
    <h2>{i18n._('toolbar.routing.tooltip')}</h2>
    <p>{i18n._('toolbar.routing.help_no_file')}</p>
    <p>{i18n._('toolbar.routing.help')}</p>
    <h3>{i18n._('toolbar.routing.reverse.button')}</h3>
    <p>{i18n._('toolbar.routing.reverse.tooltip')}</p>
    <h3>{i18n._('toolbar.routing.route_back_to_start.button')}</h3>
    <p>{i18n._('toolbar.routing.route_back_to_start.tooltip')}</p>
    <h3>{i18n._('toolbar.routing.round_trip.button')}</h3>
    <p>{i18n._('toolbar.routing.round_trip.tooltip')}</p>
    <h3>{i18n._('toolbar.routing.start_loop_here')}</h3>
    <h2>{i18n._('toolbar.scissors.tooltip')}</h2>
    <p>{i18n._('toolbar.scissors.help')}</p>
    <h2>{i18n._('toolbar.time.tooltip')}</h2>
    <p>{i18n._('toolbar.time.help')}</p>
    <h2>{i18n._('toolbar.merge.tooltip')}</h2>
    <h3>{i18n._('toolbar.merge.merge_traces')}</h3>
    <p>{i18n._('toolbar.merge.help_merge_traces')}</p>
    <h3>{i18n._('toolbar.merge.merge_contents')}</h3>
    <p>{i18n._('toolbar.merge.help_merge_contents')}</p>
    <h2>{i18n._('toolbar.elevation.button')}</h2>
    <p>{i18n._('toolbar.elevation.help')}</p>
    <h2>{i18n._('toolbar.waypoint.tooltip')}</h2>
    <p>{i18n._('toolbar.waypoint.help')}</p>
    <h2>{i18n._('toolbar.reduce.tooltip')}</h2>
    <p>{i18n._('toolbar.reduce.help')}</p>
    <h2>{i18n._('toolbar.clean.tooltip')}</h2>
    <p>{i18n._('toolbar.clean.help')}</p>
    <h2>
        {i18n._('gpx.files')}, {i18n._('gpx.tracks')}, {i18n._('gpx.segments')}, {i18n._(
            'gpx.waypoints'
        )}
    </h2>
</div>

<div class="fixed flex flex-row w-dvw h-dvh">
    <div class="flex flex-col grow h-full min-w-0">
        <div class="grow relative">
            <Menu />
            <div
                class="absolute top-0 bottom-0 left-0 z-20 flex flex-col justify-center pointer-events-none"
            >
                <Toolbar />
            </div>
            <Map class="h-full {$treeFileView ? '' : 'horizontal'}" />
            <StreetViewControl />
            <LayerControl />
            <GPXLayers />
            <CoordinatesPopup />
            <Toaster richColors />
            {#if !$treeFileView}
                <div class="h-10 w-full pointer-events-none absolute bottom-0 left-0 z-30">
                    <FileList orientation="horizontal" />
                </div>
            {/if}
        </div>
        {#if $elevationProfile}
            <Resizer
                orientation="row"
                bind:after={$bottomPanelSize}
                minAfter={100}
                maxAfter={300}
            />
        {/if}
        <div
            bind:offsetWidth={bottomPanelWidth}
            class="flex {bottomPanelOrientation == 'vertical'
                ? 'flex-col'
                : 'flex-row py-2'} gap-1 px-4"
            style={$elevationProfile ? `height: ${$bottomPanelSize}px` : ''}
        >
            <GPXStatistics
                statistics={engine.statistics}
                {slicedStatistics}
                orientation={bottomPanelOrientation == 'horizontal' ? 'vertical' : 'horizontal'}
            />
            {#if $elevationProfile}
                <ElevationProfile
                    statistics={engine.statistics}
                    {slicedStatistics}
                    {hoveredPoint}
                    {additionalDatasets}
                    {elevationFill}
                />
            {/if}
        </div>
    </div>
    {#if $treeFileView || $workspace?.folder}
        <Resizer orientation="col" bind:after={$rightPanelSize} minAfter={100} maxAfter={400} />
        <div
            bind:clientHeight={rightPanelHeight}
            class="flex flex-col h-full min-h-0 shrink-0"
            style="width: {$rightPanelSize}px"
        >
            {#if $treeFileView}
                {#if $workspace}
                    <div class="px-2 py-1 text-sm font-semibold shrink-0">
                        {i18n._('menu.workspace')}
                    </div>
                {/if}
                <!-- a row, as the file list was: its scroll area is as high as this, whatever its content -->
                <div class="grow min-h-0 flex flex-row">
                    <FileList
                        orientation="vertical"
                        recursive={true}
                        style="width: {$rightPanelSize}px"
                    />
                </div>
            {/if}
            <!-- the open folder (the desktop app) under the files that are open -->
            {#if $workspace?.folder}
                {#if $treeFileView}
                    <Resizer
                        orientation="row"
                        bind:after={() => explorerHeight, (height) => ($explorerPanelSize = height)}
                        minAfter={60}
                        maxAfter={Math.max(rightPanelHeight - 80, 60)}
                    />
                {/if}
                <div class="flex flex-col min-h-0 shrink-0" style="height: {explorerHeight}px">
                    <Explorer />
                </div>
            {/if}
        </div>
    {/if}
</div>

<AlertDialog.Root open={$outdated}>
    <AlertDialog.Content escapeKeydownBehavior="ignore" interactOutsideBehavior="ignore">
        <AlertDialog.Header>
            <AlertDialog.Title>{i18n._('outdated.title')}</AlertDialog.Title>
            <AlertDialog.Description>{i18n._('outdated.description')}</AlertDialog.Description>
        </AlertDialog.Header>
        <AlertDialog.Footer>
            <AlertDialog.Action onclick={() => location.reload()}>
                {i18n._('outdated.reload')}
            </AlertDialog.Action>
        </AlertDialog.Footer>
    </AlertDialog.Content>
</AlertDialog.Root>

<style lang="postcss">
    @reference "tailwindcss";

    div :global(.toaster.group) {
        @apply absolute;
        @apply right-2;
        --offset: 50px !important;
    }
</style>