Membership settings rework (#198)

* Add refined members list

* futher progress on members settings polish

* Remove old components

* feedback

Author: brendan-kellam

packages/web/package.json

@@ -49,6 +49,7 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.2",

packages/web/src/actions.ts

@@ -17,7 +17,7 @@ import { useDomain } from "@/hooks/useDomain";
 
 const formSchema = z.object({
     key: z.string().min(2).max(40),
-    value: z.string().min(2).max(40),
+    value: z.string().min(2),
 });
 
 interface SecretsTableProps {
@@ -30,18 +30,15 @@ export const SecretsTable = ({ initialSecrets }: SecretsTableProps) => {
     const { toast } = useToast();
     const domain = useDomain();
 
-    const fetchSecretKeys = async () => {
-        const keys = await getSecrets(domain);
-        if ('keys' in keys) {
-            setSecrets(keys);
-        } else {
-            console.error(keys);
-        }
-    };
-
     useEffect(() => {
-        fetchSecretKeys();
-    }, [fetchSecretKeys]);
+        getSecrets(domain).then((keys) => {
+            if ('keys' in keys) {
+                setSecrets(keys);
+            } else {
+                console.error(keys);
+            }
+        })
+    }, []);
 
     const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),

packages/web/src/app/[domain]/secrets/secretsTable.tsx

@@ -0,0 +1,7 @@
+
+export default async function GeneralSettingsPage() {
+    return (
+        <p>todo</p>
+    )
+}
+

packages/web/src/app/[domain]/settings/(general)/page.tsx

@@ -0,0 +1,22 @@
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+import clsx from "clsx";
+
+interface HeaderProps {
+    children: React.ReactNode;
+    withTopMargin?: boolean;
+    className?: string;
+}
+
+export const Header = ({
+    children,
+    withTopMargin = true,
+    className,
+}: HeaderProps) => {
+    return (
+        <div className={cn("mb-16", className)}>
+            {children}
+            <Separator className={clsx("absolute left-0 right-0", { "mt-12": withTopMargin })} />
+        </div>
+    )
+}