fix: bug fixes (#397)

* Add more html page titles

* Make tables responsive

* fix react query keys

* Add tooltip to sidebar toggle

* fix: trim inputs

* fix inputs

apps/client/src/features/workspace/components/members/components/workspace-invites-table.tsx

@@ -1,62 +1,64 @@
-import { Group, Table, Avatar, Text, Alert } from "@mantine/core";
-import { useWorkspaceInvitationsQuery } from "@/features/workspace/queries/workspace-query.ts";
+import {Group, Table, Avatar, Text, Alert} from "@mantine/core";
+import {useWorkspaceInvitationsQuery} from "@/features/workspace/queries/workspace-query.ts";
 import React from "react";
-import { getUserRoleLabel } from "@/features/workspace/types/user-role-data.ts";
+import {getUserRoleLabel} from "@/features/workspace/types/user-role-data.ts";
 import InviteActionMenu from "@/features/workspace/components/members/components/invite-action-menu.tsx";
-import { IconInfoCircle } from "@tabler/icons-react";
-import { formattedDate } from "@/lib/time.ts";
+import {IconInfoCircle} from "@tabler/icons-react";
+import {formattedDate, timeAgo} from "@/lib/time.ts";
 import useUserRole from "@/hooks/use-user-role.tsx";
 
 export default function WorkspaceInvitesTable() {
-  const { data, isLoading } = useWorkspaceInvitationsQuery({
+  const {data, isLoading} = useWorkspaceInvitationsQuery({
     limit: 100,
   });
-  const { isAdmin } = useUserRole();
+  const {isAdmin} = useUserRole();
 
   return (
     <>
-      <Alert variant="light" color="blue" icon={<IconInfoCircle />}>
+      <Alert variant="light" color="blue" icon={<IconInfoCircle/>}>
         Invited members who are yet to accept their invitation will appear here.
       </Alert>
 
       {data && (
         <>
-          <Table verticalSpacing="sm">
-            <Table.Thead>
-              <Table.Tr>
-                <Table.Th>Email</Table.Th>
-                <Table.Th>Role</Table.Th>
-                <Table.Th>Date</Table.Th>
-              </Table.Tr>
-            </Table.Thead>
-
-            <Table.Tbody>
-              {data?.items.map((invitation, index) => (
-                <Table.Tr key={index}>
-                  <Table.Td>
-                    <Group gap="sm">
-                      <Avatar name={invitation.email} color="initials" />
-                      <div>
-                        <Text fz="sm" fw={500}>
-                          {invitation.email}
-                        </Text>
-                      </div>
-                    </Group>
-                  </Table.Td>
-
-                  <Table.Td>{getUserRoleLabel(invitation.role)}</Table.Td>
-
-                  <Table.Td>{formattedDate(invitation.createdAt)}</Table.Td>
-
-                  <Table.Td>
-                    {isAdmin && (
-                      <InviteActionMenu invitationId={invitation.id} />
-                    )}
-                  </Table.Td>
+          <Table.ScrollContainer minWidth={500}>
+            <Table verticalSpacing="sm">
+              <Table.Thead>
+                <Table.Tr>
+                  <Table.Th>Email</Table.Th>
+                  <Table.Th>Role</Table.Th>
+                  <Table.Th>Date</Table.Th>
                 </Table.Tr>
-              ))}
-            </Table.Tbody>
-          </Table>
+              </Table.Thead>
+
+              <Table.Tbody>
+                {data?.items.map((invitation, index) => (
+                  <Table.Tr key={index}>
+                    <Table.Td>
+                      <Group gap="sm">
+                        <Avatar name={invitation.email} color="initials"/>
+                        <div>
+                          <Text fz="sm" fw={500}>
+                            {invitation.email}
+                          </Text>
+                        </div>
+                      </Group>
+                    </Table.Td>
+
+                    <Table.Td>{getUserRoleLabel(invitation.role)}</Table.Td>
+
+                    <Table.Td>{timeAgo(invitation.createdAt)}</Table.Td>
+
+                    <Table.Td>
+                      {isAdmin && (
+                        <InviteActionMenu invitationId={invitation.id}/>
+                      )}
+                    </Table.Td>
+                  </Table.Tr>
+                ))}
+              </Table.Tbody>
+            </Table>
+          </Table.ScrollContainer>
         </>
       )}
     </>

apps/client/src/features/workspace/components/members/components/workspace-members-table.tsx

@@ -1,9 +1,9 @@
-import { Group, Table, Text, Badge } from "@mantine/core";
+import {Group, Table, Text, Badge} from "@mantine/core";
 import {
   useChangeMemberRoleMutation,
   useWorkspaceMembersQuery,
 } from "@/features/workspace/queries/workspace-query.ts";
-import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
+import {CustomAvatar} from "@/components/ui/custom-avatar.tsx";
 import React from "react";
 import RoleSelectMenu from "@/components/ui/role-select-menu.tsx";
 import {
@@ -11,14 +11,14 @@ import {
   userRoleData,
 } from "@/features/workspace/types/user-role-data.ts";
 import useUserRole from "@/hooks/use-user-role.tsx";
-import { UserRole } from "@/lib/types.ts";
+import {UserRole} from "@/lib/types.ts";
 
 export default function WorkspaceMembersTable() {
-  const { data, isLoading } = useWorkspaceMembersQuery({ limit: 100 });
+  const {data, isLoading} = useWorkspaceMembersQuery({limit: 100});
   const changeMemberRoleMutation = useChangeMemberRoleMutation();
-  const { isAdmin, isOwner } = useUserRole();
+  const {isAdmin, isOwner} = useUserRole();
 
-  const assignableUserRoles =  isOwner ? userRoleData : userRoleData.filter((role) => role.value !== UserRole.OWNER);
+  const assignableUserRoles = isOwner ? userRoleData : userRoleData.filter((role) => role.value !== UserRole.OWNER);
 
   const handleRoleChange = async (
     userId: string,
@@ -40,50 +40,52 @@ export default function WorkspaceMembersTable() {
   return (
     <>
       {data && (
-        <Table verticalSpacing="sm">
-          <Table.Thead>
-            <Table.Tr>
-              <Table.Th>User</Table.Th>
-              <Table.Th>Status</Table.Th>
-              <Table.Th>Role</Table.Th>
-            </Table.Tr>
-          </Table.Thead>
-
-          <Table.Tbody>
-            {data?.items.map((user, index) => (
-              <Table.Tr key={index}>
-                <Table.Td>
-                  <Group gap="sm">
-                    <CustomAvatar avatarUrl={user.avatarUrl} name={user.name} />
-                    <div>
-                      <Text fz="sm" fw={500}>
-                        {user.name}
-                      </Text>
-                      <Text fz="xs" c="dimmed">
-                        {user.email}
-                      </Text>
-                    </div>
-                  </Group>
-                </Table.Td>
-
-                <Table.Td>
-                  <Badge variant="light">Active</Badge>
-                </Table.Td>
-
-                <Table.Td>
-                  <RoleSelectMenu
-                    roles={assignableUserRoles}
-                    roleName={getUserRoleLabel(user.role)}
-                    onChange={(newRole) =>
-                      handleRoleChange(user.id, user.role, newRole)
-                    }
-                    disabled={!isAdmin}
-                  />
-                </Table.Td>
+        <Table.ScrollContainer minWidth={500}>
+          <Table verticalSpacing="sm">
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th>User</Table.Th>
+                <Table.Th>Status</Table.Th>
+                <Table.Th>Role</Table.Th>
               </Table.Tr>
-            ))}
-          </Table.Tbody>
-        </Table>
+            </Table.Thead>
+
+            <Table.Tbody>
+              {data?.items.map((user, index) => (
+                <Table.Tr key={index}>
+                  <Table.Td>
+                    <Group gap="sm">
+                      <CustomAvatar avatarUrl={user.avatarUrl} name={user.name}/>
+                      <div>
+                        <Text fz="sm" fw={500}>
+                          {user.name}
+                        </Text>
+                        <Text fz="xs" c="dimmed">
+                          {user.email}
+                        </Text>
+                      </div>
+                    </Group>
+                  </Table.Td>
+
+                  <Table.Td>
+                    <Badge variant="light">Active</Badge>
+                  </Table.Td>
+
+                  <Table.Td>
+                    <RoleSelectMenu
+                      roles={assignableUserRoles}
+                      roleName={getUserRoleLabel(user.role)}
+                      onChange={(newRole) =>
+                        handleRoleChange(user.id, user.role, newRole)
+                      }
+                      disabled={!isAdmin}
+                    />
+                  </Table.Td>
+                </Table.Tr>
+              ))}
+            </Table.Tbody>
+          </Table>
+        </Table.ScrollContainer>
       )}
     </>
   );