Folder structure planning and app layout creation

packages/app-akeru/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

packages/app-akeru/package.json

@@ -10,7 +10,10 @@
   },
   "dependencies": {
     "@radix-ui/react-menubar": "^1.0.4",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -31,6 +34,8 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.3",
     "postcss": "^8",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.4.5"
   }

packages/app-akeru/src/app/(dashboard)/layout.tsx

@@ -1,10 +1,15 @@
-import React from 'react'
-import Header from '../components/header'
+import React from "react";
+import Header from "../features/app-header/header";
+import { Separator } from "@/components/ui/separator";
 
-const DashboardLayout = () => {
+const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <Header></Header>
-  )
-}
+    <div className="h-screen flex flex-col">
+      <Header />
+      <Separator orientation="horizontal" />
+      <div className="flex-grow overflow-scroll p-5">{children}</div>
+    </div>
+  );
+};
 
-export default DashboardLayout
+export default DashboardLayout;

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const AssistantsListItem = () => {
+  return (
+    <div>AssistantsListItem</div>
+  )
+}
+
+export default AssistantsListItem

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

@@ -0,0 +1,9 @@
+import React from "react";
+
+const AssistantsList = () => {
+  return <div className="w-96 rounded-md bg-white shadow-md p-4">
+
+  </div>;
+};
+
+export default AssistantsList;

packages/app-akeru/src/app/(dashboard)/threads/features/conversation-area/chat-display.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const ChatDisplay = () => {
+  return (
+    <div className="bg-slate-200 h-full rounded-lg"></div>
+  )
+}
+
+export default ChatDisplay

packages/app-akeru/src/app/(dashboard)/threads/features/conversation-area/chat-input.tsx

@@ -0,0 +1,11 @@
+import { Input } from '@/components/ui/input'
+import { Send } from 'lucide-react'
+import React from 'react'
+
+const ChatInput = () => {
+  return (
+    <Input placeholder={'Enter your message'} endIcon={Send}/>
+  )
+}
+
+export default ChatInput

packages/app-akeru/src/app/(dashboard)/threads/features/conversation-area/conversation-area.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import ChatInput from './chat-input'
+import ChatDisplay from './chat-display'
+
+const ConversationArea = () => {
+  return (
+    <div className="flex-grow h-full flex flex-col gap-4">
+      <ChatDisplay/>
+      <ChatInput/>
+    </div>
+  )
+}
+
+export default ConversationArea

packages/app-akeru/src/app/(dashboard)/threads/features/thread-list/test-data.ts

@@ -0,0 +1,44 @@
+import { ThreadsListItemProps } from "./threads-list-item";
+
+export const THREADS_LIST_MOCK_DATA: ThreadsListItemProps[] = [
+  {
+    title: "Understanding React Hooks",
+    description: "A deep dive into the use of hooks in React for state and lifecycle management.",
+    date: "2024-05-01"
+  },
+  {
+    title: "Announcing TypeScript 5.0",
+    description: "Explore the new features and improvements in the latest TypeScript release.",
+    date: "2024-04-15"
+  },
+  {
+    title: "Getting Started with Python",
+    description: "An introductory guide to programming in Python for beginners.",
+    date: "2024-03-20"
+  },
+  {
+    title: "AI Breakthrough in Natural Language Processing",
+    description: "How the latest advancements in AI are revolutionizing language understanding.",
+    date: "2024-02-10"
+  },
+  {
+    title: "Join the Annual Developer Conference",
+    description: "Meet and network with other developers at this year's conference. Keynotes, workshops, and more!",
+    date: "2024-06-05"
+  },
+  {
+    title: "Hiring Frontend Engineers",
+    description: "We are looking for talented frontend engineers to join our team. Apply now!",
+    date: "2024-05-20"
+  },
+  {
+    title: "Top 10 Books for Software Engineers",
+    description: "A curated list of must-read books for anyone in the software development field.",
+    date: "2024-01-30"
+  },
+  {
+    title: "Critical Security Patch Released",
+    description: "A new security patch has been released to address vulnerabilities in the system. Update immediately.",
+    date: "2024-04-05"
+  }
+];

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

@@ -0,0 +1,18 @@
+import React from "react";
+
+export interface ThreadsListItemProps {
+  title: string;
+  description: string;
+  date: string;
+  isActive?: boolean;
+}
+
+const ThreadsListItem = (props: ThreadsListItemProps) => {
+  return (
+    <div className="">
+      <p className="overflow-hidden whitespace-nowrap text-sm">{props.title}</p>
+    </div>
+  );
+};
+
+export default ThreadsListItem;