From 8be57457c1c9c875810246d204a716c1e331c32b Mon Sep 17 00:00:00 2001
From: Radionic <khpluslt@gmail.com>
Date: Fri, 17 Nov 2023 15:12:07 +0800
Subject: [PATCH] feat: update share avatar button

---
 js/AvatarPreview.js | 117 ++++++-----
 js/index.js         |   7 +-
 js/tw-styles.css    | 497 +++-----------------------------------------
 3 files changed, 98 insertions(+), 523 deletions(-)

diff --git a/js/AvatarPreview.js b/js/AvatarPreview.js
index 5c28ba6..fa9b8c1 100644
--- a/js/AvatarPreview.js
+++ b/js/AvatarPreview.js
@@ -113,6 +113,7 @@ async function uploadImage() {
 }
 
 const jsonWorkflowLoading = van.state(true);
+export const sharedAvatarLink = van.state("");
 
 async function prepareImageFromUrlRedirect(stage) {
   await new Promise((resolve) => setTimeout(resolve, 2000));
@@ -130,8 +131,8 @@ async function prepareImageFromUrlRedirect(stage) {
     graph.change();
     previewImg.val = api.apiURL(
       `/view?filename=${encodeURIComponent(
-        imageName,
-      )}&type=input&subfolder=create_avatar_endpoint${app.getPreviewFormatParam()}`,
+        imageName
+      )}&type=input&subfolder=create_avatar_endpoint${app.getPreviewFormatParam()}`
     );
     console.log(previewImg);
   }
@@ -176,7 +177,7 @@ export function AvatarPreview() {
   });
 
   const loading = van.state(false);
-  const shareLoading = van.state(false);
+  const shareLoading = van.state("share"); // share, loading, shared
 
   api.addEventListener("execution_start", (evt) => {
     loading.val = true;
@@ -207,14 +208,14 @@ export function AvatarPreview() {
           class: () =>
             " bg-gradient-to-b from-black via-[#5F5F5F] via-60% to-white text-transparent bg-clip-text font-gabarito text-4xl",
         },
-        "Avatech v1",
+        "Avatech v1"
       ),
       div(
         {
           class: () =>
             " bg-gradient-to-b from-black via-[#5F5F5F] via-50% to-white text-transparent bg-clip-text font-gabarito text-2xl",
         },
-        "Get your DALLE3 AI Personal Clone",
+        "Get your DALLE3 AI Personal Clone"
       ),
       div(
         {
@@ -305,7 +306,7 @@ export function AvatarPreview() {
                   },
                 },
                 div({ class: "badge badge-neutral" }, "2"),
-                "Edit Segment",
+                "Edit Segment"
               ),
               button(
                 {
@@ -513,7 +514,7 @@ export function AvatarPreview() {
           class: () =>
             "w-full flex justify-center font-bold italic text-gray-500",
         },
-        span("We are launching OpenAI Assistant API integration soon!"),
+        span("We are launching OpenAI Assistant API integration soon!")
       ),
       div(
         { class: () => "w-[24rem] flex justify-center items-center" },
@@ -529,34 +530,52 @@ export function AvatarPreview() {
         button(
           {
             class: () =>
-              "btn rounded rounded-l-none rounded-r-md no-animation bg-neutral hover:bg-neutral-focus text-white border-none normal-case",
+              "btn rounded rounded-l-none rounded-r-md no-animation bg-neutral-800 hover:bg-neutral-950 text-white border-none normal-case",
             onclick: async () => {
-              shareLoading.val = true;
-              const url = await (await fetch("./get_webhook")).json();
-              await uploadPreview();
-              await fetch(url, {
-                method: "POST",
-                headers: {
-                  "Content-Type": "application/json",
-                },
-                body: JSON.stringify({
-                  username: "Avabot",
-                  avatar_url:
-                    "https://avatech-avatar-dev1.nyc3.cdn.digitaloceanspaces.com/avatechai.png",
-                  content: "New register! \n" + email.val,
-                }),
-              });
-              shareLoading.val = false;
+              if (shareLoading.val === "share") {
+                shareLoading.val = "loading";
+                const url = await (await fetch("./get_webhook")).json();
+                await uploadPreview();
+                await fetch(url, {
+                  method: "POST",
+                  headers: {
+                    "Content-Type": "application/json",
+                  },
+                  body: JSON.stringify({
+                    username: "Avabot",
+                    avatar_url:
+                      "https://avatech-avatar-dev1.nyc3.cdn.digitaloceanspaces.com/avatechai.png",
+                    content: "New register! \n" + email.val,
+                  }),
+                });
+                shareLoading.val = "shared";
+              }
+              if (sharedAvatarLink.val) {
+                await navigator.clipboard.writeText(sharedAvatarLink.val);
+                alertDialog.val = {
+                  text: "Avatar link copied to clipboard!",
+                  time: 5000,
+                };
+              }
             },
           },
-          () =>
-            shareLoading.val
-              ? span({
-                class: "loading loading-spinner loading-md",
-              })
-              : "Get Avatar Link",
-        ),
-      ),
+          () => {
+            switch (shareLoading.val) {
+              case "share":
+                return "Get Avatar Link";
+              case "loading":
+                return span({
+                  class: "loading loading-spinner loading-md",
+                });
+              case "shared":
+                return span({
+                  class: "iconify text-xl",
+                  "data-icon": "lucide:copy-check",
+                });
+            }
+          }
+        )
+      )
     );
   };
 
@@ -573,7 +592,7 @@ export function AvatarPreview() {
         class: "iconify text-lg",
         "data-icon": "ic:round-close",
         "data-inline": "false",
-      }),
+      })
     );
   };
 
@@ -590,7 +609,7 @@ export function AvatarPreview() {
         class: "iconify text-lg",
         "data-icon": "mdi:restart",
         "data-inline": "false",
-      }),
+      })
     );
   };
 
@@ -612,8 +631,8 @@ export function AvatarPreview() {
           "data-inline": "false",
         }),
         span({ class: "sm:flex hidden" }, () =>
-          jsonWorkflowLoading.val ? "Loading" : "Change workflow",
-        ),
+          jsonWorkflowLoading.val ? "Loading" : "Change workflow"
+        )
       ),
       ul(
         {
@@ -635,7 +654,7 @@ export function AvatarPreview() {
                 else isGenerateFlow.val = true;
               },
             },
-            () => val,
+            () => val
           );
         }),
         div({ class: () => "divider !my-0" }),
@@ -661,9 +680,9 @@ export function AvatarPreview() {
               // document.getElementById("comfy-load-button").click();
             },
           },
-          "Import...",
-        ),
-      ),
+          "Import..."
+        )
+      )
     );
     // return button(
     //   {
@@ -706,7 +725,7 @@ export function AvatarPreview() {
           "absolute top-4 right-4 btn sm:w-32 w-20 text-black btn-ghost text-xs z-[200] !px-0 normal-case sm:btn-md btn-sm",
         onclick: () => window.open("https://twitter.com/avatech_gg", "_blank"),
       },
-      "Twitter",
+      "Twitter"
     );
   };
 
@@ -733,7 +752,7 @@ export function AvatarPreview() {
         },
         renderCloseButton(),
         renderRestartButton(),
-        renderChangeWorkflowButton(),
+        renderChangeWorkflowButton()
       ),
       renderTwitter(),
       () => {
@@ -746,7 +765,7 @@ export function AvatarPreview() {
             },
             renderIFrame(),
             renderSteps(),
-            renderShareLink(),
+            renderShareLink()
           );
         } else {
           return div(
@@ -759,12 +778,12 @@ export function AvatarPreview() {
             div(
               { class: () => "flex flex-col" },
               renderIFrame(),
-              renderShareLink(),
-            ),
+              renderShareLink()
+            )
           );
         }
-      },
-    ),
+      }
+    )
   );
 }
 
@@ -784,8 +803,8 @@ function showImage(name) {
   }
   img.src = api.apiURL(
     `/view?filename=${encodeURIComponent(
-      name,
-    )}&type=input&subfolder=${subfolder}${app.getPreviewFormatParam()}`,
+      name
+    )}&type=input&subfolder=${subfolder}${app.getPreviewFormatParam()}`
   );
   node.setSizeForImage?.();
 }
diff --git a/js/index.js b/js/index.js
index 527a1b8..878826c 100644
--- a/js/index.js
+++ b/js/index.js
@@ -26,6 +26,7 @@ import { initModel, loadNpyTensor } from "./onnx.js";
 import "https://code.iconify.design/3/3.1.0/iconify.min.js";
 import { autoSegment, drawSegment, getClicks } from "./LayerEditor.js";
 import { infoDialog } from "./dialog.js";
+import { sharedAvatarLink } from "./AvatarPreview.js";
 
 export const generatedImages = {};
 
@@ -713,11 +714,9 @@ export async function uploadPreview() {
       body: file,
     }).catch((error) => console.error(error));
 
-    infoDialog.show(
-      `Preview avatar url: <a href='https://editor.avatech.ai/viewer?avatarId=${labData.modelId}' target="_blank">https://editor.avatech.ai/viewer?avatarId=${labData.modelId}</a>` +
-        `\nChat url: <a href='https://labs.avatech.ai?avatarId=${labData.modelId}' target="_blank">https://labs.avatech.ai?avatarId=${labData.modelId}</a>`
-    );
+    sharedAvatarLink.val = `https://editor.avatech.ai/viewer?avatarId=${labData?.modelId}`;
     previewModelId.val = labData.modelId;
+    return labData;
   }
 }
 
diff --git a/js/tw-styles.css b/js/tw-styles.css
index 9d4d538..4339fc8 100644
--- a/js/tw-styles.css
+++ b/js/tw-styles.css
@@ -726,10 +726,6 @@ html{
     --tw-text-opacity: 1;
     color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
   }
-
-  .tab:hover{
-    --tw-text-opacity: 1;
-  }
 }
 
 .btn{
@@ -1033,75 +1029,12 @@ html{
       background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
     }
   }
-
-  .tab[disabled],
-    .tab[disabled]:hover{
-    cursor: not-allowed;
-    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
-    --tw-text-opacity: 0.2;
-  }
 }
 
 .dropdown:is(details) summary::-webkit-details-marker{
   display: none;
 }
 
-.file-input{
-  height: 3rem;
-  flex-shrink: 1;
-  -webkit-padding-end: 1rem;
-          padding-inline-end: 1rem;
-  font-size: 1rem;
-  line-height: 2;
-  line-height: 1.5rem;
-  overflow: hidden;
-  border-radius: var(--rounded-btn, 0.5rem);
-  border-width: 1px;
-  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
-  --tw-border-opacity: 0;
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
-}
-
-.file-input::file-selector-button{
-  -webkit-margin-end: 1rem;
-          margin-inline-end: 1rem;
-  display: inline-flex;
-  height: 100%;
-  flex-shrink: 0;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  text-align: center;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  line-height: 1em;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  transition-duration: 200ms;
-  border-style: solid;
-  --tw-border-opacity: 1;
-  border-color: var(--fallback-n,oklch(var(--n)/var(--tw-border-opacity)));
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
-  font-weight: 600;
-  text-transform: uppercase;
-  --tw-text-opacity: 1;
-  color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
-  text-decoration-line: none;
-  border-width: var(--border-btn, 1px);
-  animation: button-pop var(--animation-btn, 0.25s) ease-out;
-}
-
 .label{
   display: flex;
   -webkit-user-select: none;
@@ -1336,92 +1269,6 @@ html{
   overflow: hidden;
 }
 
-.radio{
-  flex-shrink: 0;
-  --chkbg: var(--bc);
-  height: 1.5rem;
-  width: 1.5rem;
-  cursor: pointer;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  border-radius: 9999px;
-  border-width: 1px;
-  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
-  --tw-border-opacity: 0.2;
-}
-
-.tabs{
-  display: grid;
-  align-items: flex-end;
-}
-
-.tabs-lifted:has(.tab-content[class^="rounded-"]) .tab:first-child:not(.tab-active),
-  .tabs-lifted:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(.tab-active){
-  border-bottom-color: transparent;
-}
-
-.tab{
-  position: relative;
-  grid-row-start: 1;
-  display: inline-flex;
-  height: 2rem;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  line-height: 2;
-  --tab-padding: 1rem;
-  --tw-text-opacity: 0.5;
-  --tab-color: var(--fallback-bc,oklch(var(--bc)/1));
-  --tab-bg: var(--fallback-b1,oklch(var(--b1)/1));
-  --tab-border-color: var(--fallback-b3,oklch(var(--b3)/1));
-  color: var(--tab-color);
-  -webkit-padding-start: var(--tab-padding, 1rem);
-          padding-inline-start: var(--tab-padding, 1rem);
-  -webkit-padding-end: var(--tab-padding, 1rem);
-          padding-inline-end: var(--tab-padding, 1rem);
-}
-
-.tab:is(input[type="radio"]):after{
-  --tw-content: attr(aria-label);
-  content: var(--tw-content);
-}
-
-.tab:not(input):empty{
-  cursor: default;
-  grid-column-start: span 9999;
-}
-
-.tab-content{
-  grid-column: 1 / -1;
-  grid-column-end: span 9999;
-  grid-row-start: 2;
-  margin-top: calc(var(--tab-border) * -1);
-  display: none;
-  border-color: transparent;
-  border-width: var(--tab-border, 0);
-}
-
-:checked + .tab-content:nth-child(2),
-  .tab-active + .tab-content:nth-child(2){
-  border-start-start-radius: 0px;
-}
-
-input.tab:checked + .tab-content,
-.tab-active + .tab-content{
-  display: block;
-}
-
 .textarea{
   min-height: 3rem;
   flex-shrink: 1;
@@ -1684,46 +1531,6 @@ details.collapse summary::-webkit-details-marker{
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.file-input-bordered{
-  --tw-border-opacity: 0.2;
-}
-
-.file-input:focus{
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 2px;
-  outline-color: var(--fallback-bc,oklch(var(--bc)/0.2));
-}
-
-.file-input-disabled,
-  .file-input[disabled]{
-  cursor: not-allowed;
-  --tw-border-opacity: 1;
-  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
-  --tw-text-opacity: 0.2;
-}
-
-.file-input-disabled::-moz-placeholder, .file-input[disabled]::-moz-placeholder{
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
-  --tw-placeholder-opacity: 0.2;
-}
-
-.file-input-disabled::placeholder,
-  .file-input[disabled]::placeholder{
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
-  --tw-placeholder-opacity: 0.2;
-}
-
-.file-input-disabled::file-selector-button, .file-input[disabled]::file-selector-button{
-  --tw-border-opacity: 0;
-  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
-  --tw-bg-opacity: 0.2;
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
-  --tw-text-opacity: 0.2;
-}
-
 .input input:focus{
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1985,32 +1792,6 @@ details.collapse summary::-webkit-details-marker{
   }
 }
 
-.radio:focus{
-  box-shadow: none;
-}
-
-.radio:focus-visible{
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 2px;
-  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
-}
-
-.radio:checked,
-  .radio[aria-checked="true"]{
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
-  background-image: none;
-  animation: radiomark var(--animation-input, 0.2s) ease-out;
-  box-shadow: 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset,
-      0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset;
-}
-
-.radio:disabled{
-  cursor: not-allowed;
-  opacity: 0.2;
-}
-
 @keyframes radiomark{
   0%{
     box-shadow: 0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset,
@@ -2052,132 +1833,6 @@ details.collapse summary::-webkit-details-marker{
   }
 }
 
-.tabs-lifted .tab:focus-visible{
-  border-end-end-radius: 0;
-  border-end-start-radius: 0;
-}
-
-.tab.tab-active:not(.tab-disabled):not([disabled]),
-  .tab:is(input:checked){
-  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
-  --tw-border-opacity: 1;
-  --tw-text-opacity: 1;
-}
-
-.tab:focus{
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
-.tab:focus-visible{
-  outline: 2px solid currentColor;
-  outline-offset: -5px;
-}
-
-.tab-disabled,
-  .tab[disabled]{
-  cursor: not-allowed;
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
-  --tw-text-opacity: 0.2;
-}
-
-.tabs-bordered .tab{
-  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
-  --tw-border-opacity: 0.2;
-  border-style: solid;
-  border-bottom-width: calc(var(--tab-border, 1px) + 1px);
-}
-
-.tabs-lifted .tab{
-  border: var(--tab-border, 1px) solid transparent;
-  border-width: 0 0 var(--tab-border, 1px) 0;
-  border-start-start-radius: var(--tab-radius, 0.5rem);
-  border-start-end-radius: var(--tab-radius, 0.5rem);
-  border-bottom-color: var(--tab-border-color);
-  -webkit-padding-start: var(--tab-padding, 1rem);
-          padding-inline-start: var(--tab-padding, 1rem);
-  -webkit-padding-end: var(--tab-padding, 1rem);
-          padding-inline-end: var(--tab-padding, 1rem);
-  padding-top: var(--tab-border, 1px);
-}
-
-.tabs-lifted .tab.tab-active:not(.tab-disabled):not([disabled]),
-  .tabs-lifted .tab:is(input:checked){
-  background-color: var(--tab-bg);
-  border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
-  border-inline-start-color: var(--tab-border-color);
-  border-inline-end-color: var(--tab-border-color);
-  border-top-color: var(--tab-border-color);
-  -webkit-padding-start: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
-          padding-inline-start: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
-  -webkit-padding-end: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
-          padding-inline-end: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
-  padding-bottom: var(--tab-border, 1px);
-  padding-top: 0;
-}
-
-.tabs-lifted .tab.tab-active:not(.tab-disabled):not([disabled]):before, .tabs-lifted .tab:is(input:checked):before{
-  z-index: 1;
-  content: "";
-  display: block;
-  position: absolute;
-  width: calc(100% + var(--tab-radius, 0.5rem) * 2);
-  height: var(--tab-radius, 0.5rem);
-  bottom: 0;
-  background-size: var(--tab-radius, 0.5rem);
-  background-position: top left,
-        top right;
-  background-repeat: no-repeat;
-  --tab-grad: calc(69% - var(--tab-border, 1px));
-  --radius-start: radial-gradient(
-        circle at top left,
-        transparent var(--tab-grad),
-        var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
-        var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
-        var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px)
-      );
-  --radius-end: radial-gradient(
-        circle at top right,
-        transparent var(--tab-grad),
-        var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
-        var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
-        var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px)
-      );
-  background-image: var(--radius-start), var(--radius-end);
-}
-
-.tabs-lifted .tab.tab-active:not(.tab-disabled):not([disabled]):first-child:before, .tabs-lifted .tab:is(input:checked):first-child:before{
-  background-image: var(--radius-end);
-  background-position: top right;
-}
-
-[dir="rtl"] .tabs-lifted .tab.tab-active:not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tabs-lifted .tab:is(input:checked):first-child:before{
-  background-image: var(--radius-start);
-  background-position: top left;
-}
-
-.tabs-lifted .tab.tab-active:not(.tab-disabled):not([disabled]):last-child:before, .tabs-lifted .tab:is(input:checked):last-child:before{
-  background-image: var(--radius-start);
-  background-position: top left;
-}
-
-[dir="rtl"] .tabs-lifted .tab.tab-active:not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tabs-lifted .tab:is(input:checked):last-child:before{
-  background-image: var(--radius-end);
-  background-position: top right;
-}
-
-.tabs-lifted
-  .tab-active:not(.tab-disabled):not([disabled])
-  + .tabs-lifted
-  .tab-active:not(.tab-disabled):not([disabled]):before, .tabs-lifted .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked):before{
-  background-image: var(--radius-end);
-  background-position: top right;
-}
-
-.tabs-boxed .tab{
-  border-radius: var(--rounded-btn, 0.5rem);
-}
-
 .table tr.active,
   .table tr.active:nth-child(even),
   .table-zebra tbody tr:nth-child(even){
@@ -2376,36 +2031,6 @@ details.collapse summary::-webkit-details-marker{
   place-items: end;
 }
 
-.tabs-md :where(.tab){
-  height: 2rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  line-height: 2;
-  --tab-padding: 1rem;
-}
-
-.tabs-lg :where(.tab){
-  height: 3rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  line-height: 2;
-  --tab-padding: 1.25rem;
-}
-
-.tabs-sm :where(.tab){
-  height: 1.5rem;
-  font-size: 0.875rem;
-  line-height: .75rem;
-  --tab-padding: 0.75rem;
-}
-
-.tabs-xs :where(.tab){
-  height: 1.25rem;
-  font-size: 0.75rem;
-  line-height: .75rem;
-  --tab-padding: 0.5rem;
-}
-
 .avatar.online:before{
   content: "";
   position: absolute;
@@ -2529,6 +2154,10 @@ details.collapse summary::-webkit-details-marker{
   position: relative;
 }
 
+.-left-\[100px\]{
+  left: -100px;
+}
+
 .bottom-0{
   bottom: 0px;
 }
@@ -2589,10 +2218,6 @@ details.collapse summary::-webkit-details-marker{
   top: 1rem;
 }
 
-.-left-\[100px\]{
-  left: -100px;
-}
-
 .z-\[1000\]{
   z-index: 1000;
 }
@@ -2621,16 +2246,16 @@ details.collapse summary::-webkit-details-marker{
   margin: 0px;
 }
 
-.my-0{
-  margin-top: 0px;
-  margin-bottom: 0px;
-}
-
 .\!my-0{
   margin-top: 0px !important;
   margin-bottom: 0px !important;
 }
 
+.my-0{
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
 .mb-2{
   margin-bottom: 0.5rem;
 }
@@ -2651,10 +2276,6 @@ details.collapse summary::-webkit-details-marker{
   margin-top: 0.5rem;
 }
 
-.mt-24{
-  margin-top: 6rem;
-}
-
 .mt-4{
   margin-top: 1rem;
 }
@@ -2679,10 +2300,6 @@ details.collapse summary::-webkit-details-marker{
   display: none;
 }
 
-.aspect-square{
-  aspect-ratio: 1 / 1;
-}
-
 .h-3{
   height: 0.75rem;
 }
@@ -2712,22 +2329,22 @@ details.collapse summary::-webkit-details-marker{
   min-height: 400px;
 }
 
+.w-20{
+  width: 5rem;
+}
+
 .w-3{
   width: 0.75rem;
 }
 
-.w-32{
-  width: 8rem;
-}
-
-.w-40{
-  width: 10rem;
-}
-
 .w-56{
   width: 14rem;
 }
 
+.w-96{
+  width: 24rem;
+}
+
 .w-\[24rem\]{
   width: 24rem;
 }
@@ -2736,10 +2353,6 @@ details.collapse summary::-webkit-details-marker{
   width: 32rem;
 }
 
-.w-\[550px\]{
-  width: 550px;
-}
-
 .w-fit{
   width: -moz-fit-content;
   width: fit-content;
@@ -2749,30 +2362,6 @@ details.collapse summary::-webkit-details-marker{
   width: 100%;
 }
 
-.w-10{
-  width: 2.5rem;
-}
-
-.w-14{
-  width: 3.5rem;
-}
-
-.w-24{
-  width: 6rem;
-}
-
-.w-20{
-  width: 5rem;
-}
-
-.w-64{
-  width: 16rem;
-}
-
-.w-96{
-  width: 24rem;
-}
-
 .min-w-\[300px\]{
   min-width: 300px;
 }
@@ -2781,10 +2370,6 @@ details.collapse summary::-webkit-details-marker{
   max-width: 100%;
 }
 
-.grow{
-  flex-grow: 1;
-}
-
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2799,18 +2384,10 @@ details.collapse summary::-webkit-details-marker{
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.cursor-pointer{
-  cursor: pointer;
-}
-
 .resize-none{
   resize: none;
 }
 
-.grid-flow-col{
-  grid-auto-flow: column;
-}
-
 .grid-cols-2{
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -2843,10 +2420,6 @@ details.collapse summary::-webkit-details-marker{
   justify-content: space-around;
 }
 
-.justify-stretch{
-  justify-content: stretch;
-}
-
 .gap-2{
   gap: 0.5rem;
 }
@@ -2974,11 +2547,6 @@ details.collapse summary::-webkit-details-marker{
   border-color: rgb(168 85 247 / var(--tw-border-opacity));
 }
 
-.bg-\[\#f6f6f6\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(246 246 246 / var(--tw-bg-opacity));
-}
-
 .bg-base-200{
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
@@ -3004,6 +2572,11 @@ details.collapse summary::-webkit-details-marker{
   background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
 }
 
+.bg-neutral-800{
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
+
 .bg-orange-100{
   --tw-bg-opacity: 1;
   background-color: rgb(255 237 213 / var(--tw-bg-opacity));
@@ -3206,17 +2779,6 @@ details.collapse summary::-webkit-details-marker{
   outline-offset: 2px !important;
 }
 
-.ring-1{
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.ring-black{
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
-}
-
 .blur{
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -3417,6 +2979,11 @@ img[src] {
   cursor: pointer;
 }
 
+.hover\:bg-neutral-950:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(10 10 10 / var(--tw-bg-opacity));
+}
+
 .hover\:text-red-500:hover{
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
@@ -3432,17 +2999,7 @@ img[src] {
     display: flex;
   }
 
-  .sm\:w-10{
-    width: 2.5rem;
-  }
-
   .sm\:w-32{
     width: 8rem;
   }
 }
-
-@media (min-width: 768px){
-  .md\:w-full{
-    width: 100%;
-  }
-}