Add filesystem card to dashboard

res/static/style/layout.css

@@ -336,7 +336,7 @@ h1 {
 }
 
 h2 {
-	font-size: 2em;
+	font-size: 1.8em;
 	border-bottom: 1px var(--separator) solid;
 }
 

res/template/apps.html

@@ -17,11 +17,10 @@
 			<h1>Apps</h1>
 		</header>
 		<div id="page_content" class="page_content">
-			<section>
+			<section class="highlight_border" style="text-align: initial">
 				<h2>ShareX</h2>
 				<div class="specs">
-					Platform: Windows 7, 8.1 and 10 |
+					Platform: Windows | License: GPL-3.0 |
-					License: GPL-3.0 |
 					<a href="https://getsharex.com">Website</a> |
 					<a href="https://github.com/ShareX/ShareX">GitHub</a>
 				</div>
@@ -35,25 +34,11 @@
 					here</a>.
 				</p>
 				<p>
-					Here you can download our custom ShareX uploader which uses
+					You can download a custom ShareX uploader profile which uses
-					pixeldrain to upload your files.
+					your pixeldrain account for uploading files on the <a
+					href="/user/connect_app?app=sharex">account apps page</a>.
 				</p>
 
-				<div class="highlight_shaded" style="clear: right;">
-					<a href="/misc/sharex/pixeldrain.com.sxcu" class="button button_highlight">
-						<i class="icon small">save</i>
-						Download ShareX Uploader
-					</a><br/>
-
-					{{if .Authenticated}}
-					This uploader is configured to upload files to your personal
-					pixeldrain account. Do not share the configuration file with
-					anyone, it contains your account credentials.
-					{{else}}
-					<a href="/login">Log in</a> to use ShareX with your own
-					pixeldrain account. {{end}}
-				</div>
-
 				<h3>Setting pixeldrain as default uploader</h3>
 				<p>
 					Download the uploader config and choose 'Open file'<br/>
@@ -61,7 +46,9 @@
 					Set pixeldrain.com as active uploader. Choose Yes<br/>
 					<img src="/res/img/sharex_default.png" style="max-width: 100%;" /><br/>
 				</p>
-
+			</section>
+			<br/>
+			<section class="highlight_border" style="text-align: initial">
 				<h2>Drainy</h2>
 				<div class="specs">
 					Platform: Windows, Linux, Android |
@@ -74,7 +61,9 @@
 					pixeldrain. Supports uploading to accounts, copying download
 					links to the clipboard and has an upload history screen.
 				</p>
-
+			</section>
+			<br/>
+			<section class="highlight_border" style="text-align: initial">
 				<h2 style="clear: both;">Pixeldrain Android</h2>
 				<div class="specs">
 					Platform: Android |
@@ -87,7 +76,9 @@
 					href="https://github.com/wimvdputten/Pixeldrain_android/releases">
 					GitHub releases page</a>.
 				</p>
-
+			</section>
+			<br/>
+			<section class="highlight_border" style="text-align: initial">
 				<h2>go-pd</h2>
 				<div class="specs">
 					Platform: Linux, Mac OS, Windows (CLI) |
@@ -104,7 +95,9 @@
 					href="https://github.com/ManuelReschke/go-pd/releases">
 					GitHub releases page</a>.
 				</p>
-
+			</section>
+			<br/>
+			<section class="highlight_border" style="text-align: initial">
 				<h2>go-pixeldrain</h2>
 				<div class="specs">
 					Platform: Linux, Mac OS, Windows (CLI) |
@@ -120,7 +113,9 @@
 					href="https://github.com/jkawamoto/go-pixeldrain/releases">
 					GitHub releases page</a>.
 				</p>
-
+			</section>
+			<br/>
+			<section class="highlight_border" style="text-align: initial">
 				<h2>pdup</h2>
 				<div class="specs">
 					Platform: Linux, BSD, Mac OS (CLI) |
@@ -133,7 +128,9 @@
 					href="https://github.com/Fornax96/pdup">from
 					GitHub</a>.
 				</p>
+			</section>
 
+			<section>
 				<h2>More apps</h2>
 				<p>
 					If you know more open source apps which work with pixeldrain

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:click|preventDefault={() => dispatch("node_click", index)}
-			on:contextmenu={e => {dispatch("node_context", {event: e, index: 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}>
+		class:button_highlight={graph_timespan == 1440}
-		Day (1m)
+		class="group_first">
+		Day
 	</button>
 	<button
 		on:click={() => update_graphs(10080, 60)}
-		class:button_highlight={graph_timespan == 10080}>
+		class:button_highlight={graph_timespan == 10080}
-		Week (1h)
+		class="group_middle">
-	</button>
+		Week
-	<button
-		on:click={() => update_graphs(20160, 60)}
-		class:button_highlight={graph_timespan == 20160}>
-		Two Weeks (1h)
 	</button>
 	<button
 		on:click={() => update_graphs(43200, 1440)}
-		class:button_highlight={graph_timespan == 43200}>
+		class:button_highlight={graph_timespan == 43200}
-		Month (1d)
+		class="group_middle">
+		Month
 	</button>
 	<button
 		on:click={() => update_graphs(131400, 1440)}
-		class:button_highlight={graph_timespan == 131400}>
+		class:button_highlight={graph_timespan == 131400}
-		Quarter (1d)
+		class="group_middle">
+		Quarter
 	</button>
 	<button
 		on:click={() => update_graphs(525600, 1440)}
-		class:button_highlight={graph_timespan == 525600}>
+		class:button_highlight={graph_timespan == 525600}
-		Year (1d)
+		class="group_middle">
+		Year
 	</button>
 	<button
 		on:click={() => update_graphs(1051200, 1440)}
-		class:button_highlight={graph_timespan == 1051200}>
+		class:button_highlight={graph_timespan == 1051200}
-		Two Years (1d)
+		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;