refactor layout

* ui polishing
* frontend and backend fixes

apps/client/src/components/layouts/global/global-app-shell.tsx

@@ -0,0 +1,77 @@
+import { AppShell, Container } from "@mantine/core";
+import React from "react";
+import { useLocation } from "react-router-dom";
+import SettingsSidebar from "@/components/settings/settings-sidebar.tsx";
+import { useAtom } from "jotai";
+import {
+  asideStateAtom,
+  desktopSidebarAtom,
+  mobileSidebarAtom,
+} from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
+import { SpaceSidebar } from "@/features/space/components/sidebar/space-sidebar.tsx";
+import { AppHeader } from "@/components/layouts/global/app-header.tsx";
+import Aside from "@/components/layouts/global/aside.tsx";
+import classes from "./app-shell.module.css";
+
+export default function GlobalAppShell({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [mobileOpened] = useAtom(mobileSidebarAtom);
+  const [desktopOpened] = useAtom(desktopSidebarAtom);
+  const [{ isAsideOpen }] = useAtom(asideStateAtom);
+
+  const location = useLocation();
+  const isSettingsRoute = location.pathname.startsWith("/settings");
+  const isSpaceRoute = location.pathname.startsWith("/s/");
+  const isHomeRoute = location.pathname.startsWith("/home");
+  const isPageRoute = location.pathname.includes("/p/");
+
+  return (
+    <AppShell
+      header={{ height: 45 }}
+      navbar={
+        !isHomeRoute && {
+          width: 300,
+          breakpoint: "sm",
+          collapsed: {
+            mobile: !mobileOpened,
+            desktop: !desktopOpened,
+          },
+        }
+      }
+      aside={
+        isPageRoute && {
+          width: 350,
+          breakpoint: "sm",
+          collapsed: { mobile: !isAsideOpen, desktop: !isAsideOpen },
+        }
+      }
+      padding="md"
+    >
+      <AppShell.Header px="md" className={classes.header}>
+        <AppHeader />
+      </AppShell.Header>
+      {!isHomeRoute && (
+        <AppShell.Navbar className={classes.navbar} withBorder={false}>
+          {isSpaceRoute && <SpaceSidebar />}
+          {isSettingsRoute && <SettingsSidebar />}
+        </AppShell.Navbar>
+      )}
+      <AppShell.Main>
+        {isSettingsRoute ? (
+          <Container size={800}>{children}</Container>
+        ) : (
+          children
+        )}
+      </AppShell.Main>
+
+      {isPageRoute && (
+        <AppShell.Aside className={classes.aside} p="md" withBorder={false}>
+          <Aside />
+        </AppShell.Aside>
+      )}
+    </AppShell>
+  );
+}