Replace CSS classes with semantic HTML

svelte/src/user_buckets/UserBucket.svelte

@@ -1,13 +1,10 @@
 <script>
 import { fs_delete_bucket } from "../filesystem/FilesystemAPI.svelte";
 import { createEventDispatcher } from "svelte";
+import Expandable from "../util/Expandable.svelte";
 let dispatch = createEventDispatcher()
 
 export let bucket
-let details_hidden = true
-const expand_bucket = () => {
-	details_hidden = !details_hidden
-}
 
 const save_bucket = () => {
 	alert("save")
@@ -32,21 +29,14 @@ const delete_bucket = async () => {
 
 </script>
 
-<div class="bucket">
-	<div class="bucket_header">
+<Expandable>
+	<div slot="header">
 		<a href={'/d/' + bucket.id} class="bucket_title">
 			<img class="bucket_icon" src="/res/img/mime/folder-remote.png" alt="Bucket icon"/>
 			{bucket.name}
 		</a>
-		<button class="bucket_expand" on:click={expand_bucket}>
-			{#if details_hidden}
-			<i class="icon">expand_more</i>
-			{:else}
-			<i class="icon">expand_less</i>
-			{/if}
-		</button>
 	</div>
-	<div class="bucket_details" class:hidden={details_hidden}>
+	<div>
 		<form on:submit|preventDefault={save_bucket}>
 			<table class="form">
 				<tr class="form">
@@ -66,26 +56,9 @@ const delete_bucket = async () => {
 			</table>
 		</form>
 	</div>
-</div>
+</Expandable>
 
 <style>
-.bucket {
-	text-decoration: none;
-	background-color: var(--layer_3_color);
-	transition: box-shadow 0.5s;
-	box-shadow: 1px 1px 5px 0 var(--shadow_color);
-	margin: 1em 0;
-	border-radius: 8px;
-	overflow: hidden;
-}
-.bucket_header {
-	display: flex;
-	flex-direction: row;
-	color: var(--text_color);
-}
-.bucket_header:hover {
-	background-color: var(--input_color_dark)
-}
 .bucket_title {
 	flex: 1 1 auto;
 	align-self: center;
@@ -98,18 +71,4 @@ const delete_bucket = async () => {
 	margin: 4px;
 	vertical-align: middle;
 }
-.bucket_expand {
-	flex: 0 0 auto;
-}
-.bucket_details {
-	display: flex;
-	padding: 0.4em;
-	flex-direction: column;
-	text-decoration: none;
-	border-top: 1px solid var(--layer_3_color_border);
-	color: var(--text_color);
-}
-.hidden {
-	display: none;
-}
 </style>