From 382c6e1cd82e3315c0eb07d619896abed2fc9312 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 16 Jun 2024 20:32:09 +0600
Subject: [PATCH] web: reusable meowbalt component & page placeholders

---
 .../components/meowbalt/MeowbaltLoaf.svelte   |  14 ++++++++++++
 web/src/components/misc/Placeholder.svelte    |  16 +++++++++++++
 web/src/routes/+layout.svelte                 |   8 +++++++
 web/src/routes/+page.svelte                   |  21 +++---------------
 web/src/routes/about/+page.svelte             |   7 ++++--
 web/src/routes/convert/+page.svelte           |   7 ++++--
 web/src/routes/crop/+page.svelte              |   7 ++++--
 web/src/routes/donate/+page.svelte            |   7 ++++--
 web/src/routes/settings/+page.svelte          |   7 ++++--
 web/src/routes/trim/+page.svelte              |   7 ++++--
 web/src/routes/updates/+page.svelte           |   7 ++++--
 web/static/meowbalt/{smile.png => loaf.png}   | Bin
 12 files changed, 76 insertions(+), 32 deletions(-)
 create mode 100644 web/src/components/meowbalt/MeowbaltLoaf.svelte
 create mode 100644 web/src/components/misc/Placeholder.svelte
 rename web/static/meowbalt/{smile.png => loaf.png} (100%)

diff --git a/web/src/components/meowbalt/MeowbaltLoaf.svelte b/web/src/components/meowbalt/MeowbaltLoaf.svelte
new file mode 100644
index 00000000..8b3d97b4
--- /dev/null
+++ b/web/src/components/meowbalt/MeowbaltLoaf.svelte
@@ -0,0 +1,14 @@
+<img
+    id="meowbalt-loaf"
+    src="/meowbalt/loaf.png"
+    height="152"
+    width="141"
+    alt="black and white cat smiling and loafing"
+/>
+<style>
+    #meowbalt-loaf {
+        display: block;
+        margin: 0;
+        object-fit: cover;
+    }
+</style>
diff --git a/web/src/components/misc/Placeholder.svelte b/web/src/components/misc/Placeholder.svelte
new file mode 100644
index 00000000..01dd78f1
--- /dev/null
+++ b/web/src/components/misc/Placeholder.svelte
@@ -0,0 +1,16 @@
+<script>
+    import MeowbaltLoaf from "../meowbalt/MeowbaltLoaf.svelte";
+    export let pageName;
+</script>
+
+<div id="placeholder-container" class="center-column-container">
+    <MeowbaltLoaf />
+    <div>{pageName} page is not ready yet!</div>
+</div>
+
+<style>
+    #placeholder-container {
+        gap: var(--padding);
+        text-align: center;
+    }
+</style>
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 5dd708fc..55040fea 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -80,6 +80,14 @@
         background-color: var(--button-hover);
     }
 
+    :global(.center-column-container) {
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
     #cobalt {
         height: 100vh;
         display: grid;
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 654698ef..bd364ec1 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,15 +1,11 @@
 <script>
     import Omnibox from "../components/save/Omnibox.svelte";
+    import MeowbaltLoaf from "../components/meowbalt/MeowbaltLoaf.svelte";
 </script>
 
-<div id="cobalt-save-container">
+<div id="cobalt-save-container" class="center-column-container">
     <main id="cobalt-save">
-        <img
-            id="meowbalt-smile"
-            src="/meowbalt/smile.png"
-            height="152"
-            alt="black and white cat smiling and loafing"
-        />
+        <MeowbaltLoaf />
         <Omnibox />
     </main>
     <div id="terms-note">
@@ -18,12 +14,6 @@
 </div>
 
 <style>
-    #cobalt-save-container {
-        display: flex;
-        width: 100%;
-        flex-direction: column;
-    }
-
     #cobalt-save {
         display: flex;
         flex-direction: column;
@@ -34,11 +24,6 @@
         gap: 24px;
     }
 
-    #meowbalt-smile {
-        display: block;
-        margin: 0;
-    }
-
     #terms-note {
         bottom: 0;
         color: var(--gray);
diff --git a/web/src/routes/about/+page.svelte b/web/src/routes/about/+page.svelte
index e6a55ff1..3d6419ed 100644
--- a/web/src/routes/about/+page.svelte
+++ b/web/src/routes/about/+page.svelte
@@ -1,2 +1,5 @@
-<!-- about page -->
-<div>about</div>
+<script>
+    import Placeholder from "../../components/misc/Placeholder.svelte";
+</script>
+
+<Placeholder pageName="about" />
diff --git a/web/src/routes/convert/+page.svelte b/web/src/routes/convert/+page.svelte
index 804a21ff..ec28b52a 100644
--- a/web/src/routes/convert/+page.svelte
+++ b/web/src/routes/convert/+page.svelte
@@ -1,2 +1,5 @@
-<!-- convert page -->
-<div>convert</div>
+<script>
+    import Placeholder from "../../components/misc/Placeholder.svelte";
+</script>
+
+<Placeholder pageName="convert" />
diff --git a/web/src/routes/crop/+page.svelte b/web/src/routes/crop/+page.svelte
index 3cb79e88..c4f6b972 100644
--- a/web/src/routes/crop/+page.svelte
+++ b/web/src/routes/crop/+page.svelte
@@ -1,2 +1,5 @@
-<!-- crop page -->
-<div>crop</div>
+<script>
+    import Placeholder from "../../components/misc/Placeholder.svelte";
+</script>
+
+<Placeholder pageName="crop" />
diff --git a/web/src/routes/donate/+page.svelte b/web/src/routes/donate/+page.svelte
index 49f8a142..d9049ac4 100644
--- a/web/src/routes/donate/+page.svelte
+++ b/web/src/routes/donate/+page.svelte
@@ -1,2 +1,5 @@
-<!-- donate page -->
-<div>donate</div>
+<script>
+    import Placeholder from "../../components/misc/Placeholder.svelte";
+</script>
+
+<Placeholder pageName="donate" />
diff --git a/web/src/routes/settings/+page.svelte b/web/src/routes/settings/+page.svelte
index 51f4f6c2..d6a792fb 100644
--- a/web/src/routes/settings/+page.svelte
+++ b/web/src/routes/settings/+page.svelte
@@ -1,2 +1,5 @@
-<!-- settings page -->
-<div>settings</div>
+<script>
+    import Placeholder from "../../components/misc/Placeholder.svelte";
+</script>
+
+<Placeholder pageName="settings" />
diff --git a/web/src/routes/trim/+page.svelte b/web/src/routes/trim/+page.svelte
index 7dbcf323..8014b58b 100644
--- a/web/src/routes/trim/+page.svelte
+++ b/web/src/routes/trim/+page.svelte
@@ -1,2 +1,5 @@
-<!-- trim page -->
-<div>trim</div>
+<script>
+    import Placeholder from "../../components/misc/Placeholder.svelte";
+</script>
+
+<Placeholder pageName="trim" />
diff --git a/web/src/routes/updates/+page.svelte b/web/src/routes/updates/+page.svelte
index ff1b2d95..c15ed3c3 100644
--- a/web/src/routes/updates/+page.svelte
+++ b/web/src/routes/updates/+page.svelte
@@ -1,2 +1,5 @@
-<!-- updates (changelog) page -->
-<div>updates</div>
+<script>
+    import Placeholder from "../../components/misc/Placeholder.svelte";
+</script>
+
+<Placeholder pageName="updates" />
diff --git a/web/static/meowbalt/smile.png b/web/static/meowbalt/loaf.png
similarity index 100%
rename from web/static/meowbalt/smile.png
rename to web/static/meowbalt/loaf.png