fix: UI improvements

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

@@ -5,26 +5,27 @@ import {
   Badge,
   Table,
   ActionIcon,
-} from '@mantine/core';
+} 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 PageListSkeleton from "@/components/ui/page-list-skeleton.tsx";
-import { buildPageUrl } from '@/features/page/page.utils.ts';
+import { buildPageUrl } from "@/features/page/page.utils.ts";
-import { formattedDate } from '@/lib/time.ts';
+import { formattedDate } from "@/lib/time.ts";
-import { useRecentChangesQuery } from '@/features/page/queries/page-query.ts';
+import { useRecentChangesQuery } from "@/features/page/queries/page-query.ts";
-import { IconFileDescription } from '@tabler/icons-react';
+import { IconFileDescription } from "@tabler/icons-react";
-import { getSpaceUrl } from '@/lib/config.ts';
+import { getSpaceUrl } from "@/lib/config.ts";
 import { useTranslation } from "react-i18next";
+import { getInitialsColor } from "@/lib/get-initials-color.ts";
 
 interface Props {
   spaceId?: string;
 }
 
-export default function RecentChanges({spaceId}: Props) {
+export default function RecentChanges({ spaceId }: Props) {
   const { t } = useTranslation();
-  const {data: pages, isLoading, isError} = useRecentChangesQuery(spaceId);
+  const { data: pages, isLoading, isError } = useRecentChangesQuery(spaceId);
 
   if (isLoading) {
-    return <PageListSkeleton/>;
+    return <PageListSkeleton />;
   }
 
   if (isError) {
@@ -44,8 +45,8 @@ export default function RecentChanges({spaceId}: Props) {
                 >
                   <Group wrap="nowrap">
                     {page.icon || (
-                      <ActionIcon variant='transparent' color='gray' size={18}>
+                      <ActionIcon variant="transparent" color="gray" size={18}>
-                        <IconFileDescription size={18}/>
+                        <IconFileDescription size={18} />
                       </ActionIcon>
                     )}
 
@@ -58,18 +59,23 @@ export default function RecentChanges({spaceId}: Props) {
               {!spaceId && (
                 <Table.Td>
                   <Badge
-                    color="blue"
+                    color={getInitialsColor(page?.space.name)}
                     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" style={{whiteSpace: 'nowrap'}} size="xs" fw={500}>
+                <Text
+                  c="dimmed"
+                  style={{ whiteSpace: "nowrap" }}
+                  size="xs"
+                  fw={500}
+                >
                   {formattedDate(page.updatedAt)}
                 </Text>
               </Table.Td>

apps/client/src/features/group/components/group-list.tsx

@@ -10,6 +10,7 @@ import Paginate from "@/components/common/paginate.tsx";
 import { queryClient } from "@/main.tsx";
 import { getSpaces } from "@/features/space/services/space-service.ts";
 import { getGroupMembers } from "@/features/group/services/group-service.ts";
+import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx";
 
 export default function GroupList() {
   const { t } = useTranslation();
@@ -51,9 +52,9 @@ export default function GroupList() {
                     <Group gap="sm" wrap="nowrap">
                       <IconGroupCircle />
                       <div style={{ minWidth: 0, overflow: "hidden" }}>
-                        <Text fz="sm" fw={500} lineClamp={1}>
+                        <AutoTooltipText fz="sm" fw={500} lineClamp={1}>
                           {group.name}
-                        </Text>
+                        </AutoTooltipText>
                         <Text fz="xs" c="dimmed" lineClamp={2}>
                           {group.description}
                         </Text>

apps/client/src/features/space/components/space-list.tsx

@@ -8,6 +8,7 @@ import { useTranslation } from "react-i18next";
 import Paginate from "@/components/common/paginate.tsx";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
+import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx";
 
 export default function SpaceList() {
   const { t } = useTranslation();
@@ -49,9 +50,9 @@ export default function SpaceList() {
                       name={space.name}
                     />
                     <div style={{ minWidth: 0, overflow: "hidden" }}>
-                      <Text fz="sm" fw={500} lineClamp={1}>
+                      <AutoTooltipText fz="sm" fw={500} lineClamp={1}>
                         {space.name}
-                      </Text>
+                      </AutoTooltipText>
                       <Text fz="xs" c="dimmed" lineClamp={2}>
                         {space.description}
                       </Text>

apps/client/src/features/space/components/space-members.tsx

@@ -27,6 +27,7 @@ import { useTranslation } from "react-i18next";
 import Paginate from "@/components/common/paginate.tsx";
 import { SearchInput } from "@/components/common/search-input.tsx";
 import { usePaginateAndSearch } from "@/hooks/use-paginate-and-search.tsx";
+import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx";
 
 type MemberType = "user" | "group";
 
@@ -138,10 +139,10 @@ export default function SpaceMembersList({
 
                       {member.type === "group" && <IconGroupCircle />}
 
-                      <div>
+                      <div style={{ minWidth: 0, overflow: "hidden", maxWidth: 260 }}>
-                        <Text fz="sm" fw={500} lineClamp={1}>
+                        <AutoTooltipText fz="sm" fw={500}>
                           {member?.name}
-                        </Text>
+                        </AutoTooltipText>
                         <Text fz="xs" c="dimmed">
                           {member.type == "user" && member?.email}
 

apps/client/src/features/space/components/spaces-page/all-spaces-list.tsx

@@ -23,6 +23,7 @@ import SpaceSettingsModal from "@/features/space/components/settings-modal";
 import classes from "./all-spaces-list.module.css";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
+import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx";
 
 interface AllSpacesListProps {
   spaces: any[];
@@ -96,10 +97,10 @@ export default function AllSpacesList({
                           variant="filled"
                           size="md"
                         />
-                        <div>
+                        <div style={{ minWidth: 0, overflow: "hidden", maxWidth: 350 }}>
-                          <Text fz="sm" fw={500} lineClamp={1}>
+                          <AutoTooltipText fz="sm" fw={500} lineClamp={1}>
                             {space.name}
-                          </Text>
+                          </AutoTooltipText>
                           {space.description && (
                             <Text fz="xs" c="dimmed" lineClamp={2}>
                               {space.description}

apps/client/src/lib/get-initials-color.ts

@@ -0,0 +1,34 @@
+import { MantineColor } from "@mantine/core";
+
+function hashCode(input: string) {
+  let hash = 0;
+  for (let i = 0; i < input.length; i += 1) {
+    const char = input.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash |= 0;
+  }
+  return hash;
+}
+
+const defaultColors: MantineColor[] = [
+  "blue",
+  "cyan",
+  "grape",
+  "green",
+  "indigo",
+  "lime",
+  "orange",
+  "pink",
+  "red",
+  "teal",
+  "violet",
+];
+
+export function getInitialsColor(
+  name: string,
+  colors: MantineColor[] = defaultColors,
+) {
+  const hash = hashCode(name);
+  const index = Math.abs(hash) % colors.length;
+  return colors[index];
+}