Add content policy and add abuse categories

svelte/src/user_buckets/UserBuckets.svelte

@@ -1,5 +1,6 @@
 <script>
 import { onMount } from "svelte";
+import Bucket from "./Bucket.svelte";
 import Spinner from "../util/Spinner.svelte";
 import { fs_get_buckets } from "../filesystem/FilesystemAPI.svelte";
 
@@ -17,10 +18,6 @@ const get_buckets = async () => {
 	}
 };
 
-const expand_bucket = () => {
-
-}
-
 onMount(get_buckets);
 </script>
 
@@ -32,15 +29,23 @@ onMount(get_buckets);
 	{/if}
 
 	<div class="limit_width">
+		<button style="float: right;">
+			<i class="icon">create_new_folder</i> New bucket
+		</button>
+		<br/>
+		<h2>Persistent buckets</h2>
+		<p>
+			These buckets don't expire, but have limited storage space and
+			bandwidth. Their limits can be raised by buying a subscription.
+		</p>
 		{#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>
+			<Bucket bucket={bucket}></Bucket>
 		{/each}
+		<br/>
+		<h2>Temporary buckets</h2>
+		<p>
+
+		</p>
 	</div>
 </div>
 
@@ -50,34 +55,4 @@ onMount(get_buckets);
 	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>