90: fix classroom card badge layout and add tooltips

packages/features.classroom/eslint.config.js

@@ -0,0 +1,3 @@
+import config from 'common.eslint';
+
+export default config;

packages/features.classroom/index.ts

@@ -0,0 +1 @@
+export { SubjectBadge } from './src';

packages/features.classroom/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "features.classroom",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    ".": "./index.ts"
+  },
+  "license": "MIT",
+  "scripts": {
+    "dev": "tsc --watch",
+    "lint": "eslint \"**/*.{ts,tsx}\""
+  },
+  "dependencies": {
+    "common.services": "*",
+    "@xipkg/badge": "2.0.12",
+    "@xipkg/utils": "1.8.0",
+    "@xipkg/tooltip": "2.1.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.19.0",
+    "@types/node": "^20.3.1",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@xipkg/eslint": "3.2.0",
+    "@xipkg/tailwind": "0.8.1",
+    "@xipkg/typescript": "latest",
+    "common.eslint": "*",
+    "common.typescript": "*",
+    "eslint": "^9.19.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.22.0"
+  },
+  "peerDependencies": {
+    "react": "19"
+  },
+  "description": "classroom features",
+  "author": "xi.effect"
+}

packages/features.classroom/src/index.ts

@@ -0,0 +1 @@
+export { SubjectBadge } from './ui';

packages/features.classroom/src/ui/SubjectBadge.tsx

@@ -0,0 +1,38 @@
+import { Badge } from '@xipkg/badge';
+import { cn } from '@xipkg/utils';
+import { useSubjectsById } from 'common.services';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@xipkg/tooltip';
+
+type SubjectBadgePropsT = {
+  subject_id: number;
+  className?: string;
+  textStyles?: string;
+  isTooltip?: boolean;
+};
+
+export const SubjectBadge = ({
+  subject_id,
+  className,
+  textStyles,
+  isTooltip = false,
+}: SubjectBadgePropsT) => {
+  const { data: subject } = useSubjectsById(subject_id);
+
+  const badgeContent = (
+    <Badge
+      size="m"
+      className={cn('text-gray-80 bg-gray-5 rounded-lg border-none px-2 py-1', className)}
+    >
+      <span className={textStyles}>{subject?.name}</span>
+    </Badge>
+  );
+
+  if (!isTooltip) return badgeContent;
+
+  return (
+    <Tooltip delayDuration={1000}>
+      <TooltipTrigger asChild>{badgeContent}</TooltipTrigger>
+      <TooltipContent>{subject?.name}</TooltipContent>
+    </Tooltip>
+  );
+};

packages/features.classroom/src/ui/index.ts

@@ -0,0 +1 @@
+export { SubjectBadge } from './SubjectBadge';

packages/features.classroom/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "include": ["src/**/*", "../common.services/src/payments/useGetRecipientInvoiceByTutor.ts"],
+  "extends": ["common.typescript/tsconfig.app.json"],
+  "exclude": ["dist", "build", "node_modules"]
+}

packages/pages.classrooms/package.json

@@ -32,7 +32,8 @@
     "features.group.add": "*",
     "features.invites": "*",
     "features.students.list": "*",
-    "features.table": "*"
+    "features.table": "*",
+    "features.classroom": "*"
   },
   "devDependencies": {
     "@eslint/js": "^9.19.0",

packages/pages.classrooms/src/ui/components/cards/Card.tsx

@@ -13,7 +13,7 @@ import { StatusBadge } from './StatusBadge';
 import { useCurrentUser, useDeleteClassroom, useUserByRole } from 'common.services';
 import { ClassroomPropsT } from '../../../types';
 import { useNavigate, useSearch } from '@tanstack/react-router';
-import { SubjectBadge } from './SubjectBadge';
+import { SubjectBadge } from 'features.classroom';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@xipkg/tooltip';
 import { Avatar, AvatarFallback, AvatarImage } from '@xipkg/avatar';
 
@@ -87,11 +87,18 @@ export const Card: React.FC<ClassroomPropsT & { deleted?: boolean }> = ({
       onClick={handleClick}
       className="hover:bg-gray-5 border-gray-30 bg-gray-0 relative flex cursor-pointer justify-between rounded-2xl border p-4"
     >
-      <div className="flex flex-col gap-4">
-        <div className="mt-auto mr-8 flex items-center gap-2">
+      <div className="flex max-w-full flex-col gap-4">
+        <div className="mt-auto mr-8 flex w-full max-w-[calc(100%-32px)] items-center gap-2">
           <StatusBadge status={status} kind={kind} deleted={deleted} />
 
-          {subject_id && <SubjectBadge subject_id={subject_id} />}
+          {subject_id && (
+            <SubjectBadge
+              subject_id={subject_id}
+              className="flex-1 overflow-hidden"
+              textStyles="truncate max-w-full"
+              isTooltip
+            />
+          )}
         </div>
         <div className="flex flex-row gap-2">
           {kind === 'individual' && (

packages/pages.classrooms/src/ui/components/grids/CardsGridTutor.tsx

@@ -35,7 +35,7 @@ export const CardsGridTutor = () => {
 
   return (
     <div ref={parentRef} className="h-[calc(100vh-204px)] w-full overflow-auto pr-4">
-      <div className="max-xs:gap-4 grid grid-cols-1 gap-8 min-[550px]:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(320px,1fr))] gap-8">
         {items.map((classroom) => (
           <div key={classroom.id} className="classroom-card">
             <Card {...classroom} />

packages/pages.main/package.json

@@ -35,6 +35,7 @@
     "features.group.add": "*",
     "features.materials.duplicate": "*",
     "features.invoice.card": "*",
+    "features.classroom": "*",
     "pages.classrooms": "*",
     "pages.materials": "*",
     "react-hook-form": "^7.55.0",

packages/pages.main/src/ui/components/Classrooms/Classroom.tsx

@@ -5,7 +5,7 @@ import { Arrow, Conference } from '@xipkg/icons';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@xipkg/tooltip';
 import { Avatar, AvatarFallback, AvatarImage } from '@xipkg/avatar';
 import { useCurrentUser, useUserByRole } from 'common.services';
-import { SubjectBadge } from './SubjectBadge';
+import { SubjectBadge } from 'features.classroom';
 
 type UserAvatarPropsT = {
   classroom: IndividualClassroomT;
@@ -85,7 +85,12 @@ export const Classroom = ({ classroom, isLoading }: ClassroomProps) => {
       </Tooltip>
 
       {classroom.subject_id ? (
-        <SubjectBadge subject_id={classroom.subject_id} />
+        <SubjectBadge
+          subject_id={classroom.subject_id}
+          isTooltip
+          className="max-w-[calc(100%-32px)] overflow-hidden"
+          textStyles="truncate max-w-full"
+        />
       ) : (
         <div className="h-7 w-7" />
       )}