Merge branch 'main' of github.com:learn-anything/learn-anything

web/app/components/sidebar/partials/link-collection.tsx

@@ -10,11 +10,13 @@ export const LinkCollection: React.FC = () => {
       topicsWantToLearn: [],
       topicsLearning: [],
       topicsLearned: [],
+      tasks: [],
     },
   })
 
   const linkCount = me?.root.personalLinks?.length || 0
   const pageCount = me?.root.personalPages?.length || 0
+  const taskCount = me?.root.tasks?.length || 0
 
   const topicCount =
     (me?.root.topicsWantToLearn?.length || 0) +
@@ -26,6 +28,12 @@ export const LinkCollection: React.FC = () => {
       <NavItem to="/links" title="Links" icon="Link" count={linkCount} />
       <NavItem to="/topics" title="Topics" icon="Hash" count={topicCount} />
       <NavItem to="/pages" title="Pages" icon="Layers" count={pageCount} />
+      <NavItem
+        to="/tasks"
+        title="Tasks"
+        icon="BookOpenCheck"
+        count={taskCount}
+      />
     </div>
   )
 }

web/app/components/sidebar/partials/link-section.tsx

@@ -14,7 +14,7 @@ export const LinkSection: React.FC = () => {
   const linkCount = me.root.personalLinks?.length || 0
 
   return (
-    <div className="flex flex-col gap-px py-2">
+    <div className="flex flex-col gap-px">
       <LinkSectionHeader linkCount={linkCount} />
       <LinkList personalLinks={me.root.personalLinks} />
     </div>

web/app/components/sidebar/partials/task-section.tsx

@@ -59,9 +59,13 @@ export const TaskSection: React.FC = () => {
   }
 
   return (
-    <div className="group/tasks flex flex-col gap-px py-2">
-      <TaskSectionHeader title="Tasks" count={taskCount} />
+    <div className="group/tasks flex flex-col gap-px">
       <TaskSectionHeader
+        title="Tasks"
+        iconName="BookOpenCheck"
+        count={taskCount}
+      />
+      {/* <TaskSectionHeader
         title="Today"
         iconName="BookOpenCheck"
         filter="today"
@@ -72,7 +76,7 @@ export const TaskSection: React.FC = () => {
         iconName="History"
         filter="upcoming"
         count={upcomingTasks.length}
-      />
+      /> */}
     </div>
   )
 }
@@ -86,25 +90,24 @@ interface TaskSectionHeaderProps {
 
 const TaskSectionHeader: React.FC<TaskSectionHeaderProps> = ({
   title,
-  filter,
   count,
   iconName,
 }) => (
   <Link
     to="/tasks"
     className={cn(
-      "flex min-h-[30px] flex-1 items-center justify-start gap-px rounded-md px-2 py-1 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-0",
+      "flex min-h-[30px] flex-1 items-center justify-between gap-px rounded-md px-2 py-1 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-0",
     )}
-    search={{ filter }}
     activeProps={{
       className: "bg-accent text-accent-foreground",
     }}
   >
-    {iconName && <LaIcon className="size-13 shrink-0 pr-2" name={iconName} />}
-
-    <p className="text-sm">
-      {title}
-      {count > 0 && <span className="ml-1 text-muted-foreground">{count}</span>}
-    </p>
+    <div className="flex items-center">
+      {iconName && (
+        <LaIcon className="size-13 shrink-0 pr-2 opacity-50" name={iconName} />
+      )}
+      <p className="text-sm">{title}</p>
+    </div>
+    {count > 0 && <span className="text-muted-foreground">{count}</span>}
   </Link>
 )

web/app/components/sidebar/sidebar.tsx

@@ -129,12 +129,11 @@ const SidebarContent: React.FC = React.memo(() => {
       <div>
         <LogoAndSearch />
       </div>
-      <div className="relative mb-0.5 mt-1.5 flex grow flex-col overflow-y-auto rounded-md px-3 outline-none">
+      <div className="relative mt-1.5 flex grow flex-col overflow-y-auto rounded-md px-3 outline-none">
         <div className="h-2 shrink-0" />
         {me._type === "Account" && <LinkCollection />}
-        {/* {me._type === "Account" && <LinkSection />} */}
         {me._type === "Account" && <JournalSection />}
-        {me._type === "Account" && <TaskSection />}
+        {/* {me._type === "Account" && <TaskSection />} */}
         {me._type === "Account" && <PageSection />}
       </div>