From 509a8170658a08273f756501382cc84d297552f5 Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.me>
Date: Sat, 29 Jun 2024 17:27:46 +0100
Subject: [PATCH] simplified some UI code

---
 src/lib/ui/post/Post.svelte         |  2 +
 src/routes/+layout.svelte           | 20 +++++++
 src/routes/+page.svelte             | 92 ++++++++++++-----------------
 src/routes/post/+page.js            |  5 ++
 src/routes/post/[id]/+layout.svelte | 50 ----------------
 src/routes/post/[id]/+page.js       |  3 -
 src/routes/post/[id]/+page.svelte   | 28 +++++++++
 7 files changed, 94 insertions(+), 106 deletions(-)
 create mode 100644 src/routes/+layout.svelte
 create mode 100644 src/routes/post/+page.js
 delete mode 100644 src/routes/post/[id]/+layout.svelte

diff --git a/src/lib/ui/post/Post.svelte b/src/lib/ui/post/Post.svelte
index df89839..50fa5f9 100644
--- a/src/lib/ui/post/Post.svelte
+++ b/src/lib/ui/post/Post.svelte
@@ -88,6 +88,8 @@
     });
 
     let aria_label = post.user.username + '; ' + post.text + '; ' + post.created_at;
+
+    if (post.reply && post.reply.id === undefined) console.log(post);
 </script>
 
 <div class="post-container">
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..9410aa0
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,20 @@
+<script>
+    import Navigation from '$lib/ui/Navigation.svelte';
+    import Widgets from '$lib/ui/Widgets.svelte';
+</script>
+
+<div id="spacesocial-app">
+
+    <header>
+        <Navigation />
+    </header>
+
+    <main>
+        <slot></slot>
+    </main>
+
+    <div id="widgets">
+        <Widgets />
+    </div>
+
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5ac85b2..fcf000e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -64,60 +64,46 @@
     }
 </script>
 
-<div id="spacesocial-app">
+{#if logged_in === undefined}
+    <div class="loading throb">
+        <span>just a moment...</span>
+    </div>
+{:else if logged_in === false}
+    <form on:submit={log_in} id="login-form">
+        <img class="app-icon light-only" src={LogoLight} width="320px" aria-label="Space Social"/>
+        <img class="app-icon dark-only" src={LogoDark} width="320px" aria-label="Space Social"/>
+        <p>Welcome, fediverse user!</p>
+        <p>Please enter your instance domain to log in.</p>
+        <div class="input-wrapper">
+            <input type="text" id="host" aria-label="instance domain" class={logging_in ? "throb" : ""}>
+                         {#if instance_url_error}
+                             <p class="error">{instance_url_error}</p>
+                         {/if}
+        </div>
+        <br>
+        <button type="submit" id="login" class={logging_in ? "disabled" : ""}>Log in</button>
+        <p><small>
+                              Please note this is
+                              <strong><em>extremely experimental software</em></strong>;
+                              things are likely to break!
+                              <br>
+                              If that's all cool with you, welcome aboard!
+        </small></p>
 
+        <p class="form-footer">made with ❤️ by <a href="https://arimelody.me">ari melody</a>, 2024</p>
+    </form>
+{:else}
     <header>
-        <Navigation />
+        <h1>Home</h1>
+        <nav>
+            <Button centered active>Home</Button>
+                <Button centered disabled>Local</Button>
+                    <Button centered disabled>Federated</Button>
+        </nav>
     </header>
 
-    <main>
-        {#if logged_in === undefined}
-            <div class="loading throb">
-                <span>just a moment...</span>
-            </div>
-        {:else if logged_in === false}
-            <form on:submit={log_in} id="login-form">
-                <img class="app-icon light-only" src={LogoLight} width="320px" aria-label="Space Social"/>
-                <img class="app-icon dark-only" src={LogoDark} width="320px" aria-label="Space Social"/>
-                <p>Welcome, fediverse user!</p>
-                <p>Please enter your instance domain to log in.</p>
-                <div class="input-wrapper">
-                    <input type="text" id="host" aria-label="instance domain" class={logging_in ? "throb" : ""}>
-                    {#if instance_url_error}
-                        <p class="error">{instance_url_error}</p>
-                    {/if}
-                </div>
-                <br>
-                <button type="submit" id="login" class={logging_in ? "disabled" : ""}>Log in</button>
-                <p><small>
-                    Please note this is
-                    <strong><em>extremely experimental software</em></strong>;
-                    things are likely to break!
-                    <br>
-                    If that's all cool with you, welcome aboard!
-                </small></p>
-
-                <p class="form-footer">made with ❤️ by <a href="https://arimelody.me">ari melody</a>, 2024</p>
-            </form>
-        {:else}
-            <header>
-                <h1>Home</h1>
-                <nav>
-                    <Button centered active>Home</Button>
-                        <Button centered disabled>Local</Button>
-                            <Button centered disabled>Federated</Button>
-                </nav>
-            </header>
-
-            <Feed />
-        {/if}
-    </main>
-
-    <div id="widgets">
-        <Widgets />
-    </div>
-
-</div>
+    <Feed />
+{/if}
 
 <style>
     form#login-form {
@@ -237,18 +223,18 @@
         font-weight: bold;
     }
 
-    main header {
+    header {
         width: 100%;
         margin: 16px 0 8px 0;
         display: flex;
         flex-direction: row;
     }
 
-    main header h1 {
+    header h1 {
         font-size: 1.5em;
     }
 
-    main header nav {
+    header nav {
         margin-left: auto;
         display: flex;
         flex-direction: row;
diff --git a/src/routes/post/+page.js b/src/routes/post/+page.js
new file mode 100644
index 0000000..c0ac9bd
--- /dev/null
+++ b/src/routes/post/+page.js
@@ -0,0 +1,5 @@
+import { error } from '@sveltejs/kit';
+
+export function load(event) {
+    error(404, 'Not Found');
+}
diff --git a/src/routes/post/[id]/+layout.svelte b/src/routes/post/[id]/+layout.svelte
deleted file mode 100644
index b4b556d..0000000
--- a/src/routes/post/[id]/+layout.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script>
-    import Navigation from '$lib/ui/Navigation.svelte';
-    import Widgets from '$lib/ui/Widgets.svelte';
-    import Button from '$lib/ui/Button.svelte';
-</script>
-
-<div id="spacesocial-app">
-
-    <header>
-        <Navigation />
-    </header>
-
-    <main>
-        <header>
-            <h1>Home</h1>
-            <nav>
-                <Button centered active>Home</Button>
-                <Button centered disabled>Local</Button>
-                <Button centered disabled>Federated</Button>
-            </nav>
-        </header>
-
-        <slot></slot>
-    </main>
-
-    <div id="widgets">
-        <Widgets />
-    </div>
-
-</div>
-
-<style>
-    main header {
-        width: 100%;
-        margin: 16px 0 8px 0;
-        display: flex;
-        flex-direction: row;
-    }
-
-    main header h1 {
-        font-size: 1.5em;
-    }
-
-    main header nav {
-        margin-left: auto;
-        display: flex;
-        flex-direction: row;
-        gap: 8px;
-    }
-</style>
diff --git a/src/routes/post/[id]/+page.js b/src/routes/post/[id]/+page.js
index ea5ef2c..1e38acf 100644
--- a/src/routes/post/[id]/+page.js
+++ b/src/routes/post/[id]/+page.js
@@ -3,9 +3,6 @@ import { Client } from '$lib/client/client.js';
 import { parsePost } from '$lib/client/api.js';
 import { get } from 'svelte/store';
 
-export const prerender = true;
-export const ssr = false;
-
 export async function load({ params }) {
     let client = get(Client.get());
     if (client.app && client.app.token) {
diff --git a/src/routes/post/[id]/+page.svelte b/src/routes/post/[id]/+page.svelte
index ec383ee..a5e9edc 100644
--- a/src/routes/post/[id]/+page.svelte
+++ b/src/routes/post/[id]/+page.svelte
@@ -1,12 +1,22 @@
 <script>
     import '$lib/app.css';
     import Post from '$lib/ui/post/Post.svelte';
+    import Button from '$lib/ui/Button.svelte';
 
     export let data;
     $: main_post = data.posts[0];
     $: replies = data.posts.slice(1);
 </script>
 
+<header>
+    <h1>Home</h1>
+    <nav>
+        <Button centered active>Home</Button>
+        <Button centered disabled>Local</Button>
+        <Button centered disabled>Federated</Button>
+    </nav>
+</header>
+
 <div id="feed" role="feed">
     {#if data.posts.length <= 0}
         <div class="throb">
@@ -24,6 +34,24 @@
 </div>
 
 <style>
+    header {
+        width: 100%;
+        margin: 16px 0 8px 0;
+        display: flex;
+        flex-direction: row;
+    }
+
+    header h1 {
+        font-size: 1.5em;
+    }
+
+    header nav {
+        margin-left: auto;
+        display: flex;
+        flex-direction: row;
+        gap: 8px;
+    }
+
     #feed {
         margin-bottom: 20vh;
     }