new note button + daily note structure

apps/desktop2/src/components/main/body/daily.tsx

@@ -0,0 +1,67 @@
+import { format } from "date-fns";
+import { CalendarIcon, CheckSquare, Mail, Sun } from "lucide-react";
+
+import { type Tab } from "../../../store/zustand/tabs";
+import { type TabItem, TabItemBase } from "./shared";
+
+export const TabItemDaily: TabItem = ({ tab, handleClose, handleSelect }) => {
+  return (
+    <TabItemBase
+      icon={<Sun className="w-4 h-4" />}
+      title={tab.type === "daily" ? format(tab.date, "MMM d, yyyy") : "Daily Note"}
+      active={tab.active}
+      handleClose={() => handleClose(tab)}
+      handleSelect={() => handleSelect(tab)}
+    />
+  );
+};
+
+export function TabContentDaily({ tab }: { tab: Tab }) {
+  if (tab.type !== "daily") {
+    return null;
+  }
+
+  return (
+    <div className="h-full rounded-lg border bg-white p-6">
+      <h1 className="text-2xl font-semibold mb-6">{format(tab.date, "MMM d, yyyy")}</h1>
+
+      <div className="grid grid-cols-2 gap-6">
+        <div>
+          <h2 className="text-lg font-semibold mb-4">Task</h2>
+          <div className="space-y-2">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="flex items-center gap-2 p-2 hover:bg-neutral-50 rounded">
+                <CheckSquare className="w-4 h-4 text-neutral-400" />
+                <span className="text-sm">task {i}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <h2 className="text-lg font-semibold mb-4">Email</h2>
+          <div className="space-y-2">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="flex items-center gap-2 p-2 hover:bg-neutral-50 rounded">
+                <Mail className="w-4 h-4 text-neutral-400" />
+                <span className="text-sm">email {i}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="col-span-2">
+          <h2 className="text-lg font-semibold mb-4">Event</h2>
+          <div className="space-y-2">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="flex items-center gap-2 p-2 hover:bg-neutral-50 rounded">
+                <CalendarIcon className="w-4 h-4 text-neutral-400" />
+                <span className="text-sm">event {i}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/desktop2/src/components/main/body/index.tsx

@@ -7,6 +7,7 @@ import { type Tab, uniqueIdfromTab, useTabs } from "../../../store/zustand/tabs"
 import { useLeftSidebar } from "@hypr/utils/contexts";
 import { TabContentCalendar, TabItemCalendar } from "./calendars";
 import { TabContentContact, TabItemContact } from "./contacts";
+import { TabContentDaily, TabItemDaily } from "./daily";
 import { TabContentEvent, TabItemEvent } from "./events";
 import { TabContentFolder, TabItemFolder } from "./folders";
 import { TabContentHuman, TabItemHuman } from "./humans";
@@ -93,6 +94,9 @@ function TabItem(
   if (tab.type === "humans") {
     return <TabItemHuman tab={tab} handleClose={handleClose} handleSelect={handleSelect} />;
   }
+  if (tab.type === "daily") {
+    return <TabItemDaily tab={tab} handleClose={handleClose} handleSelect={handleSelect} />;
+  }
 
   if (tab.type === "calendars") {
     return <TabItemCalendar tab={tab} handleClose={handleClose} handleSelect={handleSelect} />;
@@ -117,6 +121,9 @@ function Content({ tab }: { tab: Tab }) {
   if (tab.type === "humans") {
     return <TabContentHuman tab={tab} />;
   }
+  if (tab.type === "daily") {
+    return <TabContentDaily tab={tab} />;
+  }
 
   if (tab.type === "calendars") {
     return <TabContentCalendar tab={tab} />;

apps/desktop2/src/components/main/body/shared.tsx

@@ -21,7 +21,7 @@ export function TabItemBase(
     <div
       onClick={handleSelect}
       className={clsx([
-        "flex items-center gap-2 cursor-pointer",
+        "flex items-center gap-2 cursor-pointer group",
         "min-w-[100px] max-w-[200px] h-full px-2",
         active
           ? "bg-background text-foreground rounded-lg border"
@@ -40,10 +40,10 @@ export function TabItemBase(
           handleClose();
         }}
         className={clsx([
-          "text-xs flex-shrink-0",
+          "text-xs flex-shrink-0 transition-opacity",
           active
             ? "text-muted-foreground hover:text-foreground"
-            : "opacity-0 pointer-events-none",
+            : "opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground",
         ])}
       >
         ✕

apps/desktop2/src/components/main/sidebar/index.tsx

@@ -2,6 +2,7 @@ import { clsx } from "clsx";
 import { PanelLeftCloseIcon } from "lucide-react";
 
 import { useLeftSidebar } from "@hypr/utils/contexts";
+import { NewNoteButton } from "./new-note-button";
 import { ProfileSection } from "./profile";
 import { TimelineView } from "./timeline";
 
@@ -27,6 +28,7 @@ export function LeftSidebar() {
       </header>
 
       <div className="flex flex-col flex-1 overflow-hidden p-1 gap-1">
+        <NewNoteButton />
         <TimelineView />
         <ProfileSection />
       </div>

apps/desktop2/src/components/main/sidebar/new-note-button.tsx

@@ -0,0 +1,34 @@
+import { PencilIcon } from "lucide-react";
+import { useCallback } from "react";
+
+import { Button } from "@hypr/ui/components/ui/button";
+import { cn } from "@hypr/ui/lib/utils";
+import { useTabs } from "../../../store/zustand/tabs";
+
+export function NewNoteButton() {
+  const { openNew } = useTabs();
+
+  const handleCreateNote = useCallback(() => {
+    openNew({
+      type: "sessions",
+      id: crypto.randomUUID(),
+      active: true,
+      state: { editor: "raw" },
+    });
+  }, [openNew]);
+
+  return (
+    <Button
+      className={cn(
+        "w-full",
+        "rounded-lg py-3",
+        "flex items-center justify-center gap-2",
+        "text-white bg-gray-900 hover:bg-gray-900/90",
+      )}
+      onClick={handleCreateNote}
+    >
+      <PencilIcon className="w-4 h-4" />
+      Create new note
+    </Button>
+  );
+}

apps/desktop2/src/components/main/sidebar/profile/index.tsx

@@ -65,9 +65,9 @@ export function ProfileSection() {
   }, [openNew, closeMenu]);
 
   const handleClickDailyNote = useCallback(() => {
-    console.log("Daily note");
+    openNew({ type: "daily", date: new Date(), active: true });
     closeMenu();
-  }, [closeMenu]);
+  }, [openNew, closeMenu]);
 
   const menuItems = [
     { icon: FolderOpen, label: "Folders", onClick: handleClickFolders },

apps/desktop2/src/store/zustand/tabs.ts

@@ -171,6 +171,10 @@ export const tabSchema = z.discriminatedUnion("type", [
     type: z.literal("calendars"),
     month: z.coerce.date(),
   }),
+  baseTabSchema.extend({
+    type: z.literal("daily"),
+    date: z.coerce.date(),
+  }),
 ]);
 
 export type Tab = z.infer<typeof tabSchema>;
@@ -187,6 +191,7 @@ export const rowIdfromTab = (tab: Tab): string => {
       return tab.id;
     case "calendars":
     case "contacts":
+    case "daily":
       throw new Error("invalid_resource");
     case "folders":
       if (!tab.id) {
@@ -210,6 +215,8 @@ export const uniqueIdfromTab = (tab: Tab): string => {
       return `calendars-${tab.month.getFullYear()}-${tab.month.getMonth()}`;
     case "contacts":
       return `contacts`;
+    case "daily":
+      return `daily-${tab.date.getFullYear()}-${tab.date.getMonth()}-${tab.date.getDate()}`;
     case "folders":
       return `folders-${tab.id ?? "all"}`;
   }