madarx 2.15.1 → 2.16.1

package/app/components/ui/sidebar-avatar.jsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+// The top-of-sidebar mark is now a user avatar. Empty by default; click to
+// upload an image. Stored client-side as a data URL (local-first, per browser).
+const STORAGE_KEY = "madarx:sidebarAvatar";
+const MAX_BYTES = 2 * 1024 * 1024; // 2 MB
+
+export default function SidebarAvatar() {
+  const [src, setSrc] = useState(null);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY);
+      if (saved) setSrc(saved);
+    } catch {}
+  }, []);
+
+  function onPick(event) {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+    if (!file || !file.type.startsWith("image/") || file.size > MAX_BYTES) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      const url = String(reader.result || "");
+      if (!url) return;
+      setSrc(url);
+      try { localStorage.setItem(STORAGE_KEY, url); } catch {}
+    };
+    reader.readAsDataURL(file);
+  }
+
+  function clear(event) {
+    event.stopPropagation();
+    setSrc(null);
+    try { localStorage.removeItem(STORAGE_KEY); } catch {}
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => inputRef.current?.click()}
+        aria-label={src ? "Change avatar" : "Upload an avatar"}
+        title={src ? "Change avatar" : "Upload an avatar"}
+        className="group relative w-9 h-9 rounded-full overflow-hidden flex items-center justify-center cursor-pointer border border-[rgba(20,22,26,0.16)] bg-[rgba(17,19,24,0.035)] transition-colors hover:border-[rgba(20,22,26,0.32)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#111318] focus-visible:ring-offset-2 focus-visible:ring-offset-white/50"
+      >
+        {src ? (
+          <img src={src} alt="Avatar" className="w-full h-full object-cover" />
+        ) : (
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9aa1ab" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+            <path d="M12 16V8M8 12h8" />
+          </svg>
+        )}
+        <span className="absolute inset-0 hidden group-hover:flex items-center justify-center bg-black/35 text-white">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+            <path d="M12 16V6M12 6 7.5 10.5M12 6l4.5 4.5" />
+            <path d="M5 18v1.5A1.5 1.5 0 0 0 6.5 21h11a1.5 1.5 0 0 0 1.5-1.5V18" />
+          </svg>
+        </span>
+        {src ? (
+          <span
+            role="button"
+            tabIndex={-1}
+            onClick={clear}
+            aria-label="Remove avatar"
+            className="absolute -top-0.5 -right-0.5 hidden group-hover:flex w-4 h-4 items-center justify-center rounded-full bg-[#111318] text-white text-[9px] leading-none"
+          >
+            ×
+          </span>
+        ) : null}
+      </button>
+      <input ref={inputRef} type="file" accept="image/*" hidden onChange={onPick} />
+    </>
+  );
+}

package/app/components/ui/sidebar-with-submenu.jsx

@@ -25,9 +25,10 @@ import {
   Building2,
 } from "lucide-react";
 import { useAccountSession } from "../account-session.jsx";
+import SidebarAvatar from "./sidebar-avatar.jsx";
 
 const navigation = [
-  { group: "work",    name: "Overview",    href: "/",            icon: LayoutGrid        },
+  { group: "work",    name: "Spaces",      href: "/",            icon: LayoutGrid        },
   { group: "work",    name: "Projects",    href: "/projects",    icon: FolderOpen        },
   { group: "work",    name: "Agents",      href: "/agents",      icon: Users             },
   { group: "work",    name: "Tasks",       href: "/tasks",       icon: BriefcaseBusiness },
@@ -125,19 +126,11 @@ export default function Sidebar({ moduleNav = [] }) {
 
   return (
     <aside
-      className="relative z-30 h-full w-full rounded-[18px] border border-white/75 bg-[var(--glass)] backdrop-blur-[22px] backdrop-saturate-150 shadow-[0_18px_54px_rgba(37,36,34,0.16)] flex flex-col"
+      className="relative z-30 h-full w-full rounded-[18px] border border-white/75 bg-[var(--glass)] backdrop-blur-[22px] backdrop-saturate-150 flex flex-col"
       aria-label="Primary navigation"
     >
       <div className="h-20 flex items-center justify-center px-3 shrink-0">
-        <Link href="/" prefetch className="flex-none" aria-label="madarX home" onClick={handleNavClick}>
-          <img
-            src="/madarx-mark.svg"
-            alt="madarX"
-            width={32}
-            height={32}
-            className="block text-[#111318]"
-          />
-        </Link>
+        <SidebarAvatar />
       </div>
 
       <div className="flex-1 flex flex-col min-h-0">
@@ -210,7 +203,7 @@ export default function Sidebar({ moduleNav = [] }) {
                     href="/"
                     className="block w-full p-2 text-left rounded-md hover:bg-[rgba(17,19,24,0.05)] active:bg-[rgba(17,19,24,0.1)] duration-150 cursor-pointer no-underline text-[#313740]"
                   >
-                    Dashboard
+                    Spaces
                   </Link>
                 </DropdownMenu.Item>
                 <DropdownMenu.Item asChild className="outline-none">

package/app/components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

package/app/components/ui/tooltip.tsx

@@ -0,0 +1 @@
+export {}