From 720b3c5f68a043f95c81bf2362d30f92e2a21f62 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sat, 20 Jul 2024 20:34:19 +0600
Subject: [PATCH] web: full SmallDialog component, one flexible meowbalt
 component

- fully stylized small dialog: header, title, subtext, state without meowbalt
- moved meowbalt into his own adaptive component, no need to import/create new ones for each emotion
- better types for dialog related stuff
- type for meowbalt's emotions
- better padding in small dialog
---
 web/src/components/dialog/SmallDialog.svelte  |  53 +++++++++++++-----
 .../components/meowbalt/MeowbaltError.svelte  |  19 -------
 .../components/meowbalt/MeowbaltLoaf.svelte   |  18 ------
 web/src/components/misc/Meowbalt.svelte       |  31 ++++++++++
 web/src/components/misc/Placeholder.svelte    |   5 +-
 .../save/buttons/DownloadButton.svelte        |   5 +-
 web/src/lib/types/dialog.ts                   |   6 +-
 web/src/lib/types/meowbalt.ts                 |   1 +
 web/src/routes/+layout.svelte                 |   6 ++
 web/src/routes/+page.svelte                   |   4 +-
 .../meowbalt/{checking.png => question.png}   | Bin
 11 files changed, 86 insertions(+), 62 deletions(-)
 delete mode 100644 web/src/components/meowbalt/MeowbaltError.svelte
 delete mode 100644 web/src/components/meowbalt/MeowbaltLoaf.svelte
 create mode 100644 web/src/components/misc/Meowbalt.svelte
 create mode 100644 web/src/lib/types/meowbalt.ts
 rename web/static/meowbalt/{checking.png => question.png} (100%)

diff --git a/web/src/components/dialog/SmallDialog.svelte b/web/src/components/dialog/SmallDialog.svelte
index c14cd102..3820c88e 100644
--- a/web/src/components/dialog/SmallDialog.svelte
+++ b/web/src/components/dialog/SmallDialog.svelte
@@ -4,10 +4,11 @@
     import { killDialog } from "$lib/dialogs";
     import type { DialogButton } from "$lib/types/dialog";
 
-    import MeowbaltError from "$components/meowbalt/MeowbaltError.svelte";
+    import Meowbalt from "$components/misc/Meowbalt.svelte";
+    import type { MeowbaltEmotions } from "$lib/types/meowbalt";
 
     export let id: string;
-    export let meowbalt: string = "";
+    export let meowbalt: MeowbaltEmotions;
     export let title: string = "";
     export let bodyText: string = "";
     export let bodySubText: string = "";
@@ -39,16 +40,16 @@
 
 <dialog id="dialog-{id}" bind:this={dialogParent} class:closing class:open>
     <div class="dialog-body small-dialog" class:meowbalt-visible={meowbalt}>
-        {#if meowbalt === "error"}
+        {#if meowbalt}
             <div class="meowbalt-container">
-                <MeowbaltError />
+                <Meowbalt emotion={meowbalt} />
             </div>
         {/if}
-        <div class="popup-header">
-            {#if title}
+        {#if title}
+            <div class="popup-header">
                 <h2>{title}</h2>
-            {/if}
-        </div>
+            </div>
+        {/if}
         <div class="popup-body">
             {#if bodyText}
                 <div class="body-text" tabindex="-1">{bodyText}</div>
@@ -60,7 +61,7 @@
         <div class="popup-buttons">
             {#each buttons as button}
                 <button
-                    class="button popup-button"
+                    class="button elevated popup-button"
                     class:active={button.main}
                     on:click={async () => {
                         await button.action();
@@ -108,13 +109,15 @@
         display: none;
     }
 
-    .small-dialog {
-        --small-dialog-padding: 18px;
+    .small-dialog,
+    .popup-body {
         display: flex;
         flex-direction: column;
-        align-items: center;
-        text-align: center;
         gap: var(--padding);
+    }
+
+    .small-dialog {
+        --small-dialog-padding: 18px;
         max-width: 340px;
         width: calc(
             100% - var(--padding) * 2 - var(--small-dialog-padding) * 2
@@ -140,12 +143,18 @@
     }
 
     .small-dialog.meowbalt-visible {
-        padding-top: 45px;
+        padding-top: calc(var(--padding) * 4);
+        align-items: center;
+        text-align: center;
     }
 
     .meowbalt-container {
         position: absolute;
-        top: -110px;
+        top: -120px;
+    }
+
+    .popup-header {
+        color: var(--secondary);
     }
 
     .body-text {
@@ -173,6 +182,20 @@
         height: 40px;
     }
 
+    .popup-button:not(.active) {
+        background-color: var(--button-elevated);
+    }
+
+    .popup-button:not(:focus-visible) {
+        box-shadow: none;
+    }
+
+    @media (hover: hover) {
+        .popup-button:not(.active):hover {
+            background-color: var(--button-elevated-hover);
+        }
+    }
+
     #dialog-backdrop {
         --backdrop-opacity: 0.4;
         background-color: var(--popup-backdrop);
diff --git a/web/src/components/meowbalt/MeowbaltError.svelte b/web/src/components/meowbalt/MeowbaltError.svelte
deleted file mode 100644
index 34ec570e..00000000
--- a/web/src/components/meowbalt/MeowbaltError.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts">
-    import { t } from "$lib/i18n/translations";
-</script>
-
-<img
-    id="meowbalt-error"
-    src="/meowbalt/error.png"
-    height="160"
-    alt={$t("a11y.meowbalt.error")}
-/>
-
-<style>
-    #meowbalt-error {
-        display: block;
-        margin: 0;
-        object-fit: cover;
-        margin-left: 25px;
-    }
-</style>
diff --git a/web/src/components/meowbalt/MeowbaltLoaf.svelte b/web/src/components/meowbalt/MeowbaltLoaf.svelte
deleted file mode 100644
index 3e8533e3..00000000
--- a/web/src/components/meowbalt/MeowbaltLoaf.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-    import { t } from "$lib/i18n/translations";
-</script>
-
-<img
-    id="meowbalt-loaf"
-    src="/meowbalt/smile.png"
-    height="152"
-    alt={$t("a11y.meowbalt.smile")}
-/>
-
-<style>
-    #meowbalt-loaf {
-        display: block;
-        margin: 0;
-        object-fit: cover;
-    }
-</style>
diff --git a/web/src/components/misc/Meowbalt.svelte b/web/src/components/misc/Meowbalt.svelte
new file mode 100644
index 00000000..e367758e
--- /dev/null
+++ b/web/src/components/misc/Meowbalt.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { t } from "$lib/i18n/translations";
+
+    import type { MeowbaltEmotions } from "$lib/types/meowbalt";
+
+    export let emotion: MeowbaltEmotions;
+</script>
+
+<img
+    class="meowbalt {emotion}"
+    src="/meowbalt/{emotion}.png"
+    height="152"
+    alt={$t(`a11y.meowbalt.${emotion}`)}
+/>
+
+<style>
+    .meowbalt {
+        display: block;
+        margin: 0;
+        object-fit: cover;
+    }
+
+    .think,
+    .error {
+        height: 160px;
+    }
+
+    .error {
+        margin-left: 25px;
+    }
+</style>
diff --git a/web/src/components/misc/Placeholder.svelte b/web/src/components/misc/Placeholder.svelte
index c38e9836..a8001ab0 100644
--- a/web/src/components/misc/Placeholder.svelte
+++ b/web/src/components/misc/Placeholder.svelte
@@ -1,10 +1,11 @@
 <script>
-    import MeowbaltLoaf from "$components/meowbalt/MeowbaltLoaf.svelte";
+    import Meowbalt from "$components/misc/Meowbalt.svelte";
+
     export let pageName;
 </script>
 
 <div id="placeholder-container" class="center-column-container">
-    <MeowbaltLoaf />
+    <Meowbalt emotion="smile" />
     <div>{pageName} page is not ready yet!</div>
 </div>
 
diff --git a/web/src/components/save/buttons/DownloadButton.svelte b/web/src/components/save/buttons/DownloadButton.svelte
index c6a37969..b2c5ae8d 100644
--- a/web/src/components/save/buttons/DownloadButton.svelte
+++ b/web/src/components/save/buttons/DownloadButton.svelte
@@ -20,15 +20,12 @@
         id: "save-error",
         type: "small",
         meowbalt: "error",
-        title: "",
-        bodySubText: "",
         buttons: [{
             text: $t("general.gotit"),
-            color: "gray",
             main: true,
             action: () => {},
         }]
-    }
+    } as DialogInfo
 
     const changeDownloadButton = (state: string) => {
         isDisabled = true;
diff --git a/web/src/lib/types/dialog.ts b/web/src/lib/types/dialog.ts
index 20bea678..888dc646 100644
--- a/web/src/lib/types/dialog.ts
+++ b/web/src/lib/types/dialog.ts
@@ -1,6 +1,8 @@
+import type { MeowbaltEmotions } from "$lib/types/meowbalt";
+
 export type DialogButton = {
     text: string,
-    color: string,
+    color: "blue" | "red" | "default",
     main: boolean,
     action: () => unknown | Promise<unknown>
 }
@@ -8,7 +10,7 @@ export type DialogButton = {
 export type DialogInfo = {
     id: string,
     type: "small",
-    meowbalt: "error",
+    meowbalt: MeowbaltEmotions | "",
     title: string,
     bodyText: string,
     bodySubText: string,
diff --git a/web/src/lib/types/meowbalt.ts b/web/src/lib/types/meowbalt.ts
new file mode 100644
index 00000000..6913f606
--- /dev/null
+++ b/web/src/lib/types/meowbalt.ts
@@ -0,0 +1 @@
+export type MeowbaltEmotions = "smile" | "error" | "question" | "think";
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index ea612eb6..efe0a00b 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -71,6 +71,9 @@
         --button-text: #282828;
         --button-box-shadow: 0 0 0 1.5px var(--button-stroke) inset;
 
+        --button-elevated: #e3e3e3;
+        --button-elevated-hover: #dadada;
+
         --popup-bg: #f1f1f1;
         --popup-backdrop: var(--primary);
         --popup-stroke: rgba(0, 0, 0, 0.08);
@@ -126,6 +129,9 @@
         --button-text: #e1e1e1;
         --button-box-shadow: 0 0 0 1.5px var(--button-stroke) inset;
 
+        --button-elevated: #282828;
+        --button-elevated-hover: #2f2f2f;
+
         --popup-bg: #191919;
         --popup-backdrop: var(--primary);
         --popup-stroke: rgba(255, 255, 255, 0.08);
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 680bef45..1c59864e 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -2,7 +2,7 @@
     import { t } from "$lib/i18n/translations";
 
     import Omnibox from "$components/save/Omnibox.svelte";
-    import MeowbaltLoaf from "$components/meowbalt/MeowbaltLoaf.svelte";
+    import Meowbalt from "$components/misc/Meowbalt.svelte";
 </script>
 
 <svelte:head>
@@ -11,7 +11,7 @@
 
 <div id="cobalt-save-container" class="center-column-container">
     <main id="cobalt-save">
-        <MeowbaltLoaf />
+        <Meowbalt emotion="smile" />
         <Omnibox />
     </main>
     <div id="terms-note">
diff --git a/web/static/meowbalt/checking.png b/web/static/meowbalt/question.png
similarity index 100%
rename from web/static/meowbalt/checking.png
rename to web/static/meowbalt/question.png