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/pages/settings/account/account-preferences.tsx

@@ -1,15 +1,20 @@
 import SettingsTitle from "@/components/settings/settings-title.tsx";
 import AccountTheme from "@/features/user/components/account-theme.tsx";
 import PageWidthPref from "@/features/user/components/page-width-pref.tsx";
-import { Divider } from "@mantine/core";
+import {Divider} from "@mantine/core";
+import {getAppName} from "@/lib/config.ts";
+import {Helmet} from "react-helmet-async";
 
 export default function AccountPreferences() {
-  return (
-    <>
-      <SettingsTitle title="Preferences" />
-      <AccountTheme />
-      <Divider my={"md"} />
-      <PageWidthPref />
-    </>
-  );
+    return (
+        <>
+            <Helmet>
+                <title>Preferences - {getAppName()}</title>
+            </Helmet>
+            <SettingsTitle title="Preferences"/>
+            <AccountTheme/>
+            <Divider my={"md"}/>
+            <PageWidthPref/>
+        </>
+    );
 }

apps/client/src/pages/settings/account/account-settings.tsx

@@ -4,10 +4,15 @@ import ChangePassword from "@/features/user/components/change-password";
 import { Divider } from "@mantine/core";
 import AccountAvatar from "@/features/user/components/account-avatar";
 import SettingsTitle from "@/components/settings/settings-title.tsx";
+import {getAppName} from "@/lib/config.ts";
+import {Helmet} from "react-helmet-async";
 
 export default function AccountSettings() {
   return (
     <>
+        <Helmet>
+            <title>My Profile - {getAppName()}</title>
+        </Helmet>
       <SettingsTitle title="My Profile" />
 
       <AccountAvatar />

apps/client/src/pages/settings/group/group-info.tsx

@@ -1,13 +1,18 @@
 import SettingsTitle from "@/components/settings/settings-title.tsx";
 import GroupMembersList from "@/features/group/components/group-members";
 import GroupDetails from "@/features/group/components/group-details";
+import {getAppName} from "@/lib/config.ts";
+import {Helmet} from "react-helmet-async";
 
 export default function GroupInfo() {
-  return (
-    <>
-      <SettingsTitle title="Manage Group" />
-      <GroupDetails />
-      <GroupMembersList />
-    </>
-  );
+    return (
+        <>
+            <Helmet>
+                <title>Manage Group - {getAppName()}</title>
+            </Helmet>
+            <SettingsTitle title="Manage Group"/>
+            <GroupDetails/>
+            <GroupMembersList/>
+        </>
+    );
 }

apps/client/src/pages/settings/group/groups.tsx

@@ -3,12 +3,17 @@ import SettingsTitle from "@/components/settings/settings-title.tsx";
 import { Group } from "@mantine/core";
 import CreateGroupModal from "@/features/group/components/create-group-modal";
 import useUserRole from "@/hooks/use-user-role.tsx";
+import {getAppName} from "@/lib/config.ts";
+import {Helmet} from "react-helmet-async";
 
 export default function Groups() {
   const { isAdmin } = useUserRole();
 
   return (
     <>
+        <Helmet>
+            <title>Groups - {getAppName()}</title>
+        </Helmet>
       <SettingsTitle title="Groups" />
 
       <Group my="md" justify="flex-end">

apps/client/src/pages/settings/space/spaces.tsx

@@ -1,21 +1,26 @@
 import SettingsTitle from "@/components/settings/settings-title.tsx";
 import SpaceList from "@/features/space/components/space-list.tsx";
 import useUserRole from "@/hooks/use-user-role.tsx";
-import { Group } from "@mantine/core";
+import {Group} from "@mantine/core";
 import CreateSpaceModal from "@/features/space/components/create-space-modal.tsx";
+import {getAppName} from "@/lib/config.ts";
+import {Helmet} from "react-helmet-async";
 
 export default function Spaces() {
-  const { isAdmin } = useUserRole();
+    const {isAdmin} = useUserRole();
 
-  return (
-    <>
-      <SettingsTitle title="Spaces" />
+    return (
+        <>
+            <Helmet>
+                <title>Spaces - {getAppName()}</title>
+            </Helmet>
+            <SettingsTitle title="Spaces"/>
 
-      <Group my="md" justify="flex-end">
-        {isAdmin && <CreateSpaceModal />}
-      </Group>
+            <Group my="md" justify="flex-end">
+                {isAdmin && <CreateSpaceModal/>}
+            </Group>
 
-      <SpaceList />
-    </>
-  );
+            <SpaceList/>
+        </>
+    );
 }

apps/client/src/pages/settings/workspace/workspace-members.tsx

@@ -1,62 +1,67 @@
 import WorkspaceInviteModal from "@/features/workspace/components/members/components/workspace-invite-modal";
-import { Group, SegmentedControl, Space, Text } from "@mantine/core";
+import {Group, SegmentedControl, Space, Text} from "@mantine/core";
 import WorkspaceMembersTable from "@/features/workspace/components/members/components/workspace-members-table";
 import SettingsTitle from "@/components/settings/settings-title.tsx";
-import { useEffect, useState } from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import {useEffect, useState} from "react";
+import {useNavigate, useSearchParams} from "react-router-dom";
 import WorkspaceInvitesTable from "@/features/workspace/components/members/components/workspace-invites-table.tsx";
 import useUserRole from "@/hooks/use-user-role.tsx";
+import {getAppName} from "@/lib/config.ts";
+import {Helmet} from "react-helmet-async";
 
 export default function WorkspaceMembers() {
-  const [segmentValue, setSegmentValue] = useState("members");
-  const [searchParams] = useSearchParams();
-  const { isAdmin } = useUserRole();
-  const navigate = useNavigate();
+    const [segmentValue, setSegmentValue] = useState("members");
+    const [searchParams] = useSearchParams();
+    const {isAdmin} = useUserRole();
+    const navigate = useNavigate();
 
-  useEffect(() => {
-    const currentTab = searchParams.get("tab");
-    if (currentTab === "invites") {
-      setSegmentValue(currentTab);
-    }
-  }, [searchParams.get("tab")]);
+    useEffect(() => {
+        const currentTab = searchParams.get("tab");
+        if (currentTab === "invites") {
+            setSegmentValue(currentTab);
+        }
+    }, [searchParams.get("tab")]);
 
-  const handleSegmentChange = (value: string) => {
-    setSegmentValue(value);
-    if (value === "invites") {
-      navigate(`?tab=${value}`);
-    } else {
-      navigate("");
-    }
-  };
+    const handleSegmentChange = (value: string) => {
+        setSegmentValue(value);
+        if (value === "invites") {
+            navigate(`?tab=${value}`);
+        } else {
+            navigate("");
+        }
+    };
 
-  return (
-    <>
-      <SettingsTitle title="Members" />
+    return (
+        <>
+            <Helmet>
+                <title>Members - {getAppName()}</title>
+            </Helmet>
+            <SettingsTitle title="Members"/>
 
-      {/* <WorkspaceInviteSection /> */}
-      {/* <Divider my="lg" /> */}
+            {/* <WorkspaceInviteSection /> */}
+            {/* <Divider my="lg" /> */}
 
-      <Group justify="space-between">
-        <SegmentedControl
-          value={segmentValue}
-          onChange={handleSegmentChange}
-          data={[
-            { label: "Members", value: "members" },
-            { label: "Pending", value: "invites" },
-          ]}
-          withItemsBorders={false}
-        />
+            <Group justify="space-between">
+                <SegmentedControl
+                    value={segmentValue}
+                    onChange={handleSegmentChange}
+                    data={[
+                        {label: "Members", value: "members"},
+                        {label: "Pending", value: "invites"},
+                    ]}
+                    withItemsBorders={false}
+                />
 
-        {isAdmin && <WorkspaceInviteModal />}
-      </Group>
+                {isAdmin && <WorkspaceInviteModal/>}
+            </Group>
 
-      <Space h="lg" />
+            <Space h="lg"/>
 
-      {segmentValue === "invites" ? (
-        <WorkspaceInvitesTable />
-      ) : (
-        <WorkspaceMembersTable />
-      )}
-    </>
-  );
+            {segmentValue === "invites" ? (
+                <WorkspaceInvitesTable/>
+            ) : (
+                <WorkspaceMembersTable/>
+            )}
+        </>
+    );
 }

apps/client/src/pages/settings/workspace/workspace-settings.tsx

@@ -1,11 +1,16 @@
 import SettingsTitle from "@/components/settings/settings-title.tsx";
 import WorkspaceNameForm from "@/features/workspace/components/settings/components/workspace-name-form";
+import {getAppName} from "@/lib/config.ts";
+import {Helmet} from "react-helmet-async";
 
 export default function WorkspaceSettings() {
-  return (
-    <>
-      <SettingsTitle title="General" />
-      <WorkspaceNameForm />
-    </>
-  );
+    return (
+        <>
+            <Helmet>
+                <title>Workspace Settings - {getAppName()}</title>
+            </Helmet>
+            <SettingsTitle title="General"/>
+            <WorkspaceNameForm/>
+        </>
+    );
 }