@alepha/ui 0.16.0 → 0.16.2

package/src/admin/components/parameters/ParameterHistory.tsx

@@ -1,7 +1,7 @@
 import { ActionButton, Flex, Text } from "@alepha/ui";
 import {
   Badge,
-  Card,
+  Box,
   Group,
   Loader,
   ScrollArea,
@@ -21,7 +21,6 @@ export interface ParameterHistoryProps {
 }
 
 const ParameterHistory = ({
-  selectedConfig,
   history,
   loading,
   onRollback,
@@ -29,16 +28,6 @@ const ParameterHistory = ({
   const { l } = useI18n();
 
   const renderContent = () => {
-    if (!selectedConfig) {
-      return (
-        <Flex flex={1} justify="center" align="center">
-          <Text c="dimmed" size="xs">
-            Select a parameter
-          </Text>
-        </Flex>
-      );
-    }
-
     if (loading) {
       return (
         <Flex flex={1} justify="center" align="center">
@@ -51,7 +40,7 @@ const ParameterHistory = ({
       return (
         <Flex flex={1} justify="center" align="center">
           <Text c="dimmed" size="xs">
-            No history
+            Empty
           </Text>
         </Flex>
       );
@@ -124,22 +113,28 @@ const ParameterHistory = ({
   };
 
   return (
-    <Card
-      withBorder
-      w={300}
+    <Box
+      w={160}
       h="100%"
-      style={{ flexShrink: 0, overflow: "hidden" }}
+      p="xs"
+      style={{
+        flexShrink: 0,
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        borderLeft: "1px solid var(--mantine-color-default-border)",
+      }}
     >
-      <Stack gap="xs" h="100%">
+      <Stack gap="xs" h="100%" style={{ minHeight: 0 }}>
         <Group gap="xs">
           <IconHistory size={16} color="var(--mantine-color-dimmed)" />
           <Text size="sm" fw={500}>
-            Version History
+            History
           </Text>
         </Group>
         {renderContent()}
       </Stack>
-    </Card>
+    </Box>
   );
 };
 

package/src/admin/components/parameters/ParameterTree.tsx

@@ -1,14 +1,12 @@
 import { ActionButton, Text } from "@alepha/ui";
 import {
   Box,
-  Card,
+  Collapse,
   Group,
   ScrollArea,
   Stack,
-  Tooltip,
-  Tree,
-  type TreeNodeData,
-  useTree,
+  TextInput,
+  UnstyledButton,
 } from "@mantine/core";
 import {
   IconChevronDown,
@@ -16,130 +14,308 @@ import {
   IconFolder,
   IconFolderOpen,
   IconRefresh,
+  IconSearch,
   IconSettings,
 } from "@tabler/icons-react";
-import type { ConfigTreeNode } from "alepha/api/parameters";
-import { type HTMLAttributes, useMemo } from "react";
+import type { ParameterTreeNode } from "alepha/api/parameters";
+import { memo, useCallback, useMemo, useState } from "react";
 
 export interface ParameterTreeProps {
-  treeData: ConfigTreeNode[];
+  treeData: ParameterTreeNode[];
   selectedConfig: string | null;
   onSelect: (name: string) => void;
   onRefresh: () => void;
 }
 
-const ParameterTree = ({
-  treeData,
-  selectedConfig,
-  onSelect,
-  onRefresh,
-}: ParameterTreeProps) => {
-  const tree = useTree({
-    initialExpandedState: {},
-  });
-
-  const mantineTreeData = useMemo((): TreeNodeData[] => {
-    const convert = (nodes: ConfigTreeNode[]): TreeNodeData[] => {
-      return nodes.map((node) => ({
-        value: node.path,
-        label: node.name,
-        children: node.children.length > 0 ? convert(node.children) : undefined,
-      }));
-    };
-    return convert(treeData);
-  }, [treeData]);
-
-  const renderNode = ({
+/**
+ * Filters tree nodes by search query.
+ */
+const filterTree = (
+  nodes: ParameterTreeNode[],
+  query: string,
+): ParameterTreeNode[] => {
+  if (!query.trim()) return nodes;
+
+  const lowerQuery = query.toLowerCase();
+
+  return nodes
+    .map((node) => {
+      const filteredChildren = filterTree(node.children, query);
+      const nameMatches = node.name.toLowerCase().includes(lowerQuery);
+      const pathMatches = node.path.toLowerCase().includes(lowerQuery);
+
+      if (nameMatches || pathMatches || filteredChildren.length > 0) {
+        return {
+          ...node,
+          children: filteredChildren,
+        };
+      }
+
+      return null;
+    })
+    .filter((node): node is ParameterTreeNode => node !== null);
+};
+
+interface TreeNodeProps {
+  node: ParameterTreeNode;
+  level: number;
+  selectedConfig: string | null;
+  onSelect: (name: string) => void;
+  expandedNodes: Set<string>;
+  onToggle: (path: string) => void;
+}
+
+/**
+ * Memoized tree node to prevent unnecessary re-renders.
+ */
+const TreeNode = memo(
+  ({
     node,
-    expanded,
-    hasChildren,
-    elementProps,
-  }: {
-    node: TreeNodeData;
-    expanded: boolean;
-    hasChildren: boolean;
-    elementProps: HTMLAttributes<HTMLDivElement>;
-  }) => {
+    level,
+    selectedConfig,
+    onSelect,
+    expandedNodes,
+    onToggle,
+  }: TreeNodeProps) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const hasChildren = node.children.length > 0;
+    const isExpanded = expandedNodes.has(node.path);
+    const isSelected = selectedConfig === node.path;
     const isLeaf = !hasChildren;
-    const isSelected = selectedConfig === node.value;
+
+    const handleClick = useCallback(() => {
+      if (hasChildren) {
+        onToggle(node.path);
+      } else {
+        onSelect(node.path);
+      }
+    }, [hasChildren, node.path, onToggle, onSelect]);
+
+    const handleMouseEnter = useCallback(() => setIsHovered(true), []);
+    const handleMouseLeave = useCallback(() => setIsHovered(false), []);
 
     return (
-      <Group
-        gap="xs"
-        wrap="nowrap"
-        {...elementProps}
-        onClick={(e) => {
-          elementProps.onClick?.(e);
-          if (isLeaf) {
-            onSelect(node.value);
-          }
-        }}
-        style={{
-          ...elementProps.style,
-          cursor: isLeaf ? "pointer" : "default",
-          backgroundColor: isSelected
-            ? "var(--mantine-color-blue-light)"
-            : undefined,
-          borderRadius: "var(--mantine-radius-sm)",
-          paddingTop: 4,
-          paddingBottom: 4,
-          paddingRight: 8,
-        }}
-      >
-        {hasChildren ? (
-          <>
-            {expanded ? (
-              <IconChevronDown size={14} color="var(--mantine-color-dimmed)" />
-            ) : (
-              <IconChevronRight size={14} color="var(--mantine-color-dimmed)" />
-            )}
-            {expanded ? (
-              <IconFolderOpen size={16} color="var(--mantine-color-blue-6)" />
+      <Box>
+        <UnstyledButton
+          onClick={handleClick}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          w="100%"
+          style={{ display: "block" }}
+        >
+          <Group
+            gap={6}
+            wrap="nowrap"
+            p="4px 8px"
+            pl={8 + level * 16}
+            style={{
+              borderRadius: "var(--mantine-radius-sm)",
+              backgroundColor:
+                isSelected || isHovered
+                  ? "var(--mantine-color-default-hover)"
+                  : undefined,
+            }}
+          >
+            {hasChildren ? (
+              <>
+                <Box
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 16,
+                  }}
+                >
+                  {isExpanded ? (
+                    <IconChevronDown
+                      size={14}
+                      color="var(--mantine-color-dimmed)"
+                    />
+                  ) : (
+                    <IconChevronRight
+                      size={14}
+                      color="var(--mantine-color-dimmed)"
+                    />
+                  )}
+                </Box>
+                {isExpanded ? (
+                  <IconFolderOpen
+                    size={16}
+                    color="var(--mantine-color-dimmed)"
+                    style={{ flexShrink: 0 }}
+                  />
+                ) : (
+                  <IconFolder
+                    size={16}
+                    color="var(--mantine-color-dimmed)"
+                    style={{ flexShrink: 0 }}
+                  />
+                )}
+              </>
             ) : (
-              <IconFolder size={16} color="var(--mantine-color-blue-6)" />
+              <>
+                <Box w={16} />
+                <IconSettings
+                  size={16}
+                  color={
+                    isSelected
+                      ? "var(--mantine-color-blue-6)"
+                      : "var(--mantine-color-dimmed)"
+                  }
+                  style={{ flexShrink: 0 }}
+                />
+              </>
             )}
-          </>
-        ) : (
-          <>
-            <Box w={14} />
-            <IconSettings size={16} color="var(--mantine-color-gray-6)" />
-          </>
+            <Text
+              size="sm"
+              fw={isSelected ? 600 : 400}
+              c={isSelected ? undefined : isLeaf ? undefined : "dimmed"}
+              style={{
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+              }}
+            >
+              {node.name}
+            </Text>
+          </Group>
+        </UnstyledButton>
+
+        {hasChildren && (
+          <Collapse in={isExpanded}>
+            {node.children.map((child: ParameterTreeNode) => (
+              <TreeNode
+                key={child.path}
+                node={child}
+                level={level + 1}
+                selectedConfig={selectedConfig}
+                onSelect={onSelect}
+                expandedNodes={expandedNodes}
+                onToggle={onToggle}
+              />
+            ))}
+          </Collapse>
         )}
-        <Text size="sm" fw={isSelected ? 500 : 400}>
-          {node.label}
-        </Text>
-      </Group>
+      </Box>
     );
+  },
+);
+
+TreeNode.displayName = "TreeNode";
+
+/**
+ * Collects all folder paths to expand by default.
+ */
+const collectAllFolderPaths = (nodes: ParameterTreeNode[]): Set<string> => {
+  const paths = new Set<string>();
+
+  const traverse = (nodeList: ParameterTreeNode[]) => {
+    for (const node of nodeList) {
+      if (node.children.length > 0) {
+        paths.add(node.path);
+        traverse(node.children);
+      }
+    }
   };
 
+  traverse(nodes);
+  return paths;
+};
+
+const ParameterTree = ({
+  treeData,
+  selectedConfig,
+  onSelect,
+  onRefresh,
+}: ParameterTreeProps) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(() =>
+    collectAllFolderPaths(treeData),
+  );
+
+  // Filter tree by search query
+  const filteredTreeData = useMemo(
+    () => filterTree(treeData, searchQuery),
+    [treeData, searchQuery],
+  );
+
+  const handleToggle = useCallback((path: string) => {
+    setExpandedNodes((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleSearchChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setSearchQuery(e.currentTarget.value);
+    },
+    [],
+  );
+
   return (
-    <Card withBorder w={280} h="100%" style={{ flexShrink: 0 }}>
-      <Stack gap="xs" h="100%">
-        <Group justify="space-between">
-          <Text size="sm" fw={500}>
+    <Box
+      w={280}
+      h="100%"
+      p="sm"
+      style={{
+        flexShrink: 0,
+        display: "flex",
+        flexDirection: "column",
+        borderRight: "1px solid var(--mantine-color-default-border)",
+      }}
+    >
+      <Stack gap="sm" h="100%" style={{ minHeight: 0 }}>
+        <Group justify="space-between" gap="xs">
+          <Text size="sm" fw={600}>
             Parameters
           </Text>
-          <Tooltip label="Refresh">
-            <ActionButton
-              variant="subtle"
-              size="compact-xs"
-              onClick={onRefresh}
-            >
-              <IconRefresh size={14} />
-            </ActionButton>
-          </Tooltip>
+          <ActionButton
+            variant="subtle"
+            size="compact-xs"
+            onClick={onRefresh}
+            tooltip="Refresh"
+          >
+            <IconRefresh size={14} />
+          </ActionButton>
         </Group>
-        <ScrollArea flex={1} offsetScrollbars>
-          <Tree
-            data={mantineTreeData}
-            tree={tree}
-            levelOffset={20}
-            expandOnClick
-            renderNode={renderNode}
-          />
+
+        <TextInput
+          placeholder="Search..."
+          size="xs"
+          leftSection={<IconSearch size={14} />}
+          value={searchQuery}
+          onChange={handleSearchChange}
+        />
+
+        <ScrollArea flex={1} offsetScrollbars style={{ minHeight: 0 }}>
+          {filteredTreeData.length === 0 ? (
+            <Text size="xs" c="dimmed" ta="center" py="md">
+              {searchQuery ? "No matching parameters" : "No parameters"}
+            </Text>
+          ) : (
+            <Stack gap={0} style={{ gap: 1 }}>
+              {filteredTreeData.map((node) => (
+                <TreeNode
+                  key={node.path}
+                  node={node}
+                  level={0}
+                  selectedConfig={selectedConfig}
+                  onSelect={onSelect}
+                  expandedNodes={expandedNodes}
+                  onToggle={handleToggle}
+                />
+              ))}
+            </Stack>
+          )}
         </ScrollArea>
       </Stack>
-    </Card>
+    </Box>
   );
 };
 

package/src/admin/components/parameters/types.ts

@@ -1,10 +1,10 @@
 import type { Parameter } from "alepha/api/parameters";
 
-export interface ConfigValue {
+export interface ParameterValue {
   current?: Parameter;
   next?: Parameter;
   /**
-   * Default value from the registered $config primitive.
+   * Default value from the registered $parameter primitive.
    */
   defaultValue?: unknown;
   /**
@@ -12,7 +12,7 @@ export interface ConfigValue {
    */
   currentValue?: unknown;
   /**
-   * TypeBox/JSON schema for the configuration (as JSON from API).
+   * TypeBox/JSON schema for the parameter (as JSON from API).
    */
   schema?: Record<string, unknown>;
 }

package/src/admin/primitives/$uiAdmin.ts

@@ -1,11 +1,11 @@
-import type { AdminShellProps } from "@alepha/ui";
+import type { DashboardShellProps } from "@alepha/ui";
 import { $context } from "alepha";
 import { AdminRouter } from "../AdminRouter.ts";
 
 /**
  * Register Admin UI components and get the AdminRouter instance.
  */
-export const $uiAdmin = (optsFn?: (a: AdminRouter) => AdminShellProps) => {
+export const $uiAdmin = (optsFn?: (a: AdminRouter) => DashboardShellProps) => {
   const { alepha } = $context();
   const adminRouter = alepha.inject(AdminRouter);
 

package/src/auth/AuthRouter.ts

@@ -27,6 +27,7 @@ export class AuthRouter {
   protected readonly auth = $inject(ReactAuth);
 
   authLayout = $page({
+    label: "Auth",
     path: "/auth",
     lazy: () => import("./components/AuthLayout.tsx"),
     children: () => [
@@ -46,7 +47,6 @@ export class AuthRouter {
     schema: {
       query: realmQuerySchema,
     },
-    can: () => !this.auth.user,
     lazy: () => import("./components/Login.tsx"),
     loader: async ({ query, user }) => {
       if (user) {
@@ -66,7 +66,6 @@ export class AuthRouter {
     schema: {
       query: realmQuerySchema,
     },
-    can: () => !this.auth.user,
     lazy: () => import("./components/Register.tsx"),
     loader: async ({ query, user }) => {
       if (user) {
@@ -86,7 +85,6 @@ export class AuthRouter {
     schema: {
       query: realmQuerySchema,
     },
-    can: () => !this.auth.user,
     lazy: () => import("./components/ResetPassword.tsx"),
     loader: async ({ query, user }) => {
       if (user) {
@@ -116,7 +114,6 @@ export class AuthRouter {
     icon: IconLogout2,
     label: "Sign Out",
     description: "Sign out of your account",
-    can: () => !!this.auth.user,
     path: "/logout",
     component: () => null,
     loader: () => {

package/src/auth/components/AuthLayout.tsx

@@ -1,7 +1,6 @@
 import { AlephaMantineProvider } from "@alepha/ui";
 import { Flex } from "@mantine/core";
 import { NestedView } from "alepha/react/router";
-import "@alepha/ui/styles";
 
 const AuthLayout = () => {
   return (

package/src/core/components/buttons/ActionButton.tsx

@@ -243,17 +243,14 @@ const ActionButton = (_props: ActionProps) => {
   const props = { ..._props };
   const { tooltip, menu, icon, ...restProps } = props;
 
-  if (props.variant === "subtle") {
-    restProps.c ??= "var(--mantine-color-text)";
+  if (props.variant === "subtle" || props.variant === "outline") {
     restProps.color ??= "gray";
   }
 
   if (props.intent) {
     if (props.intent === "none") {
-      restProps.c ??= "var(--mantine-color-text)";
       restProps.color ??= "gray";
     } else if (props.intent === "primary") {
-      restProps.c ??= "white";
       restProps.color ??= theme.primaryColor;
     } else if (props.intent === "success") {
       restProps.c ??= "white";
@@ -262,7 +259,6 @@ const ActionButton = (_props: ActionProps) => {
       restProps.c ??= "white";
       restProps.color ??= "red";
     } else if (props.intent === "warning") {
-      restProps.c ??= "var(--mantine-color-text)";
       restProps.color ??= "yellow";
     } else if (props.intent === "info") {
       restProps.c ??= "white";
@@ -271,18 +267,11 @@ const ActionButton = (_props: ActionProps) => {
   }
 
   if (props.icon) {
+    const sizes = ui.sizes.icon as Record<string, number>;
     const icon = isComponentType(props.icon) ? (
-      <props.icon size={ui.sizes.icon.md} />
+      <props.icon size={sizes[props.size || "md"]} />
     ) : (
-      <ThemeIcon
-        w={24} // TODO: make size configurable
-        variant={"transparent"}
-        size={"sm"}
-        c={"var(--mantine-color-text)"}
-        {...props.themeIconProps}
-      >
-        {props.icon as ReactNode}
-      </ThemeIcon>
+      <span>{props.icon as ReactNode}</span>
     );
 
     if (!props.children) {

package/src/core/components/buttons/DarkModeButton.tsx

@@ -1,5 +1,6 @@
 import { useMantineColorScheme } from "@mantine/core";
 import { IconMoon, IconSun } from "@tabler/icons-react";
+import { ui } from "../../constants/ui.ts";
 import ActionButton, { type ActionProps } from "./ActionButton.tsx";
 
 /**
@@ -19,17 +20,20 @@ const DarkModeButton = (props: Partial<ActionProps>) => {
     setColorScheme(current === "dark" ? "light" : "dark");
   };
 
+  const size = props.size ?? "md";
+  const iconSize =
+    (ui.sizes.icon as Record<string, number>)[size] ?? ui.sizes.icon.md;
+
   return (
     <ActionButton
       onClick={toggleColorScheme}
       variant={props.variant ?? "subtle"}
-      size={props.size ?? "sm"}
+      size={size}
       aria-label="Toggle color scheme"
-      px={"xs"}
       icon={
         <>
-          <IconSun className="alepha-light-hidden" />
-          <IconMoon className="alepha-dark-hidden" />
+          <IconSun size={iconSize} className="alepha-light-hidden" />
+          <IconMoon size={iconSize} className="alepha-dark-hidden" />
         </>
       }
       {...props}

package/src/core/components/buttons/ToggleSidebarButton.tsx

@@ -14,11 +14,9 @@ const ToggleSidebarButton = (props: Props) => {
   return (
     <ActionButton
       icon={
-        sidebar.collapsed ? (
-          <IconLayoutSidebarRightCollapse />
-        ) : (
-          <IconLayoutSidebarLeftCollapse />
-        )
+        sidebar.collapsed
+          ? IconLayoutSidebarRightCollapse
+          : IconLayoutSidebarLeftCollapse
       }
       visibleFrom={"sm"}
       variant={"subtle"}