Add filesystem card to dashboard

svelte/src/filesystem/filemanager/ListView.svelte

@@ -8,6 +8,8 @@ let dispatch = createEventDispatcher()
 export let state
 export let show_hidden = false
 export let large_icons = false
+export let hide_edit = false
+export let hide_branding = false
 </script>
 
 <div class="directory">
@@ -20,8 +22,8 @@ export let large_icons = false
 	{#each state.children as child, index (child.path)}
 		<a
 			href={"/d"+fs_encode_path(child.path)}
-			on:click|preventDefault={() => {dispatch("node_click", index)}}
-			on:contextmenu={e => {dispatch("node_context", {event: e, index: index})}}
+			on:click|preventDefault={() => dispatch("node_click", index)}
+			on:contextmenu={e => dispatch("node_context", {event: e, index: index})}
 			class="node"
 			class:node_selected={child.fm_selected}
 			class:hidden={child.name.startsWith(".") && !show_hidden}
@@ -50,12 +52,12 @@ export let large_icons = false
 						<i class="icon" title="This file / directory is shared. Click to open public link">share</i>
 					</a>
 				{/if}
-				{#if child.properties && child.properties.branding_enabled}
+				{#if child.properties && child.properties.branding_enabled && !hide_branding}
 					<button class="action_button" on:click|preventDefault|stopPropagation={() => dispatch("node_branding", index)}>
 						<i class="icon">palette</i>
 					</button>
 				{/if}
-				{#if state.permissions.update}
+				{#if state.permissions.update && !hide_edit}
 					<button class="action_button" on:click|preventDefault|stopPropagation={() => dispatch("node_settings", index)}>
 						<i class="icon">edit</i>
 					</button>

svelte/src/home_page/AddressReputation.svelte

@@ -4,7 +4,6 @@ import Expandable from "../util/Expandable.svelte";
 import { formatDate } from "../util/Formatting.svelte";
 
 let result = null;
-let offences = 0
 
 onMount(async () => {
 	try {
@@ -19,7 +18,6 @@ onMount(async () => {
 })
 </script>
 
-
 {#if result !== null && result.user_banned}
 	<section>
 		<Expandable click_expand>
@@ -149,10 +147,7 @@ onMount(async () => {
 	</section>
 {/if}
 
-
-
 <style>
-
 .header {
 	display: flex;
 	align-items: center;

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;