zeim839 · zeim839 · Jul 8, 2025 · Jun 14, 2025 · Jun 15, 2025 · Jun 15, 2025
diff --git a/app/globals.css b/app/globals.css
@@ -1,12 +1,40 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+:root {
+  --background: #DCE0E8;
+  --foreground: #000000;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
 
 body {
-    font-family: 'Iosevka Comfy', monospace;
-    background-color: rgba(245, 245, 245, 0.9);
-    width: 100%;
-    height: 100%;
+  font-family: 'Iosevka Comfy', monospace;
+  background: var(--background);
+  color: var(--foreground);
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
 }
 
 @font-face {
@@ -120,42 +148,3 @@ body {
     font-style: normal;
     font-display: swap;
 }
-
-@layer base {
-  :root {
-    --background: 0 0% 96.08%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 100%;
-    --primary-foreground: 0 0% 0%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,34 +1,12 @@
-import type { Metadata } from "next"
-import { DatabaseProvider } from "@/components/DatabaseProvider"
-import Navigation from "@/components/navigation/Navigation"
-import { Toaster } from "@/components/ui/sonner"
-import "./globals.css"
+"use client"
 
-export const metadata: Metadata = {
-  title: "NoteFeratu",
-  description: "NoteFeratu is a plain-text personal knowledge management system with LLM capabilities",
-}
+import "./globals.css"
 
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+export default function RootLayout({children}: Readonly<{children: React.ReactNode}>) {
   return (
     <html lang="en">
       <body>
-        <DatabaseProvider>
-          <Navigation>
-            {children}
-          </Navigation>
-        </DatabaseProvider>
-        <Toaster toastOptions={{
-          style: {
-            border: '2px solid black',
-            fontSize: '14px',
-          },
-          closeButton: true
-        }} />
+        {children}
       </body>
     </html>
   )

diff --git a/app/note/page.tsx b/app/note/page.tsx
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,11 +1,66 @@
 "use client"
 
-import Graph from "@/components/graph"
+import { Window, WindowProvider } from "@/components/window/window"
+import { Explorer } from "@/components/explorer/explorer"
+import { AgentPanel } from "@/components/agent/agentpanel"
+import { Button } from "@/components/core/button"
+import { BufferGroup } from "@/components/buffer/group"
+import { useState } from "react"
+
+import {
+  PanelLeftDashedIcon,
+  SettingsIcon,
+  MessageSquareTextIcon,
+  SearchIcon,
+  FolderSyncIcon,
+  CirclePlusIcon,
+} from "lucide-react"
 
 export default function Home() {
+  const [isLeftSidebarOpen, setLeftSidebarOpen] = useState<boolean>(false)
+  const [isRightSidebarOpen, setRightSidebarOpen] = useState<boolean>(false)
   return (
-    <div className="w-full h-full flex items-center justify-center">
-      <Graph />
-    </div>
+    <WindowProvider
+      isLeftSidebarOpen={isLeftSidebarOpen}
+      isRightSidebarOpen={isRightSidebarOpen}
+      setLeftSidebarOpen={setLeftSidebarOpen}
+      setRightSidebarOpen={setRightSidebarOpen}
+    >
+      <Window>
+        <Window.Titlebar>
+          <Window.Titlebar.ToolGroup>
+            <Button variant="ghost" size="icon" tooltip="File Explorer" onClick={() => setLeftSidebarOpen(!isLeftSidebarOpen)}>
+              <PanelLeftDashedIcon strokeWidth={1.6} />
+            </Button>
+            <Button variant="ghost" size="icon" tooltip="Cloud Sync">
+              <FolderSyncIcon strokeWidth={1.6} />
+            </Button>
+            <Button variant="ghost" size="icon" tooltip="Search & Command">
+              <SearchIcon strokeWidth={1.6} />
+            </Button>
+          </Window.Titlebar.ToolGroup>
+          <Window.Titlebar.ToolGroup>
+            <Button variant="ghost" size="icon" tooltip="New Document">
+              <CirclePlusIcon strokeWidth={1.6} />
+            </Button>
+            <Button variant="ghost" size="icon" tooltip="Agent Panel" onClick={() => setRightSidebarOpen(!isRightSidebarOpen)}>
+              <MessageSquareTextIcon strokeWidth={1.6} />
+            </Button>
+            <Button variant="ghost" size="icon" tooltip="Settings">
+              <SettingsIcon strokeWidth={1.6} />
+            </Button>
+          </Window.Titlebar.ToolGroup>
+        </Window.Titlebar>
+        <Window.LeftSidebar>
+          <Explorer />
+        </Window.LeftSidebar>
+        <Window.Content>
+          <BufferGroup />
+        </Window.Content>
+        <Window.RightSidebar>
+          <AgentPanel />
+        </Window.RightSidebar>
+      </Window>
+    </WindowProvider>
   )
 }
diff --git a/components.json b/components.json
diff --git a/components/DatabaseProvider.tsx b/components/DatabaseProvider.tsx
diff --git a/components/agent/agentpanel.tsx b/components/agent/agentpanel.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import * as React from "react"
+import { Sidebar } from "@/components/window/sidebar"
+import { Button } from "@/components/core/button"
+
+import {
+  ChevronDownIcon,
+  ZapIcon,
+  SlidersHorizontalIcon,
+  SendHorizontalIcon,
+  PaperclipIcon,
+  FileTextIcon,
+  PlusIcon,
+} from "lucide-react"
+
+function AgentPanel() {
+  return (
+    <div className="w-full min-w-[200px] h-full flex flex-col justify-between">
+      <Sidebar.Header className="flex flex-row justify-between items-center px-1">
+        <div className="flex flex-row items-center gap-1 pl-1">
+          <p className="text-xs">New Conversation</p>
+          <Button variant="ghost" size="icon">
+            <ChevronDownIcon strokeWidth={1.6} />
+          </Button>
+        </div>
+        <div className="flex flex-row">
+          <Button variant="ghost" size="icon" tooltip="LLM Capabilities">
+            <ZapIcon strokeWidth={1.6} />
+          </Button>
+          <Button variant="ghost" size="icon" tooltip="Model Configuration">
+            <SlidersHorizontalIcon strokeWidth={1.6} />
+          </Button>
+        </div>
+      </Sidebar.Header>
+      <div className="w-full h-[107px] bg-[#E5E9EF] outline outline-[#AEB3C0] grid grid-rows-[auto_32px]">
+        <div className="bg-[#EDF0F4] p-2 flex flex-col justify-between">
+          <p className="text-sm">Ask Anything</p>
+          <div className="flex flex-row justify-end">
+            <Button variant="ghost" size="icon">
+              <SendHorizontalIcon strokeWidth={1.6} />
+            </Button>
+          </div>
+        </div>
+        <div className="w-full bg-[#E5E9EF] outline outline-[#AEB3C0] flex flex-row">
+          <div className="w-[36px] h-full outline outline-[#AEB3C0] flex items-center justify-center px-1 hover:bg-[#DCE0E8]">
+            <PaperclipIcon strokeWidth={1.6} className="h-[17px]"/>
+            <PlusIcon strokeWidth={1.6} className="w-[14px]" />
+          </div>
+          <div className="h-full w-[120px] bg-[#EDF0F4] outline outline-[#AEB3C0] flex flex-row items-center">
+            <FileTextIcon strokeWidth={1.6} className="h-[14px]" />
+            <p className="text-xs text-light">CIS4301_hw2.md</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export { AgentPanel }