feat: system privacy component

src/lib/System/System.svelte

@@ -2,13 +2,15 @@
     import { Card, CardBody } from 'sveltestrap';
     import CardsHeader from '../CardsHeader.svelte';
     import SystemBody from './SystemBody.svelte';
+    import SystemPrivacy from './SystemPrivacy.svelte';
 
     export let user;
-    let editMode = false;
+    export let isPublic = true;
 
+    let editMode = false;
 </script>
 
-<Card>
+<Card class="mb-4">
     <CardsHeader bind:item={user}/>
     <CardBody style="border-left: 4px solid #{user.color}">
         {#if !editMode}
@@ -17,4 +19,8 @@
         hehe
         {/if}
     </CardBody>
-</Card>
+</Card>
+
+{#if !isPublic}
+    <SystemPrivacy bind:user={user} />
+{/if}

src/lib/system/SystemPrivacy.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import { Card, CardHeader, CardBody, CardTitle, Row, Col, Button } from 'sveltestrap';
+    import FaUserLock from 'svelte-icons/fa/FaUserLock.svelte'
+
+    export let user;
+    let editMode = false;
+</script>
+
+<Card class="mb-4">
+    <CardHeader>
+        <CardTitle style="margin-top: 8px; outline: none;">
+            <div class="icon d-inline-block">
+                <FaUserLock />
+            </div> System privacy
+        </CardTitle>
+    </CardHeader>
+    <CardBody>
+        {#if editMode}
+        stuff
+        {:else}
+        <Row>
+            <Col xs={12} lg={4} class="mb-3">
+                <b>Description:</b> {user.privacy.description_privacy}
+            </Col>
+            <Col xs={12} lg={4} class="mb-3">
+                <b>Member list:</b> {user.privacy.member_list_privacy}
+            </Col>
+            <Col xs={12} lg={4} class="mb-3">
+                <b>Group list:</b> {user.privacy.group_list_privacy}
+            </Col>
+            <Col xs={12} lg={4} class="mb-3">
+                <b>Current front:</b> {user.privacy.front_privacy}
+            </Col>
+            <Col xs={12} lg={4} class="mb-3">
+                <b>Front history:</b> {user.privacy.front_history_privacy}
+            </Col>
+        </Row>
+        <Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button>
+        {/if}
+    </CardBody>
+</Card>

src/pages/Dash.svelte

@@ -3,10 +3,12 @@
     import { navigate, useLocation } from "svelte-navigator";
     import { currentUser, loggedIn } from '../stores';
     
-    import PrivateSystem from '../lib/system/System.svelte';
+    import System from '../lib/system/System.svelte';
     import PKAPI from '../api';
     import type Sys from '../api/system';
 
+    let isPublic = false;
+
     // get the state from the navigator so that we know which tab to start on
     let location = useLocation();
     let tabPane = $location.state && $location.state.tab;
@@ -69,7 +71,7 @@
             <TabContent class="mt-3">
                 <TabPane tabId="system" tab="System" active={tabPane === "system"}>
                     <Card style="border-radius: 0; border: none;">
-                        <PrivateSystem bind:user={user}/>
+                        <System bind:user={user} bind:isPublic={isPublic} />
                     </Card>
                 </TabPane>
                 <TabPane tabId="members" tab="Members" active={tabPane === "members"}>