From 8798596e91b2fe8771e2841f6f2bfb27e85038f7 Mon Sep 17 00:00:00 2001
From: Damillora <developer@damillora.com>
Date: Sat, 22 Feb 2025 07:59:16 +0000
Subject: [PATCH] feat: update looks of web app

---
 web/app/src/app.scss                        | 37 +++++++++++++++++-
 web/app/src/lib/components/ui/Navbar.svelte |  2 +-
 web/app/src/routes/+page.svelte             |  6 +--
 web/app/src/routes/post/[id]/+page.svelte   | 11 +++---
 web/app/src/routes/posts/+page.svelte       | 43 ++++++++++++---------
 web/app/src/routes/tags/+page.svelte        |  6 ++-
 web/app/vite.config.ts                      | 10 +++++
 7 files changed, 82 insertions(+), 33 deletions(-)

diff --git a/web/app/src/app.scss b/web/app/src/app.scss
index 3b5331a..60708f5 100644
--- a/web/app/src/app.scss
+++ b/web/app/src/app.scss
@@ -1,6 +1,15 @@
 /* Write your global styles here, in SCSS syntax. Variables and mixins from the src/variables.scss file are available here without importing */
-@use "../node_modules/bulma/sass";
 
+// Path to Bulma's sass folder
+@use "bulma/sass" with (
+  $family-primary: '"Nunito", sans-serif',
+  $primary: #00afcc,
+);
+// Import the Google Font
+@import url("https://fonts.googleapis.com/css?family=Nunito:400,700");
+
+
+// Others
 .tile.is-multiline {
   flex-wrap: wrap;
 }
@@ -9,6 +18,30 @@
   white-space: pre-line;
 }
 
-.svelte-tags-input-matchs-parent {
+// Svelte Tags
+#tags .svelte-tags-input-layout {
+  @extend .input;
+  padding: 0;
+  padding-top: var(--bulma-control-padding-vertical);
+  padding-right: var(--bulma-control-padding-horizontal);
+  padding-left: var(--bulma-control-padding-horizontal);
+  height: auto !important;
+}
+#tags  .svelte-tags-input-layout:focus-within {
+  outline: 0;
+}
+
+#tags .svelte-tags-input {
+  padding: 0;
+  margin-top: 0;
+  margin-bottom: var(--bulma-control-padding-vertical);
+}
+#tags .svelte-tags-input-tag {
+  @extend .tag;
+  margin-top: 0;
+  margin-bottom: var(--bulma-control-padding-vertical);
+  margin-right: var(--bulma-control-padding-horizontal);
+}
+#tags .svelte-tags-input-matchs-parent{
   z-index: 2000;
 }
diff --git a/web/app/src/lib/components/ui/Navbar.svelte b/web/app/src/lib/components/ui/Navbar.svelte
index 6a7c3a5..4102b67 100644
--- a/web/app/src/lib/components/ui/Navbar.svelte
+++ b/web/app/src/lib/components/ui/Navbar.svelte
@@ -57,7 +57,7 @@
                 <div class="navbar-item">
                     <div class="buttons">
                         <a href="/auth/register" class="button is-primary">
-                            <strong>Register</strong>
+                            Register
                         </a>
                         <a href="/auth/login" class="button is-light">
                             Log in
diff --git a/web/app/src/routes/+page.svelte b/web/app/src/routes/+page.svelte
index db6da86..eff3319 100644
--- a/web/app/src/routes/+page.svelte
+++ b/web/app/src/routes/+page.svelte
@@ -47,9 +47,9 @@
               />
             </div>
           </div>
-          <div class="control">
-            <button type="submit" class="button is-primary"> Search </button>
-          </div>
+        </div>
+        <div class="control">
+          <button type="submit" class="button is-primary"> Search </button>
         </div>
       </form>
     </div>
diff --git a/web/app/src/routes/post/[id]/+page.svelte b/web/app/src/routes/post/[id]/+page.svelte
index 70a3f36..ef67791 100644
--- a/web/app/src/routes/post/[id]/+page.svelte
+++ b/web/app/src/routes/post/[id]/+page.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-    import { run } from 'svelte/legacy';
+    import { run } from "svelte/legacy";
 
     import { onMount } from "svelte";
     import { getPost, postDelete } from "$lib/api";
-    import { goto } from "$app/navigation";
+    import { afterNavigate, goto } from "$app/navigation";
     import EditPostPanel from "$lib/components/panels/EditPostPanel.svelte";
     import ViewPostPanel from "$lib/components/panels/ViewPostPanel.svelte";
-    
+
     import { page } from "$app/stores";
     const { id } = $page.params;
 
@@ -51,7 +51,7 @@
 
     let imagePercentage = $state("0%");
 
-    run(() => {
+    afterNavigate(() => {
         if (post)
             imagePercentage = ((1000 * 100) / post.width).toFixed(0) + "%";
     });
@@ -87,8 +87,7 @@
                                 >
                                 <button
                                     class="button"
-                                    onclick={toggleDeleteMenu}
-                                    >Cancel</button
+                                    onclick={toggleDeleteMenu}>Cancel</button
                                 >
                             </div>
                         </div>
diff --git a/web/app/src/routes/posts/+page.svelte b/web/app/src/routes/posts/+page.svelte
index a79d814..d3c98f1 100644
--- a/web/app/src/routes/posts/+page.svelte
+++ b/web/app/src/routes/posts/+page.svelte
@@ -7,8 +7,9 @@
     import queryString from "query-string";
     import Tags from "svelte-tags-input";
     import { paginate } from "$lib/simple-pagination";
-    import { beforeNavigate, goto } from "$app/navigation";
+    import { afterNavigate, beforeNavigate, goto } from "$app/navigation";
     import { page as currentPage } from '$app/stores';
+    import { onMount } from 'svelte';
 
     let url = $derived($currentPage.url);
 
@@ -16,7 +17,7 @@
 
     let page = $state(1);
     let totalPages = $state(1);
-    let pagination = $state([]);
+    let pagination: string[] = $state([]);
     let posts = $state([]);
     let postCount = 0;
     let tags = $state([]);
@@ -60,7 +61,7 @@
         return list;
     };
 
-    run(() => {
+    afterNavigate(() => {
         tagQuery = url.searchParams.get('tags');
         if (tagQuery) {
             searchTerms = tagQuery.split(" ");
@@ -71,7 +72,7 @@
         posts = [];
         page = 1;
         getData();
-    });
+    })
     const onSearch = (e) => {
         e.preventDefault();
         if (searchTerms.length > 0) {
@@ -95,17 +96,23 @@
             <div class="columns is-multiline">
                 <div class="column is-full">
                     <div class="block">
-                        <form onsubmit={onSearch}>
-                            <div class="field has-addons">
-                                <div class="control is-expanded">
-                                    <div class="control" id="tags">
-                                        <Tags
-                                            tags={searchTerms}
-                                            addKeys={[9, 32]}
-                                            on:tags={onTagChange}
-                                            autoComplete={onAutocomplete}
-                                            autoCompleteFilter={false}
-                                        />
+                    </div>
+                </div>
+                <div class="column is-one-third">
+                    <div class="panel is-primary">
+                        <div class="panel-block column">
+                            <form onsubmit={onSearch}>
+                                <div class="field has-addons">
+                                    <div class="control is-expanded">
+                                        <div class="control" id="tags">
+                                            <Tags
+                                                tags={searchTerms}
+                                                addKeys={[9, 32]}
+                                                on:tags={onTagChange}
+                                                autoComplete={onAutocomplete}
+                                                autoCompleteFilter={false}
+                                            />
+                                        </div>
                                     </div>
                                 </div>
                                 <div class="control">
@@ -116,11 +123,9 @@
                                         Search
                                     </button>
                                 </div>
-                            </div>
-                        </form>
+                            </form>
+                        </div>
                     </div>
-                </div>
-                <div class="column is-one-third">
                     {#if tagInfo}
                         <div class="panel is-info">
                             <p class="panel-heading">
diff --git a/web/app/src/routes/tags/+page.svelte b/web/app/src/routes/tags/+page.svelte
index 097a8bd..f29d783 100644
--- a/web/app/src/routes/tags/+page.svelte
+++ b/web/app/src/routes/tags/+page.svelte
@@ -2,6 +2,7 @@
     import { run } from 'svelte/legacy';
 
     import { getTags } from "$lib/api";
+    import { afterNavigate } from '$app/navigation';
 
     let tags = $state([]);
 
@@ -9,9 +10,10 @@
         const data = await getTags();
         tags = data;
     };
-    run(() => {
+    
+    afterNavigate(() => {
         getData();
-    });
+    })
 </script>
 
 
diff --git a/web/app/vite.config.ts b/web/app/vite.config.ts
index fb86d6d..e94d884 100644
--- a/web/app/vite.config.ts
+++ b/web/app/vite.config.ts
@@ -11,4 +11,14 @@ export default defineConfig({
       },
     },
   },
+  server: {
+    allowedHosts: ["5173.shinosawa.nanao.moe"],
+    proxy: {
+      // string shorthand:
+      // http://localhost:5173/foo
+      //   -> http://localhost:4567/foo
+      '/api': 'http://localhost:5050',
+      '/data': 'https://booru.nanao.moe',
+    }
+  }
 });