Expandable fixes

svelte/src/util/Expandable.svelte

@@ -1,17 +1,31 @@
 <script>
+// Whether the Expandable is expanded by default
 export let expanded = false
 export const toggle = () => {
 	expanded = !expanded
 }
+
+// Allow the user to expand the Expandable by clicking the title. Use
+// stopPropagation if you want to use other interactive elements in the title
+// bar
+export let click_expand = false
+const header_click = () => {
+	if (click_expand) {
+		toggle()
+	}
+}
+
+// Highlight the title bar if the user moves their mouse over it
+export let highlight = false
 </script>
 
 <div class="expandable">
-	<div class="header">
+	<div class="header" class:click_expand class:highlight on:click={header_click}>
 		<div class="title">
 			<slot name="header"></slot>
 		</div>
 
-		<button class="bucket_expand" on:click={toggle}>
+		<button class="bucket_expand" on:click|stopPropagation={toggle}>
 			{#if expanded}
 			<i class="icon">expand_less</i>
 			{:else}
@@ -28,7 +42,7 @@ export const toggle = () => {
 .expandable {
 	text-decoration: none;
 	background-color: var(--layer_3_color);
-	margin: 0.8em 0;
+	margin: 0.6em 0;
 	border-radius: 6px;
 	overflow: hidden;
 }
@@ -37,9 +51,12 @@ export const toggle = () => {
 	flex-direction: row;
 	color: var(--text_color);
 }
-.header:hover {
+.click_expand:hover, .highlight:hover {
 	background-color: var(--input_color_dark)
 }
+.click_expand {
+	cursor: pointer;
+}
 .title {
 	flex: 1 1 auto;
 	text-align: left;