Add expand collapse in hero title

src/components/Dashboard/PersonalDashboard.tsx

@@ -122,13 +122,13 @@ function DashboardStats(props: DashboardStatsProps) {
           label="topics done today"
           isLoading={isLoading}
         />
-        <DashboardStatItem
+        {/* <DashboardStatItem
           icon={FolderGit2}
           iconClassName="text-blue-500"
           value={finishedProjectsCount}
           label="projects finished"
           isLoading={isLoading}
-        />
+        /> */}
       </div>
 
       <button

src/components/HeroSection/HeroItemsGroup.tsx

@@ -42,6 +42,7 @@ export function HeroItemsGroup(props: HeroItemsGroupProps) {
           isLoading={isLoading}
           title={title}
           rightContent={!isCollapsed && rightContent}
+          isCollapsed={isCollapsed}
         />
         {!isCollapsed && (
           <div className="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3">

src/components/HeroSection/HeroTitle.tsx

@@ -1,15 +1,24 @@
 import type { ReactNode } from 'react';
 import { Spinner } from '../ReactIcons/Spinner.tsx';
+import { ChevronDown, ChevronsDownUp, ChevronsUpDown } from 'lucide-react';
+import { cn } from '../../lib/classname.ts';
 
 type HeroTitleProps = {
   icon: any;
   isLoading?: boolean;
   title: string | ReactNode;
   rightContent?: ReactNode;
+  isCollapsed?: boolean;
 };
 
 export function HeroTitle(props: HeroTitleProps) {
-  const { isLoading = false, title, icon, rightContent } = props;
+  const {
+    isLoading = false,
+    title,
+    icon,
+    rightContent,
+    isCollapsed = false,
+  } = props;
 
   return (
     <div className="flex items-center justify-between">
@@ -21,6 +30,28 @@ export function HeroTitle(props: HeroTitleProps) {
           </span>
         )}
         {title}
+        {!isLoading && (
+          <button
+            className={cn(
+              'ml-2 inline-flex items-center gap-1 rounded-md bg-slate-800 py-0.5 pl-1 pr-1.5 text-xs uppercase tracking-wider text-slate-400 hover:bg-slate-700',
+              {
+                'bg-transparent text-slate-600 hover:bg-slate-800 hover:text-slate-400':
+                  !isCollapsed,
+              },
+            )}
+          >
+            {isCollapsed && (
+              <>
+                <ChevronsUpDown className="h-3.5 w-3.5" /> Expand
+              </>
+            )}
+            {!isCollapsed && (
+              <>
+                <ChevronsDownUp className="h-3.5 w-3.5" /> Collapse
+              </>
+            )}
+          </button>
+        )}
       </p>
       <div>{rightContent}</div>
     </div>