@alepha/ui 0.18.1 → 0.18.3

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

@@ -1,31 +1,17 @@
 import { ActionButton, Flex, Text } from "@alepha/ui";
-import { Collapse, ScrollArea, TextInput, UnstyledButton } from "@mantine/core";
-import {
-  IconChevronDown,
-  IconChevronRight,
-  IconFolder,
-  IconFolderOpen,
-  IconRefresh,
-  IconSearch,
-  IconSettings,
-} from "@tabler/icons-react";
-import type { ParameterTreeNode } from "alepha/api/parameters";
-import { memo, useCallback, useMemo, useState } from "react";
-
-export interface ParameterTreeProps {
-  treeData: ParameterTreeNode[];
-  selectedConfig: string | null;
-  onSelect: (name: string) => void;
-  onRefresh: () => void;
-}
+import { ScrollArea, TextInput } from "@mantine/core";
+import { IconRefresh, IconSearch } from "@tabler/icons-react";
+import type { ParameterTreeNode as ParameterTreeNodeData } from "alepha/api/parameters";
+import { useCallback, useMemo, useState } from "react";
+import ParameterTreeNode from "./ParameterTreeNode.tsx";
 
 /**
  * Filters tree nodes by search query.
  */
 const filterTree = (
-  nodes: ParameterTreeNode[],
+  nodes: ParameterTreeNodeData[],
   query: string,
-): ParameterTreeNode[] => {
+): ParameterTreeNodeData[] => {
   if (!query.trim()) return nodes;
 
   const lowerQuery = query.toLowerCase();
@@ -45,163 +31,16 @@ const filterTree = (
 
       return null;
     })
-    .filter((node): node is ParameterTreeNode => node !== null);
+    .filter((node): node is ParameterTreeNodeData => 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,
-    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 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 (
-      <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 }}
-                  />
-                )}
-              </>
-            ) : (
-              <>
-                <Flex w={16} />
-                <IconSettings
-                  size={16}
-                  color={
-                    isSelected
-                      ? "var(--mantine-color-blue-6)"
-                      : "var(--mantine-color-dimmed)"
-                  }
-                  style={{ flexShrink: 0 }}
-                />
-              </>
-            )}
-            <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>
-        )}
-      </Flex>
-    );
-  },
-);
-
-TreeNode.displayName = "TreeNode";
-
 /**
  * Collects all folder paths to expand by default.
  */
-const collectAllFolderPaths = (nodes: ParameterTreeNode[]): Set<string> => {
+const collectAllFolderPaths = (nodes: ParameterTreeNodeData[]): Set<string> => {
   const paths = new Set<string>();
 
-  const traverse = (nodeList: ParameterTreeNode[]) => {
+  const traverse = (nodeList: ParameterTreeNodeData[]) => {
     for (const node of nodeList) {
       if (node.children.length > 0) {
         paths.add(node.path);
@@ -214,21 +53,26 @@ const collectAllFolderPaths = (nodes: ParameterTreeNode[]): Set<string> => {
   return paths;
 };
 
-const ParameterTree = ({
-  treeData,
-  selectedConfig,
-  onSelect,
-  onRefresh,
-}: ParameterTreeProps) => {
+interface Props {
+  treeData: ParameterTreeNodeData[];
+  selectedConfig: string | null;
+  onSelect: (name: string) => void;
+  onRefresh: () => void;
+}
+
+/**
+ * Parameter tree sidebar with search and refresh.
+ */
+const ParameterTree = (props: Props) => {
   const [searchQuery, setSearchQuery] = useState("");
   const [expandedNodes, setExpandedNodes] = useState<Set<string>>(() =>
-    collectAllFolderPaths(treeData),
+    collectAllFolderPaths(props.treeData),
   );
 
   // Filter tree by search query
   const filteredTreeData = useMemo(
-    () => filterTree(treeData, searchQuery),
-    [treeData, searchQuery],
+    () => filterTree(props.treeData, searchQuery),
+    [props.treeData, searchQuery],
   );
 
   const handleToggle = useCallback((path: string) => {
@@ -270,7 +114,7 @@ const ParameterTree = ({
           <ActionButton
             variant="subtle"
             size="compact-xs"
-            onClick={onRefresh}
+            onClick={props.onRefresh}
             tooltip="Refresh"
           >
             <IconRefresh size={14} />
@@ -293,12 +137,12 @@ const ParameterTree = ({
           ) : (
             <Flex direction="column" gap={0} style={{ gap: 1 }}>
               {filteredTreeData.map((node) => (
-                <TreeNode
+                <ParameterTreeNode
                   key={node.path}
                   node={node}
                   level={0}
-                  selectedConfig={selectedConfig}
-                  onSelect={onSelect}
+                  selectedConfig={props.selectedConfig}
+                  onSelect={props.onSelect}
                   expandedNodes={expandedNodes}
                   onToggle={handleToggle}
                 />

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

@@ -0,0 +1,151 @@
+import { Flex, Text } from "@alepha/ui";
+import { Collapse, UnstyledButton } from "@mantine/core";
+import {
+  IconChevronDown,
+  IconChevronRight,
+  IconFolder,
+  IconFolderOpen,
+  IconSettings,
+} from "@tabler/icons-react";
+import type { ParameterTreeNode as ParameterTreeNodeData } from "alepha/api/parameters";
+import { memo, useCallback, useState } from "react";
+
+interface Props {
+  node: ParameterTreeNodeData;
+  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 ParameterTreeNode = memo((props: Props) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const hasChildren = props.node.children.length > 0;
+  const isExpanded = props.expandedNodes.has(props.node.path);
+  const isSelected = props.selectedConfig === props.node.path;
+  const isLeaf = !hasChildren;
+
+  const handleClick = useCallback(() => {
+    if (hasChildren) {
+      props.onToggle(props.node.path);
+    } else {
+      props.onSelect(props.node.path);
+    }
+  }, [hasChildren, props.node.path, props.onToggle, props.onSelect]);
+
+  const handleMouseEnter = useCallback(() => setIsHovered(true), []);
+  const handleMouseLeave = useCallback(() => setIsHovered(false), []);
+
+  return (
+    <Flex>
+      <UnstyledButton
+        onClick={handleClick}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        w="100%"
+        style={{ display: "block" }}
+      >
+        <Flex
+          gap={6}
+          wrap="nowrap"
+          p="4px 8px"
+          pl={8 + props.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 }}
+                />
+              )}
+            </>
+          ) : (
+            <>
+              <Flex w={16} />
+              <IconSettings
+                size={16}
+                color={
+                  isSelected
+                    ? "var(--mantine-color-blue-6)"
+                    : "var(--mantine-color-dimmed)"
+                }
+                style={{ flexShrink: 0 }}
+              />
+            </>
+          )}
+          <Text
+            size="sm"
+            fw={isSelected ? 600 : 400}
+            c={isSelected ? undefined : isLeaf ? undefined : "dimmed"}
+            style={{
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+            }}
+          >
+            {props.node.name}
+          </Text>
+        </Flex>
+      </UnstyledButton>
+
+      {hasChildren && (
+        <Collapse in={isExpanded}>
+          {props.node.children.map((child: ParameterTreeNodeData) => (
+            <ParameterTreeNode
+              key={child.path}
+              node={child}
+              level={props.level + 1}
+              selectedConfig={props.selectedConfig}
+              onSelect={props.onSelect}
+              expandedNodes={props.expandedNodes}
+              onToggle={props.onToggle}
+            />
+          ))}
+        </Collapse>
+      )}
+    </Flex>
+  );
+});
+
+ParameterTreeNode.displayName = "ParameterTreeNode";
+
+export default ParameterTreeNode;

package/src/admin/components/sessions/AdminSessions.tsx

@@ -1,4 +1,12 @@
-import { ActionButton, DataTable, Flex, Text } from "@alepha/ui";
+import {
+  ActionButton,
+  DataTable,
+  Flex,
+  Text,
+  useDialog,
+  useToast,
+} from "@alepha/ui";
+import { Badge } from "@mantine/core";
 import {
   IconDeviceDesktop,
   IconDeviceMobile,
@@ -15,53 +23,61 @@ import { useClient } from "alepha/react";
 import { useI18n } from "alepha/react/i18n";
 import { useRouter } from "alepha/react/router";
 import { useState } from "react";
-import type { AdminRouter } from "../../AdminRouter.ts";
+import type { AdminRouter } from "../../AdminRouter.tsx";
 
 export interface AdminSessionsProps {
   userRealmName?: string;
 }
 
+const filters = t.object({
+  userId: t.optional(
+    t.uuid({
+      $control: {
+        query: t.pick(sessions.schema, ["userId"]),
+      },
+    }),
+  ),
+});
+
+const getDeviceIcon = (device?: string) => {
+  switch (device) {
+    case "MOBILE":
+      return <IconDeviceMobile size={14} />;
+    case "TABLET":
+      return <IconDeviceTablet size={14} />;
+    default:
+      return <IconDeviceDesktop size={14} />;
+  }
+};
+
+const isExpired = (expiresAt: Date | string) =>
+  new Date(expiresAt) < new Date();
+
 const AdminSessions = (props: AdminSessionsProps) => {
   const client = useClient<AdminSessionController>();
   const router = useRouter<AdminRouter>();
   const { l } = useI18n();
+  const dialog = useDialog();
+  const toast = useToast();
   const [refreshKey, setRefreshKey] = useState(0);
 
-  const filters = t.object({
-    userId: t.optional(
-      t.uuid({
-        $control: {
-          query: t.pick(sessions.schema, ["userId"]),
-        },
-      }),
-    ),
-  });
-
-  const getDeviceIcon = (device?: string) => {
-    switch (device) {
-      case "MOBILE":
-        return <IconDeviceMobile size={14} />;
-      case "TABLET":
-        return <IconDeviceTablet size={14} />;
-      default:
-        return <IconDeviceDesktop size={14} />;
-    }
-  };
-
-  const isExpired = (expiresAt: Date | string) => {
-    return new Date(expiresAt) < new Date();
-  };
-
-  const handleDelete = async (sessionId: string) => {
+  const handleDelete = async (session: SessionEntity) => {
+    const confirmed = await dialog.confirm({
+      title: "Revoke session",
+      message:
+        "Are you sure you want to revoke this session? The user will be signed out.",
+    });
+    if (!confirmed) return;
     await client.deleteSession({
-      params: { id: sessionId },
+      params: { id: session.id },
       query: { userRealmName: props.userRealmName },
     });
+    toast.success("Session revoked");
     setRefreshKey((k) => k + 1);
   };
 
   return (
-    <Flex flex={1} direction="column">
+    <Flex p="md" flex={1} direction="column">
       <DataTable<SessionEntity, typeof filters>
         key={refreshKey}
         submitOnInit
@@ -74,20 +90,13 @@ const AdminSessions = (props: AdminSessionsProps) => {
           horizontalSpacing: "xs",
           verticalSpacing: "xs",
         }}
-        onFilterChange={(key, _value, form) => {
-          if (key === "userId") {
-            return form.submit();
-          }
-        }}
+        onFilterChange={(_key, _value, form) => form.submit()}
         filters={filters}
-        tableTrProps={(item) => {
-          if (isExpired(item.expiresAt)) {
-            return {
-              opacity: 0.5,
-            };
-          }
-          return {};
-        }}
+        tableTrProps={(item) => ({
+          style: {
+            opacity: isExpired(item.expiresAt) ? 0.5 : 1,
+          },
+        })}
         items={async (filters) => {
           const response = await client.findSessions({
             query: {
@@ -95,7 +104,6 @@ const AdminSessions = (props: AdminSessionsProps) => {
               userRealmName: props.userRealmName,
             },
           });
-
           return response as Page<SessionEntity>;
         }}
         columns={{
@@ -117,7 +125,6 @@ const AdminSessions = (props: AdminSessionsProps) => {
           },
           userAgent: {
             label: "Device",
-            fit: true,
             value: (item) => (
               <Flex gap={4} align="center">
                 {item.userAgent ? (
@@ -128,8 +135,8 @@ const AdminSessions = (props: AdminSessionsProps) => {
                     </Text>
                   </>
                 ) : (
-                  <Text size="xs" c="dimmed">
-                    -
+                  <Text size="xs" muted>
+                    —
                   </Text>
                 )}
               </Flex>
@@ -137,49 +144,42 @@ const AdminSessions = (props: AdminSessionsProps) => {
           },
           ip: {
             label: "IP",
-            fit: true,
             value: (item) => (
-              <Text size="xs" ff="monospace" c="dimmed">
-                {item.ip || "-"}
+              <Text size="xs" ff="monospace" muted>
+                {item.ip || "—"}
               </Text>
             ),
           },
           expiresAt: {
             label: "Status",
-            fit: true,
             value: (item) => (
-              <Text
-                size="xs"
-                c={isExpired(item.expiresAt) ? "dimmed" : undefined}
+              <Badge
+                size="sm"
+                variant="light"
+                color={isExpired(item.expiresAt) ? "gray" : "green"}
               >
                 {isExpired(item.expiresAt) ? "Expired" : "Active"}
-              </Text>
+              </Badge>
             ),
           },
           createdAt: {
             label: "Created",
-            fit: true,
             value: (item) => (
-              <Text size="xs" c="dimmed">
+              <Text size="xs" muted>
                 {l(item.createdAt, { date: "fromNow" })}
               </Text>
             ),
           },
-          actions: {
-            label: "",
-            fit: true,
-            value: (item) => (
-              <ActionButton
-                size="xs"
-                variant="subtle"
-                color="red"
-                onClick={() => handleDelete(item.id)}
-              >
-                <IconTrash size={14} />
-              </ActionButton>
-            ),
-          },
         }}
+        rowActions={(item) => [
+          {
+            label: "Revoke session",
+            icon: IconTrash,
+            color: "red",
+            onClick: () => handleDelete(item),
+            visible: !isExpired(item.expiresAt),
+          },
+        ]}
       />
     </Flex>
   );

package/src/admin/components/shared/AdminResourceHeader.tsx

@@ -14,8 +14,8 @@ import {
   IconChevronLeft,
   IconExternalLink,
 } from "@tabler/icons-react";
-import { useRouter } from "alepha/react/router";
 import type { ComponentType, ReactNode } from "react";
+import AdminResourceHeaderMenuItem from "./AdminResourceHeaderMenuItem.tsx";
 
 export interface AdminResourceAction {
   label: string;
@@ -107,29 +107,6 @@ export interface AdminResourceHeaderProps {
   loading?: boolean;
 }
 
-const ActionMenuItem = (props: { action: AdminResourceAction }) => {
-  const { action } = props;
-  const router = useRouter();
-
-  const menuItemProps: Record<string, unknown> = {};
-  if (action.href) {
-    Object.assign(menuItemProps, router.anchor(action.href));
-  } else if (action.onClick) {
-    menuItemProps.onClick = action.onClick;
-  }
-
-  return (
-    <Menu.Item
-      leftSection={action.icon ? <action.icon size={16} /> : undefined}
-      color={action.color}
-      disabled={action.disabled}
-      {...menuItemProps}
-    >
-      {action.label}
-    </Menu.Item>
-  );
-};
-
 const AdminResourceHeader = (props: AdminResourceHeaderProps) => {
   const {
     backHref,
@@ -271,7 +248,7 @@ const AdminResourceHeader = (props: AdminResourceHeaderProps) => {
               </Menu.Target>
               <Menu.Dropdown>
                 {menuActions.map((action, index) => (
-                  <ActionMenuItem key={index} action={action} />
+                  <AdminResourceHeaderMenuItem key={index} action={action} />
                 ))}
               </Menu.Dropdown>
             </Menu>