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>