FEAT: Member Modal, Code Gen, and Toolbar Changes

src/components/modals/CodeGenModal.tsx

@@ -1,11 +1,10 @@
-import { Box, Button, Code, CopyButton, ScrollArea, Tabs, Text } from "@mantine/core"
+import { Box, Button, CopyButton, Tabs, Text } from "@mantine/core"
 import { ContextModalProps } from "@mantine/modals"
 import { IconClipboard, IconClipboardCheck } from "@tabler/icons-react";
 import { useEffect } from "react";
 import SyntaxHighlighter from 'react-syntax-highlighter'
 import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import useCodeGenRepo from "../../data/repo/useCodeGenRepo";
-import useEditorRepo from "../../data/repo/useEditorRepo";
 import { useEditorStore } from "../../store/useEditorStore";
 
 
@@ -31,12 +30,19 @@ function CodeGenModal({ context, id, innerProps }: ContextModalProps) {
           <Tabs.Tab value="types">
             Types
           </Tabs.Tab>
+          <Tabs.Tab value="functions">
+            Functions
+          </Tabs.Tab>
         </Tabs.List>
 
         <Tabs.Panel className="overflow-hidden" flex={1}  value="types">
           <TypesPanel />
         </Tabs.Panel>
 
+        <Tabs.Panel className="overflow-hidden" flex={1}  value="functions">
+          <FunctionsPanel />
+        </Tabs.Panel>
+
       </Tabs>
     </Box>
   )
@@ -47,20 +53,20 @@ function TypesPanel() {
 
   const getDataSnap = useEditorStore((state) => state.getDataSnapshot);
 
-  const { typeString, typesList, selectType} = useCodeGenRepo(getDataSnap())
+  const { typeString, typesList, selectTable} = useCodeGenRepo(getDataSnap())
 
   return(
     <>
       <Box className="h-full p-4 border-[1px] border-t-0 border-neutral-500 border-opacity-25 rounded-b-md">
 
         <Tabs className="h-full" variant="pills" orientation="vertical" placement="right" radius='md' defaultValue='all'>
           <Tabs.List>
-            <Tabs.Tab value="all" onClick={()=>selectType(undefined)}>
+            <Tabs.Tab value="all" onClick={()=>selectTable(undefined)}>
               All
             </Tabs.Tab>
             {
               typesList.map((item)=>(
-                <Tabs.Tab key={item} value={item} onClick={()=>selectType(item)}>
+                <Tabs.Tab key={item} value={item} onClick={()=>selectTable(item)}>
                   {item}
                 </Tabs.Tab>
               ))
@@ -109,4 +115,70 @@ function TypesPanel() {
   )
 }
 
+function FunctionsPanel() {
+
+  const getDataSnap = useEditorStore((state) => state.getDataSnapshot);
+
+  const { functionString, typesList, selectTable} = useCodeGenRepo(getDataSnap())
+
+  return(
+    <>
+      <Box className="h-full p-4 border-[1px] border-t-0 border-neutral-500 border-opacity-25 rounded-b-md">
+
+        <Tabs className="h-full" variant="pills" orientation="vertical" placement="right" radius='md' defaultValue='all'>
+          <Tabs.List>
+            <Tabs.Tab value="all" onClick={()=>selectTable(undefined)}>
+              All
+            </Tabs.Tab>
+            {
+              typesList.map((item)=>(
+                <Tabs.Tab key={item} value={item} onClick={()=>selectTable(item)}>
+                  {item}
+                </Tabs.Tab>
+              ))
+            }
+          </Tabs.List>
+
+          <Box className="mr-4 flex-grow overflow-hidden">
+
+            <Box className="h-full w-full relative rounded-md overflow-hidden">
+
+              <Box className="absolute top-2 right-6">
+                <CopyButton timeout={2000} value={functionString} >
+                  {({ copied, copy }) => (
+                    <Button 
+                      size="xs" 
+                      variant="light"
+                      leftSection={ copied ? <IconClipboardCheck size={16}/> : <IconClipboard size={16}/>} 
+                      onClick={copy}
+                    >
+                      {copied ? 'Copied' : 'Copy'}
+                    </Button>
+                  )}
+                </CopyButton>
+              </Box>
+
+              <SyntaxHighlighter 
+                customStyle={{
+                  width: '100%',
+                  height: '100%',
+                  overflow: 'auto',
+                  fontSize: 14,
+                }} 
+                language="typescript" 
+                style={atomOneDark}
+              >
+                {functionString}
+              </SyntaxHighlighter>
+            </Box>
+
+          </Box>
+
+        </Tabs>
+
+      </Box>
+    </>
+  )
+}
+
 export default CodeGenModal

src/components/modals/ShareModal.tsx

@@ -8,7 +8,6 @@ import {
   CopyButton,
   Divider,
   Group,
-  Input,
   InputBase,
   Loader,
   Menu,
@@ -19,15 +18,13 @@ import {
   Text,
   TextInput,
   Title,
-  Tooltip,
   useCombobox,
 } from "@mantine/core";
 import { ContextModalProps } from "@mantine/modals";
 import {
   IconCopy,
   IconDotsVertical,
   IconLock,
-  IconPlus,
 } from "@tabler/icons-react";
 import { useEffect, useMemo, useState } from "react";
 import useProjectRepo from "../../data/repo/useProjectRepo";
@@ -62,6 +59,7 @@ function ShareModal({ context, id }: ContextModalProps) {
   >([]);
   // useState to keep track project members locally.
   const [localMembers, setLocalMembers] = useState<IProjectMembers[]>([]);
+  const [localRemovedMembers, setLocalRemovedMembers] = useState<IProjectMembers[]>([]);
   const [searchTerm, setSearchTerm] = useState<string>("");
 
   const currentUserRole = useMemo(() => {
@@ -167,6 +165,9 @@ function ShareModal({ context, id }: ContextModalProps) {
   };
 
   const handleRemoveMember = (memberId: string) => {
+    const removedMember = localMembers.find(member => member.id === memberId)
+    if (!removedMember) return
+    setLocalRemovedMembers([...localMembers, removedMember])
     setLocalMembers((prev) => prev.filter((member) => member.id !== memberId));
   };
 
@@ -205,6 +206,7 @@ function ShareModal({ context, id }: ContextModalProps) {
       ]);
 
       await fetchProjectMembers(selectedProject.id);
+      setLocalRemovedMembers([])
 
       showNotification({
         color: "green",
@@ -352,7 +354,7 @@ function ShareModal({ context, id }: ContextModalProps) {
         </Group>
       )}
 
-      <ScrollArea.Autosize my="sm" mah={rem(300)} offsetScrollbars={true}>
+      <ScrollArea.Autosize mt="sm" mb="xs" mah={rem(300)} offsetScrollbars={true}>
         <Stack gap={5}>
           {initialLoading ? (
             <Center>
@@ -370,6 +372,7 @@ function ShareModal({ context, id }: ContextModalProps) {
                   }
                   onRemove={() => handleRemoveMember(member.id)}
                   currentUserRole={currentUserRole}
+                  dimmed={member.id.startsWith("temp-")}
                 />
               ) : null
             )
@@ -379,7 +382,20 @@ function ShareModal({ context, id }: ContextModalProps) {
         </Stack>
       </ScrollArea.Autosize>
 
-      <Title order={5} mb="xs">
+      {(currentUserRole === "Owner" || currentUserRole === "Admin")
+        && (members.some((member) => member.id.startsWith("temp-")) || localRemovedMembers.length > 0) && (
+        <Button
+          variant="filled"
+          fullWidth={true}
+          mt={10}
+          loading={initialLoading}
+          onClick={handleSave}
+        >
+          Save
+        </Button>
+      )}
+
+      <Title order={5} my="xs">
         General Access
       </Title>
 
@@ -406,18 +422,6 @@ function ShareModal({ context, id }: ContextModalProps) {
           }
         }}
       />
-
-      {(currentUserRole === "Owner" || currentUserRole === "Admin") && (
-        <Button
-          variant="filled"
-          fullWidth={true}
-          mt={10}
-          loading={initialLoading}
-          onClick={handleSave}
-        >
-          Save
-        </Button>
-      )}
     </Box>
   );
 }
@@ -486,6 +490,7 @@ interface MemberItemProps {
   onRemove: () => void;
   isCurrentUser: boolean;
   currentUserRole: string;
+  dimmed?: boolean
 }
 
 function MemberItem({
@@ -498,6 +503,7 @@ function MemberItem({
   onRemove,
   isCurrentUser,
   currentUserRole,
+  dimmed
 }: MemberItemProps) {
   const truncatedEmail =
     username.length > 25 ? `${username.slice(0, 22)}...` : username;
@@ -510,24 +516,24 @@ function MemberItem({
       justify="space-between"
     >
       <Group gap="sm">
-        <Avatar size={42} src={profilePicture} />
+        <Avatar size={42} src={profilePicture} opacity={dimmed ? 0.5 : 1}/>
 
         <Stack gap={0}>
-          <Text fw={500}>
+          <Text fw={500} opacity={dimmed ? 0.5 : 1}>
             {name}{" "}
             {isCurrentUser && (
               <Text component="span" c="green.5">
                 (You)
               </Text>
             )}
           </Text>
-          <Text c="dimmed" size="sm">
+          <Text c="dimmed" size="sm" opacity={dimmed ? 0.5 : 1}>
             {truncatedEmail}
           </Text>
         </Stack>
       </Group>
 
-      <Group>
+      <Group gap={0}>
         {role === "Owner" ? (
           <Text fw={500}>{role}</Text>
         ) : // Ensure only Admin and Owner can update member roles
@@ -540,6 +546,7 @@ function MemberItem({
             value={role}
             data={["Viewer", "Editor", "Admin"]}
             onChange={(value) => value && onRoleChange(value)}
+            opacity={dimmed ? 0.5 : 1}
           />
         ) : (
           <Text fw={500}>{role}</Text>
@@ -550,7 +557,7 @@ function MemberItem({
           role !== "Owner" && (
             <Menu>
               <Menu.Target>
-                <ActionIcon variant="subtle">
+                <ActionIcon variant="subtle" opacity={dimmed ? 0.5 : 1}>
                   <IconDotsVertical />
                 </ActionIcon>
               </Menu.Target>

src/components/ui/TooltipIconButton.tsx

@@ -0,0 +1,35 @@
+import { ActionIcon, ActionIconProps, Tooltip } from "@mantine/core";
+import { ReactNode } from "react";
+
+
+interface TooltipIconButtonProps extends ActionIconProps{
+  icon: ReactNode;
+  label: string;
+  disabled?: boolean;
+  active?: boolean;
+  onClick?: () => void;
+}
+
+export default function TooltipIconButton({
+  icon,
+  label,
+  disabled,
+  active,
+  onClick,
+  ...iconProps
+}: TooltipIconButtonProps) {
+  return (
+    <Tooltip label={label}>
+      <ActionIcon
+        {...iconProps}
+        variant={ active ? "filled" : iconProps.variant || "subtle"}
+        size={iconProps.size || "md"}
+        radius={iconProps.radius || "sm"}
+        disabled={disabled}
+        onClick={onClick}
+      >
+        {icon}
+      </ActionIcon>
+    </Tooltip>
+  );
+}

src/css/react-flow.css

@@ -0,0 +1,4 @@
+
+.react-flow.cursor-cross .react-flow__pane {
+	cursor: crosshair; /* add !important if necessary */
+}