diff --git a/apps/desktop2/src/components/calendar.tsx b/apps/desktop2/src/components/calendar.tsx
deleted file mode 100644
index b06b155528..0000000000
--- a/apps/desktop2/src/components/calendar.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as persisted from "../tinybase/store/persisted";
-
-export function Calendar() {
- const events = persisted.UI.useSliceIds(persisted.INDEXES.eventsByMonth, persisted.STORE_ID);
-
- return (
-
-
{JSON.stringify(events, null, 2)}
-
- );
-}
diff --git a/apps/desktop2/src/components/main/left-sidebar.tsx b/apps/desktop2/src/components/main/left-sidebar.tsx
index 141515b2c4..74e548c29c 100644
--- a/apps/desktop2/src/components/main/left-sidebar.tsx
+++ b/apps/desktop2/src/components/main/left-sidebar.tsx
@@ -42,7 +42,11 @@ function TimelineView() {
return (
{allSessionIds?.map((sessionId) => (
-
+
))}
);
diff --git a/apps/desktop2/src/components/main/main-area.tsx b/apps/desktop2/src/components/main/main-area.tsx
index a457458238..d2cbc0c25b 100644
--- a/apps/desktop2/src/components/main/main-area.tsx
+++ b/apps/desktop2/src/components/main/main-area.tsx
@@ -1,24 +1,26 @@
import { useNavigate, useSearch } from "@tanstack/react-router";
import { clsx } from "clsx";
+import { addMonths, eachDayOfInterval, endOfMonth, format, getDay, startOfMonth } from "date-fns";
import {
- Building2Icon,
CalendarIcon,
+ ChevronLeftIcon,
+ ChevronRightIcon,
CogIcon,
PanelLeftOpenIcon,
PencilIcon,
StickyNoteIcon,
- UserIcon,
} from "lucide-react";
import { commands as windowsCommands } from "@hypr/plugin-windows";
import NoteEditor from "@hypr/tiptap/editor";
import { ChatPanelButton } from "@hypr/ui/components/block/chat-panel-button";
import TitleInput from "@hypr/ui/components/block/title-input";
+import { Button } from "@hypr/ui/components/ui/button";
import { ScrollArea, ScrollBar } from "@hypr/ui/components/ui/scroll-area";
import { useLeftSidebar, useRightPanel } from "@hypr/utils/contexts";
import { useTabs } from "../../hooks/useTabs";
import * as persisted from "../../tinybase/store/persisted";
-import { Tab } from "../../types";
+import { rowIdfromTab, Tab, uniqueIdfromTab } from "../../types";
export function MainContent({ tabs }: { tabs: Tab[] }) {
const activeTab = tabs.find((t) => t.active)!;
@@ -34,6 +36,8 @@ export function MainContent({ tabs }: { tabs: Tab[] }) {
export function MainHeader() {
const search = useSearch({ strict: false });
const navigate = useNavigate();
+
+ const { openNew } = useTabs();
const { isExpanded: isRightPanelExpanded, togglePanel: toggleRightPanel } = useRightPanel();
const { isExpanded: isLeftPanelExpanded, togglePanel: toggleLeftPanel } = useLeftSidebar();
@@ -77,6 +81,10 @@ export function MainHeader() {
onClick={handleClickNewNote}
className="cursor-pointer h-5 w-5 text-muted-foreground hover:text-foreground"
/>
+ openNew({ type: "calendars", month: new Date(), active: true })}
+ className="cursor-pointer h-5 w-5 text-muted-foreground hover:text-foreground"
+ />
- {tabs.map((tab) => (
-
- ))}
+ {tabs.map((tab) => )}
@@ -109,15 +109,66 @@ function TabsHeader({ tabs }: { tabs: Tab[] }) {
}
function TabItem(
- { tab, active, handleSelect, handleClose }: {
+ { tab, handleClose, handleSelect }: { tab: Tab; handleClose: (tab: Tab) => void; handleSelect: (tab: Tab) => void },
+) {
+ if (tab.type === "sessions") {
+ return ;
+ }
+
+ if (tab.type === "calendars") {
+ return ;
+ }
+
+ return null;
+}
+
+function TabItemNote(
+ { tab, handleClose, handleSelect }: {
tab: Tab;
- active: boolean;
+ handleClose: (tab: Tab) => void;
handleSelect: (tab: Tab) => void;
+ },
+) {
+ const title = persisted.UI.useCell("sessions", rowIdfromTab(tab), "title", persisted.STORE_ID);
+
+ return (
+ }
+ title={title ?? ""}
+ active={tab.active}
+ handleClose={() => handleClose(tab)}
+ handleSelect={() => handleSelect(tab)}
+ />
+ );
+}
+
+function TabItemCalendar(
+ { tab, handleClose, handleSelect }: {
+ tab: Tab;
handleClose: (tab: Tab) => void;
+ handleSelect: (tab: Tab) => void;
},
) {
- const title = persisted.UI.useCell("sessions", tab.id, "title", persisted.STORE_ID);
+ return (
+ }
+ title={"Calendar"}
+ active={tab.active}
+ handleClose={() => handleClose(tab)}
+ handleSelect={() => handleSelect(tab)}
+ />
+ );
+}
+function TabItemBase(
+ { icon, title, active, handleClose, handleSelect }: {
+ icon: React.ReactNode;
+ title: string;
+ active: boolean;
+ handleClose: () => void;
+ handleSelect: () => void;
+ },
+) {
return (
{active && (