From 5985bb4f8ab4ef540a864297e40d14b69d9a8814 Mon Sep 17 00:00:00 2001
From: Jake/Rads <jake.fulminated@gmail.com>
Date: Thu, 23 Jun 2022 23:45:23 +0200
Subject: [PATCH] fix(dashboard): change tab query on tab change

---
 dashboard/src/pages/Dash.svelte    | 12 ++++++++++--
 dashboard/src/pages/Profile.svelte |  8 ++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/dashboard/src/pages/Dash.svelte b/dashboard/src/pages/Dash.svelte
index cbf09b83..ca3208d7 100644
--- a/dashboard/src/pages/Dash.svelte
+++ b/dashboard/src/pages/Dash.svelte
@@ -12,7 +12,7 @@
     // get the state from the navigator so that we know which tab to start on
     let location = useLocation();
     let params = $location.search && new URLSearchParams($location.search);
-    let tabPane: string;
+    let tabPane: string|number;
     if (params) {
         tabPane = params.get("tab");
     }
@@ -21,6 +21,14 @@
         tabPane = "system";
     }
 
+    
+
+    // change the URL when changing tabs
+    function navigateTo(tab: string|number) {
+        navigate(`./dash?tab=${tab}`);
+        tabPane = tab;
+    }
+
     // subscribe to the cached user in the store
     let current;
     currentUser.subscribe(value => {
@@ -77,7 +85,7 @@
     <Row>
         <Col class="mx-auto" xs={12} lg={11} xl={10}>
             <h2 class="visually-hidden">Viewing your own system</h2>
-            <TabContent class="mt-3">
+            <TabContent class="mt-3" on:tab={(e) => navigateTo(e.detail)}>
                 <TabPane tabId="system" tab="System" active={tabPane === "system"}>
                         <SystemMain bind:user={user} isPublic={false} />
                 </TabPane>
diff --git a/dashboard/src/pages/Profile.svelte b/dashboard/src/pages/Profile.svelte
index 986a1427..dad974eb 100644
--- a/dashboard/src/pages/Profile.svelte
+++ b/dashboard/src/pages/Profile.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Container, Col, Row, TabContent, TabPane, Alert, Spinner } from 'sveltestrap';
-    import { useParams, useLocation } from "svelte-navigator";
+    import { useParams, useLocation, navigate } from "svelte-navigator";
     import { onMount } from 'svelte';
     
     import SystemMain from '../lib/system/Main.svelte';
@@ -28,6 +28,10 @@
     if (!tabPane) {
         tabPane = "system";
     }
+
+    function navigateTo(tab: string|number) {
+        navigate(`./${id}?tab=${tab}`)
+    }
     
     let err: string;
     
@@ -66,7 +70,7 @@
                 <Alert color="danger">{err}</Alert>
             {:else}
             <Alert color="info" aria-hidden>You are currently <b>viewing</b> a system.</Alert>
-            <TabContent class="mt-3">
+            <TabContent class="mt-3" on:tab={(e) => navigateTo(e.detail)}>
                 <TabPane tabId="system" tab="System" active={tabPane === "system"}>
                         <SystemMain bind:user isPublic={true} />
                 </TabPane>