@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.10

package/dist/components/layout/SolidAiStudioLayout.tsx

@@ -1,43 +1,16 @@
 import React, { useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate, useLocation } from "react-router-dom";
-// import { SolidAiChat } from "../core/solid-ai/SolidAiChat";
 import { exitStudioMode, setStudioView, type StudioView } from "../../redux/features/solidStudioSlice";
+import { showToast } from "../../redux/features/toastSlice";
 import { useSession } from "../../hooks/useSession";
-import { signOut } from "../../adapters/auth/index";
+import { getSession, signOut } from "../../adapters/auth/index";
 import { createPortal } from "react-dom";
-import { enableStudioMode, disableStudioMode } from "../../helpers/studioSandbox";
 import { env } from "../../adapters/env";
-
-const HEADER_HEIGHT = "44px";
-const PANEL_WIDTH_DEFAULT = 420;
+import { ERROR_MESSAGES } from "../../constants/error-messages";
 
 // ── Icons ──────────────────────────────────────────────────────────────────────
 
-const StudioIcon = () => (
-  <svg width="15" height="15" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-    <path d="M2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z" stroke="currentColor" strokeWidth="1.4" />
-    <path d="M8 5v3l2 1.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
-    <path d="M8 2V1M8 15v-1M1 8H0M16 8h-1" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
-  </svg>
-);
-
-const PanelOpenIcon = () => (
-  <svg width="15" height="15" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-    <rect x="1" y="1" width="14" height="14" rx="2.5" stroke="currentColor" strokeWidth="1.3" />
-    <path d="M10 1v14" stroke="currentColor" strokeWidth="1.3" />
-    <path d="M12.5 6l1.5 2-1.5 2" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-);
-
-const PanelCloseIcon = () => (
-  <svg width="15" height="15" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-    <rect x="1" y="1" width="14" height="14" rx="2.5" stroke="currentColor" strokeWidth="1.3" />
-    <path d="M10 1v14" stroke="currentColor" strokeWidth="1.3" />
-    <path d="M13.5 6L12 8l1.5 2" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-);
-
 const DotsIcon = () => (
   <svg width="15" height="15" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
     <circle cx="8" cy="3" r="1.3" />
@@ -46,13 +19,6 @@ const DotsIcon = () => (
   </svg>
 );
 
-const ExitStudioIcon = () => (
-  <svg width="13" height="13" viewBox="0 0 14 14" fill="none" aria-hidden="true">
-    <path d="M9.5 4.5 5 9M5 4.5l4.5 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-    <rect x="1" y="1" width="12" height="12" rx="3" stroke="currentColor" strokeWidth="1.2" />
-  </svg>
-);
-
 const PreviewIcon = () => (
   <svg width="13" height="13" viewBox="0 0 14 14" fill="none" aria-hidden="true">
     <path d="M1 7s2.5-5 6-5 6 5 6 5-2.5 5-6 5-6-5-6-5Z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round" />
@@ -73,6 +39,24 @@ export const ChatIcon = () => (
   </svg>
 );
 
+const BackendIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+    <rect x="2.2" y="3" width="11.6" height="4" rx="1" stroke="currentColor" strokeWidth="1.2" />
+    <rect x="2.2" y="9" width="11.6" height="4" rx="1" stroke="currentColor" strokeWidth="1.2" />
+    <circle cx="4.5" cy="5" r="0.7" fill="currentColor" />
+    <circle cx="4.5" cy="11" r="0.7" fill="currentColor" />
+  </svg>
+);
+
+const FrontendIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+    <rect x="1.8" y="2" width="12.4" height="9.5" rx="1.5" stroke="currentColor" strokeWidth="1.2" />
+    <path d="M6 13.5 5 15h6l-1-1.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M5.5 5 7.5 7l-2 2" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="m10.5 5 2 2-2 2" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
 // ── SolidStudio ────────────────────────────────────────────────────────────────
 // Single component that renders both the Studio header and the AI panel.
 // Mount this ONCE at the app root via AppEventListener.
@@ -84,15 +68,12 @@ export function SolidStudio() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const { pathname, search } = useLocation();
-  const isOnStudioPage = pathname === "/studio";
   const isPreviewMode = new URLSearchParams(search).get("preview") === "true" || (typeof sessionStorage !== "undefined" && sessionStorage.getItem("solid-preview") === "true");
-  const isPreviewable = !isOnStudioPage && pathname !== "/landing";
-  const { status } = useSession();
+  const isPreviewable = pathname !== "/studio" && pathname !== "/landing";
+  const { data, status } = useSession();
   const isAuthenticated = status === "authenticated";
-  const [isPanelOpen, setIsPanelOpen] = useState(true);
-  const [panelWidth] = useState(PANEL_WIDTH_DEFAULT);
-  const [isDragging] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isChatRedirecting, setIsChatRedirecting] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
 
   // Close the 3-dot menu when clicking outside
@@ -107,47 +88,6 @@ export function SolidStudio() {
     return () => document.removeEventListener("mousedown", handler);
   }, [isMenuOpen]);
 
-  // Apply sandbox wrapper isolating app root so all fixed/sticky elements shift correctly
-  useEffect(() => {
-    const active = isStudioMode && isAuthenticated && !isPreviewMode;
-
-    if (active) {
-      enableStudioMode();
-    } else {
-      disableStudioMode();
-    }
-
-    // CSS variable consumed by sidebar, hotspot, admin-header, shell, main
-    document.documentElement.style.setProperty(
-      "--solid-studio-header-height",
-      active ? HEADER_HEIGHT : "0px"
-    );
-
-    return () => {
-      disableStudioMode();
-      document.documentElement.style.setProperty("--solid-studio-header-height", "0px");
-    };
-  }, [isStudioMode, isAuthenticated, isPreviewMode]);
-
-  // const onDragStart = useCallback((e: React.MouseEvent) => {
-  //   e.preventDefault();
-  //   dragStartX.current = e.clientX;
-  //   dragStartWidth.current = panelWidth;
-  //   setIsDragging(true);
-  //   const onMove = (ev: MouseEvent) => {
-  //     const delta = dragStartX.current - ev.clientX;
-  //     const next = Math.min(PANEL_WIDTH_MAX, Math.max(PANEL_WIDTH_MIN, dragStartWidth.current + delta));
-  //     setPanelWidth(next);
-  //   };
-  //   const onUp = () => {
-  //     setIsDragging(false);
-  //     window.removeEventListener("mousemove", onMove);
-  //     window.removeEventListener("mouseup", onUp);
-  //   };
-  //   window.addEventListener("mousemove", onMove);
-  //   window.addEventListener("mouseup", onUp);
-  // }, [panelWidth]);
-
   // Auto-exit studio if the user logs out
   useEffect(() => {
     if (status === "unauthenticated" && isStudioMode) {
@@ -157,12 +97,6 @@ export function SolidStudio() {
 
   if (!isStudioMode || !isAuthenticated || isPreviewMode) return null;
 
-  const handleExit = () => {
-    setIsMenuOpen(false);
-    dispatch(exitStudioMode());
-    navigate("/studio");
-  };
-
   const handleLogout = () => {
     setIsMenuOpen(false);
     dispatch(exitStudioMode());
@@ -174,117 +108,135 @@ export function SolidStudio() {
     navigate(view === "backend" ? "/admin" : "/landing");
   };
 
+  const handleAiChatClick = async () => {
+    if (isChatRedirecting) return;
+
+    const aiUrl = env("VITE_SOLIDX_AI_URL");
+    if (!aiUrl) return;
+
+    setIsChatRedirecting(true);
+    try {
+      const session = await getSession();
+      const accessToken = session?.user?.accessToken || data?.user?.accessToken;
+      if (!accessToken) return;
+
+      const apiBaseUrl = env("API_URL", "http://localhost:8080").replace(/\/+$/, "");
+      const response = await fetch(`${apiBaseUrl}/api/iam/sso/code`, {
+        method: "POST",
+        headers: {
+          accept: "*/*",
+          Authorization: `Bearer ${accessToken}`,
+        },
+        body: "",
+      });
+
+      if (!response.ok) {
+        let detail = `Failed to fetch ssoCode (${response.status})`;
+        try {
+          const errorPayload = await response.json();
+          detail =
+            errorPayload?.message ||
+            errorPayload?.error?.message ||
+            errorPayload?.data?.message ||
+            detail;
+        } catch {
+          // no-op: keep default message
+        }
+        throw new Error(detail);
+      }
+
+      const payload = await response.json();
+      const ssoCode = payload?.ssoCode ?? payload?.data?.ssoCode;
+      if (!ssoCode) {
+        throw new Error("ssoCode missing in response");
+      }
+
+      const redirectUrl = new URL(aiUrl, window.location.origin);
+      redirectUrl.searchParams.set("ssoCode", String(ssoCode));
+      window.open(redirectUrl.toString(), "_blank");
+    } catch (error) {
+      const detail = error instanceof Error ? error.message : ERROR_MESSAGES.SOMETHING_WRONG;
+      dispatch(
+        showToast({
+          severity: "error",
+          summary: ERROR_MESSAGES.ERROR,
+          detail,
+          life: 4000,
+        })
+      );
+      console.error("Failed to open AI chat with ssoCode:", error);
+    } finally {
+      setIsChatRedirecting(false);
+    }
+  };
+
   const studioUI = (
-    <div style={{ zIndex: "var(--z-studio)", position: "fixed", top: 0, left: 0, right: 0 }}>
-      {/* ── Studio global header ─────────────────────────────────────────────── */}
-      <div className="solid-studio-header">
+    <div className="solid-studio-island" style={{ zIndex: "var(--z-studio)" }}>
+      <div className="solid-studio-island-inner">
         <button
           type="button"
-          className="solid-studio-header-brand"
-          onClick={() => navigate("/studio")}
-          title="Go to Studio home"
+          className={`solid-studio-island-btn${studioView === "backend" ? " active" : ""}`}
+          onClick={() => handleViewSwitch("backend")}
+          aria-label="Backend studio"
         >
-          <StudioIcon />
-          <span>SolidX Studio</span>
-          <span className="solid-studio-bar-badge">BETA</span>
+          <BackendIcon />
         </button>
-
-        <nav className="solid-studio-header-nav">
-          <button
-            type="button"
-            className={`solid-studio-view-btn${studioView === "backend" ? " active" : ""}`}
-            onClick={() => handleViewSwitch("backend")}
-          >
-            Backend
-          </button>
+        <button
+          type="button"
+          className={`solid-studio-island-btn${studioView === "frontend" ? " active" : ""}`}
+          onClick={() => handleViewSwitch("frontend")}
+          aria-label="Frontend studio"
+        >
+          <FrontendIcon />
+        </button>
+        <button
+          type="button"
+          className="solid-studio-island-btn"
+          onClick={handleAiChatClick}
+          disabled={isChatRedirecting}
+          aria-busy={isChatRedirecting}
+          aria-label="AI chat"
+        >
+          <ChatIcon />
+        </button>
+        <div className="solid-studio-island-menu" ref={menuRef}>
           <button
             type="button"
-            className={`solid-studio-view-btn${studioView === "frontend" ? " active" : ""}`}
-            onClick={() => handleViewSwitch("frontend")}
+            className={`solid-studio-island-btn${isMenuOpen ? " active" : ""}`}
+            onClick={() => setIsMenuOpen((o) => !o)}
+            aria-label="Studio options"
           >
-            Frontend
+            <DotsIcon />
           </button>
-        </nav>
-
-        <div className="solid-studio-header-actions">
-          {/* <button
-            type="button"
-            className="solid-studio-panel-toggle-btn"
-            onClick={() => setIsPanelOpen((o) => !o)}
-            title={isPanelOpen ? "Collapse AI panel" : "Expand AI panel"}
-          >
-            {isPanelOpen ? <PanelCloseIcon /> : <PanelOpenIcon />}
-          </button> */}
-
-          {/* ── 3-dot menu ─────────────────────────────────────────────────── */}
-          <div className="solid-studio-menu" ref={menuRef}>
-            <button
-              type="button"
-              className="solid-studio-menu-trigger"
-              onClick={() => setIsMenuOpen((o) => !o)}
-              title="More options"
-            >
-              <DotsIcon />
-            </button>
-            {isMenuOpen && (
-              <div className="solid-studio-menu-dropdown">
-                {isPreviewable && (
-                  <button
-                    type="button"
-                    className="solid-studio-menu-item"
-                    onClick={() => {
-                      setIsMenuOpen(false);
-                      const params = new URLSearchParams(search);
-                      params.set("preview", "true");
-                      window.open(`${pathname}?${params.toString()}`, "_blank");
-                    }}
-                  >
-                    <PreviewIcon />
-                    Preview page
-                  </button>
-                )}
-                {/* {!isOnStudioPage && (
-                  <button type="button" className="solid-studio-menu-item" onClick={handleExit}>
-                    <ExitStudioIcon />
-                    Exit Studio
-                  </button>
-                )} */}
-                <button type="button" className="solid-studio-menu-item danger" onClick={handleLogout}>
-                  <LogoutIcon />
-                  Logout
+          {isMenuOpen && (
+            <div className="solid-studio-island-dropdown">
+              {isPreviewable && (
+                <button
+                  type="button"
+                  className="solid-studio-island-dropdown-item"
+                  onClick={() => {
+                    setIsMenuOpen(false);
+                    const params = new URLSearchParams(search);
+                    params.set("preview", "true");
+                    window.open(`${pathname}?${params.toString()}`, "_blank");
+                  }}
+                >
+                  <PreviewIcon />
+                  Preview page
                 </button>
-              </div>
-            )}
-          </div>
-
-          <button
-            type="button"
-            className="solid-studio-menu-trigger"
-            style={{ color: "var(--primary-foreground)" }}
-            onClick={() => {
-              const aiUrl = env("VITE_SOLIDX_AI_URL");
-              if (aiUrl) window.open(aiUrl, "_blank");
-            }}
-            title="Open AI Chat"
-          >
-            <ChatIcon />
-          </button>
+              )}
+              <button
+                type="button"
+                className="solid-studio-island-dropdown-item danger"
+                onClick={handleLogout}
+              >
+                <LogoutIcon />
+                Logout
+              </button>
+            </div>
+          )}
         </div>
       </div>
-
-      {/* ── AI chat panel (commented out — moved to agent-ui) ───────────────── */}
-      {/* <div
-        className={`solid-studio-panel-fixed${isPanelOpen ? "" : " collapsed"}`}
-        style={{ width: `${panelWidth}px` }}
-      >
-        <div
-          className={`solid-studio-resize-handle${isDragging ? " dragging" : ""}`}
-          onMouseDown={onDragStart}
-        />
-        <div className="solid-studio-panel-body">
-          <SolidAiChat />
-        </div>
-      </div> */}
     </div>
   );
 

package/dist/components/layout/UserSidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserSidebar.d.ts","sourceRoot":"","sources":["../../../src/components/layout/UserSidebar.tsx"],"names":[],"mappings":"AAMA,QAAA,MAAM,WAAW,+CA2ChB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"UserSidebar.d.ts","sourceRoot":"","sources":["../../../src/components/layout/UserSidebar.tsx"],"names":[],"mappings":"AAOA,QAAA,MAAM,WAAW,+CA2ChB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/layout/UserSidebar.js

@@ -2,30 +2,31 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "../common/Link";
 import { usePathname } from "../../hooks/usePathname";
 import { useState } from "react";
+import { SolidIcon } from "../shad-cn-ui";
 var UserSidebar = function () {
     var pathname = usePathname();
     var menuItem = [
         {
             name: "Update Profile",
             url: "/me/update",
-            icon: "fas fa-user",
+            icon: "si-user",
         },
         {
             name: "Upload Avatar",
             url: "/me/upload_avatar",
-            icon: "fas fa-user-circle",
+            icon: "si-user",
         },
         {
             name: "Update Password",
             url: "/me/update_password",
-            icon: "fas fa-lock",
+            icon: "si-lock",
         },
     ];
     var _a = useState(pathname), activeMenuItem = _a[0], setActiveMenuItem = _a[1];
     var handleMenuItemClick = function (menuItem) {
         setActiveMenuItem(menuItem);
     };
-    return (_jsx("div", { className: "list-group mt-5 pl-4", children: menuItem.map(function (menuItem, index) { return (_jsxs(Link, { href: menuItem.url, className: "fw-bold list-group-item list-group-item-action ".concat(activeMenuItem === menuItem.url ? "active" : ""), onClick: function () { return handleMenuItemClick(menuItem.url); }, "aria-current": activeMenuItem === menuItem.url ? "true" : "false", children: [_jsx("i", { className: "".concat(menuItem.icon, " fa-fw pe-2") }), " ", menuItem.name] }, index)); }) }));
+    return (_jsx("div", { className: "list-group mt-5 pl-4", children: menuItem.map(function (menuItem, index) { return (_jsxs(Link, { href: menuItem.url, className: "fw-bold list-group-item list-group-item-action ".concat(activeMenuItem === menuItem.url ? "active" : ""), onClick: function () { return handleMenuItemClick(menuItem.url); }, "aria-current": activeMenuItem === menuItem.url ? "true" : "false", children: [_jsx(SolidIcon, { name: menuItem.icon, className: "fa-fw pe-2" }), " ", menuItem.name] }, index)); }) }));
 };
 export default UserSidebar;
 //# sourceMappingURL=UserSidebar.js.map

package/dist/components/layout/UserSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserSidebar.js","sourceRoot":"","sources":["../../../src/components/layout/UserSidebar.tsx"],"names":[],"mappings":";AAEA,OAAO,IAAI,MAAM,gBAAgB,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,IAAM,WAAW,GAAG;IAClB,IAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,IAAM,QAAQ,GAAG;QACf;YACE,IAAI,EAAE,gBAAgB;YACtB,GAAG,EAAE,YAAY;YACjB,IAAI,EAAE,aAAa;SACpB;QACD;YACE,IAAI,EAAE,eAAe;YACrB,GAAG,EAAE,mBAAmB;YACxB,IAAI,EAAE,oBAAoB;SAC3B;QACD;YACE,IAAI,EAAE,iBAAiB;YACvB,GAAG,EAAE,qBAAqB;YAC1B,IAAI,EAAE,aAAa;SACpB;KACF,CAAC;IAEI,IAAA,KAAsC,QAAQ,CAAC,QAAQ,CAAC,EAAvD,cAAc,QAAA,EAAE,iBAAiB,QAAsB,CAAC;IAE/D,IAAM,mBAAmB,GAAG,UAAC,QAAgB;QAC3C,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,sBAAsB,YAClC,QAAQ,CAAC,GAAG,CAAC,UAAC,QAAQ,EAAE,KAAK,IAAK,OAAA,CACjC,MAAC,IAAI,IAEH,IAAI,EAAE,QAAQ,CAAC,GAAG,EAClB,SAAS,EAAE,yDAAkD,cAAc,KAAK,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CACxG,EACJ,OAAO,EAAE,cAAM,OAAA,mBAAmB,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAjC,CAAiC,kBAClC,cAAc,KAAK,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,aAEhE,YAAG,SAAS,EAAE,UAAG,QAAQ,CAAC,IAAI,gBAAa,GAAM,OAAE,QAAQ,CAAC,IAAI,KAP3D,KAAK,CAQL,CACR,EAXkC,CAWlC,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["\n\nimport Link from \"../common/Link\";\nimport { usePathname } from \"../../hooks/usePathname\";\nimport { useState } from \"react\";\n\nconst UserSidebar = () => {\n  const pathname = usePathname();\n\n  const menuItem = [\n    {\n      name: \"Update Profile\",\n      url: \"/me/update\",\n      icon: \"fas fa-user\",\n    },\n    {\n      name: \"Upload Avatar\",\n      url: \"/me/upload_avatar\",\n      icon: \"fas fa-user-circle\",\n    },\n    {\n      name: \"Update Password\",\n      url: \"/me/update_password\",\n      icon: \"fas fa-lock\",\n    },\n  ];\n\n  const [activeMenuItem, setActiveMenuItem] = useState(pathname);\n\n  const handleMenuItemClick = (menuItem: string) => {\n    setActiveMenuItem(menuItem);\n  };\n\n  return (\n    <div className=\"list-group mt-5 pl-4\">\n      {menuItem.map((menuItem, index) => (\n        <Link\n          key={index}\n          href={menuItem.url}\n          className={`fw-bold list-group-item list-group-item-action ${activeMenuItem === menuItem.url ? \"active\" : \"\"\n            }`}\n          onClick={() => handleMenuItemClick(menuItem.url)}\n          aria-current={activeMenuItem === menuItem.url ? \"true\" : \"false\"}\n        >\n          <i className={`${menuItem.icon} fa-fw pe-2`}></i> {menuItem.name}\n        </Link>\n      ))}\n    </div>\n  );\n};\n\nexport default UserSidebar;\n"]}
+{"version":3,"file":"UserSidebar.js","sourceRoot":"","sources":["../../../src/components/layout/UserSidebar.tsx"],"names":[],"mappings":";AAEA,OAAO,IAAI,MAAM,gBAAgB,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,IAAM,WAAW,GAAG;IAClB,IAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,IAAM,QAAQ,GAAiF;QAC7F;YACE,IAAI,EAAE,gBAAgB;YACtB,GAAG,EAAE,YAAY;YACjB,IAAI,EAAE,SAAS;SAChB;QACD;YACE,IAAI,EAAE,eAAe;YACrB,GAAG,EAAE,mBAAmB;YACxB,IAAI,EAAE,SAAS;SAChB;QACD;YACE,IAAI,EAAE,iBAAiB;YACvB,GAAG,EAAE,qBAAqB;YAC1B,IAAI,EAAE,SAAS;SAChB;KACF,CAAC;IAEI,IAAA,KAAsC,QAAQ,CAAC,QAAQ,CAAC,EAAvD,cAAc,QAAA,EAAE,iBAAiB,QAAsB,CAAC;IAE/D,IAAM,mBAAmB,GAAG,UAAC,QAAgB;QAC3C,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,sBAAsB,YAClC,QAAQ,CAAC,GAAG,CAAC,UAAC,QAAQ,EAAE,KAAK,IAAK,OAAA,CACjC,MAAC,IAAI,IAEH,IAAI,EAAE,QAAQ,CAAC,GAAG,EAClB,SAAS,EAAE,yDAAkD,cAAc,KAAK,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CACxG,EACJ,OAAO,EAAE,cAAM,OAAA,mBAAmB,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAjC,CAAiC,kBAClC,cAAc,KAAK,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,aAEhE,KAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,SAAS,EAAC,YAAY,GAAG,OAAE,QAAQ,CAAC,IAAI,KAPnE,KAAK,CAQL,CACR,EAXkC,CAWlC,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["\n\nimport Link from \"../common/Link\";\nimport { usePathname } from \"../../hooks/usePathname\";\nimport { useState } from \"react\";\nimport { SolidIcon } from \"../shad-cn-ui\";\n\nconst UserSidebar = () => {\n  const pathname = usePathname();\n\n  const menuItem: { name: string; url: string; icon: import(\"../shad-cn-ui\").SolidIconName }[] = [\n    {\n      name: \"Update Profile\",\n      url: \"/me/update\",\n      icon: \"si-user\",\n    },\n    {\n      name: \"Upload Avatar\",\n      url: \"/me/upload_avatar\",\n      icon: \"si-user\",\n    },\n    {\n      name: \"Update Password\",\n      url: \"/me/update_password\",\n      icon: \"si-lock\",\n    },\n  ];\n\n  const [activeMenuItem, setActiveMenuItem] = useState(pathname);\n\n  const handleMenuItemClick = (menuItem: string) => {\n    setActiveMenuItem(menuItem);\n  };\n\n  return (\n    <div className=\"list-group mt-5 pl-4\">\n      {menuItem.map((menuItem, index) => (\n        <Link\n          key={index}\n          href={menuItem.url}\n          className={`fw-bold list-group-item list-group-item-action ${activeMenuItem === menuItem.url ? \"active\" : \"\"\n            }`}\n          onClick={() => handleMenuItemClick(menuItem.url)}\n          aria-current={activeMenuItem === menuItem.url ? \"true\" : \"false\"}\n        >\n          <SolidIcon name={menuItem.icon} className=\"fa-fw pe-2\" /> {menuItem.name}\n        </Link>\n      ))}\n    </div>\n  );\n};\n\nexport default UserSidebar;\n"]}

package/dist/components/layout/UserSidebar.tsx

@@ -3,25 +3,26 @@
 import Link from "../common/Link";
 import { usePathname } from "../../hooks/usePathname";
 import { useState } from "react";
+import { SolidIcon } from "../shad-cn-ui";
 
 const UserSidebar = () => {
   const pathname = usePathname();
 
-  const menuItem = [
+  const menuItem: { name: string; url: string; icon: import("../shad-cn-ui").SolidIconName }[] = [
     {
       name: "Update Profile",
       url: "/me/update",
-      icon: "fas fa-user",
+      icon: "si-user",
     },
     {
       name: "Upload Avatar",
       url: "/me/upload_avatar",
-      icon: "fas fa-user-circle",
+      icon: "si-user",
     },
     {
       name: "Update Password",
       url: "/me/update_password",
-      icon: "fas fa-lock",
+      icon: "si-lock",
     },
   ];
 
@@ -42,7 +43,7 @@ const UserSidebar = () => {
           onClick={() => handleMenuItemClick(menuItem.url)}
           aria-current={activeMenuItem === menuItem.url ? "true" : "false"}
         >
-          <i className={`${menuItem.icon} fa-fw pe-2`}></i> {menuItem.name}
+          <SolidIcon name={menuItem.icon} className="fa-fw pe-2" /> {menuItem.name}
         </Link>
       ))}
     </div>

package/dist/components/layout/context/layoutcontext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layoutcontext.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/context/layoutcontext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkC,MAAM,OAAO,CAAC;AACvD,OAAO,EAAe,mBAAmB,EAAgB,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpG,eAAO,MAAM,aAAa,mCAA0C,CAAC;AAErE,eAAO,MAAM,cAAc,iBAAkB,mBAAmB,4CA8C/D,CAAC"}
+{"version":3,"file":"layoutcontext.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/context/layoutcontext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkC,MAAM,OAAO,CAAC;AACvD,OAAO,EAAe,mBAAmB,EAAgB,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpG,eAAO,MAAM,aAAa,mCAA0C,CAAC;AAErE,eAAO,MAAM,cAAc,iBAAkB,mBAAmB,4CA2E/D,CAAC"}

package/dist/components/layout/context/layoutcontext.js

@@ -10,24 +10,35 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, createContext } from 'react';
+import React, { useState, createContext } from 'react';
 export var LayoutContext = createContext({});
 export var LayoutProvider = function (_a) {
     var children = _a.children;
-    var _b = useState({
+    var THEME_STORAGE_KEY = "solidx.theme.mode";
+    var getInitialThemeMode = function () {
+        if (typeof window === "undefined")
+            return "light";
+        var stored = window.localStorage.getItem(THEME_STORAGE_KEY);
+        if (stored === "dark" || stored === "light") {
+            return stored;
+        }
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    };
+    var _b = useState(getInitialThemeMode), themeMode = _b[0], setThemeMode = _b[1];
+    var _c = useState({
         inputStyle: 'outlined',
-        colorScheme: 'light',
+        colorScheme: themeMode,
         theme: 'solid-light-purple',
         scale: 14,
         authLayout: 'Center'
-    }), layoutConfig = _b[0], setLayoutConfig = _b[1];
-    var _c = useState({
+    }), layoutConfig = _c[0], setLayoutConfig = _c[1];
+    var _d = useState({
         overlayMenuActive: false,
         profileSidebarVisible: false,
         configSidebarVisible: false,
         staticMenuMobileActive: false,
         menuHoverActive: false
-    }), layoutState = _c[0], setLayoutState = _c[1];
+    }), layoutState = _d[0], setLayoutState = _d[1];
     var onMenuToggle = function () {
         if (isDesktop()) {
             setLayoutState(function (prevLayoutState) { return (__assign(__assign({}, prevLayoutState), { staticMenuDesktopInactive: !prevLayoutState.staticMenuDesktopInactive })); });
@@ -39,12 +50,26 @@ export var LayoutProvider = function (_a) {
     var showProfileSidebar = function () {
         setLayoutState(function (prevLayoutState) { return (__assign(__assign({}, prevLayoutState), { profileSidebarVisible: !prevLayoutState.profileSidebarVisible })); });
     };
+    var toggleThemeMode = function () {
+        setThemeMode(function (prev) { return (prev === "light" ? "dark" : "light"); });
+    };
     var isDesktop = function () {
         return window.innerWidth > 991;
     };
+    React.useEffect(function () {
+        if (typeof window === "undefined")
+            return;
+        window.localStorage.setItem(THEME_STORAGE_KEY, themeMode);
+        document.documentElement.classList.toggle("dark", themeMode === "dark");
+        document.documentElement.setAttribute("data-theme", themeMode);
+        setLayoutConfig(function (prevLayoutConfig) { return (__assign(__assign({}, prevLayoutConfig), { colorScheme: themeMode })); });
+    }, [themeMode]);
     var value = {
         layoutConfig: layoutConfig,
         setLayoutConfig: setLayoutConfig,
+        themeMode: themeMode,
+        setThemeMode: setThemeMode,
+        toggleThemeMode: toggleThemeMode,
         layoutState: layoutState,
         setLayoutState: setLayoutState,
         onMenuToggle: onMenuToggle,

package/dist/components/layout/context/layoutcontext.js.map

@@ -1 +1 @@
-{"version":3,"file":"layoutcontext.js","sourceRoot":"","sources":["../../../../src/components/layout/context/layoutcontext.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAc,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,CAAC,IAAM,aAAa,GAAG,aAAa,CAAC,EAAwB,CAAC,CAAC;AAErE,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,EAAiC;QAA/B,QAAQ,cAAA;IAC/B,IAAA,KAAkC,QAAQ,CAAe;QAC3D,UAAU,EAAE,UAAU;QACtB,WAAW,EAAE,OAAO;QACpB,KAAK,EAAE,oBAAoB;QAC3B,KAAK,EAAE,EAAE;QACT,UAAU,EAAE,QAAQ;KACvB,CAAC,EANK,YAAY,QAAA,EAAE,eAAe,QAMlC,CAAC;IAEG,IAAA,KAAgC,QAAQ,CAAc;QACxD,iBAAiB,EAAE,KAAK;QACxB,qBAAqB,EAAE,KAAK;QAC5B,oBAAoB,EAAE,KAAK;QAC3B,sBAAsB,EAAE,KAAK;QAC7B,eAAe,EAAE,KAAK;KACzB,CAAC,EANK,WAAW,QAAA,EAAE,cAAc,QAMhC,CAAC;IAEH,IAAM,YAAY,GAAG;QAEjB,IAAI,SAAS,EAAE,EAAE;YACb,cAAc,CAAC,UAAC,eAAmB,IAAK,OAAA,uBAAM,eAAe,KAAE,yBAAyB,EAAE,CAAC,eAAe,CAAC,yBAAyB,IAAG,EAA/F,CAA+F,CAAC,CAAC;SAC5I;aAAM;YACH,cAAc,CAAC,UAAC,eAAmB,IAAK,OAAA,uBAAM,eAAe,KAAE,sBAAsB,EAAE,CAAC,eAAe,CAAC,sBAAsB,IAAG,EAAzF,CAAyF,CAAC,CAAC;SACtI;IACL,CAAC,CAAC;IAEF,IAAM,kBAAkB,GAAG;QACvB,cAAc,CAAC,UAAC,eAAmB,IAAK,OAAA,uBAAM,eAAe,KAAE,qBAAqB,EAAE,CAAC,eAAe,CAAC,qBAAqB,IAAG,EAAvF,CAAuF,CAAC,CAAC;IACrI,CAAC,CAAC;IAIF,IAAM,SAAS,GAAG;QACd,OAAO,MAAM,CAAC,UAAU,GAAG,GAAG,CAAC;IACnC,CAAC,CAAC;IAEF,IAAM,KAAK,GAAuB;QAC9B,YAAY,cAAA;QACZ,eAAe,iBAAA;QACf,WAAW,aAAA;QACX,cAAc,gBAAA;QACd,YAAY,cAAA;QACZ,kBAAkB,oBAAA;KACrB,CAAC;IAEF,OAAO,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAA0B,CAAC;AACrF,CAAC,CAAC","sourcesContent":["\nimport React, { useState, createContext } from 'react';\nimport { LayoutState, ChildContainerProps, LayoutConfig, LayoutContextProps } from '../../../types';\nexport const LayoutContext = createContext({} as LayoutContextProps);\n\nexport const LayoutProvider = ({ children }: ChildContainerProps) => {\n    const [layoutConfig, setLayoutConfig] = useState<LayoutConfig>({\n        inputStyle: 'outlined',\n        colorScheme: 'light',\n        theme: 'solid-light-purple',\n        scale: 14,\n        authLayout: 'Center'\n    });\n\n    const [layoutState, setLayoutState] = useState<LayoutState>({\n        overlayMenuActive: false,\n        profileSidebarVisible: false,\n        configSidebarVisible: false,\n        staticMenuMobileActive: false,\n        menuHoverActive: false\n    });\n\n    const onMenuToggle = () => {\n\n        if (isDesktop()) {\n            setLayoutState((prevLayoutState:any) => ({ ...prevLayoutState, staticMenuDesktopInactive: !prevLayoutState.staticMenuDesktopInactive }));\n        } else {\n            setLayoutState((prevLayoutState:any) => ({ ...prevLayoutState, staticMenuMobileActive: !prevLayoutState.staticMenuMobileActive }));\n        }\n    };\n\n    const showProfileSidebar = () => {\n        setLayoutState((prevLayoutState:any) => ({ ...prevLayoutState, profileSidebarVisible: !prevLayoutState.profileSidebarVisible }));\n    };\n\n \n\n    const isDesktop = () => {\n        return window.innerWidth > 991;\n    };\n\n    const value: LayoutContextProps = {\n        layoutConfig,\n        setLayoutConfig,\n        layoutState,\n        setLayoutState,\n        onMenuToggle,\n        showProfileSidebar\n    };\n\n    return <LayoutContext.Provider value={value}>{children}</LayoutContext.Provider>;\n};\n"]}
+{"version":3,"file":"layoutcontext.js","sourceRoot":"","sources":["../../../../src/components/layout/context/layoutcontext.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport React, { useState, createContext } from 'react';\nimport { LayoutState, ChildContainerProps, LayoutConfig, LayoutContextProps } from '../../../types';\nexport const LayoutContext = createContext({} as LayoutContextProps);\n\nexport const LayoutProvider = ({ children }: ChildContainerProps) => {\n    const THEME_STORAGE_KEY = \"solidx.theme.mode\";\n    const getInitialThemeMode = (): \"light\" | \"dark\" => {\n        if (typeof window === \"undefined\") return \"light\";\n\n        const stored = window.localStorage.getItem(THEME_STORAGE_KEY);\n        if (stored === \"dark\" || stored === \"light\") {\n            return stored;\n        }\n\n        return window.matchMedia(\"(prefers-color-scheme: dark)\").matches ? \"dark\" : \"light\";\n    };\n\n    const [themeMode, setThemeMode] = useState<\"light\" | \"dark\">(getInitialThemeMode);\n    const [layoutConfig, setLayoutConfig] = useState<LayoutConfig>({\n        inputStyle: 'outlined',\n        colorScheme: themeMode,\n        theme: 'solid-light-purple',\n        scale: 14,\n        authLayout: 'Center'\n    });\n\n    const [layoutState, setLayoutState] = useState<LayoutState>({\n        overlayMenuActive: false,\n        profileSidebarVisible: false,\n        configSidebarVisible: false,\n        staticMenuMobileActive: false,\n        menuHoverActive: false\n    });\n\n    const onMenuToggle = () => {\n\n        if (isDesktop()) {\n            setLayoutState((prevLayoutState:any) => ({ ...prevLayoutState, staticMenuDesktopInactive: !prevLayoutState.staticMenuDesktopInactive }));\n        } else {\n            setLayoutState((prevLayoutState:any) => ({ ...prevLayoutState, staticMenuMobileActive: !prevLayoutState.staticMenuMobileActive }));\n        }\n    };\n\n    const showProfileSidebar = () => {\n        setLayoutState((prevLayoutState:any) => ({ ...prevLayoutState, profileSidebarVisible: !prevLayoutState.profileSidebarVisible }));\n    };\n\n    const toggleThemeMode = () => {\n        setThemeMode((prev) => (prev === \"light\" ? \"dark\" : \"light\"));\n    };\n\n    const isDesktop = () => {\n        return window.innerWidth > 991;\n    };\n\n    React.useEffect(() => {\n        if (typeof window === \"undefined\") return;\n        window.localStorage.setItem(THEME_STORAGE_KEY, themeMode);\n        document.documentElement.classList.toggle(\"dark\", themeMode === \"dark\");\n        document.documentElement.setAttribute(\"data-theme\", themeMode);\n        setLayoutConfig((prevLayoutConfig: LayoutConfig) => ({\n            ...prevLayoutConfig,\n            colorScheme: themeMode\n        }));\n    }, [themeMode]);\n\n    const value: LayoutContextProps = {\n        layoutConfig,\n        setLayoutConfig,\n        themeMode,\n        setThemeMode,\n        toggleThemeMode,\n        layoutState,\n        setLayoutState,\n        onMenuToggle,\n        showProfileSidebar\n    };\n\n    return <LayoutContext.Provider value={value}>{children}</LayoutContext.Provider>;\n};\n"]}