Allow user to hide unwanted panels

svelte/src/user_home/dashboard/Dashboard.svelte

@@ -10,51 +10,12 @@ import CardUpload from "./CardUpload.svelte";
 import CardPrepaidTransactions from "./CardPrepaidTransactions.svelte";
 import CardFsHome from "./CardFSHome.svelte";
 
-let cards = [
-	{
-		id: "upload",
-		elem: CardUpload,
-		title: "Quick upload",
-	}, {
-		id: "filesystem_home",
-		elem: CardFsHome,
-		title: "Filesystem home",
-		link: "/d/me",
-		hidden: window.user.subscription.filesystem_access === false,
-	}, {
-		id: "account",
-		elem: CardAccount,
-		title: "Account",
-		link: "/user/settings",
-	}, {
-		id: "subscription",
-		elem: CardSubscription,
-		title: "Subscription",
-		link: "/user/subscription",
-	}, {
-		id: "prepaid_transactions",
-		elem: CardPrepaidTransactions,
-		title: "Prepaid transactions",
-		link: "/user/prepaid/transactions",
-		hidden: window.user.subscription.type !== "prepaid"
-	}, {
-		id: "usage",
-		elem: CardUsage,
-		title: "Usage",
-	}, {
-		id: "statistics",
-		elem: CardStatistics,
-		title: "Statistics",
-	}, {
-		id: "activiy",
-		elem: CardActivity,
-		title: "Activity",
-		link: "/user/activity",
-	},
-]
+let cards = []
+
 const save = () => {
 	let storage = {
 		expanded: [],
+		hidden: [],
 	}
 
 	for (const card of cards) {
@@ -62,59 +23,99 @@ const save = () => {
 			storage.expanded.push(card.id)
 		}
 	}
-
-	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)) {
-				card.expanded = true
-			}
+	for (const card of cards) {
+		if (card.hidden === true) {
+			storage.hidden.push(card.id)
 		}
 	}
 
-	// Update the view
-	cards = cards
+	window.localStorage.setItem("dashboard_layout", JSON.stringify(storage))
 }
 
 onMount(() => {
-	load()
+	cards = [
+		{
+			id: "upload",
+			elem: CardUpload,
+			title: "Quick upload",
+		}, {
+			id: "filesystem_home",
+			elem: CardFsHome,
+			title: "Filesystem home",
+			link: "/d/me",
+			hidden_default: window.user.subscription.filesystem_access === false,
+		}, {
+			id: "account",
+			elem: CardAccount,
+			title: "Account",
+			link: "/user/settings",
+		}, {
+			id: "subscription",
+			elem: CardSubscription,
+			title: "Subscription",
+			link: "/user/subscription",
+		}, {
+			id: "prepaid_transactions",
+			elem: CardPrepaidTransactions,
+			title: "Prepaid transactions",
+			link: "/user/prepaid/transactions",
+			hidden_default: window.user.subscription.type !== "prepaid"
+		}, {
+			id: "usage",
+			elem: CardUsage,
+			title: "Usage",
+		}, {
+			id: "statistics",
+			elem: CardStatistics,
+			title: "Statistics",
+		}, {
+			id: "activiy",
+			elem: CardActivity,
+			title: "Activity",
+			link: "/user/activity",
+		},
+	]
+
+	// Apply the view settings from localstorage
+	try {
+		const storage = JSON.parse(window.localStorage.getItem("dashboard_layout"))
+		if (storage === null) {
+			return
+		}
+
+		for (const card of cards) {
+			if (storage.expanded && storage.expanded.includes(card.id)) {
+				card.expanded = true
+			}
+			if (storage.hidden && storage.hidden.includes(card.id)) {
+				card.hidden = true
+			}
+		}
+	} catch (err) {
+		console.warn("Failed to load dashboard settings", err)
+		return
+	}
 })
 </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>
-					{card.title}
-				</h2>
+				<h2>{card.title}</h2>
 
 				{#if card.link}
-					<Button
-						link_href={card.link}
-						icon="link"
-						flat
-					/>
+					<Button 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;