refactor layout

* ui polishing
* frontend and backend fixes

apps/client/src/pages/dashboard/home.tsx

@@ -1,13 +1,15 @@
-import { Container } from '@mantine/core';
-import HomeTabs from '@/features/home/components/home-tabs';
+import { Container, Space } from "@mantine/core";
+import HomeTabs from "@/features/home/components/home-tabs";
+import SpaceGrid from "@/features/space/components/space-grid.tsx";
 
 export default function Home() {
-
   return (
-    <Container size={'800'} pt="xl">
+    <Container size={"800"} pt="xl">
+      <SpaceGrid />
 
-      <HomeTabs/>
+      <Space h="xl" />
 
+      <HomeTabs />
     </Container>
   );
 }

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

@@ -0,0 +1,28 @@
+import { useNavigate, useParams } from "react-router-dom";
+import { useEffect } from "react";
+import { usePageQuery } from "@/features/page/queries/page-query";
+import { buildPageUrl } from "@/features/page/page.utils.ts";
+import { extractPageSlugId } from "@/lib";
+
+export default function PageRedirect() {
+  const { pageSlug } = useParams();
+  const {
+    data: page,
+    isLoading: pageIsLoading,
+    isError,
+  } = usePageQuery({ pageId: extractPageSlugId(pageSlug) });
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (page) {
+      const pageUrl = buildPageUrl(page.space.slug, page.slugId, page.title);
+      navigate(pageUrl);
+    }
+  }, [page]);
+
+  if (pageIsLoading) {
+    return <></>;
+  }
+
+  return null;
+}

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

@@ -3,10 +3,16 @@ import { usePageQuery } from "@/features/page/queries/page-query";
 import { FullEditor } from "@/features/editor/full-editor";
 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";
 
 export default function Page() {
-  const { slugId } = useParams();
-  const { data: page, isLoading, isError } = usePageQuery(slugId);
+  const { pageSlug, spaceSlug } = useParams();
+  const {
+    data: page,
+    isLoading,
+    isError,
+  } = usePageQuery({ pageId: extractPageSlugId(pageSlug) });
 
   if (isLoading) {
     return <></>;
@@ -23,7 +29,15 @@ export default function Page() {
         <Helmet>
           <title>{page.title}</title>
         </Helmet>
-        <FullEditor pageId={page.id} title={page.title} slugId={page.slugId} />
+
+        <PageHeader />
+
+        <FullEditor
+          pageId={page.id}
+          title={page.title}
+          slugId={page.slugId}
+          spaceSlug={page?.space?.slug || spaceSlug}
+        />
         <HistoryModal pageId={page.id} />
       </div>
     )

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

@@ -1,4 +1,4 @@
-import SettingsTitle from "@/components/layouts/settings/settings-title.tsx";
+import SettingsTitle from "@/components/settings/settings-title.tsx";
 import AccountTheme from "@/features/user/components/account-theme.tsx";
 
 export default function AccountPreferences() {

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

@@ -3,7 +3,7 @@ import ChangeEmail from "@/features/user/components/change-email";
 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/layouts/settings/settings-title.tsx";
+import SettingsTitle from "@/components/settings/settings-title.tsx";
 
 export default function AccountSettings() {
   return (

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

@@ -1,4 +1,4 @@
-import SettingsTitle from "@/components/layouts/settings/settings-title.tsx";
+import SettingsTitle from "@/components/settings/settings-title.tsx";
 import GroupMembersList from "@/features/group/components/group-members";
 import GroupDetails from "@/features/group/components/group-details";
 

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

@@ -1,5 +1,5 @@
 import GroupList from "@/features/group/components/group-list";
-import SettingsTitle from "@/components/layouts/settings/settings-title.tsx";
+import SettingsTitle from "@/components/settings/settings-title.tsx";
 import { Group, Text } from "@mantine/core";
 import CreateGroupModal from "@/features/group/components/create-group-modal";
 

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

@@ -1,4 +1,4 @@
-import SettingsTitle from "@/components/layouts/settings/settings-title.tsx";
+import SettingsTitle from "@/components/settings/settings-title.tsx";
 import SpaceList from "@/features/space/components/space-list.tsx";
 
 export default function Spaces() {

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

@@ -2,7 +2,7 @@ import WorkspaceInviteSection from "@/features/workspace/components/members/comp
 import WorkspaceInviteModal from "@/features/workspace/components/members/components/workspace-invite-modal";
 import { Divider, Group, SegmentedControl, Space, Text } from "@mantine/core";
 import WorkspaceMembersTable from "@/features/workspace/components/members/components/workspace-members-table";
-import SettingsTitle from "@/components/layouts/settings/settings-title.tsx";
+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";

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

@@ -1,4 +1,4 @@
-import SettingsTitle from "@/components/layouts/settings/settings-title.tsx";
+import SettingsTitle from "@/components/settings/settings-title.tsx";
 import WorkspaceNameForm from "@/features/workspace/components/settings/components/workspace-name-form";
 
 export default function WorkspaceSettings() {

apps/client/src/pages/space/space-home.tsx

@@ -0,0 +1,15 @@
+import { Container } from "@mantine/core";
+import SpaceHomeTabs from "@/features/space/components/space-home-tabs.tsx";
+import { useParams } from "react-router-dom";
+import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
+
+export default function SpaceHome() {
+  const { spaceSlug } = useParams();
+  const { data: space } = useGetSpaceBySlugQuery(spaceSlug);
+
+  return (
+    <Container size={"800"} pt="xl">
+      {space && <SpaceHomeTabs />}
+    </Container>
+  );
+}