Allow user to hide unwanted panels

svelte/src/user_home/dashboard/Dashboard.svelte

@@ -10,7 +10,30 @@ import CardUpload from "./CardUpload.svelte";
 import CardPrepaidTransactions from "./CardPrepaidTransactions.svelte";
 import CardFsHome from "./CardFSHome.svelte";
 
-let cards = [
+let cards = []
+
+const save = () => {
+	let storage = {
+		expanded: [],
+		hidden: [],
+	}
+
+	for (const card of cards) {
+		if (card.expanded === true) {
+			storage.expanded.push(card.id)
+		}
+	}
+	for (const card of cards) {
+		if (card.hidden === true) {
+			storage.hidden.push(card.id)
+		}
+	}
+
+	window.localStorage.setItem("dashboard_layout", JSON.stringify(storage))
+}
+
+onMount(() => {
+	cards = [
 		{
 			id: "upload",
 			elem: CardUpload,
@@ -20,7 +43,7 @@ let cards = [
 			elem: CardFsHome,
 			title: "Filesystem home",
 			link: "/d/me",
-		hidden: window.user.subscription.filesystem_access === false,
+			hidden_default: window.user.subscription.filesystem_access === false,
 		}, {
 			id: "account",
 			elem: CardAccount,
@@ -36,7 +59,7 @@ let cards = [
 			elem: CardPrepaidTransactions,
 			title: "Prepaid transactions",
 			link: "/user/prepaid/transactions",
-		hidden: window.user.subscription.type !== "prepaid"
+			hidden_default: window.user.subscription.type !== "prepaid"
 		}, {
 			id: "usage",
 			elem: CardUsage,
@@ -51,70 +74,48 @@ let cards = [
 			title: "Activity",
 			link: "/user/activity",
 		},
-]
+	]
-const save = () => {
-	let storage = {
-		expanded: [],
-	}
 
-	for (const card of cards) {
+	// Apply the view settings from localstorage
-		if (card.expanded === true) {
+	try {
-			storage.expanded.push(card.id)
+		const storage = JSON.parse(window.localStorage.getItem("dashboard_layout"))
-		}
+		if (storage === null) {
-	}
-
-	window.localStorage.setItem(
-		"dashboard_layout",
-		JSON.stringify(storage),
-	)
-}
-
-const load = () => {
-	const str = window.localStorage.getItem("dashboard_layout")
-	if (str === null) {
 			return
 		}
 
-	const storage = JSON.parse(str)
-
-	if (storage.expanded) {
 		for (const card of cards) {
-			if (storage.expanded.includes(card.id)) {
+			if (storage.expanded && storage.expanded.includes(card.id)) {
 				card.expanded = true
 			}
+			if (storage.hidden && storage.hidden.includes(card.id)) {
+				card.hidden = true
 			}
 		}
-
+	} catch (err) {
-	// Update the view
+		console.warn("Failed to load dashboard settings", err)
-	cards = cards
+		return
-}
+	}
-
-onMount(() => {
-	load()
 })
 </script>
 
 <div class="cards">
-	{#each cards as card (card.id)}{#if !card.hidden}
+	{#each cards as card (card.id)}{#if !card.hidden && !card.hidden_default}
 		<div class="card" class:card_wide={card.expanded}>
 			<div class="title_box">
-				<h2>
+				<h2>{card.title}</h2>
-					{card.title}
-				</h2>
 
 				{#if card.link}
-					<Button
+					<Button link_href={card.link} icon="link" flat/>
-						link_href={card.link}
-						icon="link"
-						flat
-					/>
 				{/if}
 
 				<Button
 					click={() => {card.expanded = !card.expanded; save()}}
 					icon={card.expanded ? "fullscreen_exit" : "fullscreen"}
-					flat
+					flat/>
-				/>
+				<Button
+					click={() => {card.hidden = !card.hidden; save()}}
+					icon="visibility_off"
+					flat/>
 			</div>
 			<div class="card_component">
 				<svelte:component this={card.elem} expanded={card.expanded}/>
@@ -123,6 +124,24 @@ onMount(() => {
 	{/if}{/each}
 </div>
 
+<div class="cards">
+	{#each cards as card (card.id)}
+		{#if card.hidden}
+			<div class="card">
+				<div class="title_box">
+					<h2>{card.title}</h2>
+
+					{#if card.link}
+						<Button link_href={card.link} icon="link" flat/>
+					{/if}
+
+					<Button click={() => {card.hidden = !card.hidden; save()}} icon="visibility" flat/>
+				</div>
+			</div>
+		{/if}
+	{/each}
+</div>
+
 <style>
 .cards {
 	display: flex;