fix: image percentage regression

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;
 }

web/app/src/lib/components/panels/ViewPostPanel.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import AuthCheck from "./AuthCheck.svelte";
-    import TagLinkNumbered from "./TagLinkNumbered.svelte";
+    import AuthCheck from "$lib/components/checks/AuthCheck.svelte";
+    import TagLinkNumbered from "$lib/components/ui/TagLinkNumbered.svelte";
     let { post, toggleEditMenu, toggleDeleteMenu } = $props();
 
     const trimUrl = (str) => {

web/app/src/lib/components/panels/ViewTagNotesPanel.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import AuthCheck from "$lib/components/AuthCheck.svelte";
+    import AuthCheck from "$lib/components/checks/AuthCheck.svelte";
 
     let { data, toggleEditMenu } = $props();
 </script>

web/app/src/lib/components/panels/ViewTagPanel.svelte

@@ -2,8 +2,8 @@
     import { onMount } from "svelte";
 
     import { getRelatedTags } from "$lib/api";
-    import AuthCheck from "$lib/components/AuthCheck.svelte";
-    import TagLinkNumbered from "$lib/components/TagLinkNumbered.svelte";
+    import AuthCheck from "$lib/components/checks/AuthCheck.svelte";
+    import TagLinkNumbered from "$lib/components/ui/TagLinkNumbered.svelte";
 
     let { tag, data, toggleRenameMenu } = $props();
     let related_tags = $state([]);

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

web/app/src/routes/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import "../app.scss";
-    import Navbar from "$lib/components/Navbar.svelte";
+    import Navbar from "$lib/components/ui/Navbar.svelte";
     interface Props {
         children?: import('svelte').Snippet;
     }

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>

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 EditPostPanel from "$lib/components/EditPostPanel.svelte";
-    import ViewPostPanel from "$lib/components/ViewPostPanel.svelte";
-    
+    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;
 
@@ -14,6 +14,7 @@
     const getData = async () => {
         const data = await getPost({ id });
         post = data;
+        imagePercentage = ((1000 * 100) / post.width).toFixed(0) + "%";
     };
 
     const trimUrl = (str) => {
@@ -50,11 +51,6 @@
     };
 
     let imagePercentage = $state("0%");
-
-    run(() => {
-        if (post)
-            imagePercentage = ((1000 * 100) / post.width).toFixed(0) + "%";
-    });
 </script>
 
 {#if post}
@@ -87,8 +83,7 @@
                                 >
                                 <button
                                     class="button"
-                                    onclick={toggleDeleteMenu}
-                                    >Cancel</button
+                                    onclick={toggleDeleteMenu}>Cancel</button
                                 >
                             </div>
                         </div>

web/app/src/routes/posts/+page.svelte

@@ -2,13 +2,14 @@
     import { run } from 'svelte/legacy';
 
     import { getPostSearchTag, getTag, getTagAutocomplete } from "$lib/api";
-    import TagLinkNumbered from "$lib/components/TagLinkNumbered.svelte";
-    import PostGallery from "$lib/components/Post/PostGallery.svelte";
+    import TagLinkNumbered from "$lib/components/ui/TagLinkNumbered.svelte";
+    import PostGallery from "$lib/components/ui/PostGallery.svelte";
     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">

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>
 
 

web/app/src/routes/tags/[tag]/+page.svelte

@@ -2,11 +2,11 @@
     import { onMount } from "svelte";
 
     import { getTag, getPostSearchTag } from "$lib/api";
-    import EditTagNotesPanel from "$lib/components/TagNotes/EditTagNotesPanel.svelte";
-    import ViewTagNotesPanel from "$lib/components/TagNotes/ViewTagNotesPanel.svelte";
-    import ViewTagPanel from "$lib/components/Tag/ViewTagPanel.svelte";
-    import EditTagPanel from "$lib/components/Tag/EditTagPanel.svelte";
-    import PostGallery from "$lib/components/Post/PostGallery.svelte";
+    import EditTagNotesPanel from "$lib/components/panels/EditTagNotesPanel.svelte";
+    import ViewTagNotesPanel from "$lib/components/panels/ViewTagNotesPanel.svelte";
+    import ViewTagPanel from "$lib/components/panels/ViewTagPanel.svelte";
+    import EditTagPanel from "$lib/components/panels/EditTagPanel.svelte";
+    import PostGallery from "$lib/components/ui/PostGallery.svelte";
 
 
     import { page } from "$app/stores";

web/app/src/routes/upload/+page.svelte

@@ -2,7 +2,7 @@
     import { uploadBlob, postCreate, getTagAutocomplete } from "$lib/api";
     import { goto } from "$app/navigation";
     import Tags from "svelte-tags-input";
-    import AuthRequired from "$lib/components/AuthRequired.svelte";
+    import AuthRequired from "$lib/components/checks/AuthRequired.svelte";
 
     let currentProgress = $state(0);
 

web/app/src/routes/user/profile/+page.svelte

@@ -1,7 +1,7 @@
 <script>
     import { onMount } from "svelte";
     import { getUserProfile } from "$lib/api";
-    import AuthRequired from "$lib/components/AuthRequired.svelte";
+    import AuthRequired from "$lib/components/checks/AuthRequired.svelte";
 
     let user = $state();
 

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',
+    }
+  }
 });