feat: add beginnings of settings page

src/App.svelte

@@ -3,6 +3,7 @@
   import Navigation from "./lib/Navigation.svelte";
   import Dash from "./pages/Dash.svelte";
   import Home from "./pages/Home.svelte";
+  import Settings from './pages/Settings.svelte';
   
   // theme cdns (I might make some myself too)
   let light = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css";
@@ -44,5 +45,8 @@
     <Route path="/dash">
       <Dash />
     </Route>
+    <Route path="/settings">
+      <Settings />
+    </Route>
   </div>
 </Router>

src/pages/Dash.svelte

@@ -30,6 +30,8 @@
         navigate("/");
     }
 
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+
     async function login(token: string) {
         const api = new PKAPI();
         try {
@@ -53,7 +55,8 @@
     
 </script>
 
-{#if user && user.banner}
+<!-- display the banner if there's a banner set, and if the current settings allow for it-->
+{#if user && user.banner && settings && settings.appearance.banner_top}
 <div class="banner" style="background-image: url({user.banner})" />
 {/if}
 <Container>

src/pages/Settings.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+    import { Card, CardHeader, CardBody, Container, Row, Col, CardTitle, Tooltip } from 'sveltestrap';
+    import Toggle from 'svelte-toggle';
+    import FaCogs from 'svelte-icons/fa/FaCogs.svelte'
+
+    let savedSettings = JSON.parse(localStorage.getItem("pk-settings"));
+
+    let settings = {
+        appearance: {
+            banner_top: true,
+            banner_bottom: true,
+            gradient_background: false,
+            no_background: false
+        }
+    };
+
+    if (savedSettings) {
+        settings = {...settings, ...savedSettings}
+    };
+
+</script>
+
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={10}>
+            <Card>
+                <CardHeader>
+                    <CardTitle style="margin-top: 8px; outline: none;">
+                        <div class="icon d-inline-block">
+                            <FaCogs />
+                        </div>Personal settings
+                    </CardTitle>
+                </CardHeader>
+                <CardBody>
+                    <p>These settings are saved in your localstorage. This means that you have to reapply these every time you visit in a different browser, or clear your browser's cookies.</p>
+                    <h4>Appearance</h4>
+                    <hr/>
+                    <Row>
+                        <Col xs={12} lg={4}>
+                            <span id="s-bannertop">Show banners in the background?</span> <Toggle hideLabel style="display: inline" label="Remove banner from background" toggled={settings.appearance.banner_top} on:toggle={() => {settings.appearance.banner_top = !settings.appearance.banner_top; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
+                            <Tooltip target="s-bannertop" placement="bottom">Toggles banners from the top of the system, member and group pages.</Tooltip>
+                        </Col>
+                        <Col xs={12} lg={4}>
+                            <span id="s-bannerbottom">Show banners at the bottom of cards?</span> <Toggle hideLabel style="display: inline" label="Remove banner from bottom" toggled={settings.appearance.banner_bottom} on:toggle={() => {settings.appearance.banner_bottom = !settings.appearance.banner_bottom; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
+                            <Tooltip target="s-bannerbottom" placement="bottom">Toggles banners at the bottom of the system, member and group cards.</Tooltip>
+                        </Col>
+                    </Row>
+                </CardBody>
+            </Card>
+        </Col>
+    </Row>
+</Container>