Add configurable theme colours to filesystem

svelte/src/file_viewer/TransferLimit.svelte

@@ -50,8 +50,6 @@ $: {
 	background: var(--highlight_background);
 	height: 100%;
 	width: 0;
-	border-top-right-radius: 10px;
-	border-bottom-right-radius: 10px;
 	transition: width 5s linear;
 
 	/* Welcome to Hacktown! What's happening here is that the text in the

svelte/src/filesystem/FSNavigator.ts

@@ -149,6 +149,11 @@ export class FSNavigator {
 	cached_siblings: Array<FSNode> | null = null
 
 	async get_siblings() {
+		// If this node is a filesystem root then there are no siblings
+		if (this.path.length < 2) {
+			return []
+		}
+
 		// Check if we already have siblings cached
 		if (
 			this.cached_siblings === null ||

svelte/src/filesystem/Toolbar.svelte

@@ -27,7 +27,7 @@ export const copy_link = () => {
 	setTimeout(() => {link_copied = false}, 60000)
 }
 let share = async () => {
-	if (share_url === "") {
+	if (share_url === "" || navigator.share === undefined) {
 		edit_window.edit(nav.base, true, "share")
 		return
 	}
@@ -114,7 +114,8 @@ let expand = e => {
 			</button>
 		{/if}
 
-		{#if $nav.base.id !== "me"}
+		<!-- Share button is enabled when: The browser has a sharing API, or the user can edit the file (to enable sharing)-->
+		{#if $nav.base.id !== "me" && (navigator.share !== undefined || $nav.permissions.update === true)}
 			<button on:click={share}>
 				<i class="icon">share</i>
 				<span>Share</span>

svelte/src/filesystem/edit_window/BrandingOptions.svelte

@@ -3,7 +3,7 @@ import { createEventDispatcher } from "svelte";
 import FilePicker from "../filemanager/FilePicker.svelte";
 import { fs_update, fs_node_type } from "../FilesystemAPI";
 import CustomBanner from "../viewers/CustomBanner.svelte";
-
+import HelpButton from "../../layout/HelpButton.svelte";
 let dispatch = createEventDispatcher()
 
 export let file = {
@@ -52,6 +52,9 @@ const handle_picker = async e => {
 	if (fs_node_type(f) !== "image") {
 		alert("Please select an image file")
 		return
+	} else if (f.file_size > 5e6) {
+		alert("Please pick a file smaller than 5 MB. You can use WebP to achieve a better compression rate")
+		return
 	}
 
 	// If this image is not public, it will be made public
@@ -70,6 +73,8 @@ const handle_picker = async e => {
 		file.properties.brand_background_image = file_id
 	}
 }
+
+let highlight_info = false
 </script>
 
 <p>
@@ -86,13 +91,24 @@ const handle_picker = async e => {
 <hr/>
 
 <div class="grid" class:disabled={!enabled}>
-	<div>Button</div>
-	<input type="color" bind:value={file.properties.brand_input_color}/>
-	<input type="text" bind:value={file.properties.brand_input_color}/>
-	<div>Highlighted button</div>
+	<div>
+		<div style="display: inline-block">Highlight</div>
+		<HelpButton bind:toggle={highlight_info}/>
+	</div>
 	<input type="color" bind:value={file.properties.brand_highlight_color}/>
 	<input type="text" bind:value={file.properties.brand_highlight_color}/>
-	<div>Danger button</div>
+	{#if highlight_info}
+		<p class="span3">
+			The highlight colour is used for highlighting selected buttons and
+			other elements. It's also used as the page's theme colour, this
+			affects things like the embed colour in Discord and the colour of
+			the address bar in some web browsers.
+		</p>
+	{/if}
+	<div>Button and input</div>
+	<input type="color" bind:value={file.properties.brand_input_color}/>
+	<input type="text" bind:value={file.properties.brand_input_color}/>
+	<div>Delete button</div>
 	<input type="color" bind:value={file.properties.brand_danger_color}/>
 	<input type="text" bind:value={file.properties.brand_danger_color}/>
 	<div>Background</div>

svelte/src/filesystem/edit_window/EditWindow.svelte

@@ -125,7 +125,7 @@ const save = async (keep_editing = false) => {
 }
 </script>
 
-<Modal bind:visible={visible} title="Edit {file.name}" width="700px" form="edit_form" style="color: var(--body_text_color); {custom_css}">
+<Modal bind:visible={visible} title="Edit {file.name}" width="800px" form="edit_form" style="color: var(--body_text_color); {custom_css}">
 	<div class="tab_bar">
 		<button class:button_highlight={tab === "file"} on:click={() => tab = "file"}>
 			<i class="icon">edit</i>

svelte/src/layout/HelpButton.svelte

@@ -0,0 +1,20 @@
+<script>
+export let toggle = false;
+</script>
+
+<button class="button small_button round"
+	class:button_highlight={toggle}
+	style="margin: 0;"
+	on:click={() => toggle = !toggle}
+>
+	<i class="icon">help</i>
+</button>
+
+<style>
+.button {
+	flex: 0 0 content;
+	background: none;
+	color: var(--body_text_color);
+	box-shadow: none;
+}
+</style>