@alepha/ui 0.16.1 → 0.17.0

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

@@ -0,0 +1,27 @@
+import { Text } from "@alepha/ui";
+import { Flex } from "@mantine/core";
+import { IconArrowLeft } from "@tabler/icons-react";
+
+/**
+ * Empty state displayed when no parameter is selected.
+ * Invites user to select a parameter from the tree.
+ */
+const ParameterEmptyState = () => {
+  return (
+    <Flex flex={1} p={"xl"} align="center">
+      <Flex direction="column" align="center" gap="md">
+        <IconArrowLeft size={32} color="var(--mantine-color-dimmed)" />
+        <Flex direction="column" align="center" gap={4}>
+          <Text fw={500} c="dimmed">
+            No Parameter Selected
+          </Text>
+          <Text size="xs" c="dimmed" ta="center" maw={240}>
+            Choose a parameter from the tree to view and edit its configuration
+          </Text>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default ParameterEmptyState;

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

@@ -1,13 +1,5 @@
 import { ActionButton, Flex, Text } from "@alepha/ui";
-import {
-  Badge,
-  Card,
-  Group,
-  Loader,
-  ScrollArea,
-  Stack,
-  Timeline,
-} from "@mantine/core";
+import { Badge, Loader, ScrollArea, Timeline } from "@mantine/core";
 import { IconHistory } from "@tabler/icons-react";
 import type { Parameter } from "alepha/api/parameters";
 import { useI18n } from "alepha/react/i18n";
@@ -21,7 +13,6 @@ export interface ParameterHistoryProps {
 }
 
 const ParameterHistory = ({
-  selectedConfig,
   history,
   loading,
   onRollback,
@@ -29,16 +20,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 +32,7 @@ const ParameterHistory = ({
       return (
         <Flex flex={1} justify="center" align="center">
           <Text c="dimmed" size="xs">
-            No history
+            Empty
           </Text>
         </Flex>
       );
@@ -73,7 +54,7 @@ const ParameterHistory = ({
                 </Text>
               }
               title={
-                <Group gap="xs">
+                <Flex gap="xs">
                   <Text size="xs" fw={500}>
                     Version {version.version}
                   </Text>
@@ -84,10 +65,10 @@ const ParameterHistory = ({
                   >
                     {version.status}
                   </Badge>
-                </Group>
+                </Flex>
               }
             >
-              <Stack gap={4} mt={4}>
+              <Flex direction="column" gap={4} mt={4}>
                 <Text size="xs" c="dimmed">
                   {l(version.createdAt, { date: "fromNow" })}
                 </Text>
@@ -115,7 +96,7 @@ const ParameterHistory = ({
                     Rollback to this version
                   </ActionButton>
                 )}
-              </Stack>
+              </Flex>
             </Timeline.Item>
           ))}
         </Timeline>
@@ -124,22 +105,28 @@ const ParameterHistory = ({
   };
 
   return (
-    <Card
-      withBorder
-      w={300}
+    <Flex
+      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%">
-        <Group gap="xs">
+      <Flex direction="column" gap="xs" h="100%" style={{ minHeight: 0 }}>
+        <Flex gap="xs">
           <IconHistory size={16} color="var(--mantine-color-dimmed)" />
           <Text size="sm" fw={500}>
-            Version History
+            History
           </Text>
-        </Group>
+        </Flex>
         {renderContent()}
-      </Stack>
-    </Card>
+      </Flex>
+    </Flex>
   );
 };
 

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

@@ -1,14 +1,10 @@
 import { ActionButton, Text } from "@alepha/ui";
 import {
-  Box,
-  Card,
-  Group,
+  Collapse,
+  Flex,
   ScrollArea,
-  Stack,
-  Tooltip,
-  Tree,
-  type TreeNodeData,
-  useTree,
+  TextInput,
+  UnstyledButton,
 } from "@mantine/core";
 import {
   IconChevronDown,
@@ -16,130 +12,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)" />
+      <Flex>
+        <UnstyledButton
+          onClick={handleClick}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          w="100%"
+          style={{ display: "block" }}
+        >
+          <Flex
+            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 ? (
+              <>
+                <Flex
+                  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)"
+                    />
+                  )}
+                </Flex>
+                {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)" />
+              <>
+                <Flex 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>
+          </Flex>
+        </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>
+      </Flex>
     );
+  },
+);
+
+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}>
+    <Flex
+      w={280}
+      h="100%"
+      p="sm"
+      style={{
+        flexShrink: 0,
+        display: "flex",
+        flexDirection: "column",
+        borderRight: "1px solid var(--mantine-color-default-border)",
+      }}
+    >
+      <Flex direction="column" gap="sm" h="100%" style={{ minHeight: 0 }}>
+        <Flex 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>
-        </Group>
-        <ScrollArea flex={1} offsetScrollbars>
-          <Tree
-            data={mantineTreeData}
-            tree={tree}
-            levelOffset={20}
-            expandOnClick
-            renderNode={renderNode}
-          />
+          <ActionButton
+            variant="subtle"
+            size="compact-xs"
+            onClick={onRefresh}
+            tooltip="Refresh"
+          >
+            <IconRefresh size={14} />
+          </ActionButton>
+        </Flex>
+
+        <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>
+          ) : (
+            <Flex direction="column" gap={0} style={{ gap: 1 }}>
+              {filteredTreeData.map((node) => (
+                <TreeNode
+                  key={node.path}
+                  node={node}
+                  level={0}
+                  selectedConfig={selectedConfig}
+                  onSelect={onSelect}
+                  expandedNodes={expandedNodes}
+                  onToggle={handleToggle}
+                />
+              ))}
+            </Flex>
+          )}
         </ScrollArea>
-      </Stack>
-    </Card>
+      </Flex>
+    </Flex>
   );
 };
 

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/components/sessions/AdminSessions.tsx

@@ -1,5 +1,5 @@
 import { ActionButton, DataTable, Flex, Text } from "@alepha/ui";
-import { Badge, Group } from "@mantine/core";
+import { Badge } from "@mantine/core";
 import {
   IconDeviceDesktop,
   IconDeviceMobile,
@@ -120,7 +120,7 @@ const AdminSessions = (props: AdminSessionsProps) => {
             label: "Device",
             fit: true,
             value: (item) => (
-              <Group gap={4}>
+              <Flex gap={4}>
                 {item.userAgent ? (
                   <>
                     <Badge
@@ -139,7 +139,7 @@ const AdminSessions = (props: AdminSessionsProps) => {
                     -
                   </Text>
                 )}
-              </Group>
+              </Flex>
             ),
           },
           ip: {