chore: checkout

Author: tobySolutions

bun.lockb

@@ -9,8 +9,12 @@ export interface ThreadsListItemProps {
 
 const ThreadsListItem = (props: ThreadsListItemProps) => {
   return (
-    <div className="">
-      <p className="overflow-hidden whitespace-nowrap text-sm">{props.title}</p>
+    <div
+      className={`max-w-52 px-2 py-1 duration-200 hover:bg-gray-600/75 hover:text-white ${props.isActive && "bg-gray-600/75 text-white"}`}
+    >
+      <p className="overflow-hidden text-ellipsis whitespace-nowrap text-sm ">
+        {props.title}
+      </p>
     </div>
   );
 };

packages/app-akeru/src/app/(dashboard)/threads/features/thread-list/threads-list-item.tsx

@@ -1,24 +1,56 @@
-import React from "react";
+"use client";
+import React, { useState, useEffect } from "react";
 import { THREADS_LIST_MOCK_DATA } from "./test-data";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import ThreadsListItem from "./threads-list-item";
 import { Input } from "@/components/ui/input";
 import { Search } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
 
 const ThreadsList = () => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [activeId, setActiveId] = useState("");
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setTimeout(() => {
+        setIsLoading(false);
+      }, 2000);
+    };
+    fetchData();
+  }, []);
+
+  const handleSetActiveId = (id: string) => {
+    setActiveId(id);
+  };
+
+  const isActive = (id: string) => id === activeId;
+
   return (
     <div className="w-64 rounded-md bg-white p-4 shadow-md">
       <div className="mb-4 flex flex-col gap-2">
         <Input placeholder="Filter your threads..." startIcon={Search} />
       </div>
       <ScrollArea className="relative h-4/5 overflow-clip">
-        {/* This is just for the overflow gradient  */}
+        {/* This is just for the overflow gradient */}
         <div className="pointer-events-none absolute right-0 top-0 h-4/5 w-8 bg-gradient-to-r from-transparent to-white"></div>
-        {/* This is just for the overflow gradient  */}
+        {/* This is just for the overflow gradient */}
         <div className="flex flex-col gap-4">
-          {THREADS_LIST_MOCK_DATA.map((thread, key) => {
-            return <ThreadsListItem key={thread.title + key} {...thread} />;
-          })}
+          {isLoading
+            ? Array.from({ length: THREADS_LIST_MOCK_DATA.length }).map(
+                (_, idx) => <Skeleton key={idx} className="h-8" />,
+              )
+            : THREADS_LIST_MOCK_DATA.map((thread, key) => (
+                <div
+                  key={thread.title + key}
+                  onClick={() => handleSetActiveId(thread.title.toLowerCase())}
+                >
+                  <ThreadsListItem
+                    isActive={isActive(thread.title.toLowerCase())}
+                    {...thread}
+                  />
+                </div>
+              ))}
         </div>
       </ScrollArea>
     </div>