frontend permissions

* rework backend workspace permissions

apps/client/src/pages/page/page.tsx

@@ -5,14 +5,25 @@ import HistoryModal from "@/features/page-history/components/history-modal";
 import { Helmet } from "react-helmet-async";
 import PageHeader from "@/features/page/components/header/page-header.tsx";
 import { extractPageSlugId } from "@/lib";
+import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
+import { useMemo } from "react";
+import { useSpaceAbility } from "@/features/space/permissions/use-space-ability.ts";
+import {
+  SpaceCaslAction,
+  SpaceCaslSubject,
+} from "@/features/space/permissions/permissions.type.ts";
 
 export default function Page() {
-  const { pageSlug, spaceSlug } = useParams();
+  const { pageSlug } = useParams();
   const {
     data: page,
     isLoading,
     isError,
   } = usePageQuery({ pageId: extractPageSlugId(pageSlug) });
+  const { data: space } = useGetSpaceBySlugQuery(page?.space?.slug);
+
+  const spaceRules = space?.membership?.permissions;
+  const spaceAbility = useMemo(() => useSpaceAbility(spaceRules), [spaceRules]);
 
   if (isLoading) {
     return <></>;
@@ -23,20 +34,33 @@ export default function Page() {
     return <div>Error fetching page data.</div>;
   }
 
+  if (!space) {
+    return <></>;
+  }
+
   return (
     page && (
       <div>
         <Helmet>
-          <title>{page.title}</title>
+          <title>{`${page?.icon || ""}  ${page.title || "untitled"}`}</title>
         </Helmet>
 
-        <PageHeader />
+        <PageHeader
+          readOnly={spaceAbility.cannot(
+            SpaceCaslAction.Manage,
+            SpaceCaslSubject.Page,
+          )}
+        />
 
         <FullEditor
           pageId={page.id}
           title={page.title}
           slugId={page.slugId}
-          spaceSlug={page?.space?.slug || spaceSlug}
+          spaceSlug={page?.space?.slug}
+          editable={spaceAbility.can(
+            SpaceCaslAction.Manage,
+            SpaceCaslSubject.Page,
+          )}
         />
         <HistoryModal pageId={page.id} />
       </div>

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

@@ -1,15 +1,18 @@
 import GroupList from "@/features/group/components/group-list";
 import SettingsTitle from "@/components/settings/settings-title.tsx";
-import { Group, Text } from "@mantine/core";
+import { Group } from "@mantine/core";
 import CreateGroupModal from "@/features/group/components/create-group-modal";
+import useUserRole from "@/hooks/use-user-role.tsx";
 
 export default function Groups() {
+  const { isAdmin } = useUserRole();
+
   return (
     <>
       <SettingsTitle title="Groups" />
 
       <Group my="md" justify="flex-end">
-        <CreateGroupModal />
+        {isAdmin && <CreateGroupModal />}
       </Group>
 
       <GroupList />

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

@@ -1,15 +1,16 @@
-import WorkspaceInviteSection from "@/features/workspace/components/members/components/workspace-invite-section";
 import WorkspaceInviteModal from "@/features/workspace/components/members/components/workspace-invite-modal";
-import { Divider, 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 WorkspaceInvitesTable from "@/features/workspace/components/members/components/workspace-invites-table.tsx";
+import useUserRole from "@/hooks/use-user-role.tsx";
 
 export default function WorkspaceMembers() {
   const [segmentValue, setSegmentValue] = useState("members");
   const [searchParams] = useSearchParams();
+  const { isAdmin } = useUserRole();
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -46,7 +47,7 @@ export default function WorkspaceMembers() {
           withItemsBorders={false}
         />
 
-        <WorkspaceInviteModal />
+        {isAdmin && <WorkspaceInviteModal />}
       </Group>
 
       <Space h="lg" />