fix: bug fixes (#397)

* Add more html page titles

* Make tables responsive

* fix react query keys

* Add tooltip to sidebar toggle

* fix: trim inputs

* fix inputs

apps/client/src/components/common/recent-changes.tsx

@@ -4,25 +4,25 @@ import {
   UnstyledButton,
   Badge,
   Table,
-  ScrollArea,
   ActionIcon,
 } from '@mantine/core';
-import { Link } from 'react-router-dom';
+import {Link} from 'react-router-dom';
 import PageListSkeleton from '@/components/ui/page-list-skeleton.tsx';
-import { buildPageUrl } from '@/features/page/page.utils.ts';
-import { formattedDate } from '@/lib/time.ts';
-import { useRecentChangesQuery } from '@/features/page/queries/page-query.ts';
-import { IconFileDescription } from '@tabler/icons-react';
-import { getSpaceUrl } from '@/lib/config.ts';
+import {buildPageUrl} from '@/features/page/page.utils.ts';
+import {formattedDate} from '@/lib/time.ts';
+import {useRecentChangesQuery} from '@/features/page/queries/page-query.ts';
+import {IconFileDescription} from '@tabler/icons-react';
+import {getSpaceUrl} from '@/lib/config.ts';
 
 interface Props {
   spaceId?: string;
 }
-export default function RecentChanges({ spaceId }: Props) {
-  const { data: pages, isLoading, isError } = useRecentChangesQuery(spaceId);
+
+export default function RecentChanges({spaceId}: Props) {
+  const {data: pages, isLoading, isError} = useRecentChangesQuery(spaceId);
 
   if (isLoading) {
-    return <PageListSkeleton />;
+    return <PageListSkeleton/>;
   }
 
   if (isError) {
@@ -30,7 +30,7 @@ export default function RecentChanges({ spaceId }: Props) {
   }
 
   return pages && pages.items.length > 0 ? (
-    <ScrollArea>
+    <Table.ScrollContainer minWidth={500}>
       <Table highlightOnHover verticalSpacing="sm">
         <Table.Tbody>
           {pages.items.map((page) => (
@@ -43,7 +43,7 @@ export default function RecentChanges({ spaceId }: Props) {
                   <Group wrap="nowrap">
                     {page.icon || (
                       <ActionIcon variant='transparent' color='gray' size={18}>
-                        <IconFileDescription size={18} />
+                        <IconFileDescription size={18}/>
                       </ActionIcon>
                     )}
 
@@ -60,14 +60,14 @@ export default function RecentChanges({ spaceId }: Props) {
                     variant="light"
                     component={Link}
                     to={getSpaceUrl(page?.space.slug)}
-                    style={{ cursor: 'pointer' }}
+                    style={{cursor: 'pointer'}}
                   >
                     {page?.space.name}
                   </Badge>
                 </Table.Td>
               )}
               <Table.Td>
-                <Text c="dimmed" size="xs" fw={500}>
+                <Text c="dimmed" style={{whiteSpace: 'nowrap'}} size="xs" fw={500}>
                   {formattedDate(page.updatedAt)}
                 </Text>
               </Table.Td>
@@ -75,7 +75,7 @@ export default function RecentChanges({ spaceId }: Props) {
           ))}
         </Table.Tbody>
       </Table>
-    </ScrollArea>
+    </Table.ScrollContainer>
   ) : (
     <Text size="md" ta="center">
       No pages yet

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

@@ -1,18 +1,18 @@
-import { Group, Text } from "@mantine/core";
+import {Group, Text, Tooltip} from "@mantine/core";
 import classes from "./app-header.module.css";
 import React from "react";
 import TopMenu from "@/components/layouts/global/top-menu.tsx";
-import { Link } from "react-router-dom";
+import {Link} from "react-router-dom";
 import APP_ROUTE from "@/lib/app-route.ts";
-import { useAtom } from "jotai/index";
+import {useAtom} from "jotai/index";
 import {
   desktopSidebarAtom,
   mobileSidebarAtom,
 } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
-import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
+import {useToggleSidebar} from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
 import SidebarToggle from "@/components/ui/sidebar-toggle-button.tsx";
 
-const links = [{ link: APP_ROUTE.HOME, label: "Home" }];
+const links = [{link: APP_ROUTE.HOME, label: "Home"}];
 
 export function AppHeader() {
   const [mobileOpened] = useAtom(mobileSidebarAtom);
@@ -35,28 +35,33 @@ export function AppHeader() {
         <Group wrap="nowrap">
           {!isHomeRoute && (
             <>
-              <SidebarToggle
-                aria-label="sidebar toggle"
-                opened={mobileOpened}
-                onClick={toggleMobile}
-                hiddenFrom="sm"
-                size="sm"
-              />
+              <Tooltip label="Sidebar toggle">
 
-              <SidebarToggle
-                aria-label="sidebar toggle"
-                opened={desktopOpened}
-                onClick={toggleDesktop}
-                visibleFrom="sm"
-                size="sm"
-              />
+                <SidebarToggle
+                  aria-label="Sidebar toggle"
+                  opened={mobileOpened}
+                  onClick={toggleMobile}
+                  hiddenFrom="sm"
+                  size="sm"
+                />
+              </Tooltip>
+
+              <Tooltip label="Sidebar toggle">
+                <SidebarToggle
+                  aria-label="Sidebar toggle"
+                  opened={desktopOpened}
+                  onClick={toggleDesktop}
+                  visibleFrom="sm"
+                  size="sm"
+                />
+              </Tooltip>
             </>
           )}
 
           <Text
             size="lg"
             fw={600}
-            style={{ cursor: "pointer", userSelect: "none" }}
+            style={{cursor: "pointer", userSelect: "none"}}
             component={Link}
             to="/home"
           >
@@ -69,7 +74,7 @@ export function AppHeader() {
         </Group>
 
         <Group px={"xl"}>
-          <TopMenu />
+          <TopMenu/>
         </Group>
       </Group>
     </>

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

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