From fba053e7b197fbedf8a761a5a9f84131074a9fb5 Mon Sep 17 00:00:00 2001
From: Damillora <developer@damillora.com>
Date: Sat, 22 Feb 2025 13:40:02 +0000
Subject: [PATCH] feat: overhaul posts page

---
 .../lib/components/ui/TagLinkNumbered.svelte  | 10 +--
 .../lib/components/ui/TagTypeIndicator.svelte | 12 +++
 web/app/src/routes/+page.svelte               | 14 ++--
 web/app/src/routes/posts/+page.svelte         | 77 +++++++++----------
 web/app/src/routes/tags/+page.svelte          |  3 +-
 5 files changed, 64 insertions(+), 52 deletions(-)
 create mode 100644 web/app/src/lib/components/ui/TagTypeIndicator.svelte

diff --git a/web/app/src/lib/components/ui/TagLinkNumbered.svelte b/web/app/src/lib/components/ui/TagLinkNumbered.svelte
index 1c6c6a2..db80d70 100644
--- a/web/app/src/lib/components/ui/TagLinkNumbered.svelte
+++ b/web/app/src/lib/components/ui/TagLinkNumbered.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    import TagTypeIndicator from "$lib/components/ui/TagTypeIndicator.svelte";
+
     let { tag, num } = $props();
 
     let tagType = tag.split(":")[0] ?? "";
@@ -8,12 +10,6 @@
 
 <a href="/posts?tags={tagName}">
     {tagDisplay}
-    {#if tagType == "character"}
-    <span class="tag is-link is-light">character</span>
-    {:else if tagType == "series"}
-    <span class="tag is-warning is-light">series</span>
-    {:else}
-    <span class="tag">{tagType}</span>
-    {/if}
+    <TagTypeIndicator tagType={tagType}></TagTypeIndicator>
     <span class="is-pulled-right">{num}</span>
 </a>
diff --git a/web/app/src/lib/components/ui/TagTypeIndicator.svelte b/web/app/src/lib/components/ui/TagTypeIndicator.svelte
new file mode 100644
index 0000000..0d0853e
--- /dev/null
+++ b/web/app/src/lib/components/ui/TagTypeIndicator.svelte
@@ -0,0 +1,12 @@
+<script>
+    let { tagType } = $props();
+
+</script>
+
+{#if tagType == "character"}
+<span class="tag is-link is-light">{tagType}</span>
+{:else if tagType == "series"}
+<span class="tag is-warning is-light">{tagType}</span>
+{:else}
+<span class="tag">{tagType}</span>
+{/if}
\ No newline at end of file
diff --git a/web/app/src/routes/+page.svelte b/web/app/src/routes/+page.svelte
index cc69c01..6884781 100644
--- a/web/app/src/routes/+page.svelte
+++ b/web/app/src/routes/+page.svelte
@@ -57,14 +57,18 @@
                     />
                   </div>
                 </div>
-                <div class="control">
-                  <button type="submit" class="button is-primary">
-                    Search
-                  </button>
+                <div class="field">
+                  <div class="control">
+                    <button type="submit" class="button is-primary">
+                      Search
+                    </button>
+                  </div>
                 </div>
               </form>
             </div>
-            <p class="block">Serving <strong>{postCount}</strong> images</p>
+            {#if postCount > 0}
+              <p class="block">Serving <strong>{postCount}</strong> images</p>
+            {/if}
           </div>
         </div>
       </div>
diff --git a/web/app/src/routes/posts/+page.svelte b/web/app/src/routes/posts/+page.svelte
index a13e61c..dd62cee 100644
--- a/web/app/src/routes/posts/+page.svelte
+++ b/web/app/src/routes/posts/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { run } from 'svelte/legacy';
+    import { run } from "svelte/legacy";
 
     import { getPosts, getTag, getTagAutocomplete } from "$lib/api";
     import TagLinkNumbered from "$lib/components/ui/TagLinkNumbered.svelte";
@@ -8,8 +8,8 @@
     import Tags from "svelte-tags-input";
     import { paginate } from "$lib/simple-pagination";
     import { afterNavigate, beforeNavigate, goto } from "$app/navigation";
-    import { page as currentPage } from '$app/stores';
-    import { onMount } from 'svelte';
+    import { page as currentPage } from "$app/stores";
+    import { onMount } from "svelte";
 
     let url = $derived($currentPage.url);
 
@@ -32,7 +32,7 @@
                 .filter(
                     (x) =>
                         !searchTerms.includes(x.tagName) &&
-                        !searchTerms.includes(x.tagType + ":" + x.tagName)
+                        !searchTerms.includes(x.tagType + ":" + x.tagName),
                 )
                 .sort((a, b) => b.postCount - a.postCount);
             totalPages = data.totalPage;
@@ -46,7 +46,7 @@
             pagination = paginate(page, totalPages);
         }
 
-        if (searchTerms.filter(x => !x.startsWith("-")).length == 1) {
+        if (searchTerms.filter((x) => !x.startsWith("-")).length == 1) {
             tagInfo = await getTag({ tag: searchTerms[0] });
         }
     };
@@ -62,7 +62,7 @@
     };
 
     afterNavigate(() => {
-        tagQuery = url.searchParams.get('tags');
+        tagQuery = url.searchParams.get("tags");
         if (tagQuery) {
             searchTerms = tagQuery.split(" ");
         } else {
@@ -72,7 +72,7 @@
         posts = [];
         page = 1;
         getData();
-    })
+    });
     const onSearch = (e) => {
         e.preventDefault();
         if (searchTerms.length > 0) {
@@ -95,14 +95,14 @@
         <div class="block">
             <div class="columns is-multiline">
                 <div class="column is-full">
-                    <div class="block">
-                    </div>
+                    <div class="block"></div>
                 </div>
                 <div class="column is-one-third">
                     <div class="panel is-primary">
+                        <div class="panel-heading">Tags</div>
                         <div class="panel-block column">
                             <form onsubmit={onSearch}>
-                                <div class="field has-addons">
+                                <div class="field">
                                     <div class="control is-expanded">
                                         <div class="control" id="tags">
                                             <Tags
@@ -115,16 +115,35 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="control">
-                                    <button
-                                        type="submit"
-                                        class="button is-primary"
-                                    >
-                                        Search
-                                    </button>
+                                <div class="field">
+                                    <div class="control">
+                                        <button
+                                            type="submit"
+                                            class="button is-primary"
+                                        >
+                                            Search
+                                        </button>
+                                    </div>
                                 </div>
                             </form>
                         </div>
+                        <div class="panel-block column">
+                            <div class="menu">
+                                <ul class="menu-list">
+                                    {#each tags as tag (tag)}
+                                        <li>
+                                            <TagLinkNumbered
+                                                class=""
+                                                tag={tag.tagType +
+                                                    ":" +
+                                                    tag.tagName}
+                                                num={tag.postCount}
+                                            />
+                                        </li>
+                                    {/each}
+                                </ul>
+                            </div>
+                        </div>
                     </div>
                     {#if tagInfo}
                         <div class="panel is-info">
@@ -147,26 +166,6 @@
                             </div>
                         </div>
                     {/if}
-                    <div class="panel is-primary">
-                        <div class="panel-heading">Tags</div>
-                        <div class="panel-block column">
-                            <div class="menu">
-                                <ul class="menu-list">
-                                    {#each tags as tag (tag)}
-                                        <li>
-                                            <TagLinkNumbered
-                                                class=""
-                                                tag={tag.tagType +
-                                                    ":" +
-                                                    tag.tagName}
-                                                num={tag.postCount}
-                                            />
-                                        </li>
-                                    {/each}
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
                 </div>
                 <div class="column is-two-thirds">
                     <div class="columns is-multiline">
@@ -181,13 +180,13 @@
                             >
                                 <a
                                     href={null}
-                                    onclick={changePage(page - 1)}
+                                    onclick={() => changePage(page - 1)}
                                     class="pagination-previous"
                                     class:is-disabled={page == 1}>Previous</a
                                 >
                                 <a
                                     href={null}
-                                    onclick={changePage(page + 1)}
+                                    onclick={() => changePage(page + 1)}
                                     class="pagination-next"
                                     class:is-disabled={page == totalPages}
                                     >Next</a
diff --git a/web/app/src/routes/tags/+page.svelte b/web/app/src/routes/tags/+page.svelte
index f29d783..0be2538 100644
--- a/web/app/src/routes/tags/+page.svelte
+++ b/web/app/src/routes/tags/+page.svelte
@@ -3,6 +3,7 @@
 
     import { getTags } from "$lib/api";
     import { afterNavigate } from '$app/navigation';
+    import TagTypeIndicator from '$lib/components/ui/TagTypeIndicator.svelte';
 
     let tags = $state([]);
 
@@ -34,7 +35,7 @@
                         <td>
                           <a href="/tags/{tag.tagName}">{tag.tagName}</a>
                         </td>
-                        <td>{tag.tagType}</td>
+                        <td><TagTypeIndicator tagType={tag.tagType} /></td>
                         <td>{tag.postCount}</td>
                     </tr>
                 {/each}