Add filesystem card to dashboard

svelte/src/user_home/dashboard/CardFSHome.svelte

@@ -0,0 +1,32 @@
+<script>
+import { onMount } from "svelte";
+import Navigator from "../../filesystem/Navigator.svelte";
+import ListView from "../../filesystem/filemanager/ListView.svelte";
+import { fs_encode_path } from "../../filesystem/FilesystemUtil";
+
+let nav;
+let state = {
+	children: [],
+};
+
+const node_click = e => {
+	window.location.href = "/d" + fs_encode_path(state.children[e.detail].path)
+}
+const node_share_click = e => {
+	window.location.href = "/d/" + state.children[e.detail].id
+}
+
+onMount(() => {
+	nav.navigate("/me", false)
+})
+</script>
+
+<Navigator bind:this={nav} bind:state={state} history_enabled={false}/>
+
+<ListView
+	state={state}
+	on:node_click={node_click}
+	on:node_share_click={node_share_click}
+	hide_edit
+	hide_branding
+/>

svelte/src/user_home/dashboard/CardPrepaidTransactions.svelte

@@ -126,6 +126,9 @@ onMount(() => {
 </ul>
 
 <style>
+ul {
+	margin: 0;
+}
 .toolbar {
 	display: flex;
 	flex-direction: row;

svelte/src/user_home/dashboard/CardStatistics.svelte

@@ -4,6 +4,8 @@ import Chart from "../../util/Chart.svelte";
 import { color_by_name } from "../../util/Util.svelte";
 import { formatDataVolume, formatThousands } from "../../util/Formatting.svelte";
 
+export let expanded = false
+$: chart_height = expanded ? "250px" : "150px"
 let graph_views_downloads = null
 let graph_bandwidth = null
 
@@ -123,51 +125,52 @@ onMount(() => {
 })
 </script>
 
-<div style="text-align: center">
+<div class="time_buttons">
 	<button
 		on:click={() => update_graphs(1440, 1)}
-		class:button_highlight={graph_timespan == 1440}>
-		Day (1m)
+		class:button_highlight={graph_timespan == 1440}
+		class="group_first">
+		Day
 	</button>
 	<button
 		on:click={() => update_graphs(10080, 60)}
-		class:button_highlight={graph_timespan == 10080}>
-		Week (1h)
-	</button>
-	<button
-		on:click={() => update_graphs(20160, 60)}
-		class:button_highlight={graph_timespan == 20160}>
-		Two Weeks (1h)
+		class:button_highlight={graph_timespan == 10080}
+		class="group_middle">
+		Week
 	</button>
 	<button
 		on:click={() => update_graphs(43200, 1440)}
-		class:button_highlight={graph_timespan == 43200}>
-		Month (1d)
+		class:button_highlight={graph_timespan == 43200}
+		class="group_middle">
+		Month
 	</button>
 	<button
 		on:click={() => update_graphs(131400, 1440)}
-		class:button_highlight={graph_timespan == 131400}>
-		Quarter (1d)
+		class:button_highlight={graph_timespan == 131400}
+		class="group_middle">
+		Quarter
 	</button>
 	<button
 		on:click={() => update_graphs(525600, 1440)}
-		class:button_highlight={graph_timespan == 525600}>
-		Year (1d)
+		class:button_highlight={graph_timespan == 525600}
+		class="group_middle">
+		Year
 	</button>
 	<button
 		on:click={() => update_graphs(1051200, 1440)}
-		class:button_highlight={graph_timespan == 1051200}>
-		Two Years (1d)
+		class:button_highlight={graph_timespan == 1051200}
+		class="group_last">
+		Two Years
 	</button>
 </div>
 
-<Chart bind:this={graph_bandwidth} data_type="bytes" height="200px" ticks={false}/>
+<Chart bind:this={graph_bandwidth} data_type="bytes" height={chart_height} ticks={false}/>
 <div class="center">
 	{formatDataVolume(total_bandwidth, 3)} free downloads and
 	{formatDataVolume(total_transfer_paid, 3)} paid downloads
 </div>
 
-<Chart bind:this={graph_views_downloads} data_type="number" height="200px" ticks={false}/>
+<Chart bind:this={graph_views_downloads} data_type="number" height={chart_height} ticks={false}/>
 <div class="center">
 	{formatThousands(total_views)} views and
 	{formatThousands(total_downloads)} downloads
@@ -177,4 +180,15 @@ onMount(() => {
 .center {
 	text-align: center;
 }
+.time_buttons {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 2px;
+}
+.time_buttons > button {
+	min-width: 3em;
+	justify-content: center;
+}
 </style>

svelte/src/user_home/dashboard/CardUpload.svelte

@@ -1,10 +1,12 @@
 <script>
 import UploadLib from "./UploadLib.svelte";
+import AddressReputation from "../../home_page/AddressReputation.svelte";
 
 let upload_widget
-
 </script>
 
+<AddressReputation/>
+
 <div class="upload_buttons">
 	<button on:click={() => upload_widget.pick_files() } class="big_button button_highlight">
 		<i class="icon small">cloud_upload</i>

svelte/src/user_home/dashboard/Dashboard.svelte

@@ -8,13 +8,20 @@ import CardUsage from "./CardUsage.svelte";
 import CardActivity from "./CardActivity.svelte";
 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",
@@ -34,15 +41,15 @@ let cards = [
 		id: "usage",
 		elem: CardUsage,
 		title: "Usage",
+	}, {
+		id: "statistics",
+		elem: CardStatistics,
+		title: "Statistics",
 	}, {
 		id: "activiy",
 		elem: CardActivity,
 		title: "Activity",
 		link: "/user/activity",
-	}, {
-		id: "statistics",
-		elem: CardStatistics,
-		title: "Statistics",
 	},
 ]
 const save = () => {
@@ -110,7 +117,7 @@ onMount(() => {
 				/>
 			</div>
 			<div class="card_component">
-				<svelte:component this={card.elem}/>
+				<svelte:component this={card.elem} expanded={card.expanded}/>
 			</div>
 		</div>
 	{/if}{/each}
@@ -129,13 +136,13 @@ onMount(() => {
 	flex: 1 0 auto;
 	display: flex;
 	flex-direction: column;
-	width: 25em;
+	width: 26em;
 	max-width: 100%;
 	background: var(--body_background);
 	border-radius: 8px;
 	padding: 8px;
 	text-align: initial;
-	max-height: 600px;
+	max-height: 500px;
 }
 .card_component {
 	flex: 1 1 auto;