Add acknowledgements

2020-12-15 16:25:20 +01:00
parent e35e6b0f45
commit 75ca29d06b
10 changed files with 397 additions and 299 deletions
--- a/go.mod
+++ b/go.mod
@@ -18,6 +18,6 @@ require (
 	github.com/Fornaxian/pd_mime_type v0.0.0-20200204165508-2815edf3a145
 	github.com/google/uuid v1.1.1
 	github.com/julienschmidt/httprouter v1.3.0
-	github.com/microcosm-cc/bluemonday v1.0.3
-	github.com/russross/blackfriday/v2 v2.0.1
+	github.com/microcosm-cc/bluemonday v1.0.4
+	github.com/russross/blackfriday/v2 v2.1.0
 )
--- a/res/include/md/acknowledgements.md
+++ b/res/include/md/acknowledgements.md
@@ -0,0 +1,43 @@
+# Acknowledgements
+
+## Software used
+
+ * [Go](https://golang.org/)
+ * [ScyllaDB](https://www.scylladb.com/)
+ * [CockroachDB](https://www.cockroachlabs.com/)
+ * [Nginx](https://www.nginx.com/)
+ * [Ubuntu Server edition](https://ubuntu.com/)
+ * [Debian](https://www.debian.org/)
+
+## Programming libraries
+
+ * [scylladb/gocql](https://github.com/scylladb/gocql)
+ * [scylladb/gocqlx](https://github.com/scylladb/gocqlx)
+ * [lib/pq](github.com/lib/pq)
+ * [jmoiron/sqlx](https://github.com/jmoiron/sqlx)
+ * [BurntSushi/toml](https://github.com/BurntSushi/toml)
+ * [julienschmidt/httprouter](https://github.com/julienschmidt/httprouter)
+ * [gabriel-vasile/mimetype](https://github.com/gabriel-vasile/mimetype)
+ * [disintegration/imaging](github.com/disintegration/imaging)
+ * [gorilla/websocket](github.com/gorilla/websocket)
+ * [shopspring/decimal](github.com/shopspring/decimal)
+ * [jhillyerd/enmime](github.com/jhillyerd/enmime)
+ * [russross/blackfriday](https://github.com/russross/blackfriday)
+ * [microcosm-cc/bluemonday](github.com/microcosm-cc/bluemonday)
+
+### Web framework
+
+ * [Svelte](https://svelte.dev/)
+
+## Security work
+
+ * 2020-12-06 Security researcher Arian Firoozfar reported a cross-site
+   scripting vulnerability on the file viewer page. The issue was fixed the
+   following day.
+
+ * 2017-12-04 Security researcher Hangyi reported a cross-site scripting
+   vulnerability on the file viewer page. The issue was fixed on the 6th.
+
+If you have discovered a security issue in pixeldrain please disclose it
+responsibly at [support@pixeldrain.com](mailto:support@pixeldrain.com). We do
+not have a bug bounty program.
--- a/res/include/script/admin.js
+++ b/res/include/script/admin.js
@@ -1,32 +1,32 @@
 let graphViews = drawGraph(document.getElementById("views_chart"), "Views", "number");
 let graphBandwidth = drawGraph(document.getElementById("bandwidth_chart"), "Bandwidth", "bytes");
 let graphTimeout = null;
-function loadGraph(minutes, interval, live){
+function loadGraph(minutes, interval, live) {
 	if (graphTimeout !== null) { clearTimeout(graphTimeout) }
 	if (live) {
-		graphTimeout = setTimeout(() => {loadGraph(minutes, interval, true)}, 10000)
+		graphTimeout = setTimeout(() => { loadGraph(minutes, interval, true) }, 10000)
 	}

 	let today = new Date()
 	let start = new Date()
-	start.setMinutes(start.getMinutes()-minutes)
+	start.setMinutes(start.getMinutes() - minutes)

 	fetch(
-		apiEndpoint+"/admin/files/timeseries" +
-		"?start="+start.toISOString() +
-		"&end="+today.toISOString() +
-		"&interval="+interval
+		apiEndpoint + "/admin/files/timeseries" +
+		"?start=" + start.toISOString() +
+		"&end=" + today.toISOString() +
+		"&interval=" + interval
 	).then(resp => {
-		if (!resp.ok) { return Promise.reject("Error: "+resp.status);}
+		if (!resp.ok) { return Promise.reject("Error: " + resp.status); }
 		return resp.json();
 	}).then(resp => {
 		resp.views.timestamps.forEach((val, idx) => {
 			let date = new Date(val);
-			let dateStr = ("00"+(date.getMonth()+1)).slice(-2);
-			dateStr += "-"+("00"+date.getDate()).slice(-2);
-			dateStr += " "+("00"+date.getHours()).slice(-2);
-			dateStr += ":"+("00"+date.getMinutes()).slice(-2);
-			resp.views.timestamps[idx] = "   "+dateStr+"   "; // Poor man's padding
+			let dateStr = ("00" + (date.getMonth() + 1)).slice(-2);
+			dateStr += "-" + ("00" + date.getDate()).slice(-2);
+			dateStr += " " + ("00" + date.getHours()).slice(-2);
+			dateStr += ":" + ("00" + date.getMinutes()).slice(-2);
+			resp.views.timestamps[idx] = "   " + dateStr + "   "; // Poor man's padding
 		});
 		graphViews.data.labels = resp.views.timestamps;
 		graphViews.data.datasets[0].data = resp.views.amounts;
@@ -44,30 +44,30 @@ function loadGraph(minutes, interval, live){
 		resp.views.amounts.forEach(e => { total += e; });
 		document.getElementById("total_views").innerText = formatThousands(total);
 	}).catch(e => {
-		alert("Error requesting time series: "+e);
+		alert("Error requesting time series: " + e);
 	})
 }

 loadGraph(10080, 60, false);

-function loadGraphDate(start, end, interval){
+function loadGraphDate(start, end, interval) {
 	fetch(
-		apiEndpoint+"/admin/files/timeseries" +
-		"?start="+start.toISOString() +
-		"&end="+end.toISOString() +
-		"&interval="+interval
+		apiEndpoint + "/admin/files/timeseries" +
+		"?start=" + start.toISOString() +
+		"&end=" + end.toISOString() +
+		"&interval=" + interval
 	).then(resp => {
-		if (!resp.ok) { return Promise.reject("Error: "+resp.status);}
+		if (!resp.ok) { return Promise.reject("Error: " + resp.status); }
 		return resp.json();
 	}).then(resp => {
 		resp.views.timestamps.forEach((val, idx) => {
 			let date = new Date(val);
 			let dateStr = date.getUTCFullYear() +
-				"-"+("00"+(date.getUTCMonth()+1)).slice(-2) +
-				"-"+("00"+date.getUTCDate()).slice(-2) +
-				" "+("00"+date.getUTCHours()).slice(-2) +
-				":"+("00"+date.getUTCMinutes()).slice(-2);
-			resp.views.timestamps[idx] = "   "+dateStr+"   "; // Poor man's padding
+				"-" + ("00" + (date.getUTCMonth() + 1)).slice(-2) +
+				"-" + ("00" + date.getUTCDate()).slice(-2) +
+				" " + ("00" + date.getUTCHours()).slice(-2) +
+				":" + ("00" + date.getUTCMinutes()).slice(-2);
+			resp.views.timestamps[idx] = "   " + dateStr + "   "; // Poor man's padding
 		});
 		graphViews.data.labels = resp.views.timestamps;
 		graphViews.data.datasets[0].data = resp.views.amounts;
@@ -85,7 +85,7 @@ function loadGraphDate(start, end, interval){
 		resp.views.amounts.forEach(e => { total += e; });
 		document.getElementById("total_views").innerText = formatThousands(total);
 	}).catch(e => {
-		alert("Error requesting time series: "+e);
+		alert("Error requesting time series: " + e);
 	})
 }

@@ -114,19 +114,19 @@ function loadTimespan(span, base) {
 		loadGraphDate(monday, sunday, 60);
 	} else if (span === "month") {
 		let start = new Date(Date.UTC(base.getUTCFullYear(), base.getUTCMonth(), 1));
-		let end = new Date(Date.UTC(base.getUTCFullYear(), base.getUTCMonth()+1, 0, 23, 59, 59));
+		let end = new Date(Date.UTC(base.getUTCFullYear(), base.getUTCMonth() + 1, 0, 23, 59, 59));

 		tsStart = start;
 		loadGraphDate(start, end, 60);
 	} else if (span === "quarter") {
-		let start = new Date(Date.UTC(base.getUTCFullYear(), 3.0 * Math.floor(base.getUTCMonth()/3.0), 1));
-		let end = new Date(Date.UTC(base.getUTCFullYear(), 3.0 * Math.ceil(base.getUTCMonth()/3.0), 0, 23, 59, 59));
+		let start = new Date(Date.UTC(base.getUTCFullYear(), 3.0 * Math.floor(base.getUTCMonth() / 3.0), 1));
+		let end = new Date(Date.UTC(base.getUTCFullYear(), 3.0 * Math.ceil(base.getUTCMonth() / 3.0), 0, 23, 59, 59));

 		tsStart = start;
 		loadGraphDate(start, end, 1440);
 	} else if (span === "year") {
 		let start = new Date(Date.UTC(base.getUTCFullYear(), 0, 1));
-		let end = new Date(Date.UTC(base.getUTCFullYear()+1, 0, 0, 23, 59, 59));
+		let end = new Date(Date.UTC(base.getUTCFullYear() + 1, 0, 0, 23, 59, 59));

 		tsStart = start;
 		loadGraphDate(start, end, 1440);
@@ -139,21 +139,21 @@ function loadTimespan(span, base) {
 function navigateTimespan(forward) {
 	let offYear = 0, offMonth = 0, offDay = 0;
 	switch (tsSpan) {
-	case "day":
-		offDay = 1;
-		break;
-	case "week":
-		offDay = 7;
-		break;
-	case "month":
-		offMonth = 1;
-		break;
-	case "quarter":
-		offMonth = 3;
-		break;
-	case "year":
-		offYear = 1;
-		break;
+		case "day":
+			offDay = 1;
+			break;
+		case "week":
+			offDay = 7;
+			break;
+		case "month":
+			offMonth = 1;
+			break;
+		case "quarter":
+			offMonth = 3;
+			break;
+		case "year":
+			offYear = 1;
+			break;
 	}

 	if (!forward) {
@@ -165,9 +165,9 @@ function navigateTimespan(forward) {
 	loadTimespan(
 		tsSpan,
 		new Date(Date.UTC(
-			tsStart.getUTCFullYear()+offYear,
-			tsStart.getUTCMonth()+offMonth,
-			tsStart.getUTCDay()+offDay,
+			tsStart.getUTCFullYear() + offYear,
+			tsStart.getUTCMonth() + offMonth,
+			tsStart.getUTCDay() + offDay,
 		))
 	)
 }
@@ -184,7 +184,7 @@ let lastOrder;
 function getStats(order) {
 	lastOrder = order

-	fetch(apiEndpoint+"/status").then(
+	fetch(apiEndpoint + "/status").then(
 		resp => resp.json()
 	).then(resp => {
 		document.getElementById("file_stats_watchers").innerText = resp.stats_watcher_threads;
@@ -210,19 +210,8 @@ function getStats(order) {
 		last_remote_read_size = resp.remote_read_size;


-		let c = document.getElementById("tconnstat_body")
-		c.innerHTML = ""
-		resp.db_connection_stats.forEach(v => {
-			let row = document.createElement("tr")
-			row.innerHTML = `\
-			<td>${v.name}</td>
-			<td>${v.available}</td>
-			<td>${v.max_connections}</td>
-			<td>${v.open_connections}</td>
-			<td>${v.connections_in_use}</td>
-			<td>${v.connections_idle}</td>`
-			c.appendChild(row)
-		})
+		document.getElementById("db_time").innerText = printDate(new Date(resp.db_time), true, true, true);
+		document.getElementById("db_latency").innerText = formatNumber(resp.db_latency / 1000, 3) + " ms";

 		let p = document.getElementById("tbody_peers")
 		p.innerHTML = ""
@@ -237,7 +226,7 @@ function getStats(order) {
 			<td>${formatDataVolume(v.free_space, 3)}</td>
 			<td>${formatDataVolume(v.min_free_space, 3)}</td>`

-			if (v.free_space < v.min_free_space/2 || !v.reachable) {
+			if (v.free_space < v.min_free_space / 2 || !v.reachable) {
 				row.classList.add("highlight_red")
 			} else if (v.free_space < v.min_free_space) {
 				row.classList.add("highlight_blue")
@@ -248,7 +237,7 @@ function getStats(order) {
 		})

 		resp.query_statistics.sort((a, b) => {
-			if (typeof(a[order]) === "number") {
+			if (typeof (a[order]) === "number") {
 				// Sort ints from high to low
 				return b[order] - a[order]
 			} else {
@@ -279,4 +268,4 @@ function getStats(order) {
 }
 getStats("calls")

-setInterval(() => {	getStats(lastOrder) }, 5000)
+setInterval(() => { getStats(lastOrder) }, 5000)
--- a/res/include/style/layout.css
+++ b/res/include/style/layout.css
@@ -24,6 +24,7 @@
 	font-family: 'Material Icons';
 	font-style: normal;
 	font-weight: 400;
+	font-display: block;
 	src: local('Material Icons'),
 		local('MaterialIcons-Regular'),
 		url(/res/misc/MaterialIcons-Regular.woff2) format('woff2'),
@@ -95,7 +96,7 @@ body{
 	position: fixed;
 	backface-visibility: hidden;
 	z-index: 99;
-	width: 250px;
+	width: 18em;
 	height: 100%;
 	left: 0;
 	float: left;
@@ -115,7 +116,7 @@ body{
 	z-index: 200;
 	right: 0;
 	height: auto;
-	left: 250px;
+	left: 18em;
 	min-width: 300px;
 	display: inline-block;
 	text-align: center; /* Center the header and body */
@@ -127,7 +128,7 @@ body{
 }
@media (max-width: 800px) {
 	.page_navigation {
-		left: -250px;
+		left: -18em;
 	}
 	.page_body {
 		left: 0;
--- a/res/template/admin.html
+++ b/res/template/admin.html
@@ -15,8 +15,7 @@
 					<h3>Bandwidth and views</h3>
 				</div>
 				<div class="highlight_dark">
-					<button onclick="loadGraph(720, 1, true);">Live</button>
-					<button onclick="loadGraph(1440, 10, true);">Day</button>
+					<button onclick="loadGraph(1440, 1, true);">Day</button>
 					<button onclick="loadGraph(10080, 10, false);">Week</button>
 					<button onclick="loadGraph(20160, 60, false);">Two Weeks</button>
 					<button onclick="loadGraph(43200, 60, false);">Month</button>
@@ -52,19 +51,13 @@
 				<br/>

 				<div class="limit_width">
-					<h3>Database connection statistics</h3>
 					<table>
-						<thead>
-							<tr>
-								<td>Name</td>
-								<td>Available</td>
-								<td>Max</td>
-								<td>Open</td>
-								<td>In use</td>
-								<td>Idle</td>
-							</tr>
-						</thead>
-						<tbody id="tconnstat_body"></tbody>
+						<tr>
+							<td>DB Time</td>
+							<td id="db_time"></td>
+							<td>DB Latency</td>
+							<td id="db_latency"></td>
+						</tr>
 					</table>
 					<h3>Pixelstore peers</h3>
 					<table>
--- a/res/template/fragments/page_wrap.html
+++ b/res/template/fragments/page_wrap.html
@@ -15,9 +15,9 @@
 	{{end}}
 	<hr />
 	<a href="/about">About</a>
-	<!--<a href="/technology">Technology</a>-->
-	<a href="/api">API</a>
 	<a href="/appearance">Appearance</a>
+	<a href="/api">API</a>
+	<a href="/acknowledgements">Acknowledgements</a>
 </div>
 <script>
 	function toggleMenu() {
--- a/svelte/src/filesystem/filemanager/FileManager.svelte
+++ b/svelte/src/filesystem/filemanager/FileManager.svelte
@@ -269,7 +269,7 @@ const toggle_select = () => {
 }
 .directory :global(.node_icon) {
 	height: 32px;
-	width: auto;
+	width: 32px;
 	vertical-align: middle;
 }
 .directory :global(.node_name) {
--- a/svelte/src/filesystem/filemanager/FileUploader.svelte
+++ b/svelte/src/filesystem/filemanager/FileUploader.svelte
@@ -1,210 +1,237 @@
 <script>
-import { createEventDispatcher } from "svelte";
-let dispatch = createEventDispatcher()
+	import { createEventDispatcher } from "svelte";
+	let dispatch = createEventDispatcher();

-export let bucket_id
-export let target_dir
+	export let bucket_id;
+	export let target_dir;

-let upload_jobs = []
-let upload_threads = 0
-let max_upload_threads = 4
+	let upload_jobs = [];
+	let upload_threads = 0;
+	let max_upload_threads = 3;

-// Adds files to the upload queue. The file_list parameter needs to be of type
-// FileList. Upload will also create the necessary directories to place nested
-// files in.
-export const upload = (file_list) => {
-	for (let i = 0; i < file_list.length; i++) {
-		upload_jobs.push({
-			file: file_list[i],
-			progress: 0,
-			target_dir: target_dir.valueOf(),
-			uploading: false,
-			finished: false,
-			tries: 0,
-		})
-	}
-
-	// This updates the UI
-	upload_jobs = upload_jobs
-
-	while (upload_threads < max_upload_threads) {
-		upload_threads++
-		setTimeout(upload_file, 1)
-	}
-}
-
-const uploads_finished = () => {
-	dispatch("finished")
-}
-
-const upload_file = () => {
-	let job = null
-	for (let i = 0; i < upload_jobs.length; i++) {
-		// If a file is done we remove it from the array
-		if (upload_jobs[i].progress >= 1) {
-			upload_jobs.splice(i, 1)
-			continue
+	// Adds files to the upload queue. The file_list parameter needs to be of type
+	// FileList. Upload will also create the necessary directories to place nested
+	// files in.
+	export const upload = (file_list) => {
+		for (let i = 0; i < file_list.length; i++) {
+			upload_jobs.push({
+				file: file_list[i],
+				progress: 0,
+				target_dir: target_dir.valueOf(),
+				uploading: false,
+				finished: false,
+				tries: 0,
+			});
 		}

-		if (upload_jobs[i].uploading === false && upload_jobs[i].finished === false) {
-			job = upload_jobs[i]
-			job.uploading = true
-			upload_jobs = upload_jobs
-			break
+		// This updates the UI
+		upload_jobs = upload_jobs;
+
+		while (upload_threads < max_upload_threads) {
+			upload_threads++;
+			setTimeout(upload_file, 1);
 		}
-	}
-	if (job === null) {
-		upload_threads--
-
-		if (upload_threads === 0) {
-			uploads_finished()
-		}
-		return
-	}
-
-	console.log(job)
-
-	let form = new FormData();
-	form.append("type", "file")
-	form.append("file", job.file)
-
-	let xhr = new XMLHttpRequest();
-	xhr.open(
-		"POST",
-		"/api/filesystem/"+bucket_id+encodeURIComponent(
-			job.target_dir+"/"+job.file.name,
-		),
-		true,
-	);
-	xhr.timeout = 21600000; // 6 hours, to account for slow connections
-
-	// Report progress updates back to the caller
-	xhr.upload.addEventListener("progress", evt => {
-		if (evt.lengthComputable) {
-			job.progress = evt.loaded / evt.total
-			upload_jobs = upload_jobs
-		}
-	});
-
-	xhr.onreadystatechange = () => {
-		// readystate 4 means the upload is done
-		if (xhr.readyState !== 4) { return; }
-
-		if (xhr.status >= 100 && xhr.status < 400) {
-			// Request is a success
-
-			// Finish the upload job
-			job.uploading = false
-			job.finished = true
-			upload_file()
-		} else if (xhr.status >= 400) {
-			// Request failed
-			console.log("Upload error. status: " + xhr.status + " response: " + xhr.response);
-			let resp = JSON.parse(xhr.response);
-			if (job.tries === 3) { // Upload failed
-				return
-			} else { // Try again
-				job.tries++;
-				job.uploading = false
-				job.finished = false
-			}
-
-			// Sleep the upload thread for 5 seconds
-			setTimeout(upload_file, 5000);
-		} else {
-			// Request did not arrive
-			if (job.tries === 3) { // Upload failed
-				alert("upload failed "+xhr.responseText)
-				job.uploading = false
-				job.finished = false
-			} else { // Try again
-				job.tries++;
-			}
-
-			// Sleep the upload thread for 5 seconds
-			setTimeout(upload_file, 5000);
-		}
-
-		upload_jobs = upload_jobs
 	};
-	xhr.send(form);
-}

-// File input dialog handling
-let file_input
-export const picker = () => { file_input.click() }
-const file_input_change = e => {
-	upload(e.target.files)
-	file_input.nodeValue = ""
-}
+	const uploads_finished = () => {
+		dispatch("finished");
+	};

-// Drag and drop upload
-let hidden = true
-const dragover = e => { hidden = false }
-const dragleave = e => { hidden = true }
-const drop = e => {
-	hidden = true
-	upload(e.dataTransfer.files)
-}
-const paste = e => {
-	if (e.clipboardData.files[0]) {
-		e.preventDefault()
-		e.stopPropagation()
-		console.log(e.clipboardData.files[0].getAsFile())
-	}
-}
+	const upload_file = () => {
+		let job = null;
+		for (let i = 0; i < upload_jobs.length; i++) {
+			// If a file is done we remove it from the array
+			if (upload_jobs[i].progress >= 1) {
+				upload_jobs.splice(i, 1);
+				continue;
+			}

+			if (
+				upload_jobs[i].uploading === false &&
+				upload_jobs[i].finished === false
+			) {
+				job = upload_jobs[i];
+				job.uploading = true;
+				upload_jobs = upload_jobs;
+				break;
+			}
+		}
+		if (job === null) {
+			upload_threads--;
+
+			if (upload_threads === 0) {
+				uploads_finished();
+			}
+			return;
+		}
+
+		console.log(job);
+
+		let form = new FormData();
+		form.append("type", "file");
+		form.append("file", job.file);
+
+		let xhr = new XMLHttpRequest();
+		xhr.open(
+			"POST",
+			"/api/filesystem/" +
+				bucket_id +
+				encodeURIComponent(job.target_dir + "/" + job.file.name),
+			true
+		);
+		xhr.timeout = 21600000; // 6 hours, to account for slow connections
+
+		// Report progress updates back to the caller
+		xhr.upload.addEventListener("progress", (evt) => {
+			if (evt.lengthComputable) {
+				job.progress = evt.loaded / evt.total;
+				upload_jobs = upload_jobs;
+			}
+		});
+
+		xhr.onreadystatechange = () => {
+			// readystate 4 means the upload is done
+			if (xhr.readyState !== 4) {
+				return;
+			}
+
+			if (xhr.status >= 100 && xhr.status < 400) {
+				// Request is a success
+
+				// Finish the upload job
+				job.uploading = false;
+				job.finished = true;
+				upload_file();
+			} else if (xhr.status >= 400) {
+				// Request failed
+				console.log(
+					"Upload error. status: " +
+						xhr.status +
+						" response: " +
+						xhr.response
+				);
+				let resp = JSON.parse(xhr.response);
+				if (job.tries === 3) {
+					// Upload failed
+					return;
+				} else {
+					// Try again
+					job.tries++;
+					job.uploading = false;
+					job.finished = false;
+				}
+
+				// Sleep the upload thread for 5 seconds
+				setTimeout(upload_file, 5000);
+			} else {
+				// Request did not arrive
+				if (job.tries === 3) {
+					// Upload failed
+					alert("upload failed " + xhr.responseText);
+					job.uploading = false;
+					job.finished = false;
+				} else {
+					// Try again
+					job.tries++;
+				}
+
+				// Sleep the upload thread for 5 seconds
+				setTimeout(upload_file, 5000);
+			}
+
+			upload_jobs = upload_jobs;
+		};
+		xhr.send(form);
+	};
+
+	// File input dialog handling
+	let file_input;
+	export const picker = () => {
+		file_input.click();
+	};
+	const file_input_change = (e) => {
+		upload(e.target.files);
+		file_input.nodeValue = "";
+	};
+
+	// Drag and drop upload
+	let hidden = true;
+	const dragover = (e) => {
+		hidden = false;
+	};
+	const dragleave = (e) => {
+		hidden = true;
+	};
+	const drop = (e) => {
+		hidden = true;
+		upload(e.dataTransfer.files);
+	};
+	const paste = (e) => {
+		if (e.clipboardData.files[0]) {
+			e.preventDefault();
+			e.stopPropagation();
+			console.log(e.clipboardData.files[0].getAsFile());
+		}
+	};
 </script>

+<style>
+	.hidden {
+		display: none;
+	}
+
+	.file_input {
+		display: block;
+		visibility: hidden;
+		width: 0;
+		height: 0;
+	}
+
+	.file_upload {
+		display: block;
+		text-align: left;
+		width: 100%;
+		margin: 6px 0 0 0;
+		padding: 0;
+		background-color: var(--layer_2_color);
+		box-shadow: 1px 1px var(--layer_2_shadow) var(--shadow_color);
+	}
+
+	.upload_progress_bar {
+		width: 100%;
+		height: 2px;
+	}
+	.upload_progress {
+		background-color: var(--highlight_color);
+		height: 100%;
+	}
+</style>
+
 <svelte:body
 	on:dragover|preventDefault|stopPropagation={dragover}
 	on:dragleave|preventDefault|stopPropagation={dragleave}
 	on:drop|preventDefault|stopPropagation={drop}
-	on:paste={paste}
-/>
+	on:paste={paste} />

 <div>
-	<input class="file_input" bind:this={file_input} on:change={file_input_change} type="file" multiple="multiple"/>
+	<input
+		class="file_input"
+		bind:this={file_input}
+		on:change={file_input_change}
+		type="file"
+		multiple="multiple" />
 	<div class:hidden class="highlight_green">
 		Drop files here to upload them
 	</div>

 	{#each upload_jobs as c}
 		<div class="file_upload">
-			&nbsp;{c.file.name}&nbsp;<br/>
+			&nbsp;{c.file.name}&nbsp;<br />
 			<div class="upload_progress_bar">
-				<div class="upload_progress" style="width: {c.progress*100}%"></div>
+				<div
+					class="upload_progress"
+					style="width: {c.progress * 100}%" />
 			</div>
 		</div>
 	{/each}
 </div>
-
-<style>
-.hidden {display: none;}
-
-.file_input {
-	display: block;
-	visibility: hidden;
-	width: 0;
-	height: 0;
-}
-
-.file_upload {
-	display: block;
-	text-align: left;
-	width: 100%;
-	margin: 6px 0 0 0;
-	padding: 0;
-	background-color: var(--layer_2_color);
-	box-shadow: 1px 1px var(--layer_2_shadow) var(--shadow_color);
-}
-
-.upload_progress_bar {
-	width: 100%;
-	height: 2px;
-}
-.upload_progress {
-	background-color: var(--highlight_color);
-	height: 100%;
-}
-</style>
--- a/svelte/src/user_buckets/UserBuckets.svelte
+++ b/svelte/src/user_buckets/UserBuckets.svelte
@@ -3,37 +3,81 @@ import { onMount } from "svelte";
 import Spinner from "../util/Spinner.svelte";
 import { fs_get_buckets } from "../filesystem/FilesystemAPI.svelte";

-let loading = true
-let buckets = []
+let loading = true;
+let buckets = [];

 const get_buckets = async () => {
 	try {
-		let resp = await fs_get_buckets()
-		buckets = resp.buckets
+		let resp = await fs_get_buckets();
+		buckets = resp.buckets;
 	} catch (err) {
-		alert(err)
+		alert(err);
 	} finally {
-		loading = false
+		loading = false;
 	}
+};
+
+const expand_bucket = () => {
+
 }

-onMount(get_buckets)
-
+onMount(get_buckets);
 </script>

 <div>
 	{#if loading}
-		<div class="spinner_container"><Spinner></Spinner></div>
+		<div class="spinner_container">
+			<Spinner />
+		</div>
 	{/if}

-	{#each buckets as bucket}
-	<a href={"/d/"+bucket.id}>{bucket.name}</a>
-	{/each}
+	<div class="limit_width">
+		{#each buckets as bucket}
+			<a class="bucket_header" href={'/d/' + bucket.id}>
+				<div class="bucket_title">{bucket.name}</div>
+				<button class="bucket_expand" on:click|preventDefault={expand_bucket}><i class="icon">expand_more</i></button>
+			</a>
+			<div class="bucket_details">
+				Hello!
+			</div>
+		{/each}
+	</div>
 </div>
+
 <style>
-	.spinner_container {
-		display: inline-block;
-		height: 100px;
-		width: 100px;
-	}
+.spinner_container {
+	display: inline-block;
+	height: 100px;
+	width: 100px;
+}
+.bucket_header {
+	display: flex;
+	flex-direction: row;
+	text-decoration: none;
+	color: var(--text_color);
+	background-color: var(--layer_3_color);
+	transition: box-shadow 0.5s;
+	box-shadow: 1px 1px var(--layer_2_shadow) 0 var(--shadow_color);
+}
+.bucket_header:hover {
+	box-shadow: 0 0 2px 2px var(--highlight_color), inset 0 0 1px 1px var(--highlight_color);
+	color: var(--highlight_color);
+	text-decoration: none;
+}
+.bucket_title {
+	flex: 1 1 auto;
+	align-self: center;
+	padding: 0.4em;
+}
+.bucket_expand {
+	flex: 0 0 auto;
+}
+.bucket_details {
+	display: flex;
+	flex-direction: column;
+	text-decoration: none;
+	color: var(--text_color);
+	background-color: var(--layer_3_color);
+	transition: box-shadow 0.5s;
+}
 </style>
--- a/webcontroller/web_controller.go
+++ b/webcontroller/web_controller.go
@@ -104,21 +104,22 @@ func New(
 		handler httprouter.Handle // The function to run when this API is called
 	}{
 		// General navigation
-		{GET, "" /*             */, wc.serveTemplate("home", false)},
-		{GET, "api" /*          */, wc.serveMarkdown("apidoc.md", false)},
-		{GET, "history" /*      */, wc.serveTemplate("history_cookies", false)},
-		{GET, "u/:id" /*        */, wc.serveFileViewer},
-		{GET, "u/:id/preview" /**/, wc.serveFilePreview},
-		{GET, "l/:id" /*        */, wc.serveListViewer},
-		{GET, "s/:id" /*        */, wc.serveSkynetViewer},
-		{GET, "t" /*            */, wc.serveTemplate("text_editor", false)},
-		{GET, "donation" /*     */, wc.serveMarkdown("donation.md", false)},
-		{GET, "subscribe" /*    */, wc.serveMarkdown("subscribe.md", false)},
-		{GET, "widgets" /*      */, wc.serveTemplate("widgets", false)},
-		{GET, "about" /*        */, wc.serveMarkdown("about.md", false)},
-		{GET, "appearance" /*   */, wc.serveTemplate("appearance", false)},
-		{GET, "hosting" /*      */, wc.serveMarkdown("hosting.md", false)},
-		{GET, "brave" /*        */, wc.serveMarkdown("brave.md", false)},
+		{GET, "" /*                */, wc.serveTemplate("home", false)},
+		{GET, "api" /*             */, wc.serveMarkdown("apidoc.md", false)},
+		{GET, "history" /*         */, wc.serveTemplate("history_cookies", false)},
+		{GET, "u/:id" /*           */, wc.serveFileViewer},
+		{GET, "u/:id/preview" /*   */, wc.serveFilePreview},
+		{GET, "l/:id" /*           */, wc.serveListViewer},
+		{GET, "s/:id" /*           */, wc.serveSkynetViewer},
+		{GET, "t" /*               */, wc.serveTemplate("text_editor", false)},
+		{GET, "donation" /*        */, wc.serveMarkdown("donation.md", false)},
+		{GET, "subscribe" /*       */, wc.serveMarkdown("subscribe.md", false)},
+		{GET, "widgets" /*         */, wc.serveTemplate("widgets", false)},
+		{GET, "about" /*           */, wc.serveMarkdown("about.md", false)},
+		{GET, "appearance" /*      */, wc.serveTemplate("appearance", false)},
+		{GET, "hosting" /*         */, wc.serveMarkdown("hosting.md", false)},
+		{GET, "brave" /*           */, wc.serveMarkdown("brave.md", false)},
+		{GET, "acknowledgements" /**/, wc.serveMarkdown("acknowledgements.md", false)},

 		// User account pages
 		{GET, "register" /*        */, wc.serveForm(wc.registerForm, false)},