From 4e0c0229a0484becc02f7d75668a275afa705828 Mon Sep 17 00:00:00 2001
From: Mark Joshwel <mark@joshwel.co>
Date: Tue, 11 Feb 2025 06:42:46 +0800
Subject: [PATCH] web: prepare to work on prettied auth

---
 Web/auth-card.ref.html                    |   61 +
 Web/auth-mail-page.ref.html               | 1519 +++++++++++++++++++++
 Web/{auth.ref.html => auth-page.ref.html} |  129 +-
 Web/auth.html                             |   44 +
 4 files changed, 1677 insertions(+), 76 deletions(-)
 create mode 100644 Web/auth-card.ref.html
 create mode 100644 Web/auth-mail-page.ref.html
 rename Web/{auth.ref.html => auth-page.ref.html} (72%)
 create mode 100644 Web/auth.html

diff --git a/Web/auth-card.ref.html b/Web/auth-card.ref.html
new file mode 100644
index 0000000..db91e4e
--- /dev/null
+++ b/Web/auth-card.ref.html
@@ -0,0 +1,61 @@
+<div class="uk-card">
+  <div class="uk-card-header space-y-2">
+    <h3 class="uk-h3">Create an account</h3>
+    <p class="text-muted-foreground">
+      Enter your email below to create your account
+    </p>
+  </div>
+  <div class="uk-card-body space-y-4">
+    <div class="grid grid-cols-2 gap-6">
+      <button class="uk-btn uk-btn-default">
+        <svg viewBox="0 0 438.549 438.549" class="mr-2 h-4 w-4">
+          <path
+            fill="currentColor"
+            d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+          ></path>
+        </svg>
+        Github
+      </button>
+      <button class="uk-btn uk-btn-default">
+        <svg role="img" viewBox="0 0 24 24" class="mr-2 h-4 w-4">
+          <path
+            fill="currentColor"
+            d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+          ></path>
+        </svg>
+        Google
+      </button>
+    </div>
+    <div class="relative">
+      <div class="absolute inset-0 flex items-center">
+        <span class="w-full border-t border-border"></span>
+      </div>
+      <div class="relative flex justify-center text-xs uppercase">
+        <span class="bg-background px-2 text-muted-foreground"
+          >Or continue with</span
+        >
+      </div>
+    </div>
+    <div class="space-y-2">
+      <label class="uk-form-label" for="email">Email</label>
+      <input
+        class="uk-input"
+        id="email"
+        type="text"
+        placeholder="m@example.com"
+      />
+    </div>
+    <div class="space-y-2">
+      <label class="uk-form-label" for="password">Password</label>
+      <input
+        class="uk-input"
+        id="password"
+        type="password"
+        placeholder="Password"
+      />
+    </div>
+  </div>
+  <div class="uk-card-footer">
+    <button class="uk-btn uk-btn-primary w-full">Create account</button>
+  </div>
+</div>
diff --git a/Web/auth-mail-page.ref.html b/Web/auth-mail-page.ref.html
new file mode 100644
index 0000000..52d4f5d
--- /dev/null
+++ b/Web/auth-mail-page.ref.html
@@ -0,0 +1,1519 @@
+<body
+  class="bg-background font-geist-sans text-sm text-foreground"
+  data-sveltekit-preload-data="hover"
+>
+  <div style="display: contents">
+    <!----><!----><!----><!---->
+    <div class="hidden divide-x divide-border xl:flex">
+      <div class="w-72">
+        <div
+          class="flex h-14 items-center justify-center border-b border-border px-4 py-2"
+        >
+          <div class="h-10 flex-1">
+            <uk-select
+              ><select hidden="">
+                <option data-icon="user" selected="">alicia@example.com</option>
+                <option data-icon="user">alicia@yahoo.com</option>
+                <option data-icon="user">alicia@cloud.com</option></select
+              ><!---->
+              <div class="uk-position-relative">
+                <button
+                  type="button"
+                  class="uk-input-fake w-full flex justify-between items-center"
+                  aria-haspopup="true"
+                >
+                  <!--?lit$383522438$-->alicia@example.com
+                  <!--?lit$383522438$-->
+                  <uk-icon class="" icon="chevrons-up-down"
+                    ><!----><svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class=""
+                    >
+                      <path d="m7 15 5 5 5-5"></path>
+                      <path d="m7 9 5-5 5 5"></path></svg
+                  ></uk-icon>
+                </button>
+                <div
+                  class="uk-drop uk-dropdown w-full"
+                  uk-dropdown="mode: click"
+                >
+                  <!--?lit$383522438$-->
+                  <!--?lit$383522438$-->
+                  <ul
+                    tabindex="-1"
+                    class="uk-nav uk-dropdown-nav uk-overflow-auto uk-cs-options"
+                  >
+                    <!--?lit$383522438$--><!---->
+                    <!--?lit$383522438$-->
+                    <!--?lit$383522438$--><!---->
+                    <li class="uk-active">
+                      <a tabindex="-1" class="uk-drop-close">
+                        <div class="uk-cs-item-wrapper">
+                          <!--?lit$383522438$-->
+                          <uk-icon class="uk-cs-item-icon" icon="user"
+                            ><!----><svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="16"
+                              height="16"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              stroke-width="2"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              class=""
+                            >
+                              <path
+                                d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+                              ></path>
+                              <circle cx="12" cy="7" r="4"></circle></svg
+                          ></uk-icon>
+
+                          <!--?lit$383522438$--><span class="uk-cs-item-text"
+                            ><!--?lit$383522438$-->alicia@example.com</span
+                          >
+                        </div>
+                        <!--?lit$383522438$--><uk-icon
+                          class="uk-cs-check"
+                          icon="check"
+                          ><!----><svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            class=""
+                          >
+                            <path d="M20 6 9 17l-5-5"></path></svg
+                        ></uk-icon>
+                      </a>
+                    </li>
+                    <!----><!---->
+                    <li class="">
+                      <a tabindex="-1" class="uk-drop-close">
+                        <div class="uk-cs-item-wrapper">
+                          <!--?lit$383522438$-->
+                          <uk-icon class="uk-cs-item-icon" icon="user"
+                            ><!----><svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="16"
+                              height="16"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              stroke-width="2"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              class=""
+                            >
+                              <path
+                                d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+                              ></path>
+                              <circle cx="12" cy="7" r="4"></circle></svg
+                          ></uk-icon>
+
+                          <!--?lit$383522438$--><span class="uk-cs-item-text"
+                            ><!--?lit$383522438$-->alicia@yahoo.com</span
+                          >
+                        </div>
+                        <!--?lit$383522438$-->
+                      </a>
+                    </li>
+                    <!----><!---->
+                    <li class="">
+                      <a tabindex="-1" class="uk-drop-close">
+                        <div class="uk-cs-item-wrapper">
+                          <!--?lit$383522438$-->
+                          <uk-icon class="uk-cs-item-icon" icon="user"
+                            ><!----><svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="16"
+                              height="16"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              stroke-width="2"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              class=""
+                            >
+                              <path
+                                d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+                              ></path>
+                              <circle cx="12" cy="7" r="4"></circle></svg
+                          ></uk-icon>
+
+                          <!--?lit$383522438$--><span class="uk-cs-item-text"
+                            ><!--?lit$383522438$-->alicia@cloud.com</span
+                          >
+                        </div>
+                        <!--?lit$383522438$-->
+                      </a>
+                    </li>
+                    <!---->
+                    <!---->
+                  </ul>
+                </div>
+                <!--?lit$383522438$-->
+              </div>
+            </uk-select>
+          </div>
+        </div>
+        <div class="p-1">
+          <ul class="uk-nav uk-nav-primary">
+            <li class="uk-active">
+              <a class="flex justify-between" href="#"
+                ><div class="flex flex-1 items-center gap-x-2">
+                  <span class="size-4"
+                    ><uk-icon
+                      ><!----><svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        class=""
+                      >
+                        <polyline
+                          points="22 12 16 12 14 15 10 15 8 12 2 12"
+                        ></polyline>
+                        <path
+                          d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
+                        ></path></svg></uk-icon
+                  ></span>
+                  <span>Inbox</span>
+                </div>
+                <span>128</span
+                ><!----></a
+              >
+            </li>
+            <li>
+              <a class="flex justify-between" href="#"
+                ><div class="flex flex-1 items-center gap-x-2">
+                  <span class="size-4"
+                    ><uk-icon
+                      ><!----><svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        class=""
+                      >
+                        <path
+                          d="M16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8Z"
+                        ></path>
+                        <path d="M15 3v4a2 2 0 0 0 2 2h4"></path></svg></uk-icon
+                  ></span>
+                  <span>Draft</span>
+                </div>
+                <span>9</span
+                ><!----></a
+              >
+            </li>
+            <li>
+              <a class="flex justify-between" href="#"
+                ><div class="flex flex-1 items-center gap-x-2">
+                  <span class="size-4"
+                    ><uk-icon
+                      ><!----><svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        class=""
+                      >
+                        <path d="m22 2-7 20-4-9-9-4Z"></path>
+                        <path d="M22 2 11 13"></path></svg></uk-icon
+                  ></span>
+                  <span>Sent</span>
+                </div>
+                <!----></a
+              >
+            </li>
+            <li>
+              <a class="flex justify-between" href="#"
+                ><div class="flex flex-1 items-center gap-x-2">
+                  <span class="size-4"
+                    ><uk-icon
+                      ><!----><svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        class=""
+                      >
+                        <rect width="20" height="5" x="2" y="3" rx="1"></rect>
+                        <path
+                          d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"
+                        ></path>
+                        <path d="m9.5 17 5-5"></path>
+                        <path d="m9.5 12 5 5"></path></svg></uk-icon
+                  ></span>
+                  <span>Junk</span>
+                </div>
+                <span>23</span
+                ><!----></a
+              >
+            </li>
+            <li>
+              <a class="flex justify-between" href="#"
+                ><div class="flex flex-1 items-center gap-x-2">
+                  <span class="size-4"
+                    ><uk-icon
+                      ><!----><svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        class=""
+                      >
+                        <path d="M3 6h18"></path>
+                        <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
+                        <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
+                        <line x1="10" x2="10" y1="11" y2="17"></line>
+                        <line
+                          x1="14"
+                          x2="14"
+                          y1="11"
+                          y2="17"
+                        ></line></svg></uk-icon
+                  ></span>
+                  <span>Trash</span>
+                </div>
+                <!----></a
+              >
+            </li>
+            <li>
+              <a class="flex justify-between" href="#"
+                ><div class="flex flex-1 items-center gap-x-2">
+                  <span class="size-4"
+                    ><uk-icon
+                      ><!----><svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        class=""
+                      >
+                        <rect width="20" height="5" x="2" y="3" rx="1"></rect>
+                        <path
+                          d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"
+                        ></path>
+                        <path d="M10 12h4"></path></svg></uk-icon
+                  ></span>
+                  <span>Archive</span>
+                </div>
+                <!----></a
+              >
+            </li>
+            <!---->
+            <li class="uk-nav-divider -mx-1"></li>
+            <li>
+              <a class="flex justify-between" href="#"
+                ><div class="flex flex-1 items-center gap-x-2">
+                  <span class="size-4"
+                    ><uk-icon
+                      ><!----><svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        class=""
+                      >
+                        <path d="M18 21a8 8 0 0 0-16 0"></path>
+                        <circle cx="10" cy="8" r="5"></circle>
+                        <path
+                          d="M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"
+                        ></path></svg></uk-icon
+                  ></span>
+                  <span>Social</span>
+                </div>
+                <span>972</span
+                ><!----></a
+              >
+            </li>
+            <li>
+              <a class="flex justify-between" href="#"
+                ><div class="flex flex-1 items-center gap-x-2">
+                  <span class="size-4"
+                    ><uk-icon
+                      ><!----><svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        class=""
+                      >
+                        <path d="M12 16h.01"></path>
+                        <path d="M12 8v4"></path>
+                        <path
+                          d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"
+                        ></path></svg></uk-icon
+                  ></span>
+                  <span>Updates</span>
+                </div>
+                <span>342</span
+                ><!----></a
+              >
+            </li>
+            <li>
+              <a class="flex justify-between" href="#"
+                ><div class="flex flex-1 items-center gap-x-2">
+                  <span class="size-4"
+                    ><uk-icon
+                      ><!----><svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        class=""
+                      >
+                        <path
+                          d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2z"
+                        ></path>
+                        <path
+                          d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"
+                        ></path></svg></uk-icon
+                  ></span>
+                  <span>Forums</span>
+                </div>
+                <span>128</span
+                ><!----></a
+              >
+            </li>
+            <li>
+              <a class="flex justify-between" href="#"
+                ><div class="flex flex-1 items-center gap-x-2">
+                  <span class="size-4"
+                    ><uk-icon
+                      ><!----><svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        class=""
+                      >
+                        <circle cx="8" cy="21" r="1"></circle>
+                        <circle cx="19" cy="21" r="1"></circle>
+                        <path
+                          d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"
+                        ></path></svg></uk-icon
+                  ></span>
+                  <span>Shopping</span>
+                </div>
+                <span>8</span
+                ><!----></a
+              >
+            </li>
+            <li>
+              <a class="flex justify-between" href="#"
+                ><div class="flex flex-1 items-center gap-x-2">
+                  <span class="size-4"
+                    ><uk-icon
+                      ><!----><svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        class=""
+                      >
+                        <rect width="20" height="5" x="2" y="3" rx="1"></rect>
+                        <path
+                          d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"
+                        ></path>
+                        <path d="M10 12h4"></path></svg></uk-icon
+                  ></span>
+                  <span>Promotion</span>
+                </div>
+                <span>21</span
+                ><!----></a
+              >
+            </li>
+            <!---->
+          </ul>
+        </div>
+      </div>
+      <div class="grid flex-1 grid-cols-2 divide-x divide-border">
+        <div class="flex flex-col" data-uk-filter="target: .js-filter">
+          <div
+            class="flex h-14 flex-none items-center border-b border-border px-4 py-2"
+          >
+            <h1 class="text-xl font-bold">Inbox</h1>
+            <ul class="uk-tab-alt ml-auto max-w-40">
+              <li class="uk-active" data-uk-filter-control="">
+                <a href="#" role="button">All mail</a>
+              </li>
+              <li data-uk-filter-control="[data-status='unread']">
+                <a href="#" role="button">Unread</a>
+              </li>
+            </ul>
+          </div>
+          <div class="flex flex-1 flex-col">
+            <div class="p-4">
+              <div class="uk-inline w-full">
+                <span class="uk-form-icon text-muted-foreground"
+                  ><span class="size-4"
+                    ><uk-icon
+                      ><!----><svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        class=""
+                      >
+                        <circle cx="11" cy="11" r="8"></circle>
+                        <path d="m21 21-4.3-4.3"></path></svg></uk-icon></span
+                ></span>
+                <input class="uk-input" type="text" placeholder="Search" />
+              </div>
+            </div>
+            <div class="max-h-[600px] flex-1 overflow-y-auto">
+              <ul class="js-filter space-y-2 p-4 pt-0">
+                <li
+                  class="uk-rounded relative border border-border p-3 hover:bg-accent bg-muted"
+                  data-status="read"
+                >
+                  <div class="flex w-full flex-col gap-1">
+                    <div class="flex items-center">
+                      <div class="flex items-center gap-2">
+                        <div class="font-semibold">William Smith</div>
+                        <!---->
+                      </div>
+                      <div class="ml-auto text-xs text-foreground">
+                        a year ago
+                      </div>
+                    </div>
+                    <a class="text-xs font-medium" href="#"
+                      >Meeting Tomorrow <span class="absolute inset-0"></span
+                    ></a>
+                    <div class="line-clamp-2 text-xs text-muted-foreground">
+                      Hi, let's have a meeting tomorrow to discuss the project.
+                      I've been reviewing the project details and have some
+                      ideas I'd like to share. It's crucial that we align on our
+                      next steps to ensure the project's success. Please come
+                      prepared with any questions or insights you may have.
+                      Looking forward to our meeting! Best regards, William
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <a href="#" class="uk-label relative z-10">meeting</a
+                      ><a
+                        href="#"
+                        class="uk-label relative z-10 uk-label-primary"
+                        >work</a
+                      ><a href="#" class="uk-label relative z-10">important</a>
+                    </div>
+                  </div>
+                </li>
+                <li
+                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
+                  data-status="read"
+                >
+                  <div class="flex w-full flex-col gap-1">
+                    <div class="flex items-center">
+                      <div class="flex items-center gap-2">
+                        <div class="font-semibold">Alice Smith</div>
+                        <!---->
+                      </div>
+                      <div class="ml-auto text-xs text-foreground">
+                        a year ago
+                      </div>
+                    </div>
+                    <a class="text-xs font-medium" href="#"
+                      >Re: Project Update <span class="absolute inset-0"></span
+                    ></a>
+                    <div class="line-clamp-2 text-xs text-muted-foreground">
+                      Thank you for the project update. It looks great! I've
+                      gone through the report, and the progress is impressive.
+                      The team has done a fantastic job, and I appreciate the
+                      hard work everyone has put in. I have a few minor
+                      suggestions that I'll include in the attached document.
+                      Let's discuss these during our next meeting. Keep up the
+                      excellent work! Best regards, Alice
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <a
+                        href="#"
+                        class="uk-label relative z-10 uk-label-primary"
+                        >work</a
+                      ><a href="#" class="uk-label relative z-10">important</a>
+                    </div>
+                  </div>
+                </li>
+                <li
+                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
+                  data-status="read"
+                >
+                  <div class="flex w-full flex-col gap-1">
+                    <div class="flex items-center">
+                      <div class="flex items-center gap-2">
+                        <div class="font-semibold">Bob Johnson</div>
+                        <!---->
+                      </div>
+                      <div class="ml-auto text-xs text-foreground">
+                        2 years ago
+                      </div>
+                    </div>
+                    <a class="text-xs font-medium" href="#"
+                      >Weekend Plans <span class="absolute inset-0"></span
+                    ></a>
+                    <div class="line-clamp-2 text-xs text-muted-foreground">
+                      Any plans for the weekend? I was thinking of going hiking
+                      in the nearby mountains. It's been a while since we had
+                      some outdoor fun. If you're interested, let me know, and
+                      we can plan the details. It'll be a great way to unwind
+                      and enjoy nature. Looking forward to your response! Best,
+                      Bob
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <a href="#" class="uk-label relative z-10">personal</a>
+                    </div>
+                  </div>
+                </li>
+                <li
+                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
+                  data-status="unread"
+                >
+                  <div class="flex w-full flex-col gap-1">
+                    <div class="flex items-center">
+                      <div class="flex items-center gap-2">
+                        <div class="font-semibold">Emily Davis</div>
+                        <span
+                          class="flex h-2 w-2 rounded-full bg-blue-600"
+                        ></span
+                        ><!---->
+                      </div>
+                      <div class="ml-auto text-xs text-foreground">
+                        2 years ago
+                      </div>
+                    </div>
+                    <a class="text-xs font-medium" href="#"
+                      >Re: Question about Budget
+                      <span class="absolute inset-0"></span
+                    ></a>
+                    <div class="line-clamp-2 text-xs text-muted-foreground">
+                      I have a question about the budget for the upcoming
+                      project. It seems like there's a discrepancy in the
+                      allocation of resources. I've reviewed the budget report
+                      and identified a few areas where we might be able to
+                      optimize our spending without compromising the project's
+                      quality. I've attached a detailed analysis for your
+                      reference. Let's discuss this further in our next meeting.
+                      Thanks, Emily
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <a
+                        href="#"
+                        class="uk-label relative z-10 uk-label-primary"
+                        >work</a
+                      ><a href="#" class="uk-label relative z-10">budget</a>
+                    </div>
+                  </div>
+                </li>
+                <li
+                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
+                  data-status="unread"
+                >
+                  <div class="flex w-full flex-col gap-1">
+                    <div class="flex items-center">
+                      <div class="flex items-center gap-2">
+                        <div class="font-semibold">Michael Wilson</div>
+                        <span
+                          class="flex h-2 w-2 rounded-full bg-blue-600"
+                        ></span
+                        ><!---->
+                      </div>
+                      <div class="ml-auto text-xs text-foreground">
+                        2 years ago
+                      </div>
+                    </div>
+                    <a class="text-xs font-medium" href="#"
+                      >Important Announcement
+                      <span class="absolute inset-0"></span
+                    ></a>
+                    <div class="line-clamp-2 text-xs text-muted-foreground">
+                      I have an important announcement to make during our team
+                      meeting. It pertains to a strategic shift in our approach
+                      to the upcoming product launch. We've received valuable
+                      feedback from our beta testers, and I believe it's time to
+                      make some adjustments to better meet our customers' needs.
+                      This change is crucial to our success, and I look forward
+                      to discussing it with the team. Please be prepared to
+                      share your insights during the meeting. Regards, Michael
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <a href="#" class="uk-label relative z-10">meeting</a
+                      ><a
+                        href="#"
+                        class="uk-label relative z-10 uk-label-primary"
+                        >work</a
+                      ><a href="#" class="uk-label relative z-10">important</a>
+                    </div>
+                  </div>
+                </li>
+                <li
+                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
+                  data-status="read"
+                >
+                  <div class="flex w-full flex-col gap-1">
+                    <div class="flex items-center">
+                      <div class="flex items-center gap-2">
+                        <div class="font-semibold">Sarah Brown</div>
+                        <!---->
+                      </div>
+                      <div class="ml-auto text-xs text-foreground">
+                        2 years ago
+                      </div>
+                    </div>
+                    <a class="text-xs font-medium" href="#"
+                      >Re: Feedback on Proposal
+                      <span class="absolute inset-0"></span
+                    ></a>
+                    <div class="line-clamp-2 text-xs text-muted-foreground">
+                      Thank you for your feedback on the proposal. It looks
+                      great! I'm pleased to hear that you found it promising.
+                      The team worked diligently to address all the key points
+                      you raised, and I believe we now have a strong foundation
+                      for the project. I've attached the revised proposal for
+                      your review. Please let me know if you have any further
+                      comments or suggestions. Looking forward to your response.
+                      Best regards, Sarah
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <a
+                        href="#"
+                        class="uk-label relative z-10 uk-label-primary"
+                        >work</a
+                      >
+                    </div>
+                  </div>
+                </li>
+                <li
+                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
+                  data-status="unread"
+                >
+                  <div class="flex w-full flex-col gap-1">
+                    <div class="flex items-center">
+                      <div class="flex items-center gap-2">
+                        <div class="font-semibold">David Lee</div>
+                        <span
+                          class="flex h-2 w-2 rounded-full bg-blue-600"
+                        ></span
+                        ><!---->
+                      </div>
+                      <div class="ml-auto text-xs text-foreground">
+                        2 years ago
+                      </div>
+                    </div>
+                    <a class="text-xs font-medium" href="#"
+                      >New Project Idea <span class="absolute inset-0"></span
+                    ></a>
+                    <div class="line-clamp-2 text-xs text-muted-foreground">
+                      I have an exciting new project idea to discuss with you.
+                      It involves expanding our services to target a niche
+                      market that has shown considerable growth in recent
+                      months. I've prepared a detailed proposal outlining the
+                      potential benefits and the strategy for execution. This
+                      project has the potential to significantly impact our
+                      business positively. Let's set up a meeting to dive into
+                      the details and determine if it aligns with our current
+                      goals. Best regards, David
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <a href="#" class="uk-label relative z-10">meeting</a
+                      ><a
+                        href="#"
+                        class="uk-label relative z-10 uk-label-primary"
+                        >work</a
+                      ><a href="#" class="uk-label relative z-10">important</a>
+                    </div>
+                  </div>
+                </li>
+                <li
+                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
+                  data-status="read"
+                >
+                  <div class="flex w-full flex-col gap-1">
+                    <div class="flex items-center">
+                      <div class="flex items-center gap-2">
+                        <div class="font-semibold">Olivia Wilson</div>
+                        <!---->
+                      </div>
+                      <div class="ml-auto text-xs text-foreground">
+                        2 years ago
+                      </div>
+                    </div>
+                    <a class="text-xs font-medium" href="#"
+                      >Vacation Plans <span class="absolute inset-0"></span
+                    ></a>
+                    <div class="line-clamp-2 text-xs text-muted-foreground">
+                      Let's plan our vacation for next month. What do you think?
+                      I've been thinking of visiting a tropical paradise, and
+                      I've put together some destination options. I believe it's
+                      time for us to unwind and recharge. Please take a look at
+                      the options and let me know your preferences. We can start
+                      making arrangements to ensure a smooth and enjoyable trip.
+                      Excited to hear your thoughts! Olivia
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <a href="#" class="uk-label relative z-10">personal</a>
+                    </div>
+                  </div>
+                </li>
+                <li
+                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
+                  data-status="read"
+                >
+                  <div class="flex w-full flex-col gap-1">
+                    <div class="flex items-center">
+                      <div class="flex items-center gap-2">
+                        <div class="font-semibold">James Martin</div>
+                        <!---->
+                      </div>
+                      <div class="ml-auto text-xs text-foreground">
+                        2 years ago
+                      </div>
+                    </div>
+                    <a class="text-xs font-medium" href="#"
+                      >Re: Conference Registration
+                      <span class="absolute inset-0"></span
+                    ></a>
+                    <div class="line-clamp-2 text-xs text-muted-foreground">
+                      I've completed the registration for the conference next
+                      month. The event promises to be a great networking
+                      opportunity, and I'm looking forward to attending the
+                      various sessions and connecting with industry experts.
+                      I've also attached the conference schedule for your
+                      reference. If there are any specific topics or sessions
+                      you'd like me to explore, please let me know. It's an
+                      exciting event, and I'll make the most of it. Best
+                      regards, James
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <a
+                        href="#"
+                        class="uk-label relative z-10 uk-label-primary"
+                        >work</a
+                      ><a href="#" class="uk-label relative z-10">conference</a>
+                    </div>
+                  </div>
+                </li>
+                <li
+                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
+                  data-status="unread"
+                >
+                  <div class="flex w-full flex-col gap-1">
+                    <div class="flex items-center">
+                      <div class="flex items-center gap-2">
+                        <div class="font-semibold">Sophia White</div>
+                        <span
+                          class="flex h-2 w-2 rounded-full bg-blue-600"
+                        ></span
+                        ><!---->
+                      </div>
+                      <div class="ml-auto text-xs text-foreground">
+                        2 years ago
+                      </div>
+                    </div>
+                    <a class="text-xs font-medium" href="#"
+                      >Team Dinner <span class="absolute inset-0"></span
+                    ></a>
+                    <div class="line-clamp-2 text-xs text-muted-foreground">
+                      Let's have a team dinner next week to celebrate our
+                      success. We've achieved some significant milestones, and
+                      it's time to acknowledge our hard work and dedication.
+                      I've made reservations at a lovely restaurant, and I'm
+                      sure it'll be an enjoyable evening. Please confirm your
+                      availability and any dietary preferences. Looking forward
+                      to a fun and memorable dinner with the team! Best, Sophia
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <a href="#" class="uk-label relative z-10">meeting</a
+                      ><a
+                        href="#"
+                        class="uk-label relative z-10 uk-label-primary"
+                        >work</a
+                      >
+                    </div>
+                  </div>
+                </li>
+                <li
+                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
+                  data-status="unread"
+                >
+                  <div class="flex w-full flex-col gap-1">
+                    <div class="flex items-center">
+                      <div class="flex items-center gap-2">
+                        <div class="font-semibold">Daniel Johnson</div>
+                        <span
+                          class="flex h-2 w-2 rounded-full bg-blue-600"
+                        ></span
+                        ><!---->
+                      </div>
+                      <div class="ml-auto text-xs text-foreground">
+                        2 years ago
+                      </div>
+                    </div>
+                    <a class="text-xs font-medium" href="#"
+                      >Feedback Request <span class="absolute inset-0"></span
+                    ></a>
+                    <div class="line-clamp-2 text-xs text-muted-foreground">
+                      I'd like your feedback on the latest project deliverables.
+                      We've made significant progress, and I value your input to
+                      ensure we're on the right track. I've attached the
+                      deliverables for your review, and I'm particularly
+                      interested in any areas where you think we can further
+                      enhance the quality or efficiency. Your feedback is
+                      invaluable, and I appreciate your time and expertise.
+                      Let's work together to make this project a success.
+                      Regards, Daniel
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <a
+                        href="#"
+                        class="uk-label relative z-10 uk-label-primary"
+                        >work</a
+                      >
+                    </div>
+                  </div>
+                </li>
+                <li
+                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
+                  data-status="read"
+                >
+                  <div class="flex w-full flex-col gap-1">
+                    <div class="flex items-center">
+                      <div class="flex items-center gap-2">
+                        <div class="font-semibold">Ava Taylor</div>
+                        <!---->
+                      </div>
+                      <div class="ml-auto text-xs text-foreground">
+                        2 years ago
+                      </div>
+                    </div>
+                    <a class="text-xs font-medium" href="#"
+                      >Re: Meeting Agenda <span class="absolute inset-0"></span
+                    ></a>
+                    <div class="line-clamp-2 text-xs text-muted-foreground">
+                      Here's the agenda for our meeting next week. I've included
+                      all the topics we need to cover, as well as time
+                      allocations for each. If you have any additional items to
+                      discuss or any specific points to address, please let me
+                      know, and we can integrate them into the agenda. It's
+                      essential that our meeting is productive and addresses all
+                      relevant matters. Looking forward to our meeting! Ava
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <a href="#" class="uk-label relative z-10">meeting</a
+                      ><a
+                        href="#"
+                        class="uk-label relative z-10 uk-label-primary"
+                        >work</a
+                      >
+                    </div>
+                  </div>
+                </li>
+                <li
+                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
+                  data-status="unread"
+                >
+                  <div class="flex w-full flex-col gap-1">
+                    <div class="flex items-center">
+                      <div class="flex items-center gap-2">
+                        <div class="font-semibold">William Anderson</div>
+                        <span
+                          class="flex h-2 w-2 rounded-full bg-blue-600"
+                        ></span
+                        ><!---->
+                      </div>
+                      <div class="ml-auto text-xs text-foreground">
+                        2 years ago
+                      </div>
+                    </div>
+                    <a class="text-xs font-medium" href="#"
+                      >Product Launch Update
+                      <span class="absolute inset-0"></span
+                    ></a>
+                    <div class="line-clamp-2 text-xs text-muted-foreground">
+                      The product launch is on track. I'll provide an update
+                      during our call. We've made substantial progress in the
+                      development and marketing of our new product. I'm excited
+                      to share the latest updates with you during our upcoming
+                      call. It's crucial that we coordinate our efforts to
+                      ensure a successful launch. Please come prepared with any
+                      questions or insights you may have. Let's make this
+                      product launch a resounding success! Best regards, William
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <a href="#" class="uk-label relative z-10">meeting</a
+                      ><a
+                        href="#"
+                        class="uk-label relative z-10 uk-label-primary"
+                        >work</a
+                      ><a href="#" class="uk-label relative z-10">important</a>
+                    </div>
+                  </div>
+                </li>
+                <li
+                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
+                  data-status="read"
+                >
+                  <div class="flex w-full flex-col gap-1">
+                    <div class="flex items-center">
+                      <div class="flex items-center gap-2">
+                        <div class="font-semibold">Mia Harris</div>
+                        <!---->
+                      </div>
+                      <div class="ml-auto text-xs text-foreground">
+                        2 years ago
+                      </div>
+                    </div>
+                    <a class="text-xs font-medium" href="#"
+                      >Re: Travel Itinerary
+                      <span class="absolute inset-0"></span
+                    ></a>
+                    <div class="line-clamp-2 text-xs text-muted-foreground">
+                      I've received the travel itinerary. It looks great! Thank
+                      you for your prompt assistance in arranging the details.
+                      I've reviewed the schedule and the accommodations, and
+                      everything seems to be in order. I'm looking forward to
+                      the trip, and I'm confident it'll be a smooth and
+                      enjoyable experience. If there are any specific activities
+                      or attractions you recommend at our destination, please
+                      feel free to share your suggestions. Excited for the trip!
+                      Mia
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <a href="#" class="uk-label relative z-10">personal</a
+                      ><a href="#" class="uk-label relative z-10">travel</a>
+                    </div>
+                  </div>
+                </li>
+                <li
+                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
+                  data-status="unread"
+                >
+                  <div class="flex w-full flex-col gap-1">
+                    <div class="flex items-center">
+                      <div class="flex items-center gap-2">
+                        <div class="font-semibold">Ethan Clark</div>
+                        <span
+                          class="flex h-2 w-2 rounded-full bg-blue-600"
+                        ></span
+                        ><!---->
+                      </div>
+                      <div class="ml-auto text-xs text-foreground">
+                        2 years ago
+                      </div>
+                    </div>
+                    <a class="text-xs font-medium" href="#"
+                      >Team Building Event <span class="absolute inset-0"></span
+                    ></a>
+                    <div class="line-clamp-2 text-xs text-muted-foreground">
+                      Let's plan a team-building event for our department. Team
+                      cohesion and morale are vital to our success, and I
+                      believe a well-organized team-building event can be
+                      incredibly beneficial. I've done some research and have a
+                      few ideas for fun and engaging activities. Please let me
+                      know your thoughts and availability. We want this event to
+                      be both enjoyable and productive. Together, we'll
+                      strengthen our team and boost our performance. Regards,
+                      Ethan
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <a href="#" class="uk-label relative z-10">meeting</a
+                      ><a
+                        href="#"
+                        class="uk-label relative z-10 uk-label-primary"
+                        >work</a
+                      >
+                    </div>
+                  </div>
+                </li>
+                <li
+                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
+                  data-status="read"
+                >
+                  <div class="flex w-full flex-col gap-1">
+                    <div class="flex items-center">
+                      <div class="flex items-center gap-2">
+                        <div class="font-semibold">Chloe Hall</div>
+                        <!---->
+                      </div>
+                      <div class="ml-auto text-xs text-foreground">
+                        3 years ago
+                      </div>
+                    </div>
+                    <a class="text-xs font-medium" href="#"
+                      >Re: Budget Approval <span class="absolute inset-0"></span
+                    ></a>
+                    <div class="line-clamp-2 text-xs text-muted-foreground">
+                      The budget has been approved. We can proceed with the
+                      project. I'm delighted to inform you that our budget
+                      proposal has received the green light from the finance
+                      department. This is a significant milestone, and it means
+                      we can move forward with the project as planned. I've
+                      attached the finalized budget for your reference. Let's
+                      ensure that we stay on track and deliver the project on
+                      time and within budget. It's an exciting time for us!
+                      Chloe
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <a
+                        href="#"
+                        class="uk-label relative z-10 uk-label-primary"
+                        >work</a
+                      ><a href="#" class="uk-label relative z-10">budget</a>
+                    </div>
+                  </div>
+                </li>
+                <li
+                  class="uk-rounded relative border border-border p-3 hover:bg-accent"
+                  data-status="unread"
+                >
+                  <div class="flex w-full flex-col gap-1">
+                    <div class="flex items-center">
+                      <div class="flex items-center gap-2">
+                        <div class="font-semibold">Samuel Turner</div>
+                        <span
+                          class="flex h-2 w-2 rounded-full bg-blue-600"
+                        ></span
+                        ><!---->
+                      </div>
+                      <div class="ml-auto text-xs text-foreground">
+                        3 years ago
+                      </div>
+                    </div>
+                    <a class="text-xs font-medium" href="#"
+                      >Weekend Hike <span class="absolute inset-0"></span
+                    ></a>
+                    <div class="line-clamp-2 text-xs text-muted-foreground">
+                      Who's up for a weekend hike in the mountains? I've been
+                      craving some outdoor adventure, and a hike in the
+                      mountains sounds like the perfect escape. If you're up for
+                      the challenge, we can explore some scenic trails and enjoy
+                      the beauty of nature. I've done some research and have a
+                      few routes in mind. Let me know if you're interested, and
+                      we can plan the details. It's sure to be a memorable
+                      experience! Samuel
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <a href="#" class="uk-label relative z-10">personal</a>
+                    </div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="flex flex-col">
+          <div
+            class="flex h-14 flex-none items-center border-b border-border p-2"
+          >
+            <div class="flex w-full justify-between">
+              <div class="flex gap-x-2 divide-x divide-border">
+                <ul class="flex gap-x-1">
+                  <li>
+                    <a
+                      class="uk-btn uk-btn-ghost uk-btn-icon"
+                      href="#"
+                      data-uk-tooltip="Archive"
+                      aria-label="Archive"
+                      ><span class="size-4"
+                        ><uk-icon
+                          ><!----><svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            class=""
+                          >
+                            <rect
+                              width="20"
+                              height="5"
+                              x="2"
+                              y="3"
+                              rx="1"
+                            ></rect>
+                            <path
+                              d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"
+                            ></path>
+                            <path d="M10 12h4"></path></svg></uk-icon></span
+                    ></a>
+                  </li>
+                  <li>
+                    <a
+                      class="uk-btn uk-btn-ghost uk-btn-icon"
+                      href="#"
+                      data-uk-tooltip="Move to junk"
+                      aria-label="Move to junk"
+                      ><span class="size-4"
+                        ><uk-icon
+                          ><!----><svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            class=""
+                          >
+                            <rect
+                              width="20"
+                              height="5"
+                              x="2"
+                              y="3"
+                              rx="1"
+                            ></rect>
+                            <path
+                              d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"
+                            ></path>
+                            <path d="m9.5 17 5-5"></path>
+                            <path d="m9.5 12 5 5"></path></svg></uk-icon></span
+                    ></a>
+                  </li>
+                  <li>
+                    <a
+                      class="uk-btn uk-btn-ghost uk-btn-icon"
+                      href="#"
+                      data-uk-tooltip="Move to trash"
+                      aria-label="Move to trash"
+                      ><span class="size-4"
+                        ><uk-icon
+                          ><!----><svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            class=""
+                          >
+                            <path d="M3 6h18"></path>
+                            <path
+                              d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
+                            ></path>
+                            <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
+                            <line x1="10" x2="10" y1="11" y2="17"></line>
+                            <line
+                              x1="14"
+                              x2="14"
+                              y1="11"
+                              y2="17"
+                            ></line></svg></uk-icon></span
+                    ></a>
+                  </li>
+                </ul>
+                <ul class="flex gap-x-1 pl-2">
+                  <li>
+                    <a
+                      class="uk-btn uk-btn-ghost uk-btn-icon"
+                      href="#"
+                      data-uk-tooltip="Snooze"
+                      aria-label="Snooze"
+                      ><span class="size-4"
+                        ><uk-icon
+                          ><!----><svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            class=""
+                          >
+                            <circle cx="12" cy="12" r="10"></circle>
+                            <polyline
+                              points="12 6 12 12 16 14"
+                            ></polyline></svg></uk-icon></span
+                    ></a>
+                  </li>
+                </ul>
+              </div>
+              <div class="flex gap-x-2 divide-x divide-border">
+                <ul class="flex gap-x-1">
+                  <li>
+                    <a
+                      class="uk-btn uk-btn-ghost uk-btn-icon"
+                      href="#"
+                      data-uk-tooltip="Reply"
+                      aria-label="Reply"
+                      ><span class="size-4"
+                        ><uk-icon
+                          ><!----><svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            class=""
+                          >
+                            <polyline points="9 17 4 12 9 7"></polyline>
+                            <path
+                              d="M20 18v-2a4 4 0 0 0-4-4H4"
+                            ></path></svg></uk-icon></span
+                    ></a>
+                  </li>
+                  <li>
+                    <a
+                      class="uk-btn uk-btn-ghost uk-btn-icon"
+                      href="#"
+                      data-uk-tooltip="Reply all"
+                      aria-label="Reply all"
+                      ><span class="size-4"
+                        ><uk-icon
+                          ><!----><svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            class=""
+                          >
+                            <polyline points="7 17 2 12 7 7"></polyline>
+                            <polyline points="12 17 7 12 12 7"></polyline>
+                            <path
+                              d="M22 18v-2a4 4 0 0 0-4-4H7"
+                            ></path></svg></uk-icon></span
+                    ></a>
+                  </li>
+                  <li>
+                    <a
+                      class="uk-btn uk-btn-ghost uk-btn-icon"
+                      href="#"
+                      data-uk-tooltip="Forward"
+                      aria-label="Forward"
+                      ><span class="size-4"
+                        ><uk-icon
+                          ><!----><svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            class=""
+                          >
+                            <polyline points="15 17 20 12 15 7"></polyline>
+                            <path
+                              d="M4 18v-2a4 4 0 0 1 4-4h12"
+                            ></path></svg></uk-icon></span
+                    ></a>
+                  </li>
+                </ul>
+                <div class="uk-inline pl-2">
+                  <button
+                    class="uk-btn uk-btn-ghost uk-btn-icon"
+                    aria-label="Menu"
+                    aria-haspopup="true"
+                  >
+                    <span class="size-4"
+                      ><uk-icon
+                        ><!----><svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="16"
+                          height="16"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          class=""
+                        >
+                          <circle cx="12" cy="12" r="1"></circle>
+                          <circle cx="12" cy="5" r="1"></circle>
+                          <circle cx="12" cy="19" r="1"></circle></svg></uk-icon
+                    ></span>
+                  </button>
+                  <div
+                    class="uk-drop uk-dropdown w-52"
+                    data-uk-dropdown="pos: bottom-right; mode: click"
+                  >
+                    <ul class="uk-dropdown-nav uk-nav">
+                      <li><a class="uk-drop-close">Mark as unread</a></li>
+                      <li><a class="uk-drop-close">Star thread</a></li>
+                      <li><a class="uk-drop-close">Add label</a></li>
+                      <li><a class="uk-drop-close">Mute thread</a></li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="flex flex-1 flex-col" id="test">
+            <div class="flex-1">
+              <div class="flex items-start p-4">
+                <div class="flex items-start gap-4">
+                  <span
+                    class="flex h-10 w-10 items-center justify-center rounded-full bg-muted"
+                    >WS</span
+                  >
+                  <div class="grid gap-1">
+                    <div class="font-semibold">William Smith</div>
+                    <div class="line-clamp-1 text-xs">Meeting Tomorrow</div>
+                    <div class="line-clamp-1 text-xs">
+                      <span class="font-medium">Reply-To:</span>
+                      williamsmith@example.com
+                    </div>
+                  </div>
+                </div>
+                <div class="ml-auto text-xs text-muted-foreground">
+                  October 22, 23 at 09:00:00 AM
+                </div>
+              </div>
+              <div
+                class="flex-1 space-y-4 whitespace-pre-line border-t border-border p-4"
+              >
+                Hi, let's have a meeting tomorrow to discuss the project. I've
+                been reviewing the project details and have some ideas I'd like
+                to share. It's crucial that we align on our next steps to ensure
+                the project's success. Please come prepared with any questions
+                or insights you may have. Looking forward to our meeting! Best
+                regards, William
+              </div>
+            </div>
+            <div class="flex-none space-y-4 border-t border-border p-4">
+              <div>
+                <label for="message" class="sr-only">Message</label>
+                <textarea
+                  class="uk-textarea"
+                  id="message"
+                  placeholder="Reply William Smith"
+                ></textarea>
+              </div>
+              <div class="flex justify-between">
+                <label
+                  class="inline-flex items-center gap-x-2 text-xs"
+                  for="mute"
+                  ><input
+                    class="uk-toggle-switch uk-toggle-switch-primary"
+                    id="mute"
+                    type="checkbox"
+                  />
+                  Mute this thread</label
+                >
+                <button class="uk-btn uk-btn-primary">Send</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!---->
+    <div
+      id="svelte-announcer"
+      aria-live="assertive"
+      aria-atomic="true"
+      style="
+        position: absolute;
+        left: 0;
+        top: 0;
+        clip: rect(0 0 0 0);
+        clip-path: inset(50%);
+        overflow: hidden;
+        white-space: nowrap;
+        width: 1px;
+        height: 1px;
+      "
+    >
+      <!---->
+    </div>
+    <!---->
+  </div>
+</body>
diff --git a/Web/auth.ref.html b/Web/auth-page.ref.html
similarity index 72%
rename from Web/auth.ref.html
rename to Web/auth-page.ref.html
index 2a9d595..9705333 100644
--- a/Web/auth.ref.html
+++ b/Web/auth-page.ref.html
@@ -1,77 +1,9 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Echoes Behind Closed Doors</title>
-    <link rel="stylesheet" href="/css/styles.css" />
-
-    <!-- favicons -->
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="/png/apple-touch-icon.png"
-    />
-    <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="32x32"
-      href="/png/favicon-32x32.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="16x16"
-      href="/png/favicon-16x16.png"
-    />
-    <link rel="manifest" href="/site.webmanifest" />
-
-    <!-- TODO: social share -->
-
-    <!-- franken-ui -->
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/franken-ui@internal/dist/css/core.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/franken-ui@internal/dist/css/utilities.min.css"
-    />
-
-    <script>
-      const htmlElement = document.documentElement;
-
-      const __FRANKEN__ = JSON.parse(
-        localStorage.getItem("__FRANKEN__") || "{}"
-      );
-
-      if (
-        __FRANKEN__.mode === "dark" ||
-        (!__FRANKEN__.mode &&
-          window.matchMedia("(prefers-color-scheme: dark)").matches)
-      ) {
-        htmlElement.classList.add("dark");
-      } else {
-        htmlElement.classList.remove("dark");
-      }
-
-      htmlElement.classList.add(__FRANKEN__.theme || "uk-theme-blue");
-      htmlElement.classList.add(__FRANKEN__.radii || "uk-radii-md");
-      htmlElement.classList.add(__FRANKEN__.shadows || "uk-shadows-sm");
-      htmlElement.classList.add(__FRANKEN__.font || "uk-font-sm");
-    </script>
-
-    <script
-      type="module"
-      src="https://unpkg.com/franken-ui@internal/dist/js/core.iife.js"
-    ></script>
-    <script
-      type="module"
-      src="https://unpkg.com/franken-ui@internal/dist/js/icon.iife.js"
-    ></script>
-  </head>
-  <body class="bg-background text-foreground">
+<body
+  class="bg-background font-geist-sans text-sm text-foreground"
+  data-sveltekit-preload-data="hover"
+>
+  <div style="display: contents">
+    <!--[--><!--[--><!----><!---->
     <div class="hidden h-screen grid-cols-2 xl:grid">
       <div
         class="col-span-1 hidden flex-col justify-between bg-zinc-900 p-8 text-white lg:flex"
@@ -161,5 +93,50 @@
         </div>
       </div>
     </div>
-  </body>
-</html>
+    <!----><!----><!----><!--]-->
+    <!--[!-->
+    <div
+      id="svelte-announcer"
+      aria-live="assertive"
+      aria-atomic="true"
+      style="
+        position: absolute;
+        left: 0;
+        top: 0;
+        clip: rect(0 0 0 0);
+        clip-path: inset(50%);
+        overflow: hidden;
+        white-space: nowrap;
+        width: 1px;
+        height: 1px;
+      "
+    >
+      <!---->
+    </div>
+    <!--]--><!--]-->
+
+    <script>
+      {
+        __sveltekit_ceme51 = {
+          base: new URL("..", location).pathname.slice(0, -1),
+        };
+
+        const element = document.currentScript.parentElement;
+
+        const data = [null, null];
+
+        Promise.all([
+          import("../_app/immutable/entry/start.Vst7ySbz.js"),
+          import("../_app/immutable/entry/app.D3_5gIyu.js"),
+        ]).then(([kit, app]) => {
+          kit.start(app, element, {
+            node_ids: [0, 3],
+            data,
+            form: null,
+            error: null,
+          });
+        });
+      }
+    </script>
+  </div>
+</body>
diff --git a/Web/auth.html b/Web/auth.html
new file mode 100644
index 0000000..0816865
--- /dev/null
+++ b/Web/auth.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Echoes Behind Closed Doors</title>
+
+    <!-- favicons -->
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/png/apple-touch-icon.png"
+    />
+    <link rel="icon" type="image/x-icon" href="/ico/favicon.ico" />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/png/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/png/favicon-16x16.png"
+    />
+    <link rel="manifest" href="/site.webmanifest" />
+
+    <!-- TODO: social share -->
+
+    <!-- franken-ui -->
+    <link rel="stylesheet" href="/css/styles.css" />
+    <script
+      type="module"
+      src="/js/franken-ui.js"
+    ></script>
+  </head>
+  <body class="bg-background text-foreground">
+    <main>
+        hi bro
+    </main>
+    <script type="application/javascript" src="/js/auth.js"></script>
+  </body>
+</html>