big commit without a message

src/components/Graphs.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	export let hrefPrefix = "";
 	import { login } from "./stores";
 	import { getGraphs } from "../lib/api";
 
@@ -15,14 +16,10 @@
 		</span>
 	{:then graphs}
 		{#each graphs as graph}
-			<a class="item" href="./graph/{graph.graph}">
+			<a class="item" href="{hrefPrefix}/graph/{graph.graph}">
 				<h2>{graph.data.name} <span>#{graph.graph}</span></h2>
-				<h3>
-					Value:
-					{#each graph.data.value as key}
-						<span>{key}</span>
-					{/each}
-				</h3>
+				<p>{graph.data.style}</p>
+				<code>{graph.data.value}</code>
 			</a>
 		{/each}
 		<!-- svelte-ignore a11y-missing-content -->
@@ -36,6 +33,7 @@
 
 <style lang="scss">
 	@use "../styles/GridList";
+	@use "../styles/GridItems";
 	a.item {
 		text-decoration: none;
 		color: hsl(30, 20%, 90%);
@@ -51,16 +49,7 @@
 		font-weight: 100;
 		font-size: 0.75em;
 	}
-	h3 span {
-		font-weight: 400;
-	}
-	h3 span::after {
-		content: " > ";
-		font-size: 0.6em;
-		color: hsl(30, 5%, 60%);
-		vertical-align: middle;
-	}
-	h3 span:nth-last-child(1)::after {
-		content: "";
+	.add {
+		@include GridItems.add;
 	}
 </style>

src/components/Navbar.svelte

@@ -1,21 +1,48 @@
 <script lang="ts">
 	export let segment: string | undefined;
-	import { postLogout } from "../lib/api";
+	import { getPermissions, postLogout } from "../lib/api";
+	import { checkPermissions, Permissions } from "../lib/permissions";
 	import { extraNav, login } from "./stores";
+
+	let profiles = false;
+	let users = false;
+	$: if ($login !== undefined) {
+		getPermissions($login?.token).then(permissions => {
+			if (checkPermissions([Permissions.VIEW_PROFILES], permissions)) {
+				profiles = true;
+			}
+			if (checkPermissions([Permissions.VIEW_USERS], permissions)) {
+				users = true;
+			}
+		});
+	}
 </script>
 
 <nav>
-	<a href="/" class:active={segment === undefined || segment === "profile"}>
+	<a
+		href="/profiles"
+		class:active={segment === "profiles" || segment === "profile"}
+		class:invisible={!profiles}
+	>
 		<h3>Profiles</h3>
 	</a>
 	<span class="sep" />
 	<a
 		href="/graphs"
 		class:active={segment === "graphs" || segment === "graph"}
+		class:invisible={!profiles}
 	>
 		<h3>Graphs</h3>
 	</a>
 	<span class="sep" />
+	<a
+		href="/users"
+		class:active={segment === "users" || segment === "user"}
+		class:invisible={!users}
+	>
+		<h3>Users</h3>
+	</a>
+	<span class="sep" />
 	{#if $extraNav !== undefined}
 		<span class="extra">
 			<h3>
@@ -128,4 +155,8 @@
 			}
 		}
 	}
+	.invisible,
+	.invisible + .sep {
+		display: none;
+	}
 </style>

src/components/stores.ts

@@ -49,3 +49,28 @@ function createExtraNav() {
 }
 
 export const extraNav = createExtraNav();
+
+function createCache() {
+	const { subscribe, set, update } = writable<{
+		[key: string]: string;
+	}>({});
+
+	return {
+		subscribe,
+		set: (key: string, value: string) =>
+			update(current => ({
+				...current,
+				[key]: value
+			})),
+		unset: (key: string) =>
+			update(current => {
+				delete current[key];
+				return current;
+			}),
+		clear: () => set({}),
+		update
+	};
+}
+
+export const playerCache = createCache();
+export const profileCache = createCache();