space updates

* space UI
* space management
* space permissions
* other fixes

apps/client/src/components/ui/role-select-menu.tsx

@@ -0,0 +1,63 @@
+import React, { forwardRef } from "react";
+import { IconCheck, IconChevronDown } from "@tabler/icons-react";
+import { Group, Text, Menu, Button } from "@mantine/core";
+import { IRoleData } from "@/lib/types.ts";
+
+interface RoleButtonProps extends React.ComponentPropsWithoutRef<"button"> {
+  name: string;
+}
+
+const RoleButton = forwardRef<HTMLButtonElement, RoleButtonProps>(
+  ({ name, ...others }: RoleButtonProps, ref) => (
+    <Button
+      variant="default"
+      ref={ref}
+      style={{
+        border: "none",
+      }}
+      rightSection={<IconChevronDown size="1rem" />}
+      {...others}
+    >
+      {name}
+    </Button>
+  ),
+);
+
+interface SpaceRoleMenuProps {
+  roles: IRoleData[];
+  roleName: string;
+  onChange?: (value: string) => void;
+}
+
+export default function RoleSelectMenu({
+  roles,
+  roleName,
+  onChange,
+}: SpaceRoleMenuProps) {
+  return (
+    <Menu withArrow>
+      <Menu.Target>
+        <RoleButton name={roleName} />
+      </Menu.Target>
+
+      <Menu.Dropdown>
+        {roles?.map((item) => (
+          <Menu.Item
+            onClick={() => onChange && onChange(item.value)}
+            key={item.value}
+          >
+            <Group flex="1" gap="xs">
+              <div>
+                <Text size="sm">{item.label}</Text>
+                <Text size="xs" opacity={0.65}>
+                  {item.description}
+                </Text>
+              </div>
+              {item.label === roleName && <IconCheck size={20} />}
+            </Group>
+          </Menu.Item>
+        ))}
+      </Menu.Dropdown>
+    </Menu>
+  );
+}