add ul.grid, improve /create and SLayout

src/app.html

@@ -187,6 +187,26 @@ ul.column {
   padding: 0;
 }
 
+ul.grid {
+  list-style: none;
+  padding: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: auto;
+}
+
+ul.grid > li {
+  border: 1px solid var(--border);
+  border-radius: .5em;
+  padding: .5em;
+  margin: 1em .5em;
+  text-align: center;
+}
+
+ul.grid > li small {
+  display: block;
+}
+
 a svg {
   text-decoration: none;
 }

src/lib/GuildSelect.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    import type { GuildEntry } from "./backend";
+
+
+let value = $state("");
+
+let suggestions: GuildEntry[] = $state([]);
+</script>
+
+
+<div class="inset-suggestion">
+    <input type="text" name="to" bind:value placeholder="your user page or +guild name" autocomplete="off" />
+    <ul class="column">
+        {#each suggestions as sug}
+        <li><button onclick={(ev)=>{
+            ev.preventDefault();
+            value = sug.name;
+            }}>
+            <faint>+</faint>{sug}
+        </button></li>
+        {:else}
+        <li>
+            <faint>+{value}</faint>
+        </li>
+        {/each}
+        
+    </ul>
+</div>
+
+<style>
+    .inset-suggestion {
+        display: inline-block;
+        position: relative;
+    }
+
+    ul {
+        position: absolute;
+        top: 2em;
+        border: 1px solid var(--border);
+        background-color: var(--background);
+        width: 100%;
+    }
+
+    ul > li {
+        padding: 6px;
+        border-bottom: 1px solid var(--border);
+    }
+
+    :not(:focus) + ul {
+        display: none;
+    }
+
+</style>
+

src/lib/PrivacySelect.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import { RiLink, RiLock2Line, RiPlaneLine, RiStackLine } from "svelte-remixicon";
+
+    let { value = $bindable(0) } = $props();
+</script>
+
+<ul class="grid">
+  <li>
+    <label>
+    <input type="radio" name="privacy" value={0} bind:group={value} />
+    <RiPlaneLine />
+    Public
+    <small class="faint">your followers and public timeline</small>
+  </label>
+</li>
+  <li>
+    <label>
+    <input type="radio" name="privacy" value=1 bind:group={value} />
+    <RiLink />
+    Unlisted
+    <small class="faint">your followers, hide from public timeline</small>
+  </label>
+</li>
+  <li>
+    <label>
+    <input type="radio" name="privacy" value=2 bind:group={value} />
+    <RiStackLine />
+    Friends
+    <small class="faint">mutual followers only</small>
+  </label>
+</li>
+  <li>
+    <label>
+    <input type="radio" name="privacy" value=3 bind:group={value} />
+    <RiLock2Line />
+    Only you
+    <small class="faint">nobody else</small>
+  </label>
+</li>
+</ul>
+
+<style>
+
+@media (max-width: 1099px) {
+  ul.grid {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+
+@media (max-width: 699px) {
+  ul.grid {
+    grid-template-columns: 1fr 1fr;
+  } 
+}
+
+li:has(:checked) {
+  border-color: var(--accent);
+}
+</style>

src/lib/SLayout.svelte

@@ -46,14 +46,14 @@ let mobiRightActive = $state(false);
   .layout-licon, .layout-ricon { display: none; }
 
 }
-@media (min-width: 800px) and (max-width: 919px) {
+@media (min-width: 800px) and (max-width: 959px) {
   .layout-left, .layout-right {
     font-size: smaller;
   }
 }
 
 
-@media (min-width: 920px) {
+@media (min-width: 960px) {
   .layout {
     grid-template-columns: 240px auto 240px;
   }
@@ -61,13 +61,13 @@ let mobiRightActive = $state(false);
   .layout-licon, .layout-ricon { display: none; }
 }
 
-@media (min-width: 1000px) {
+@media (min-width: 1080px) {
   .layout {
     grid-template-columns: 270px auto 270px;
   }
 }
 
-@media (min-width: 1080px) {
+@media (min-width: 1200px) {
   .layout {
     grid-template-columns: 300px auto 300px;
   }

src/routes/create/+page.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
     import Centered from "$lib/Centered.svelte";
     import { getMe } from "$lib/globals.svelte";
+    import GuildSelect from "$lib/GuildSelect.svelte";
+    import PrivacySelect from "$lib/PrivacySelect.svelte";
     import SLayout from "$lib/SLayout.svelte";
+    import { RiErrorWarningLine } from "svelte-remixicon";
 
     let me = getMe();
 
     let content = $state("");
+    let privacy = $state(0);
 
     let contentLength = $derived(content.length);
 
@@ -14,35 +18,43 @@
 
 {#if me}
 <SLayout title="New post">
-    <form method="POST">
+  <form method="POST" class="card">
-        <p>Posting as <strong>@{me.username}</strong></p>
+    <p>Posting as <strong>@{me.username}</strong></p>
 
-        <label>
+    <label>
-            Post to: <!-- TODO autocomplete! -->
+      Post to: <!-- TODO autocomplete! -->
-            <input />
+      <GuildSelect />
-        </label>
+    </label>
 
-        <label>
+    <label>
-            <input type="text" name="title" maxlength=256 placeholder="An interesting title"/>
+      <input type="text" name="title" maxlength=256 placeholder="An interesting title"/>
-        </label>
+    </label>
-        
-        <label>
-            <textarea bind:value={content}></textarea>
-            <output><small class="faint">{contentLength} chars</small></output>
-        </label>
-    </form>
-
-    {#snippet left()}
-        ...
-    {/snippet}
     
-    {#snippet right()}
+    <label>
-        ...
+      <textarea bind:value={content}></textarea>
-    {/snippet}
+      <output><small class="faint">{contentLength} chars</small></output>
+    </label>
+
+    <PrivacySelect bind:value={privacy} />
+    {#if privacy === 0}
+      <span class="warning"><RiErrorWarningLine /> Your post will be PUBLIC!</span>
+    {/if}
+
+    <button class="card primary" disabled>Create</button>
+    
+  </form>
+
+  {#snippet left()}
+      ...
+  {/snippet}
+  
+  {#snippet right()}
+      ...
+  {/snippet}
 </SLayout>
 {:else}
 <Centered>
-    You must be <a href="login">logged in</a> in order to create posts.
+  You must be <a href="login">logged in</a> in order to create posts.
 </Centered>
 {/if}