Implemented routing instead of internal state

frontend/src/components/A.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    import {A} from 'flowbite-svelte';
+    export let href: string;
+</script>
+
+<A {href} aClass="hover:text-primary-400 transition-colors">
+    <slot></slot>
+</A>

frontend/src/components/DeleteModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-    import {rpc, show_working, state, token} from '../store';
+    import {rpc, show_working, token} from '../store';
     import {Button, ButtonGroup, Modal} from 'flowbite-svelte';
-    import {afterUpdate} from 'svelte';
+    import {afterUpdate, createEventDispatcher} from 'svelte';
 
     let show_confirm = false;
     let show_modal = false;
@@ -9,6 +9,8 @@
     let text = '';
     let nodes: number[] = [];
 
+    const dispatch = createEventDispatcher<{reload_node: null}>();
+
     async function real_delete() {
         show_confirm = false;
         show_modal = true;
@@ -27,7 +29,7 @@
 
         show_working.set(false);
         show_modal = false;
-        state.update(v => v);
+        dispatch('reload_node');
     }
 
     export const del = async (n: number[]) => {

frontend/src/components/DirViewer.svelte

@@ -4,11 +4,12 @@
 </script>
 <script lang="ts">
     import {Checkbox, Dropdown, DropdownItem, Spinner, Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell, Tooltip} from 'flowbite-svelte';
-    import {Folder, FolderParent, DocumentBlank, CaretLeft} from '../icons';
     import {filesize} from 'filesize';
-    import {api, changeStateFunction, download, StateE, token, rpc} from '../store';
+    import {Folder, FolderParent, DocumentBlank, CaretLeft} from '../icons';
+    import {api, download, token, rpc} from '../store';
     import LinkButton from './LinkButton.svelte';
     import DeleteModal from './DeleteModal.svelte';
+    import A from './A.svelte';
 
     export let node: api.Node;
 
@@ -43,11 +44,12 @@
     $: ctx_style = `top: ${ctx_y}px; left: ${ctx_x}px; position: fixed;`;
 
     function onCtxMenu(node: api.Node, e: MouseEvent) {
+        console.log(e);
         e.preventDefault();
         if (!ctx_hidden)
             return ctx_hidden = true;
-        ctx_x = e.pageX;
-        ctx_y = e.pageY;
+        ctx_x = e.clientX;
+        ctx_y = e.clientY;
         ctx_node = node;
         ctx_hidden = false;
     }
@@ -70,7 +72,7 @@
 
 <svelte:body on:click={() => (ctx_hidden = true)} />
 
-<DeleteModal bind:del={del} />
+<DeleteModal bind:del={del} on:reload_node />
 
 <Table hoverable>
     <TableHead theadClass="text-xs">
@@ -86,7 +88,7 @@
             <TableBodyRow>
                 <TableBodyCell class="!p-4"></TableBodyCell>
                 <TableBodyCell class="px-2 w-0"><FolderParent /></TableBodyCell>
-                <TableBodyCell class="pl-0"><LinkButton on:click={changeStateFunction(StateE.VIEW, node.parent ?? 0)}>..</LinkButton></TableBodyCell>
+                <TableBodyCell class="pl-0"><A href={'#/view/' + node.parent}>..</A></TableBodyCell>
                 <TableBodyCell></TableBodyCell>
             </TableBodyRow>
         {/if}
@@ -94,7 +96,7 @@
             <TableBodyRow on:contextmenu={onCtxMenu.bind(null, node)}>
                 <TableBodyCell class="p-2 pl-4 w-0 h-0"><Checkbox bind:group={selected} value={node.id}/></TableBodyCell>
                 <TableBodyCell class="px-2 w-0"><Folder /></TableBodyCell>
-                <TableBodyCell class="pl-0"><LinkButton on:click={changeStateFunction(StateE.VIEW, node.id)}>{node.name}</LinkButton></TableBodyCell>
+                <TableBodyCell class="pl-0"><A href={'#/view/' + node.id}>{node.name}</A></TableBodyCell>
                 <TableBodyCell></TableBodyCell>
             </TableBodyRow>
         {/each}
@@ -112,7 +114,7 @@
                         <DocumentBlank />
                     {/if}
                 </TableBodyCell>
-                <TableBodyCell class="pl-0"><LinkButton on:click={changeStateFunction(StateE.VIEW, node.id)}>{node.name}</LinkButton></TableBodyCell>
+                <TableBodyCell class="pl-0"><A href={'#/view/' + node.id}>{node.name}</A></TableBodyCell>
                 <TableBodyCell>{filesize(node.size ?? 0, {base: 2, standard: 'jedec'})}</TableBodyCell>
             </TableBodyRow>
         {/each}

frontend/src/components/LinkButton.svelte

@@ -16,7 +16,7 @@
     .link-button {
         background: none;
         border: none;
-        padding: 0 0.25em;
+        padding: 0;
         cursor: pointer;
     }
 </style>

frontend/src/components/UploadModal.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
-    import {state, token, type UploadFile} from '../store';
+    import {token, type UploadFile} from '../store';
     import {Button, Modal, Progressbar} from 'flowbite-svelte';
     import {filesize} from 'filesize';
+    import {createEventDispatcher} from 'svelte';
+
+
+    const dispatch = createEventDispatcher<{reload_node: null}>();
 
     interface MyFile extends UploadFile {
         waiting: boolean,
@@ -24,7 +28,7 @@
 
     function close() {
         show_modal = false;
-        state.update(v => v);
+        dispatch('reload_node');
     }
 
     async function realUpload(file: MyFile) {