refactor layout

* ui polishing
* frontend and backend fixes

apps/client/src/components/ui/sidebar-toggle-button.tsx

@@ -0,0 +1,34 @@
+import {
+  IconLayoutSidebarRightCollapse,
+  IconLayoutSidebarRightExpand,
+} from "@tabler/icons-react";
+import {
+  ActionIcon,
+  BoxProps,
+  ElementProps,
+  MantineColor,
+  MantineSize,
+} from "@mantine/core";
+import React from "react";
+
+export interface SidebarToggleProps extends BoxProps, ElementProps<"button"> {
+  size?: MantineSize | `compact-${MantineSize}` | (string & {});
+  color?: MantineColor;
+  opened?: boolean;
+}
+
+export default function SidebarToggle({
+  opened,
+  size = "sm",
+  ...others
+}: SidebarToggleProps) {
+  return (
+    <ActionIcon size={size} {...others} variant="subtle" color="gray">
+      {opened ? (
+        <IconLayoutSidebarRightExpand />
+      ) : (
+        <IconLayoutSidebarRightCollapse />
+      )}
+    </ActionIcon>
+  );
+}