From 30b3ae5044b313a5d24041d740b12a079bea222b Mon Sep 17 00:00:00 2001
From: grngxd <36968271+grngxd@users.noreply.github.com>
Date: Fri, 8 Aug 2025 23:01:23 +0100
Subject: [PATCH] enhance embed editor

---
 src/components/dashboard/Settings.tsx | 94 ++++++++++++++++++++++-----
 1 file changed, 76 insertions(+), 18 deletions(-)

diff --git a/src/components/dashboard/Settings.tsx b/src/components/dashboard/Settings.tsx
index f470185..f38d8af 100644
--- a/src/components/dashboard/Settings.tsx
+++ b/src/components/dashboard/Settings.tsx
@@ -17,15 +17,30 @@ const StorageAndPlan = component$(() => {
         }
     });
 
+    const title = useSignal("this is a test");
+    const description = useSignal("this is a test description");
+    const color = useSignal("#FF264E");
+
     return (
         <div class="flex flex-col gap-2">
-            <p>current plan: stereo pro+</p>
-            <p>storage used: 3.8 / 15 GB</p>
-            <p>upgrade your plan for more features</p>
+            <div class="flex flex-col mb-2">
+                <div class="flex items-center gap-2">
+                    <svg class="w-5 h-5 text-stereo" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a6 6 0 016 6v2a6 6 0 01-12 0V8a6 6 0 016-6zm0 2a4 4 0 00-4 4v2a4 4 0 008 0V8a4 4 0 00-4-4z"/></svg>
+                    <p class="text-white/80">current plan: <span class="text-stereo font-semibold">pro+</span></p>
+                </div>
+                <div class="flex items-center gap-2">
+                    <svg class="w-5 h-5 text-stereo" fill="currentColor" viewBox="0 0 20 20"><path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm0 2h12v10H4V5zm2 2v6h8V7H6z"/></svg>
+                    <p class="text-white/80">storage used: <span class="font-semibold text-white">3.8</span> / <span class="text-white/50">15 GB</span></p>
+                </div>
+                <div class="w-full h-2 bg-white/10 rounded-full overflow-hidden mt-1 mb-2">
+                    <div class="h-full bg-stereo rounded-full w-[calc(3.8/15*100%)]" />
+                </div>
+                <p class="text-sm text-white/40">upgrade your plan for more features</p>
+            </div>
 
-            <p class="text-lg">embed editor</p>
+            <p class="text-xl">embed editor</p>
             {user.value && (
-                <div class="flex gap-2">
+                <div class="flex gap-3">
                     <div class="flex gap-3">
                         <img
                             class="rounded-full w-12 h-12"
@@ -41,21 +56,64 @@ const StorageAndPlan = component$(() => {
                                 <p>{user.value.global_name}</p>
                                 <p class="text-sm opacity-50">{new Date().toLocaleTimeString().split(":").slice(0, 2).join(":")}</p>
                             </div>
-                            <div class="overflow-clip flex bg-black/25 rounded-lg">
-                                <div class="w-1.5 bg-stereo" />
-                                <div class="flex flex-col p-2 gap-2 border-2 border-white/10 border-l-0 rounded-r-lg">
-                                    <p class="text-sm opacity-50">This is a test</p>
-                                    <img
-                                        class="rounded-sm aspect-[3/2]"
-                                        src="https://placehold.co/300x200"
-                                    />
+                                <div class="overflow-clip flex bg-black/25 rounded-lg">
+                                    {(title.value || description.value) ? (
+                                        <>
+                                            <div class="w-1.5" style={{ backgroundColor: color.value }} />
+                                            <div class="flex flex-col p-2 gap-2 border-2 border-white/10 border-l-0 rounded-r-lg">
+                                                <div class="flex flex-col">
+                                                    { title.value && <p>{title.value}</p> }
+                                                    { description.value && <p class="text-sm opacity-50">{description.value}</p> }
+                                                </div>
+
+                                                <img
+                                                    class="rounded-sm aspect-[3/2]"
+                                                    src="https://placehold.co/300x200"
+                                                />
+                                            </div>
+                                        </>
+                                    ) : (
+                                        <img
+                                            class="rounded-sm aspect-[3/2]"
+                                            src="https://placehold.co/300x200"
+                                        />
+                                    )}
                                 </div>
-                            </div>
                         </div>
                     </div>
-                
-                    <div>
-                        {/* form for embed */}
+
+                    <div class="flex flex-col gap-2">
+                        <div class="flex flex-col">
+                            <p class="text-sm text-white/70">title</p>
+                            <input
+                                type="text"
+                                class="bg-black/40 border border-white/10 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-stereo transition"
+                                placeholder="enter a title..."
+                                value={title.value}
+                                onInput$={(e) => title.value = (e.target as HTMLInputElement).value}
+                            />
+                        </div>
+
+                        <div class="flex flex-col">
+                            <p class="text-sm text-white/70">description</p>
+                            <textarea
+                                class="bg-black/40 border border-white/10 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-stereo transition"
+                                placeholder="enter a description..."
+                                rows={3}
+                                value={description.value}
+                                onInput$={(e) => description.value = (e.target as HTMLTextAreaElement).value}
+                            />
+                        </div>
+
+                        <div class="flex flex-col">
+                            <p class="text-sm text-white/70">color</p>
+                            <input
+                                type="color"
+                                class="bg-black/40 rounded-lg w-full"
+                                value={color.value}
+                                onInput$={(e) => color.value = (e.target as HTMLInputElement).value}
+                            />
+                        </div>
                     </div>
                 </div>
             )}
@@ -188,7 +246,7 @@ export default component$(() => {
                     </div>
                 </div>
                 
-                <div class="flex flex-col flex-3/4 text-lg overflow-clip">
+                <div class="flex flex-col flex-3/4 text-lg overflow-clip overflow-y-auto">
                     <h1 class="text-2xl mb-2">{categories.value[selectedCategory.value].name}</h1>
                     <SelectedComponent.value />
                 </div>