From fe997f3d4edc0fdfc3208c12ad5dddfd4f9f02e5 Mon Sep 17 00:00:00 2001
From: John Jeong <jeeheontransformers@gmail.com>
Date: Wed, 12 Mar 2025 16:51:57 +0900
Subject: [PATCH 01/10] made settings simpler

---
 apps/mobile/package.json         | 1 -
 apps/mobile/src/mock/settings.ts | 4 ++++
 pnpm-lock.yaml                   | 3 ---
 3 files changed, 4 insertions(+), 4 deletions(-)
 create mode 100644 apps/mobile/src/mock/settings.ts

diff --git a/apps/mobile/package.json b/apps/mobile/package.json
index feaa19de54..83a7a0d7f8 100644
--- a/apps/mobile/package.json
+++ b/apps/mobile/package.json
@@ -13,7 +13,6 @@
   "dependencies": {
     "@date-fns/tz": "^1.2.0",
     "@hookform/resolvers": "^3.10.0",
-    "@huggingface/languages": "^1.0.0",
     "@hypr/plugin-auth": "workspace:^",
     "@hypr/plugin-db": "workspace:^",
     "@hypr/plugin-listener": "workspace:^",
diff --git a/apps/mobile/src/mock/settings.ts b/apps/mobile/src/mock/settings.ts
new file mode 100644
index 0000000000..c9df53178e
--- /dev/null
+++ b/apps/mobile/src/mock/settings.ts
@@ -0,0 +1,4 @@
+export const mockUserSettings = {
+  alertEnhancingDone: true,
+  remindUpcomingEvents: false,
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 803dc4f99f..206cec649e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -461,9 +461,6 @@ importers:
       '@hookform/resolvers':
         specifier: ^3.10.0
         version: 3.10.0(react-hook-form@7.54.2(react@18.3.1))
-      '@huggingface/languages':
-        specifier: ^1.0.0
-        version: 1.0.0
       '@hypr/plugin-auth':
         specifier: workspace:^
         version: link:../../plugins/auth

From 47f1e2d186a940378e33f193d41b0f4dcee22854 Mon Sep 17 00:00:00 2001
From: John Jeong <jeeheontransformers@gmail.com>
Date: Wed, 12 Mar 2025 16:52:35 +0900
Subject: [PATCH 02/10] refactoring home

---
 apps/mobile/src/components/event-item.tsx | 31 +++++++++++++++++++++++
 apps/mobile/src/components/note-item.tsx  | 28 ++++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 apps/mobile/src/components/event-item.tsx
 create mode 100644 apps/mobile/src/components/note-item.tsx

diff --git a/apps/mobile/src/components/event-item.tsx b/apps/mobile/src/components/event-item.tsx
new file mode 100644
index 0000000000..c9cf5fa4a8
--- /dev/null
+++ b/apps/mobile/src/components/event-item.tsx
@@ -0,0 +1,31 @@
+import { useQuery } from "@tanstack/react-query";
+import { formatRemainingTime } from "../utils/date";
+
+import { commands as dbCommands, type Event } from "@hypr/plugin-db";
+
+export function EventItem({ event, onSelect }: { event: Event; onSelect: (sessionId: string) => void }) {
+  const session = useQuery({
+    queryKey: ["event-session", event.id],
+    queryFn: async () => dbCommands.getSession({ calendarEventId: event.id }),
+  });
+
+  const handleClick = () => {
+    if (session.data) {
+      onSelect(session.data.id);
+    }
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      className="w-full text-left group flex items-start gap-3 py-3 hover:bg-neutral-100 rounded-lg px-3 border border-neutral-200"
+    >
+      <div className="flex flex-col items-start gap-1">
+        <div className="font-medium text-sm line-clamp-1">{event.name}</div>
+        <div className="flex items-center gap-2 text-xs text-neutral-500 line-clamp-1">
+          <span>{formatRemainingTime(new Date(event.start_date))}</span>
+        </div>
+      </div>
+    </button>
+  );
+}
diff --git a/apps/mobile/src/components/note-item.tsx b/apps/mobile/src/components/note-item.tsx
new file mode 100644
index 0000000000..805d04ab6e
--- /dev/null
+++ b/apps/mobile/src/components/note-item.tsx
@@ -0,0 +1,28 @@
+import { type Session } from "@hypr/plugin-db";
+import { format } from "date-fns";
+
+export function NoteItem({
+  session,
+  onSelect,
+}: {
+  session: Session;
+  onSelect: () => void;
+}) {
+  const sessionDate = new Date(session.created_at);
+
+  return (
+    <button
+      onClick={onSelect}
+      className="hover:bg-neutral-100 group flex items-start gap-3 py-3 w-full text-left transition-all rounded-lg px-3 border border-neutral-200"
+    >
+      <div className="flex flex-col items-start gap-1">
+        <div className="font-medium text-sm line-clamp-1">
+          {session.title || "Untitled"}
+        </div>
+        <div className="flex items-center gap-2 text-xs text-neutral-500">
+          <span>{format(sessionDate, "M/d/yy")}</span>
+        </div>
+      </div>
+    </button>
+  );
+}

From 56f3563c0da7ebb9f7f874e7a128e31f05f634c9 Mon Sep 17 00:00:00 2001
From: John Jeong <jeeheontransformers@gmail.com>
Date: Wed, 12 Mar 2025 16:52:49 +0900
Subject: [PATCH 03/10] updated route config

---
 apps/mobile/src/stackflow.config.ts | 5 -----
 apps/mobile/src/stackflow.tsx       | 2 --
 2 files changed, 7 deletions(-)

diff --git a/apps/mobile/src/stackflow.config.ts b/apps/mobile/src/stackflow.config.ts
index ddcf03a66f..5280fa42b1 100644
--- a/apps/mobile/src/stackflow.config.ts
+++ b/apps/mobile/src/stackflow.config.ts
@@ -1,7 +1,6 @@
 import { defineConfig } from "@stackflow/config";
 import { homeActivityLoader } from "./views/home";
 import { noteActivityLoader } from "./views/note";
-import { profileActivityLoader } from "./views/profile";
 import { settingsActivityLoader } from "./views/settings";
 
 export const config = defineConfig({
@@ -22,10 +21,6 @@ export const config = defineConfig({
       name: "SettingsActivity",
       loader: settingsActivityLoader,
     },
-    {
-      name: "ProfileActivity",
-      loader: profileActivityLoader,
-    },
   ],
   initialActivity: () => "HomeActivity",
 });
diff --git a/apps/mobile/src/stackflow.tsx b/apps/mobile/src/stackflow.tsx
index 8073b2e2f2..7a5517f6a8 100644
--- a/apps/mobile/src/stackflow.tsx
+++ b/apps/mobile/src/stackflow.tsx
@@ -5,7 +5,6 @@ import { config } from "./stackflow.config";
 import { HomeActivity } from "./views/home";
 import { LoginActivity } from "./views/login";
 import { NoteActivity } from "./views/note";
-import { ProfileActivity } from "./views/profile";
 import { SettingsActivity } from "./views/settings";
 
 export const { Stack } = stackflow({
@@ -15,7 +14,6 @@ export const { Stack } = stackflow({
     NoteActivity,
     LoginActivity,
     SettingsActivity,
-    ProfileActivity,
   },
   plugins: [basicRendererPlugin(), basicUIPlugin({ theme: "cupertino" })],
 });

From f3f698107ce5d286f896349a00a1d1e8535d0bc9 Mon Sep 17 00:00:00 2001
From: John Jeong <jeeheontransformers@gmail.com>
Date: Wed, 12 Mar 2025 16:53:08 +0900
Subject: [PATCH 04/10] fix modal footer

---
 packages/ui/src/components/ui/modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/ui/modal.tsx b/packages/ui/src/components/ui/modal.tsx
index 3c8d74a7a5..d85a586ecc 100644
--- a/packages/ui/src/components/ui/modal.tsx
+++ b/packages/ui/src/components/ui/modal.tsx
@@ -104,7 +104,7 @@ export function ModalFooter({ children, className }: ModalFooterProps) {
   return (
     <div
       className={cn(
-        "flex items-center justify-end gap-2 border-t px-6 py-4",
+        "flex items-center justify-end gap-2 px-6 py-4",
         className,
       )}
     >

From 6d6def0d8f36d8645b9b79829c9f9daf7683d732 Mon Sep 17 00:00:00 2001
From: John Jeong <jeeheontransformers@gmail.com>
Date: Wed, 12 Mar 2025 16:53:35 +0900
Subject: [PATCH 05/10] chores

---
 apps/mobile/src/components/bottom-sheet.tsx |  99 ++++++++
 apps/mobile/src/main.tsx                    |   5 +-
 apps/mobile/src/mock/home.ts                | 146 ++++++++++++
 apps/mobile/src/mock/index.ts               |   2 +
 apps/mobile/src/utils/date.ts               |   2 +-
 apps/mobile/src/views/home.tsx              | 146 +++---------
 apps/mobile/src/views/profile.tsx           | 242 -------------------
 apps/mobile/src/views/settings.tsx          | 248 ++++++++------------
 apps/mobile/tailwind.config.ts              |  30 ++-
 9 files changed, 418 insertions(+), 502 deletions(-)
 create mode 100644 apps/mobile/src/components/bottom-sheet.tsx
 create mode 100644 apps/mobile/src/mock/home.ts
 create mode 100644 apps/mobile/src/mock/index.ts
 delete mode 100644 apps/mobile/src/views/profile.tsx

diff --git a/apps/mobile/src/components/bottom-sheet.tsx b/apps/mobile/src/components/bottom-sheet.tsx
new file mode 100644
index 0000000000..2d310562da
--- /dev/null
+++ b/apps/mobile/src/components/bottom-sheet.tsx
@@ -0,0 +1,99 @@
+import * as React from "react";
+import { cn } from "@hypr/ui/lib/utils";
+
+interface BottomSheetProps {
+  open: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  className?: string;
+  preventClose?: boolean;
+}
+
+export function BottomSheet({
+  open,
+  onClose,
+  children,
+  className,
+  preventClose = false,
+}: BottomSheetProps) {
+  React.useEffect(() => {
+    const handleEscapeKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && open && !preventClose) {
+        event.preventDefault();
+        onClose();
+      }
+    };
+
+    if (open) {
+      document.addEventListener("keydown", handleEscapeKey, true);
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleEscapeKey, true);
+    };
+  }, [open, preventClose, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <>
+      <div
+        className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm"
+        aria-hidden="true"
+        onClick={preventClose ? undefined : onClose}
+      />
+      <div
+        role="dialog"
+        aria-modal="true"
+        className={cn(
+          "fixed bottom-0 left-0 right-0 z-50",
+          "rounded-t-lg bg-neutral-800 shadow-lg",
+          "animate-in slide-in-from-bottom duration-300",
+          className
+        )}
+      >
+        <div className="flex justify-center pt-2 pb-1">
+          <div className="h-1 w-10 rounded-full bg-neutral-600" />
+        </div>
+        {children}
+      </div>
+    </>
+  );
+}
+
+interface BottomSheetContentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function BottomSheetContent({ 
+  children, 
+  className 
+}: BottomSheetContentProps) {
+  return (
+    <div className={cn("p-4", className)}>
+      {children}
+    </div>
+  );
+}
+
+interface BottomSheetTriggerProps {
+  children: React.ReactNode;
+  onClick: () => void;
+  className?: string;
+}
+
+export function BottomSheetTrigger({ 
+  children, 
+  onClick,
+  className 
+}: BottomSheetTriggerProps) {
+  return (
+    <div 
+      onClick={onClick}
+      className={cn("cursor-pointer", className)}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/apps/mobile/src/main.tsx b/apps/mobile/src/main.tsx
index c390231917..53fda1ab46 100644
--- a/apps/mobile/src/main.tsx
+++ b/apps/mobile/src/main.tsx
@@ -5,7 +5,6 @@ import "./styles/globals.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { StrictMode, Suspense } from "react";
 import ReactDOM from "react-dom/client";
-import { HyprProvider } from "./contexts/hypr";
 import { Stack } from "./stackflow";
 
 const queryClient = new QueryClient();
@@ -17,9 +16,7 @@ if (!rootElement.innerHTML) {
     <StrictMode>
       <QueryClientProvider client={queryClient}>
         <Suspense>
-          <HyprProvider>
-            <Stack />
-          </HyprProvider>
+          <Stack />
         </Suspense>
       </QueryClientProvider>
     </StrictMode>,
diff --git a/apps/mobile/src/mock/home.ts b/apps/mobile/src/mock/home.ts
new file mode 100644
index 0000000000..7acb052a82
--- /dev/null
+++ b/apps/mobile/src/mock/home.ts
@@ -0,0 +1,146 @@
+import type { Event, Session } from "@hypr/plugin-db";
+
+export const mockSessions: Session[] = [
+  {
+    id: "session-1",
+    created_at: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(),
+    visited_at: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000 + 75 * 60 * 1000).toISOString(),
+    user_id: "user-123",
+    calendar_event_id: "event-456",
+    title: "Weekly Team Standup",
+    audio_local_path: "/recordings/session-1.mp3",
+    audio_remote_path: "https://storage.hyprnote.com/user-123/recordings/session-1.mp3",
+    raw_memo_html: "<p>Discussed project timeline updates and resource allocation.</p>",
+    enhanced_memo_html:
+      "<h2>Weekly Team Standup</h2><p>Discussed project timeline updates and resource allocation.</p><ul><li>Frontend milestones delayed by 2 days</li><li>Backend on track</li><li>Need to onboard new designer by next week</li></ul>",
+    conversations: [],
+  },
+  {
+    id: "session-2",
+    created_at: new Date(Date.now() - 21 * 24 * 60 * 60 * 1000).toISOString(),
+    visited_at: new Date(Date.now() - 21 * 24 * 60 * 60 * 1000 + 90 * 60 * 1000).toISOString(),
+    user_id: "user-123",
+    calendar_event_id: null,
+    title: "Product Strategy Brainstorm",
+    audio_local_path: "/recordings/session-2.mp3",
+    audio_remote_path: null,
+    raw_memo_html: "<p>Brainstormed new feature ideas for Q3.</p>",
+    enhanced_memo_html:
+      "<h2>Product Strategy Brainstorm</h2><p>Brainstormed new feature ideas for Q3.</p><ul><li>Voice memo transcription</li><li>Calendar integration</li><li>AI summary generation</li></ul>",
+    conversations: [],
+  },
+  {
+    id: "session-3",
+    created_at: new Date(Date.now() - 14 * 24 * 60 * 60 * 1000).toISOString(),
+    visited_at: new Date(Date.now() - 14 * 24 * 60 * 60 * 1000 + 45 * 60 * 1000).toISOString(),
+    user_id: "user-123",
+    calendar_event_id: "event-789",
+    title: "1:1 with Manager",
+    audio_local_path: "/recordings/session-3.mp3",
+    audio_remote_path: "https://storage.hyprnote.com/user-123/recordings/session-3.mp3",
+    raw_memo_html: "<p>Quarterly review prep and career development discussion.</p>",
+    enhanced_memo_html:
+      "<h2>1:1 with Manager</h2><p>Quarterly review prep and career development discussion.</p><h3>Action Items:</h3><ul><li>Update portfolio with recent projects</li><li>Review Q2 OKRs</li><li>Schedule training for new tech stack</li></ul>",
+    conversations: [],
+  },
+  {
+    id: "session-4",
+    created_at: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
+    visited_at: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000 + 75 * 60 * 1000).toISOString(),
+    user_id: "user-123",
+    calendar_event_id: null,
+    title: "Design System Planning",
+    audio_local_path: "/recordings/session-4.mp3",
+    audio_remote_path: "https://storage.hyprnote.com/user-123/recordings/session-4.mp3",
+    raw_memo_html: "<p>Initial planning for unified design system.</p>",
+    enhanced_memo_html:
+      "<h2>Design System Planning</h2><p>Initial planning for unified design system.</p><ul><li>Component inventory needed</li><li>Color palette standardization</li><li>Typography review</li></ul>",
+    conversations: [],
+  },
+  {
+    id: "session-5",
+    created_at: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
+    visited_at: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000 + 75 * 60 * 1000).toISOString(),
+    user_id: "user-123",
+    calendar_event_id: "event-012",
+    title: "Client Presentation Prep",
+    audio_local_path: "/recordings/session-5.mp3",
+    audio_remote_path: null,
+    raw_memo_html: "<p>Outline for upcoming client presentation.</p>",
+    enhanced_memo_html:
+      "<h2>Client Presentation Prep</h2><p>Outline for upcoming client presentation.</p><ol><li>Project overview</li><li>Timeline updates</li><li>Budget considerations</li><li>Next steps</li></ol>",
+    conversations: [],
+  },
+  {
+    id: "session-6",
+    created_at: new Date().toISOString(),
+    visited_at: new Date(Date.now() + 60 * 60 * 1000).toISOString(),
+    user_id: "user-123",
+    calendar_event_id: "event-345",
+    title: "Weekly Status Update",
+    audio_local_path: "/recordings/session-6.mp3",
+    audio_remote_path: null,
+    raw_memo_html: "<p>Weekly progress report with team members.</p>",
+    enhanced_memo_html:
+      "<h2>Weekly Status Update</h2><p>Weekly progress report with team members.</p><ul><li>Completed API integration</li><li>Started user testing</li><li>Identified performance bottlenecks</li></ul>",
+    conversations: [],
+  },
+];
+
+export const mockEvents: Event[] = [
+  {
+    id: "event-future-1",
+    user_id: "user-123",
+    tracking_id: "track-123",
+    calendar_id: "cal-123",
+    name: "Quarterly Planning Meeting",
+    note: "Prepare Q3 roadmap discussion points",
+    start_date: new Date(Date.now() + 86400000).toISOString(),
+    end_date: new Date(Date.now() + 86400000 + 3600000).toISOString(),
+    google_event_url: "https://calendar.google.com/event?id=abc123",
+  },
+  {
+    id: "event-future-2",
+    user_id: "user-123",
+    tracking_id: "track-456",
+    calendar_id: "cal-123",
+    name: "Product Demo with Sales Team",
+    note: "Show latest feature updates",
+    start_date: new Date(Date.now() + 172800000).toISOString(),
+    end_date: new Date(Date.now() + 172800000 + 5400000).toISOString(),
+    google_event_url: "https://calendar.google.com/event?id=def456",
+  },
+  {
+    id: "event-future-3",
+    user_id: "user-123",
+    tracking_id: "track-789",
+    calendar_id: "cal-123",
+    name: "Weekly Team Standup",
+    note: "Regular team sync",
+    start_date: new Date(Date.now() + 259200000).toISOString(),
+    end_date: new Date(Date.now() + 259200000 + 1800000).toISOString(),
+    google_event_url: "https://calendar.google.com/event?id=ghi789",
+  },
+  {
+    id: "event-future-4",
+    user_id: "user-123",
+    tracking_id: "track-012",
+    calendar_id: "cal-123",
+    name: "1:1 with Manager",
+    note: "Quarterly review prep",
+    start_date: new Date(Date.now() + 345600000).toISOString(),
+    end_date: new Date(Date.now() + 345600000 + 2700000).toISOString(),
+    google_event_url: "https://calendar.google.com/event?id=jkl012",
+  },
+  {
+    id: "event-future-5",
+    user_id: "user-123",
+    tracking_id: "track-345",
+    calendar_id: "cal-123",
+    name: "Client Presentation Prep",
+    note: "Finalize slides",
+    start_date: new Date(Date.now() + 432000000).toISOString(),
+    end_date: new Date(Date.now() + 432000000 + 3600000).toISOString(),
+    google_event_url: null,
+  },
+];
diff --git a/apps/mobile/src/mock/index.ts b/apps/mobile/src/mock/index.ts
new file mode 100644
index 0000000000..cd80bc5e97
--- /dev/null
+++ b/apps/mobile/src/mock/index.ts
@@ -0,0 +1,2 @@
+export * from "./home";
+export * from "./settings";
diff --git a/apps/mobile/src/utils/date.ts b/apps/mobile/src/utils/date.ts
index 22c912a23c..33cc86ae7a 100644
--- a/apps/mobile/src/utils/date.ts
+++ b/apps/mobile/src/utils/date.ts
@@ -63,7 +63,7 @@ export function formatRemainingTime(date: Date): string {
   }
 }
 
-export function groupSessionsByDate(sessions: Session[]): GroupedSessions {
+export function groupNotesByDate(sessions: Session[]): GroupedSessions {
   return sessions.reduce<GroupedSessions>((groups, session) => {
     const date = new Date(session.created_at);
     const dateKey = format(date, "yyyy-MM-dd");
diff --git a/apps/mobile/src/views/home.tsx b/apps/mobile/src/views/home.tsx
index 1445d536b7..5151fc230f 100644
--- a/apps/mobile/src/views/home.tsx
+++ b/apps/mobile/src/views/home.tsx
@@ -1,41 +1,29 @@
 import type { ActivityLoaderArgs } from "@stackflow/config";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
-import { ActivityComponentType, useFlow } from "@stackflow/react/future";
-import { useQuery } from "@tanstack/react-query";
-import { format, isFuture } from "date-fns";
-import { CalendarIcon, Settings } from "lucide-react";
-import { useHypr } from "../contexts/hypr";
-import { formatDateHeader, formatRemainingTime, getSortedDates, groupSessionsByDate } from "../utils/date";
-
-import { commands as dbCommands, type Event, type Session } from "@hypr/plugin-db";
-import { Avatar, AvatarFallback, AvatarImage } from "@hypr/ui/components/ui/avatar";
+import { ActivityComponentType, useFlow, useLoaderData } from "@stackflow/react/future";
+import { AudioLinesIcon, CalendarIcon, MicIcon, Settings, SquarePenIcon } from "lucide-react";
+
+import { EventItem } from "../components/event-item";
+import { NoteItem } from "../components/note-item";
+import { mockEvents, mockSessions } from "../mock";
+import { formatDateHeader, getSortedDates, groupNotesByDate } from "../utils/date";
+
+import { type Session } from "@hypr/plugin-db";
 import { Button } from "@hypr/ui/components/ui/button";
 
 export function homeActivityLoader({}: ActivityLoaderArgs<"HomeActivity">) {
-  return {};
+  return {
+    upcomingEvents: mockEvents,
+    notes: mockSessions,
+  };
 }
 
 export const HomeActivity: ActivityComponentType<"HomeActivity"> = () => {
-  const { userId } = useHypr();
+  const { upcomingEvents, notes } = useLoaderData<typeof homeActivityLoader>();
+
   const { push } = useFlow();
 
-  const events = useQuery({
-    queryKey: ["events"],
-    queryFn: async () => {
-      const events = await dbCommands.listEvents(userId);
-      const upcomingEvents = events.filter((event) => {
-        return isFuture(new Date(event.start_date));
-      });
-      return upcomingEvents;
-    },
-  });
-
-  const sessions = useQuery({
-    queryKey: ["sessions"],
-    queryFn: () => dbCommands.listSessions(null),
-  });
-
-  const groupedSessions = groupSessionsByDate(sessions.data ?? []);
+  const groupedSessions = groupNotesByDate(notes ?? []);
   const sortedDates = getSortedDates(groupedSessions);
 
   const handleClickNote = (id: string) => {
@@ -46,23 +34,10 @@ export const HomeActivity: ActivityComponentType<"HomeActivity"> = () => {
     push("NoteActivity", { id: "new" });
   };
 
-  const handleClickProfile = () => {
-    push("ProfileActivity", {});
-  };
-
   const handleClickSettings = () => {
     push("SettingsActivity", {});
   };
 
-  const LeftButton = () => (
-    <button onClick={handleClickProfile}>
-      <Avatar className="size-7 border text-sm font-medium">
-        <AvatarImage src="/path-to-user-profile-image.jpg" alt="User profile" />
-        <AvatarFallback>J</AvatarFallback>
-      </Avatar>
-    </button>
-  );
-
   const RightButton = () => (
     <button onClick={handleClickSettings}>
       <Settings size={20} />
@@ -73,13 +48,12 @@ export const HomeActivity: ActivityComponentType<"HomeActivity"> = () => {
     <AppScreen
       appBar={{
         title: "All Notes",
-        renderLeft: LeftButton,
         renderRight: RightButton,
       }}
     >
       <div className="relative flex h-full flex-col">
         <div className="flex-1 overflow-y-auto px-4 pb-20">
-          {events.data && events.data.length > 0 && (
+          {upcomingEvents && upcomingEvents.length > 0 && (
             <section className="mt-4 mb-6">
               <h2 className="font-medium text-neutral-600 mb-3 flex items-center gap-2">
                 <CalendarIcon className="size-4" />
@@ -87,7 +61,7 @@ export const HomeActivity: ActivityComponentType<"HomeActivity"> = () => {
               </h2>
 
               <div className="space-y-2">
-                {events.data.map((event) => (
+                {upcomingEvents.map((event) => (
                   <EventItem
                     key={event.id}
                     event={event}
@@ -109,7 +83,7 @@ export const HomeActivity: ActivityComponentType<"HomeActivity"> = () => {
 
                 <div className="space-y-2">
                   {sessions.map((session: Session) => (
-                    <SessionItem
+                    <NoteItem
                       key={session.id}
                       session={session}
                       onSelect={() => handleClickNote(session.id)}
@@ -120,13 +94,7 @@ export const HomeActivity: ActivityComponentType<"HomeActivity"> = () => {
             );
           })}
 
-          {sessions.isLoading && (
-            <div className="flex justify-center items-center h-32">
-              <p className="text-neutral-500">Loading notes...</p>
-            </div>
-          )}
-
-          {sessions.data && sessions.data.length === 0 && !sessions.isLoading && (
+          {notes && notes.length === 0 && (
             <div className="flex flex-col justify-center items-center h-64">
               <p className="text-neutral-500 mb-4">No notes yet</p>
               <Button onClick={handleClickNew}>Create your first note</Button>
@@ -134,67 +102,31 @@ export const HomeActivity: ActivityComponentType<"HomeActivity"> = () => {
           )}
         </div>
 
-        <div className="absolute z-10 bottom-0 left-0 right-0 flex justify-center p-4 bg-white border-t border-gray-200">
-          <Button className="w-full" onClick={handleClickNew}>New note</Button>
+        <div
+          className="absolute z-10 bottom-0 left-0 right-0 flex justify-center px-4 pb-4"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Sheet>
+            <SheetTrigger asChild>
+              <Button className="w-full py-3 text-lg font-semibold">
+                <SquarePenIcon size={20} />Create new note
+              </Button>
+            </SheetTrigger>
+            <SheetContent className="flex gap-2 max-h-60">
+              <Button className="aspect-square w-full flex-col gap-1" variant="outline">
+                <AudioLinesIcon size={32} />
+              </Button>
+              <Button className="aspect-square w-full flex-col gap-1">
+                <MicIcon size={32} />
+              </Button>
+            </SheetContent>
+          </Sheet>
         </div>
       </div>
     </AppScreen>
   );
 };
 
-function EventItem({ event, onSelect }: { event: Event; onSelect: (sessionId: string) => void }) {
-  const session = useQuery({
-    queryKey: ["event-session", event.id],
-    queryFn: async () => dbCommands.getSession({ calendarEventId: event.id }),
-  });
-
-  const handleClick = () => {
-    if (session.data) {
-      onSelect(session.data.id);
-    }
-  };
-
-  return (
-    <button
-      onClick={handleClick}
-      className="w-full text-left group flex items-start gap-3 py-3 hover:bg-neutral-100 rounded-lg px-3 border border-neutral-200"
-    >
-      <div className="flex flex-col items-start gap-1">
-        <div className="font-medium text-sm line-clamp-1">{event.name}</div>
-        <div className="flex items-center gap-2 text-xs text-neutral-500 line-clamp-1">
-          <span>{formatRemainingTime(new Date(event.start_date))}</span>
-        </div>
-      </div>
-    </button>
-  );
-}
-
-function SessionItem({
-  session,
-  onSelect,
-}: {
-  session: Session;
-  onSelect: () => void;
-}) {
-  const sessionDate = new Date(session.created_at);
-
-  return (
-    <button
-      onClick={onSelect}
-      className="hover:bg-neutral-100 group flex items-start gap-3 py-3 w-full text-left transition-all rounded-lg px-3 border border-neutral-200"
-    >
-      <div className="flex flex-col items-start gap-1">
-        <div className="font-medium text-sm line-clamp-1">
-          {session.title || "Untitled"}
-        </div>
-        <div className="flex items-center gap-2 text-xs text-neutral-500">
-          <span>{format(sessionDate, "M/d/yy")}</span>
-        </div>
-      </div>
-    </button>
-  );
-}
-
 declare module "@stackflow/config" {
   interface Register {
     HomeActivity: {};
diff --git a/apps/mobile/src/views/profile.tsx b/apps/mobile/src/views/profile.tsx
deleted file mode 100644
index 12a7f726d9..0000000000
--- a/apps/mobile/src/views/profile.tsx
+++ /dev/null
@@ -1,242 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import type { ActivityLoaderArgs } from "@stackflow/config";
-import { AppScreen } from "@stackflow/plugin-basic-ui";
-import { ActivityComponentType } from "@stackflow/react/future";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-
-import { commands as dbCommands, type Human, type Organization } from "@hypr/plugin-db";
-import { Avatar, AvatarFallback, AvatarImage } from "@hypr/ui/components/ui/avatar";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@hypr/ui/components/ui/form";
-import { Input } from "@hypr/ui/components/ui/input";
-import { Textarea } from "@hypr/ui/components/ui/textarea";
-
-const schema = z.object({
-  fullName: z.string().min(2).max(50).optional(),
-  jobTitle: z.string().min(2).max(50).optional(),
-  companyName: z.string().min(2).max(50),
-  companyDescription: z.string().min(2).max(500).optional(),
-  linkedinUserName: z.string().min(2).max(50).optional(),
-});
-
-type Schema = z.infer<typeof schema>;
-
-type ConfigData = {
-  human: Human | null;
-  organization: Organization;
-};
-
-export function profileActivityLoader({}: ActivityLoaderArgs<"ProfileActivity">) {
-  return {};
-}
-
-export const ProfileActivity: ActivityComponentType<"ProfileActivity"> = () => {
-  const queryClient = useQueryClient();
-
-  const config = useQuery<ConfigData>({
-    queryKey: ["config", "profile"],
-    queryFn: async () => {
-      const [human, organization] = await Promise.all([
-        dbCommands.getSelfHuman(),
-        dbCommands.getSelfOrganization(),
-      ]);
-      return { human, organization };
-    },
-  });
-
-  const form = useForm<Schema>({
-    resolver: zodResolver(schema),
-    defaultValues: {
-      fullName: config.data?.human?.full_name ?? undefined,
-      jobTitle: config.data?.human?.job_title ?? undefined,
-      companyName: config.data?.organization.name ?? undefined,
-      companyDescription: config.data?.organization.description ?? undefined,
-      linkedinUserName: config.data?.human?.linkedin_username ?? undefined,
-    },
-  });
-
-  const mutation = useMutation({
-    mutationFn: async (v: Schema) => {
-      if (!config.data) {
-        console.error("cannot mutate profile because it is not loaded");
-        return;
-      }
-
-      const newHuman: Human = {
-        ...config.data.human!,
-        full_name: v.fullName ?? null,
-        job_title: v.jobTitle ?? null,
-        email: config.data.human?.email ?? null,
-        linkedin_username: v.linkedinUserName ?? null,
-      };
-
-      const newOrganization: Organization = {
-        ...config.data.organization,
-        name: v.companyName,
-        description: v.companyDescription ?? null,
-      };
-
-      try {
-        await dbCommands.upsertHuman(newHuman);
-        await dbCommands.upsertOrganization(newOrganization);
-      } catch (error) {
-        console.error("error upserting human or organization", error);
-      }
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["config", "profile"] });
-    },
-  });
-
-  useEffect(() => {
-    const subscription = form.watch(() => form.handleSubmit((v) => mutation.mutate(v))());
-    return () => subscription.unsubscribe();
-  }, [mutation]);
-
-  const getInitials = () => {
-    const name = config.data?.human?.full_name ?? "";
-    if (!name) return "?";
-    return name.split(" ").map(part => part[0]?.toUpperCase() || "").join("").slice(0, 2);
-  };
-
-  return (
-    <AppScreen
-      appBar={{
-        title: "Profile",
-      }}
-    >
-      <div className="h-full overflow-y-auto w-full flex flex-col items-center py-6 px-4">
-        <Avatar className="size-24 border text-2xl font-medium mb-6">
-          <AvatarImage src="" alt="User profile" />
-          <AvatarFallback>{getInitials()}</AvatarFallback>
-        </Avatar>
-
-        {config.isLoading ? <div className="w-full text-center">Loading profile data...</div> : (
-          <Form {...form}>
-            <form className="w-full flex flex-col gap-6">
-              <FormField
-                control={form.control}
-                name="fullName"
-                render={({ field }) => (
-                  <FormItem className="w-full">
-                    <FormLabel>Full Name</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder="Your Name"
-                        {...field}
-                        className="focus-visible:ring-0 focus-visible:ring-offset-0"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="jobTitle"
-                render={({ field }) => (
-                  <FormItem className="w-full">
-                    <FormLabel>Job Title</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder="Your Job Title"
-                        {...field}
-                        className="focus-visible:ring-0 focus-visible:ring-offset-0"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="companyName"
-                render={({ field }) => (
-                  <FormItem className="w-full">
-                    <FormLabel>Company Name</FormLabel>
-                    <FormDescription className="text-xs">
-                      This is the name of the company you work for.
-                    </FormDescription>
-                    <FormControl>
-                      <Input
-                        placeholder="Company Name"
-                        {...field}
-                        className="focus-visible:ring-0 focus-visible:ring-offset-0"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="companyDescription"
-                render={({ field }) => (
-                  <FormItem className="w-full">
-                    <FormLabel>Company Description</FormLabel>
-                    <FormDescription className="text-xs">
-                      This is a short description of your company.
-                    </FormDescription>
-                    <FormControl>
-                      <Textarea
-                        placeholder="Add a few words about your company."
-                        {...field}
-                        className="focus-visible:ring-0 focus-visible:ring-offset-0"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="linkedinUserName"
-                render={({ field }) => (
-                  <FormItem className="w-full">
-                    <FormLabel>LinkedIn Username</FormLabel>
-                    <FormDescription className="text-xs">
-                      Your LinkedIn username (the part after linkedin.com/in/)
-                    </FormDescription>
-                    <FormControl>
-                      <div className="flex">
-                        <span className="inline-flex items-center rounded-l-md border border-r-0 border-input bg-muted px-3 text-sm text-muted-foreground">
-                          linkedin.com/in/
-                        </span>
-                        <Input
-                          className="rounded-l-none focus-visible:ring-0 focus-visible:ring-offset-0"
-                          placeholder="username"
-                          {...field}
-                        />
-                      </div>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </form>
-          </Form>
-        )}
-      </div>
-    </AppScreen>
-  );
-};
-
-declare module "@stackflow/config" {
-  interface Register {
-    ProfileActivity: {};
-  }
-}
diff --git a/apps/mobile/src/views/settings.tsx b/apps/mobile/src/views/settings.tsx
index 9383adf926..3d99b73368 100644
--- a/apps/mobile/src/views/settings.tsx
+++ b/apps/mobile/src/views/settings.tsx
@@ -1,114 +1,47 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { LANGUAGES_ISO_639_1 } from "@huggingface/languages";
 import type { ActivityLoaderArgs } from "@stackflow/config";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
-import { ActivityComponentType } from "@stackflow/react/future";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useCallback, useEffect } from "react";
+import { ActivityComponentType, useLoaderData } from "@stackflow/react/future";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
-import { commands as dbCommands, type ConfigGeneral } from "@hypr/plugin-db";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@hypr/ui/components/ui/form";
-import { Input } from "@hypr/ui/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@hypr/ui/components/ui/select";
+import { mockUserSettings } from "../mock";
 
-type ISO_639_1_CODE = keyof typeof LANGUAGES_ISO_639_1;
-const SUPPORTED_LANGUAGES: ISO_639_1_CODE[] = ["en", "ko"];
+import { Button } from "@hypr/ui/components/ui/button";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel } from "@hypr/ui/components/ui/form";
+import { Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle } from "@hypr/ui/components/ui/modal";
+import { Switch } from "@hypr/ui/components/ui/switch";
 
 const schema = z.object({
-  autostart: z.boolean().optional(),
-  displayLanguage: z.enum(SUPPORTED_LANGUAGES as [string, ...string[]]),
-  jargons: z.string(),
-  tags: z.array(z.string()),
+  alertEnhancingDone: z.boolean().optional(),
+  remindUpcomingEvents: z.boolean().optional(),
 });
 
 type Schema = z.infer<typeof schema>;
 
 export function settingsActivityLoader({}: ActivityLoaderArgs<"SettingsActivity">) {
-  return {};
+  return { settings: mockUserSettings };
 }
 
 export const SettingsActivity: ActivityComponentType<"SettingsActivity"> = () => {
-  const queryClient = useQueryClient();
-
-  const config = useQuery({
-    queryKey: ["config", "general"],
-    queryFn: async () => {
-      const result = await dbCommands.getConfig();
-      return result;
-    },
-    staleTime: Infinity,
-    gcTime: Infinity,
-  });
+  const { settings } = useLoaderData<typeof settingsActivityLoader>();
+  const [showSignOutModal, setShowSignOutModal] = useState(false);
 
   const form = useForm<Schema>({
     resolver: zodResolver(schema),
     values: {
-      autostart: config.data?.general.autostart ?? false,
-      displayLanguage: config.data?.general.display_language ?? "en",
-      jargons: (config.data?.general.jargons ?? []).join(", "),
-      tags: config.data?.general.tags ?? [],
+      alertEnhancingDone: settings.alertEnhancingDone ?? false,
+      remindUpcomingEvents: settings.remindUpcomingEvents ?? false,
     },
   });
 
-  const mutation = useMutation({
-    mutationFn: async (v: Schema) => {
-      if (!config.data) {
-        console.error("cannot mutate config because it is not loaded");
-        return;
-      }
-
-      const nextGeneral: ConfigGeneral = {
-        autostart: v.autostart ?? true,
-        display_language: v.displayLanguage,
-        jargons: v.jargons.split(",").map((jargon) => jargon.trim()),
-        tags: v.tags,
-      };
-
-      try {
-        await dbCommands.setConfig({
-          ...config.data,
-          general: nextGeneral,
-        });
-      } catch (e) {
-        console.error(e);
-      }
-    },
-    onSuccess: () => {
-      queryClient.setQueryData(["config", "general"], (oldData: any) => {
-        if (!oldData) return oldData;
-
-        return {
-          ...oldData,
-          general: {
-            ...oldData.general,
-            autostart: form.getValues("autostart"),
-            display_language: form.getValues("displayLanguage"),
-            jargons: form.getValues("jargons").split(",").map((jargon: string) => jargon.trim()),
-            tags: form.getValues("tags"),
-          },
-        };
-      });
-    },
-  });
-
-  const onFormChange = useCallback(() => {
-    form.handleSubmit((v) => mutation.mutate(v))();
-  }, [form, mutation]);
-
-  useEffect(() => {
-    const subscription = form.watch(onFormChange);
-    return () => subscription.unsubscribe();
-  }, [form, onFormChange]);
+  const handleSignOut = () => {
+    // Replace with actual sign out logic
+    console.log("Signing out...");
+    // Close the modal
+    setShowSignOutModal(false);
+  };
 
   return (
     <AppScreen
@@ -117,69 +50,90 @@ export const SettingsActivity: ActivityComponentType<"SettingsActivity"> = () =>
       }}
     >
       <div className="h-full overflow-y-auto w-full flex flex-col py-6 px-4">
-        {config.isLoading ? <div className="w-full text-center">Loading settings...</div> : (
+        <div className="flex-1">
           <Form {...form}>
-            <form className="space-y-6">
-              <FormField
-                control={form.control}
-                name="displayLanguage"
-                render={({ field }) => (
-                  <FormItem className="flex flex-row items-center justify-between">
-                    <div>
-                      <FormLabel>Display language</FormLabel>
-                      <FormDescription className="text-xs">
-                        This is the language you read.
-                      </FormDescription>
-                    </div>
-                    <Select onValueChange={field.onChange} value={field.value}>
-                      <FormControl>
-                        <SelectTrigger className="max-w-[100px] focus:outline-none focus:ring-0 focus:ring-offset-0">
-                          <SelectValue placeholder="Select language" />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent align="end">
-                        {SUPPORTED_LANGUAGES.map((code) => (
-                          <SelectItem key={code} value={code}>
-                            {LANGUAGES_ISO_639_1[code].nativeName}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="jargons"
-                render={({ field }) => (
-                  <FormItem>
-                    <div>
-                      <FormLabel>
-                        Jargons
-                      </FormLabel>
-                      <FormDescription className="text-xs">
-                        You can make Hyprnote takes these words into account when transcribing.
-                      </FormDescription>
-                    </div>
-                    <FormControl>
-                      <Input
-                        placeholder="Type jargons (e.g., Blitz Meeting, PaC Squad)"
-                        {...field}
-                        value={field.value ?? ""}
-                        className="focus-visible:ring-0 focus-visible:ring-offset-0"
-                        autoCorrect="false"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </form>
+            <FormField
+              control={form.control}
+              name="alertEnhancingDone"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-center justify-between mb-4">
+                  <div>
+                    <FormLabel>Note Enhancement Alerts</FormLabel>
+                    <FormDescription>
+                      Alert when note is done enhancing.
+                    </FormDescription>
+                  </div>
+                  <FormControl>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="remindUpcomingEvents"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-center justify-between">
+                  <div>
+                    <FormLabel>Remind upcoming events</FormLabel>
+                    <FormDescription>
+                      Hyprnote will notify you about upcoming events based on your linked calendar.
+                    </FormDescription>
+                  </div>
+                  <FormControl>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
           </Form>
-        )}
+        </div>
+
+        <div
+          onClick={() => setShowSignOutModal(true)}
+          className="text-center text-sm text-red-600 w-fit mx-auto"
+        >
+          Sign out
+        </div>
       </div>
+
+      <Modal
+        open={showSignOutModal}
+        onClose={() => setShowSignOutModal(false)}
+        className="w-fit"
+      >
+        <ModalHeader className="p-6 pb-0">
+          <ModalTitle>Confirm Sign Out</ModalTitle>
+        </ModalHeader>
+        <ModalBody className="py-3">
+          <p>
+            Are you sure you want to sign out?
+          </p>
+        </ModalBody>
+        <ModalFooter className="flex items-end justify-end gap-2">
+          <Button
+            variant="destructive"
+            onClick={handleSignOut}
+            className="flex-1"
+          >
+            Sign Out
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => setShowSignOutModal(false)}
+            className="flex-1"
+          >
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
     </AppScreen>
   );
 };
diff --git a/apps/mobile/tailwind.config.ts b/apps/mobile/tailwind.config.ts
index b7a94adf60..6078ac47f6 100644
--- a/apps/mobile/tailwind.config.ts
+++ b/apps/mobile/tailwind.config.ts
@@ -1,4 +1,5 @@
 import type { Config } from "tailwindcss";
+import plugin from "tailwindcss/plugin";
 
 const config = {
   content: ["src/**/*.{js,ts,jsx,tsx}", "index.html"],
@@ -9,7 +10,34 @@ const config = {
       },
     },
   },
-  plugins: [],
+  plugins: [
+    plugin(function({ addUtilities }) {
+      const newUtilities = {
+        ".scrollbar-hide": {
+          "-ms-overflow-style": "none",
+          "scrollbar-width": "none",
+          "&::-webkit-scrollbar": {
+            display: "none",
+          },
+          "WebkitOverflowScrolling": "touch",
+        },
+        ".touch-scroll": {
+          "overflow": "scroll",
+          "WebkitOverflowScrolling": "touch",
+          "&::-webkit-scrollbar": {
+            display: "none",
+          },
+        },
+        ".overflow-mask": {
+          "overflow": "hidden",
+          "maskImage": "-webkit-radial-gradient(white, black)",
+          "WebkitMaskImage": "-webkit-radial-gradient(white, black)",
+        },
+      };
+
+      addUtilities(newUtilities);
+    }),
+  ],
 } satisfies Config;
 
 export default config;

From 6ffa7938837f52e1868c76fae2334c92429f0300 Mon Sep 17 00:00:00 2001
From: John Jeong <jeeheontransformers@gmail.com>
Date: Wed, 12 Mar 2025 17:26:46 +0900
Subject: [PATCH 06/10] added bottom sheet

---
 apps/mobile/src/views/home.tsx                | 32 ++++++----
 apps/mobile/tsconfig.json                     |  2 +-
 .../ui/src/components/ui}/bottom-sheet.tsx    | 61 +++++++++++--------
 3 files changed, 59 insertions(+), 36 deletions(-)
 rename {apps/mobile/src/components => packages/ui/src/components/ui}/bottom-sheet.tsx (57%)

diff --git a/apps/mobile/src/views/home.tsx b/apps/mobile/src/views/home.tsx
index 5151fc230f..b18cac6ca1 100644
--- a/apps/mobile/src/views/home.tsx
+++ b/apps/mobile/src/views/home.tsx
@@ -2,7 +2,9 @@ import type { ActivityLoaderArgs } from "@stackflow/config";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { ActivityComponentType, useFlow, useLoaderData } from "@stackflow/react/future";
 import { AudioLinesIcon, CalendarIcon, MicIcon, Settings, SquarePenIcon } from "lucide-react";
+import * as React from "react";
 
+import { BottomSheet, BottomSheetContent } from "@hypr/ui/components/ui/bottom-sheet";
 import { EventItem } from "../components/event-item";
 import { NoteItem } from "../components/note-item";
 import { mockEvents, mockSessions } from "../mock";
@@ -20,6 +22,7 @@ export function homeActivityLoader({}: ActivityLoaderArgs<"HomeActivity">) {
 
 export const HomeActivity: ActivityComponentType<"HomeActivity"> = () => {
   const { upcomingEvents, notes } = useLoaderData<typeof homeActivityLoader>();
+  const [sheetOpen, setSheetOpen] = React.useState(false);
 
   const { push } = useFlow();
 
@@ -106,21 +109,28 @@ export const HomeActivity: ActivityComponentType<"HomeActivity"> = () => {
           className="absolute z-10 bottom-0 left-0 right-0 flex justify-center px-4 pb-4"
           onClick={(e) => e.stopPropagation()}
         >
-          <Sheet>
-            <SheetTrigger asChild>
-              <Button className="w-full py-3 text-lg font-semibold">
-                <SquarePenIcon size={20} />Create new note
-              </Button>
-            </SheetTrigger>
-            <SheetContent className="flex gap-2 max-h-60">
-              <Button className="aspect-square w-full flex-col gap-1" variant="outline">
+          <Button 
+            className="w-full py-3 text-lg font-semibold"
+            onClick={() => setSheetOpen(true)}
+          >
+            <SquarePenIcon size={20} className="mr-2" />Create new note
+          </Button>
+          
+          <BottomSheet 
+            open={sheetOpen} 
+            onClose={() => setSheetOpen(false)}
+          >
+            <BottomSheetContent className="flex gap-2 bg-white">
+              <Button className="aspect-square w-full flex-col gap-2 text-red-500" variant="outline">
                 <AudioLinesIcon size={32} />
+                Upload recording
               </Button>
-              <Button className="aspect-square w-full flex-col gap-1">
+              <Button className="aspect-square w-full flex-col gap-2 bg-red-500">
                 <MicIcon size={32} />
+                Start recording
               </Button>
-            </SheetContent>
-          </Sheet>
+            </BottomSheetContent>
+          </BottomSheet>
         </div>
       </div>
     </AppScreen>
diff --git a/apps/mobile/tsconfig.json b/apps/mobile/tsconfig.json
index a7fc6fbf23..ae6908013f 100644
--- a/apps/mobile/tsconfig.json
+++ b/apps/mobile/tsconfig.json
@@ -20,6 +20,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"],
+  "include": ["src", "../../packages/ui/src/components/ui/bottom-sheet.tsx"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/apps/mobile/src/components/bottom-sheet.tsx b/packages/ui/src/components/ui/bottom-sheet.tsx
similarity index 57%
rename from apps/mobile/src/components/bottom-sheet.tsx
rename to packages/ui/src/components/ui/bottom-sheet.tsx
index 2d310562da..9b0d1d255d 100644
--- a/apps/mobile/src/components/bottom-sheet.tsx
+++ b/packages/ui/src/components/ui/bottom-sheet.tsx
@@ -1,4 +1,7 @@
+"use client";
+
 import * as React from "react";
+import { AnimatePresence, motion } from "motion/react";
 import { cn } from "@hypr/ui/lib/utils";
 
 interface BottomSheetProps {
@@ -33,31 +36,41 @@ export function BottomSheet({
     };
   }, [open, preventClose, onClose]);
 
-  if (!open) return null;
-
   return (
-    <>
-      <div
-        className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm"
-        aria-hidden="true"
-        onClick={preventClose ? undefined : onClose}
-      />
-      <div
-        role="dialog"
-        aria-modal="true"
-        className={cn(
-          "fixed bottom-0 left-0 right-0 z-50",
-          "rounded-t-lg bg-neutral-800 shadow-lg",
-          "animate-in slide-in-from-bottom duration-300",
-          className
-        )}
-      >
-        <div className="flex justify-center pt-2 pb-1">
-          <div className="h-1 w-10 rounded-full bg-neutral-600" />
-        </div>
-        {children}
-      </div>
-    </>
+    <AnimatePresence>
+      {open && (
+        <>
+          <motion.div
+            className="fixed inset-0 z-40 bg-white/70 backdrop-blur-sm"
+            aria-hidden="true"
+            onClick={preventClose ? undefined : onClose}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+          />
+          <motion.div
+            role="dialog"
+            aria-modal="true"
+            className={cn(
+              "fixed bottom-0 left-0 right-0 z-50",
+              "rounded-t-lg shadow-lg border-t overflow-clip",
+              className
+            )}
+            initial={{ y: "100%" }}
+            animate={{ y: 0 }}
+            exit={{ y: "100%" }}
+            transition={{ 
+              type: "spring", 
+              damping: 25, 
+              stiffness: 300 
+            }}
+          >
+            {children}
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
   );
 }
 

From 15b2d7bd2d0701e4b4b26b74ad78467cac05c405 Mon Sep 17 00:00:00 2001
From: John Jeong <jeeheontransformers@gmail.com>
Date: Wed, 12 Mar 2025 18:14:52 +0900
Subject: [PATCH 07/10] implementing note

---
 apps/app/tailwind.config.ts                   |  4 -
 apps/mobile/package.json                      |  2 +
 .../src/components/note/note-content.tsx      | 27 ++++++
 apps/mobile/src/components/note/note-info.tsx | 94 +++++++++++++++++++
 apps/mobile/src/views/note.tsx                | 25 ++++-
 apps/mobile/tailwind.config.ts                | 32 +------
 pnpm-lock.yaml                                | 14 +++
 7 files changed, 162 insertions(+), 36 deletions(-)
 create mode 100644 apps/mobile/src/components/note/note-content.tsx
 create mode 100644 apps/mobile/src/components/note/note-info.tsx

diff --git a/apps/app/tailwind.config.ts b/apps/app/tailwind.config.ts
index aa06cb5d86..d2162302c2 100644
--- a/apps/app/tailwind.config.ts
+++ b/apps/app/tailwind.config.ts
@@ -1,19 +1,15 @@
 import Tiptap from "@hypr/tiptap/editor/tailwind.config";
-import UI from "@hypr/ui/tailwind.config";
 import typography from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
 
 const config = {
-  ...UI,
   content: [
     ...Tiptap.content,
-    ...UI.content,
     "src/**/*.{js,ts,jsx,tsx}",
     "index.html",
   ],
   theme: {
     extend: {
-      ...UI.theme?.extend,
       fontFamily: {
         "racing-sans": ["Racing Sans One", "cursive"],
       },
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
index 83a7a0d7f8..471b7653eb 100644
--- a/apps/mobile/package.json
+++ b/apps/mobile/package.json
@@ -18,6 +18,7 @@
     "@hypr/plugin-listener": "workspace:^",
     "@hypr/plugin-misc": "workspace:^",
     "@hypr/plugin-template": "workspace:^",
+    "@hypr/tiptap": "workspace:^",
     "@hypr/ui": "workspace:^",
     "@stackflow/config": "^1.2.1",
     "@stackflow/core": "^1.2.0",
@@ -38,6 +39,7 @@
     "zustand": "^5.0.3"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.16",
     "@tauri-apps/cli": "^2.3.1",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
diff --git a/apps/mobile/src/components/note/note-content.tsx b/apps/mobile/src/components/note/note-content.tsx
new file mode 100644
index 0000000000..52669243e5
--- /dev/null
+++ b/apps/mobile/src/components/note/note-content.tsx
@@ -0,0 +1,27 @@
+import { useRef } from "react";
+
+import { type Session } from "@hypr/plugin-db";
+import Editor, { TiptapEditor } from "@hypr/tiptap/editor";
+
+interface ContentProps {
+  session: Session;
+}
+
+export function NoteContent({ session }: ContentProps) {
+  const editorRef = useRef<{ editor: TiptapEditor }>(null);
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      <div className="flex-1 overflow-y-auto w-full">
+        <Editor
+          ref={editorRef}
+          handleChange={() => {
+            // TODO: implement
+          }}
+          initialContent={session.enhanced_memo_html || session.raw_memo_html}
+          autoFocus={false}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/mobile/src/components/note/note-info.tsx b/apps/mobile/src/components/note/note-info.tsx
new file mode 100644
index 0000000000..47e1d52e07
--- /dev/null
+++ b/apps/mobile/src/components/note/note-info.tsx
@@ -0,0 +1,94 @@
+import { CalendarIcon, Users2Icon } from "lucide-react";
+
+import type { Session } from "@hypr/plugin-db";
+import { Popover, PopoverContent, PopoverTrigger } from "@hypr/ui/components/ui/popover";
+
+interface SessionInfoProps {
+  session: Session;
+}
+
+export function NoteInfo({ session }: SessionInfoProps) {
+  const hasParticipants = session.conversations.length > 0
+    && session.conversations.some((conv) => conv.diarizations.length > 0);
+
+  const participantsCount = hasParticipants
+    ? session.conversations.flatMap((conv) => conv.diarizations).length
+    : 0;
+
+  const currentDate = new Date().toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+
+  const uniqueParticipants = hasParticipants
+    ? Array.from(
+      new Set(
+        session.conversations.flatMap((conv) => conv.diarizations.map((d) => d.speaker)),
+      ),
+    )
+    : [];
+
+  return (
+    <div className="px-4 w-full flex flex-col pb-6">
+      <h2 className="text-xl font-medium text-neutral-800 mb-2">
+        {session.title || "Untitled"}
+      </h2>
+
+      <div className="-mx-1.5 flex flex-row items-center whitespace-nowrap">
+        <div className="rounded-md px-2 py-1.5 text-xs">
+          {currentDate}
+        </div>
+
+        {hasParticipants && (
+          <div className="flex items-center">
+            <div className="border-l border-neutral-200 h-4 mx-2"></div>
+            <Popover>
+              <PopoverTrigger className="flex flex-row items-center gap-2 rounded-md border px-2 py-1.5 hover:bg-neutral-100 text-xs cursor-pointer">
+                <Users2Icon size={14} />
+                <span>
+                  {participantsCount} Participant
+                  {participantsCount !== 1 ? "s" : ""}
+                </span>
+              </PopoverTrigger>
+              <PopoverContent
+                align="start"
+                className="shadow-lg p-4 border-neutral-600 bg-neutral-800"
+                closeOnClickOutside={true}
+              >
+                <div className="space-y-2">
+                  <div className="pb-1">
+                    <p className="text-xs font-medium text-neutral-500">
+                      Participants
+                    </p>
+                  </div>
+                  <div className="space-y-0.5">
+                    {uniqueParticipants.map((participant, index) => (
+                      <div
+                        key={index}
+                        className="flex w-full items-start justify-between rounded py-2 text-sm"
+                      >
+                        <div className="flex w-full items-center">
+                          <div className="flex items-center gap-3">
+                            <div className="size-6 rounded-full bg-neutral-700 flex items-center justify-center">
+                              <span className="text-xs text-neutral-100">
+                                {participant.substring(0, 2).toUpperCase()}
+                              </span>
+                            </div>
+                            <span className="font-medium text-neutral-100">
+                              {participant}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/mobile/src/views/note.tsx b/apps/mobile/src/views/note.tsx
index 8cd358bbf2..179076d184 100644
--- a/apps/mobile/src/views/note.tsx
+++ b/apps/mobile/src/views/note.tsx
@@ -1,13 +1,28 @@
 import type { ActivityLoaderArgs } from "@stackflow/config";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { ActivityComponentType, useLoaderData } from "@stackflow/react/future";
+import { NoteContent, NoteInfo } from "../components/note";
+import { mockSessions } from "../mock/home";
 
 export function noteActivityLoader({
   params,
 }: ActivityLoaderArgs<"NoteActivity">) {
   const { id } = params;
 
-  const session = { id };
+  // Find the session in the mock data or return a default session
+  const session = mockSessions.find(s => s.id === id) || {
+    id,
+    title: "Untitled Note",
+    created_at: new Date().toISOString(),
+    visited_at: new Date().toISOString(),
+    user_id: "user-123",
+    calendar_event_id: null,
+    audio_local_path: null,
+    audio_remote_path: null,
+    raw_memo_html: "<p>No content available.</p>",
+    enhanced_memo_html: "<h2>Untitled Note</h2><p>No content available.</p>",
+    conversations: [],
+  };
 
   return { session };
 }
@@ -21,9 +36,11 @@ export const NoteActivity: ActivityComponentType<"NoteActivity"> = () => {
         title: "Note - " + session.id,
       }}
     >
-      <div>
-        <h1>NoteActivity</h1>
-        <p>{JSON.stringify(session)}</p>
+      <div className="relative flex h-full flex-col">
+        <div className="flex-1 overflow-y-auto py-6">
+          <NoteInfo session={session} />
+          <NoteContent session={session} />
+        </div>
       </div>
     </AppScreen>
   );
diff --git a/apps/mobile/tailwind.config.ts b/apps/mobile/tailwind.config.ts
index 6078ac47f6..e4db51232c 100644
--- a/apps/mobile/tailwind.config.ts
+++ b/apps/mobile/tailwind.config.ts
@@ -1,8 +1,9 @@
+import Tiptap from "@hypr/tiptap/editor/tailwind.config";
+import typography from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
-import plugin from "tailwindcss/plugin";
 
 const config = {
-  content: ["src/**/*.{js,ts,jsx,tsx}", "index.html"],
+  content: [...Tiptap.content, "src/**/*.{js,ts,jsx,tsx}", "index.html"],
   theme: {
     extend: {
       fontFamily: {
@@ -11,32 +12,7 @@ const config = {
     },
   },
   plugins: [
-    plugin(function({ addUtilities }) {
-      const newUtilities = {
-        ".scrollbar-hide": {
-          "-ms-overflow-style": "none",
-          "scrollbar-width": "none",
-          "&::-webkit-scrollbar": {
-            display: "none",
-          },
-          "WebkitOverflowScrolling": "touch",
-        },
-        ".touch-scroll": {
-          "overflow": "scroll",
-          "WebkitOverflowScrolling": "touch",
-          "&::-webkit-scrollbar": {
-            display: "none",
-          },
-        },
-        ".overflow-mask": {
-          "overflow": "hidden",
-          "maskImage": "-webkit-radial-gradient(white, black)",
-          "WebkitMaskImage": "-webkit-radial-gradient(white, black)",
-        },
-      };
-
-      addUtilities(newUtilities);
-    }),
+    typography,
   ],
 } satisfies Config;
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 206cec649e..b4fb5c7318 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -476,6 +476,9 @@ importers:
       '@hypr/plugin-template':
         specifier: workspace:^
         version: link:../../plugins/template
+      '@hypr/tiptap':
+        specifier: workspace:^
+        version: link:../../packages/tiptap
       '@hypr/ui':
         specifier: workspace:^
         version: link:../../packages/ui
@@ -531,6 +534,9 @@ importers:
         specifier: ^5.0.3
         version: 5.0.3(@types/react@18.3.18)(react@18.3.1)(use-sync-external-store@1.4.0(react@18.3.1))
     devDependencies:
+      '@tailwindcss/typography':
+        specifier: ^0.5.16
+        version: 0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.10.6)(@types/node@22.13.10)(typescript@5.6.3)))
       '@tauri-apps/cli':
         specifier: ^2.3.1
         version: 2.3.1
@@ -10564,6 +10570,14 @@ snapshots:
     dependencies:
       defer-to-connect: 2.0.1
 
+  '@tailwindcss/typography@0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.10.6)(@types/node@22.13.10)(typescript@5.6.3)))':
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.10.6)(@types/node@22.13.10)(typescript@5.6.3))
+
   '@tailwindcss/typography@0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.10.6)(@types/node@22.13.10)(typescript@5.8.2)))':
     dependencies:
       lodash.castarray: 4.4.0

From 8e4b2c5de7340d4f95ad38834d6631020b6308c7 Mon Sep 17 00:00:00 2001
From: John Jeong <jeeheontransformers@gmail.com>
Date: Wed, 12 Mar 2025 18:15:07 +0900
Subject: [PATCH 08/10] implemented home

---
 .../src/components/{ => home}/event-item.tsx  |  2 +-
 apps/mobile/src/components/home/index.ts      |  2 ++
 .../src/components/{ => home}/note-item.tsx   |  0
 apps/mobile/src/components/note/index.ts      |  2 ++
 apps/mobile/src/views/home.tsx                | 27 +++++++++++-------
 packages/tiptap/src/editor/index.tsx          |  5 ++--
 .../ui/src/components/ui/bottom-sheet.tsx     | 28 +++++++++----------
 7 files changed, 39 insertions(+), 27 deletions(-)
 rename apps/mobile/src/components/{ => home}/event-item.tsx (94%)
 create mode 100644 apps/mobile/src/components/home/index.ts
 rename apps/mobile/src/components/{ => home}/note-item.tsx (100%)
 create mode 100644 apps/mobile/src/components/note/index.ts

diff --git a/apps/mobile/src/components/event-item.tsx b/apps/mobile/src/components/home/event-item.tsx
similarity index 94%
rename from apps/mobile/src/components/event-item.tsx
rename to apps/mobile/src/components/home/event-item.tsx
index c9cf5fa4a8..1b48ecbfa5 100644
--- a/apps/mobile/src/components/event-item.tsx
+++ b/apps/mobile/src/components/home/event-item.tsx
@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { formatRemainingTime } from "../utils/date";
+import { formatRemainingTime } from "../../utils/date";
 
 import { commands as dbCommands, type Event } from "@hypr/plugin-db";
 
diff --git a/apps/mobile/src/components/home/index.ts b/apps/mobile/src/components/home/index.ts
new file mode 100644
index 0000000000..8f1b0e4246
--- /dev/null
+++ b/apps/mobile/src/components/home/index.ts
@@ -0,0 +1,2 @@
+export * from "./event-item";
+export * from "./note-item";
diff --git a/apps/mobile/src/components/note-item.tsx b/apps/mobile/src/components/home/note-item.tsx
similarity index 100%
rename from apps/mobile/src/components/note-item.tsx
rename to apps/mobile/src/components/home/note-item.tsx
diff --git a/apps/mobile/src/components/note/index.ts b/apps/mobile/src/components/note/index.ts
new file mode 100644
index 0000000000..e67b4690b5
--- /dev/null
+++ b/apps/mobile/src/components/note/index.ts
@@ -0,0 +1,2 @@
+export * from "./note-content";
+export * from "./note-info";
diff --git a/apps/mobile/src/views/home.tsx b/apps/mobile/src/views/home.tsx
index b18cac6ca1..935c2b8a89 100644
--- a/apps/mobile/src/views/home.tsx
+++ b/apps/mobile/src/views/home.tsx
@@ -5,8 +5,7 @@ import { AudioLinesIcon, CalendarIcon, MicIcon, Settings, SquarePenIcon } from "
 import * as React from "react";
 
 import { BottomSheet, BottomSheetContent } from "@hypr/ui/components/ui/bottom-sheet";
-import { EventItem } from "../components/event-item";
-import { NoteItem } from "../components/note-item";
+import { EventItem, NoteItem } from "../components/home";
 import { mockEvents, mockSessions } from "../mock";
 import { formatDateHeader, getSortedDates, groupNotesByDate } from "../utils/date";
 
@@ -33,7 +32,11 @@ export const HomeActivity: ActivityComponentType<"HomeActivity"> = () => {
     push("NoteActivity", { id });
   };
 
-  const handleClickNew = () => {
+  const handleClickUpload = () => {
+    push("NoteActivity", { id: "new" });
+  };
+
+  const handleClickRecord = () => {
     push("NoteActivity", { id: "new" });
   };
 
@@ -100,7 +103,7 @@ export const HomeActivity: ActivityComponentType<"HomeActivity"> = () => {
           {notes && notes.length === 0 && (
             <div className="flex flex-col justify-center items-center h-64">
               <p className="text-neutral-500 mb-4">No notes yet</p>
-              <Button onClick={handleClickNew}>Create your first note</Button>
+              <Button onClick={() => setSheetOpen(true)}>Create your first note</Button>
             </div>
           )}
         </div>
@@ -109,23 +112,27 @@ export const HomeActivity: ActivityComponentType<"HomeActivity"> = () => {
           className="absolute z-10 bottom-0 left-0 right-0 flex justify-center px-4 pb-4"
           onClick={(e) => e.stopPropagation()}
         >
-          <Button 
+          <Button
             className="w-full py-3 text-lg font-semibold"
             onClick={() => setSheetOpen(true)}
           >
             <SquarePenIcon size={20} className="mr-2" />Create new note
           </Button>
-          
-          <BottomSheet 
-            open={sheetOpen} 
+
+          <BottomSheet
+            open={sheetOpen}
             onClose={() => setSheetOpen(false)}
           >
             <BottomSheetContent className="flex gap-2 bg-white">
-              <Button className="aspect-square w-full flex-col gap-2 text-red-500" variant="outline">
+              <Button
+                className="aspect-square w-full flex-col gap-2 text-red-500"
+                variant="outline"
+                onClick={handleClickUpload}
+              >
                 <AudioLinesIcon size={32} />
                 Upload recording
               </Button>
-              <Button className="aspect-square w-full flex-col gap-2 bg-red-500">
+              <Button className="aspect-square w-full flex-col gap-2 bg-red-500" onClick={handleClickRecord}>
                 <MicIcon size={32} />
                 Start recording
               </Button>
diff --git a/packages/tiptap/src/editor/index.tsx b/packages/tiptap/src/editor/index.tsx
index 82aeca06e0..a1b1742ad8 100644
--- a/packages/tiptap/src/editor/index.tsx
+++ b/packages/tiptap/src/editor/index.tsx
@@ -12,10 +12,11 @@ export const extensions = [...shared.extensions];
 interface EditorProps {
   handleChange: (content: HTMLContent) => void;
   initialContent: HTMLContent;
+  autoFocus?: boolean
 }
 
 const Editor = forwardRef<{ editor: TiptapEditor | null }, EditorProps>(
-  ({ handleChange, initialContent }, ref) => {
+  ({ handleChange, initialContent, autoFocus = true }, ref) => {
     const onUpdate = ({ editor }: { editor: TiptapEditor }) => {
       if (!editor.isInitialized) {
         return;
@@ -37,7 +38,7 @@ const Editor = forwardRef<{ editor: TiptapEditor | null }, EditorProps>(
           class: clsx(editorStyle),
         },
       },
-      autofocus: true,
+      autofocus: autoFocus,
     });
 
     useEffect(() => {
diff --git a/packages/ui/src/components/ui/bottom-sheet.tsx b/packages/ui/src/components/ui/bottom-sheet.tsx
index 9b0d1d255d..863995af3f 100644
--- a/packages/ui/src/components/ui/bottom-sheet.tsx
+++ b/packages/ui/src/components/ui/bottom-sheet.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import * as React from "react";
-import { AnimatePresence, motion } from "motion/react";
 import { cn } from "@hypr/ui/lib/utils";
+import { AnimatePresence, motion } from "motion/react";
+import * as React from "react";
 
 interface BottomSheetProps {
   open: boolean;
@@ -55,15 +55,15 @@ export function BottomSheet({
             className={cn(
               "fixed bottom-0 left-0 right-0 z-50",
               "rounded-t-lg shadow-lg border-t overflow-clip",
-              className
+              className,
             )}
             initial={{ y: "100%" }}
             animate={{ y: 0 }}
             exit={{ y: "100%" }}
-            transition={{ 
-              type: "spring", 
-              damping: 25, 
-              stiffness: 300 
+            transition={{
+              type: "spring",
+              damping: 25,
+              stiffness: 300,
             }}
           >
             {children}
@@ -79,9 +79,9 @@ interface BottomSheetContentProps {
   className?: string;
 }
 
-export function BottomSheetContent({ 
-  children, 
-  className 
+export function BottomSheetContent({
+  children,
+  className,
 }: BottomSheetContentProps) {
   return (
     <div className={cn("p-4", className)}>
@@ -96,13 +96,13 @@ interface BottomSheetTriggerProps {
   className?: string;
 }
 
-export function BottomSheetTrigger({ 
-  children, 
+export function BottomSheetTrigger({
+  children,
   onClick,
-  className 
+  className,
 }: BottomSheetTriggerProps) {
   return (
-    <div 
+    <div
       onClick={onClick}
       className={cn("cursor-pointer", className)}
     >

From 4e1ca025c028d3fd387b3b55c0e3a9c22f4e2283 Mon Sep 17 00:00:00 2001
From: John Jeong <jeeheontransformers@gmail.com>
Date: Wed, 12 Mar 2025 18:16:28 +0900
Subject: [PATCH 09/10] fix

---
 apps/mobile/src/components/note/note-info.tsx | 2 +-
 packages/tiptap/src/editor/index.tsx          | 2 +-
 packages/tiptap/src/shared/tags.tsx           | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/mobile/src/components/note/note-info.tsx b/apps/mobile/src/components/note/note-info.tsx
index 47e1d52e07..f15803ccc8 100644
--- a/apps/mobile/src/components/note/note-info.tsx
+++ b/apps/mobile/src/components/note/note-info.tsx
@@ -1,4 +1,4 @@
-import { CalendarIcon, Users2Icon } from "lucide-react";
+import { Users2Icon } from "lucide-react";
 
 import type { Session } from "@hypr/plugin-db";
 import { Popover, PopoverContent, PopoverTrigger } from "@hypr/ui/components/ui/popover";
diff --git a/packages/tiptap/src/editor/index.tsx b/packages/tiptap/src/editor/index.tsx
index a1b1742ad8..91aaf5676d 100644
--- a/packages/tiptap/src/editor/index.tsx
+++ b/packages/tiptap/src/editor/index.tsx
@@ -12,7 +12,7 @@ export const extensions = [...shared.extensions];
 interface EditorProps {
   handleChange: (content: HTMLContent) => void;
   initialContent: HTMLContent;
-  autoFocus?: boolean
+  autoFocus?: boolean;
 }
 
 const Editor = forwardRef<{ editor: TiptapEditor | null }, EditorProps>(
diff --git a/packages/tiptap/src/shared/tags.tsx b/packages/tiptap/src/shared/tags.tsx
index 7ff19b7b12..b58dde4a51 100644
--- a/packages/tiptap/src/shared/tags.tsx
+++ b/packages/tiptap/src/shared/tags.tsx
@@ -12,7 +12,7 @@ export const tagSuggestion = (
   return {
     char: trigger,
     pluginKey: new PluginKey(`mention-${trigger}`),
-    items: ({ query }) => {
+    items: ({}) => {
       return ["TODO1", "TODO2", "TODO3"];
     },
     render: () => {

From 5066175b69e0b54c37de94c6765db0f9db9c9677 Mon Sep 17 00:00:00 2001
From: John Jeong <jeeheontransformers@gmail.com>
Date: Wed, 12 Mar 2025 21:27:00 +0900
Subject: [PATCH 10/10] mobile mock is good (roughly)

---
 .../sidebar/extensions-view.tsx               |   1 -
 .../components/settings-panel/views/team.tsx  |   1 -
 apps/desktop/src/lib/date.ts                  |   2 -
 .../mobile/src/components/recordings/index.ts |   1 +
 .../components/recordings/recording-item.tsx  |  44 +++++++
 apps/mobile/src/mock/recordings.ts            |  84 +++++++++++++
 apps/mobile/src/stackflow.config.ts           |  27 ++--
 apps/mobile/src/stackflow.tsx                 |  18 +--
 apps/mobile/src/utils/date.ts                 |  34 ++++-
 apps/mobile/src/utils/file.ts                 |  27 ++++
 apps/mobile/src/utils/index.ts                |   2 +
 apps/mobile/src/views/home.tsx                |  70 +++++++----
 apps/mobile/src/views/login.tsx               |   4 +-
 apps/mobile/src/views/note.tsx                |  23 +++-
 apps/mobile/src/views/recordings.tsx          | 118 ++++++++++++++++++
 apps/mobile/src/views/settings.tsx            |  13 +-
 .../src/widgets/components/ticket-card.tsx    |   7 +-
 17 files changed, 404 insertions(+), 72 deletions(-)
 create mode 100644 apps/mobile/src/components/recordings/index.ts
 create mode 100644 apps/mobile/src/components/recordings/recording-item.tsx
 create mode 100644 apps/mobile/src/mock/recordings.ts
 create mode 100644 apps/mobile/src/utils/file.ts
 create mode 100644 apps/mobile/src/utils/index.ts
 create mode 100644 apps/mobile/src/views/recordings.tsx

diff --git a/apps/desktop/src/components/settings-panel/sidebar/extensions-view.tsx b/apps/desktop/src/components/settings-panel/sidebar/extensions-view.tsx
index a571105e2d..d2e1922e97 100644
--- a/apps/desktop/src/components/settings-panel/sidebar/extensions-view.tsx
+++ b/apps/desktop/src/components/settings-panel/sidebar/extensions-view.tsx
@@ -29,7 +29,6 @@ export function ExtensionsView({
   const selectedExtension: Extension | null = null;
   const handleExtensionSelect = (extension: Extension) => {
     // TODO: Implement extension selection
-    console.log("Selected extension:", extension);
   };
 
   return (
diff --git a/apps/desktop/src/components/settings-panel/views/team.tsx b/apps/desktop/src/components/settings-panel/views/team.tsx
index 6bac7b847b..eb2ecb43d5 100644
--- a/apps/desktop/src/components/settings-panel/views/team.tsx
+++ b/apps/desktop/src/components/settings-panel/views/team.tsx
@@ -57,7 +57,6 @@ export default function TeamComponent() {
 
   const handleDelete = (member: Member) => {
     // TODO: Implement delete functionality
-    console.log("Delete member:", member);
   };
 
   return (
diff --git a/apps/desktop/src/lib/date.ts b/apps/desktop/src/lib/date.ts
index 22c912a23c..d98960f31e 100644
--- a/apps/desktop/src/lib/date.ts
+++ b/apps/desktop/src/lib/date.ts
@@ -27,8 +27,6 @@ export function formatDateHeader(date: Date): string {
   const todayStart = startOfToday();
   const daysDiff = differenceInCalendarDays(todayStart, date, tzOptions);
 
-  console.log(todayStart, date, daysDiff);
-
   if (daysDiff > 1 && daysDiff <= 7) {
     if (isThisWeek(date, tzOptions)) {
       return format(date, "EEEE", tzOptions);
diff --git a/apps/mobile/src/components/recordings/index.ts b/apps/mobile/src/components/recordings/index.ts
new file mode 100644
index 0000000000..42789a1e8e
--- /dev/null
+++ b/apps/mobile/src/components/recordings/index.ts
@@ -0,0 +1 @@
+export * from "./recording-item";
diff --git a/apps/mobile/src/components/recordings/recording-item.tsx b/apps/mobile/src/components/recordings/recording-item.tsx
new file mode 100644
index 0000000000..46411d8f16
--- /dev/null
+++ b/apps/mobile/src/components/recordings/recording-item.tsx
@@ -0,0 +1,44 @@
+import { format } from "date-fns";
+import { CheckIcon } from "lucide-react";
+import { type LocalRecording } from "../../mock/recordings";
+import { formatFileSize, formatRecordingDuration } from "../../utils";
+
+export const RecordingItem = ({
+  recording,
+  onSelect,
+  isSelected = false,
+}: {
+  recording: LocalRecording;
+  onSelect: () => void;
+  isSelected?: boolean;
+}) => {
+  const recordingDate = new Date(recording.created_at);
+
+  return (
+    <div
+      className={`hover:bg-neutral-100 group flex items-start justify-between gap-3 py-3 w-full text-left transition-all rounded-lg px-3 border ${
+        isSelected ? "border-neutral-700 bg-neutral-50" : "border-neutral-200"
+      }`}
+    >
+      <button
+        onClick={onSelect}
+        className="flex-1 text-left flex items-center justify-between gap-2"
+      >
+        <div className="flex flex-col items-start gap-1">
+          <div className="font-medium text-sm line-clamp-1">
+            {recording.title || recording.filename}
+          </div>
+          <div className="flex items-center gap-2 text-xs text-neutral-500">
+            <span>{format(recordingDate, "M/d/yy")}</span>
+            <span>•</span>
+            <span>{formatRecordingDuration(recording.duration)}</span>
+            <span>•</span>
+            <span>{formatFileSize(recording.size)}</span>
+          </div>
+        </div>
+
+        {isSelected && <CheckIcon className="size-4 text-neutral-700 flex-shrink-0" />}
+      </button>
+    </div>
+  );
+};
diff --git a/apps/mobile/src/mock/recordings.ts b/apps/mobile/src/mock/recordings.ts
new file mode 100644
index 0000000000..7b31267a75
--- /dev/null
+++ b/apps/mobile/src/mock/recordings.ts
@@ -0,0 +1,84 @@
+export interface LocalRecording {
+  id: string;
+  filename: string;
+  title: string;
+  duration: number;
+  size: number;
+  created_at: string;
+  path: string;
+}
+
+export const localRecordings: LocalRecording[] = [
+  {
+    id: "rec-1",
+    filename: "recording_20250310_121501.m4a",
+    title: "Team Meeting Notes",
+    duration: 1823,
+    size: 15728640,
+    created_at: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
+    path: "/storage/emulated/0/Recordings/recording_20250310_121501.m4a",
+  },
+  {
+    id: "rec-2",
+    filename: "recording_20250309_153022.m4a",
+    title: "Project Brainstorming",
+    duration: 2712,
+    size: 22020096,
+    created_at: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(),
+    path: "/storage/emulated/0/Recordings/recording_20250309_153022.m4a",
+  },
+  {
+    id: "rec-3",
+    filename: "recording_20250308_091534.m4a",
+    title: "Interview with Client",
+    duration: 3541,
+    size: 29360128,
+    created_at: new Date(Date.now() - 4 * 24 * 60 * 60 * 1000).toISOString(),
+    path: "/storage/emulated/0/Recordings/recording_20250308_091534.m4a",
+  },
+  {
+    id: "rec-4",
+    filename: "recording_20250307_143012.m4a",
+    title: "Personal Notes",
+    duration: 901,
+    size: 8388608,
+    created_at: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),
+    path: "/storage/emulated/0/Recordings/recording_20250307_143012.m4a",
+  },
+  {
+    id: "rec-5",
+    filename: "recording_20250312_103045.m4a",
+    title: "Quick Idea",
+    duration: 185,
+    size: 2097152,
+    created_at: new Date(Date.now() - 0.3 * 24 * 60 * 60 * 1000).toISOString(),
+    path: "/storage/emulated/0/Recordings/recording_20250312_103045.m4a",
+  },
+  {
+    id: "rec-6",
+    filename: "recording_20250311_163211.m4a",
+    title: "Research Notes",
+    duration: 1256,
+    size: 10485760,
+    created_at: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
+    path: "/storage/emulated/0/Recordings/recording_20250311_163211.m4a",
+  },
+  {
+    id: "rec-7",
+    filename: "recording_20250301_092233.m4a",
+    title: "Monthly Planning",
+    duration: 4532,
+    size: 36700160,
+    created_at: new Date(Date.now() - 11 * 24 * 60 * 60 * 1000).toISOString(),
+    path: "/storage/emulated/0/Recordings/recording_20250301_092233.m4a",
+  },
+  {
+    id: "rec-8",
+    filename: "recording_20250215_143355.m4a",
+    title: "Product Review",
+    duration: 2103,
+    size: 18874368,
+    created_at: new Date(Date.now() - 25 * 24 * 60 * 60 * 1000).toISOString(),
+    path: "/storage/emulated/0/Recordings/recording_20250215_143355.m4a",
+  },
+];
diff --git a/apps/mobile/src/stackflow.config.ts b/apps/mobile/src/stackflow.config.ts
index 5280fa42b1..09f3cf96de 100644
--- a/apps/mobile/src/stackflow.config.ts
+++ b/apps/mobile/src/stackflow.config.ts
@@ -1,26 +1,31 @@
 import { defineConfig } from "@stackflow/config";
-import { homeActivityLoader } from "./views/home";
-import { noteActivityLoader } from "./views/note";
-import { settingsActivityLoader } from "./views/settings";
+import { homeLoader } from "./views/home";
+import { noteLoader } from "./views/note";
+import { recordingsLoader } from "./views/recordings";
+import { settingsLoader } from "./views/settings";
 
 export const config = defineConfig({
   transitionDuration: 250,
   activities: [
     {
-      name: "HomeActivity",
-      loader: homeActivityLoader,
+      name: "HomeView",
+      loader: homeLoader,
     },
     {
-      name: "NoteActivity",
-      loader: noteActivityLoader,
+      name: "NoteView",
+      loader: noteLoader,
     },
     {
-      name: "LoginActivity",
+      name: "LoginView",
     },
     {
-      name: "SettingsActivity",
-      loader: settingsActivityLoader,
+      name: "SettingsView",
+      loader: settingsLoader,
+    },
+    {
+      name: "RecordingsView",
+      loader: recordingsLoader,
     },
   ],
-  initialActivity: () => "HomeActivity",
+  initialActivity: () => "HomeView",
 });
diff --git a/apps/mobile/src/stackflow.tsx b/apps/mobile/src/stackflow.tsx
index 7a5517f6a8..f8bc5dd3a8 100644
--- a/apps/mobile/src/stackflow.tsx
+++ b/apps/mobile/src/stackflow.tsx
@@ -2,18 +2,20 @@ import { basicUIPlugin } from "@stackflow/plugin-basic-ui";
 import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic";
 import { stackflow } from "@stackflow/react/future";
 import { config } from "./stackflow.config";
-import { HomeActivity } from "./views/home";
-import { LoginActivity } from "./views/login";
-import { NoteActivity } from "./views/note";
-import { SettingsActivity } from "./views/settings";
+import { HomeView } from "./views/home";
+import { LoginView } from "./views/login";
+import { NoteView } from "./views/note";
+import { RecordingsView } from "./views/recordings";
+import { SettingsView } from "./views/settings";
 
 export const { Stack } = stackflow({
   config,
   components: {
-    HomeActivity,
-    NoteActivity,
-    LoginActivity,
-    SettingsActivity,
+    HomeView,
+    NoteView,
+    LoginView,
+    SettingsView,
+    RecordingsView,
   },
   plugins: [basicRendererPlugin(), basicUIPlugin({ theme: "cupertino" })],
 });
diff --git a/apps/mobile/src/utils/date.ts b/apps/mobile/src/utils/date.ts
index 33cc86ae7a..6735f7fdfa 100644
--- a/apps/mobile/src/utils/date.ts
+++ b/apps/mobile/src/utils/date.ts
@@ -1,6 +1,8 @@
 import { tz } from "@date-fns/tz";
 import { differenceInCalendarDays, format, isThisWeek, isThisYear, isToday, isYesterday, startOfToday } from "date-fns";
 
+import { type LocalRecording } from "../mock/recordings";
+
 import { type Session } from "@hypr/plugin-db";
 
 export type GroupedSessions = Record<
@@ -27,8 +29,6 @@ export function formatDateHeader(date: Date): string {
   const todayStart = startOfToday();
   const daysDiff = differenceInCalendarDays(todayStart, date, tzOptions);
 
-  console.log(todayStart, date, daysDiff);
-
   if (daysDiff > 1 && daysDiff <= 7) {
     if (isThisWeek(date, tzOptions)) {
       return format(date, "EEEE", tzOptions);
@@ -80,6 +80,34 @@ export function groupNotesByDate(sessions: Session[]): GroupedSessions {
   }, {});
 }
 
-export function getSortedDates(groupedSessions: GroupedSessions): string[] {
+export function getSortedDatesForNotes(groupedSessions: GroupedSessions): string[] {
   return Object.keys(groupedSessions).sort((a, b) => b.localeCompare(a));
 }
+
+export const groupRecordingsByDate = (recordings: LocalRecording[]) => {
+  const groups: Record<string, { date: Date; recordings: LocalRecording[] }> = {};
+
+  recordings.forEach(recording => {
+    const date = new Date(recording.created_at);
+    const dateKey = date.toISOString().split("T")[0];
+
+    if (!groups[dateKey]) {
+      groups[dateKey] = {
+        date,
+        recordings: [],
+      };
+    }
+
+    groups[dateKey].recordings.push(recording);
+  });
+
+  return groups;
+};
+
+export const getSortedDatesForRecordings = (
+  groupedRecordings: Record<string, { date: Date; recordings: LocalRecording[] }>,
+) => {
+  return Object.keys(groupedRecordings).sort((a, b) => {
+    return new Date(b).getTime() - new Date(a).getTime();
+  });
+};
diff --git a/apps/mobile/src/utils/file.ts b/apps/mobile/src/utils/file.ts
new file mode 100644
index 0000000000..396aae8da1
--- /dev/null
+++ b/apps/mobile/src/utils/file.ts
@@ -0,0 +1,27 @@
+/**
+ * Format duration in seconds to mm:ss or hh:mm:ss
+ * @param seconds Duration in seconds
+ * @returns Formatted duration string
+ */
+export const formatRecordingDuration = (seconds: number): string => {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const remainingSeconds = seconds % 60;
+
+  if (hours > 0) {
+    return `${hours}:${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
+  }
+
+  return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
+};
+
+/**
+ * Format file size in bytes to human-readable format
+ * @param bytes File size in bytes
+ * @returns Formatted file size string (B, KB, MB)
+ */
+export const formatFileSize = (bytes: number): string => {
+  if (bytes < 1024) return bytes + " B";
+  if (bytes < 1048576) return (bytes / 1024).toFixed(1) + " KB";
+  return (bytes / 1048576).toFixed(1) + " MB";
+};
diff --git a/apps/mobile/src/utils/index.ts b/apps/mobile/src/utils/index.ts
new file mode 100644
index 0000000000..ed596f5d61
--- /dev/null
+++ b/apps/mobile/src/utils/index.ts
@@ -0,0 +1,2 @@
+export * from "./date";
+export * from "./file";
diff --git a/apps/mobile/src/views/home.tsx b/apps/mobile/src/views/home.tsx
index 935c2b8a89..3ad5864dfb 100644
--- a/apps/mobile/src/views/home.tsx
+++ b/apps/mobile/src/views/home.tsx
@@ -1,47 +1,59 @@
 import type { ActivityLoaderArgs } from "@stackflow/config";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { ActivityComponentType, useFlow, useLoaderData } from "@stackflow/react/future";
-import { AudioLinesIcon, CalendarIcon, MicIcon, Settings, SquarePenIcon } from "lucide-react";
+import {
+  AudioLinesIcon,
+  CalendarIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  MicIcon,
+  Settings,
+  SquarePenIcon,
+} from "lucide-react";
 import * as React from "react";
 
 import { BottomSheet, BottomSheetContent } from "@hypr/ui/components/ui/bottom-sheet";
 import { EventItem, NoteItem } from "../components/home";
 import { mockEvents, mockSessions } from "../mock";
-import { formatDateHeader, getSortedDates, groupNotesByDate } from "../utils/date";
+import { formatDateHeader, getSortedDatesForNotes, groupNotesByDate } from "../utils/date";
 
 import { type Session } from "@hypr/plugin-db";
 import { Button } from "@hypr/ui/components/ui/button";
 
-export function homeActivityLoader({}: ActivityLoaderArgs<"HomeActivity">) {
+export function homeLoader({}: ActivityLoaderArgs<"HomeView">) {
+  // TODO: For the upcoming events in mobile, let's just fetch < 1 week
   return {
     upcomingEvents: mockEvents,
     notes: mockSessions,
   };
 }
 
-export const HomeActivity: ActivityComponentType<"HomeActivity"> = () => {
-  const { upcomingEvents, notes } = useLoaderData<typeof homeActivityLoader>();
+export const HomeView: ActivityComponentType<"HomeView"> = () => {
+  const { upcomingEvents, notes } = useLoaderData<typeof homeLoader>();
   const [sheetOpen, setSheetOpen] = React.useState(false);
+  const [upcomingExpanded, setUpcomingExpanded] = React.useState(true);
 
   const { push } = useFlow();
 
   const groupedSessions = groupNotesByDate(notes ?? []);
-  const sortedDates = getSortedDates(groupedSessions);
+  const sortedDates = getSortedDatesForNotes(groupedSessions);
 
   const handleClickNote = (id: string) => {
-    push("NoteActivity", { id });
+    push("NoteView", { id });
   };
 
-  const handleClickUpload = () => {
-    push("NoteActivity", { id: "new" });
+  const handleUploadFile = () => {
+    push("RecordingsView", {});
+    setSheetOpen(false);
   };
 
-  const handleClickRecord = () => {
-    push("NoteActivity", { id: "new" });
+  const handleStartRecord = () => {
+    push("NoteView", { id: "new" });
+    setSheetOpen(false);
   };
 
   const handleClickSettings = () => {
-    push("SettingsActivity", {});
+    push("SettingsView", {});
   };
 
   const RightButton = () => (
@@ -61,20 +73,28 @@ export const HomeActivity: ActivityComponentType<"HomeActivity"> = () => {
         <div className="flex-1 overflow-y-auto px-4 pb-20">
           {upcomingEvents && upcomingEvents.length > 0 && (
             <section className="mt-4 mb-6">
-              <h2 className="font-medium text-neutral-600 mb-3 flex items-center gap-2">
+              <h2
+                className="font-medium text-neutral-600 mb-3 flex items-center gap-2 cursor-pointer"
+                onClick={() => setUpcomingExpanded(!upcomingExpanded)}
+              >
                 <CalendarIcon className="size-4" />
                 <strong>Upcoming</strong>
+                {upcomingExpanded
+                  ? <ChevronDownIcon className="size-4 text-neutral-600" />
+                  : <ChevronRightIcon className="size-4 text-neutral-600" />}
               </h2>
 
-              <div className="space-y-2">
-                {upcomingEvents.map((event) => (
-                  <EventItem
-                    key={event.id}
-                    event={event}
-                    onSelect={(sessionId) => handleClickNote(sessionId)}
-                  />
-                ))}
-              </div>
+              {upcomingExpanded && (
+                <div className="space-y-2">
+                  {upcomingEvents.map((event) => (
+                    <EventItem
+                      key={event.id}
+                      event={event}
+                      onSelect={(sessionId) => handleClickNote(sessionId)}
+                    />
+                  ))}
+                </div>
+              )}
             </section>
           )}
 
@@ -127,12 +147,12 @@ export const HomeActivity: ActivityComponentType<"HomeActivity"> = () => {
               <Button
                 className="aspect-square w-full flex-col gap-2 text-red-500"
                 variant="outline"
-                onClick={handleClickUpload}
+                onClick={handleUploadFile}
               >
                 <AudioLinesIcon size={32} />
                 Upload recording
               </Button>
-              <Button className="aspect-square w-full flex-col gap-2 bg-red-500" onClick={handleClickRecord}>
+              <Button className="aspect-square w-full flex-col gap-2 bg-red-500" onClick={handleStartRecord}>
                 <MicIcon size={32} />
                 Start recording
               </Button>
@@ -146,6 +166,6 @@ export const HomeActivity: ActivityComponentType<"HomeActivity"> = () => {
 
 declare module "@stackflow/config" {
   interface Register {
-    HomeActivity: {};
+    HomeView: {};
   }
 }
diff --git a/apps/mobile/src/views/login.tsx b/apps/mobile/src/views/login.tsx
index 1146a21ee4..de595b629a 100644
--- a/apps/mobile/src/views/login.tsx
+++ b/apps/mobile/src/views/login.tsx
@@ -5,7 +5,7 @@ import { Particles } from "@hypr/ui/components/ui/particles";
 import PushableButton from "@hypr/ui/components/ui/pushable-button";
 import { TextAnimate } from "@hypr/ui/components/ui/text-animate";
 
-export const LoginActivity: ActivityComponentType<"LoginActivity"> = () => {
+export const LoginView: ActivityComponentType<"LoginView"> = () => {
   const handleSignIn = () => {
     // TODO: Need to redirect to https://app.hyprnote.com/auth/connect and wait for a callback
   };
@@ -53,6 +53,6 @@ export const LoginActivity: ActivityComponentType<"LoginActivity"> = () => {
 
 declare module "@stackflow/config" {
   interface Register {
-    LoginActivity: {};
+    LoginView: {};
   }
 }
diff --git a/apps/mobile/src/views/note.tsx b/apps/mobile/src/views/note.tsx
index 179076d184..f073bb86a6 100644
--- a/apps/mobile/src/views/note.tsx
+++ b/apps/mobile/src/views/note.tsx
@@ -1,12 +1,13 @@
 import type { ActivityLoaderArgs } from "@stackflow/config";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { ActivityComponentType, useLoaderData } from "@stackflow/react/future";
+import { Share2Icon } from "lucide-react";
 import { NoteContent, NoteInfo } from "../components/note";
 import { mockSessions } from "../mock/home";
 
-export function noteActivityLoader({
+export function noteLoader({
   params,
-}: ActivityLoaderArgs<"NoteActivity">) {
+}: ActivityLoaderArgs<"NoteView">) {
   const { id } = params;
 
   // Find the session in the mock data or return a default session
@@ -27,13 +28,23 @@ export function noteActivityLoader({
   return { session };
 }
 
-export const NoteActivity: ActivityComponentType<"NoteActivity"> = () => {
-  const { session } = useLoaderData<typeof noteActivityLoader>();
+export const NoteView: ActivityComponentType<"NoteView"> = () => {
+  const { session } = useLoaderData<typeof noteLoader>();
+
+  const handleShareNote = () => {
+    // TODO: Implementation for sharing the note would go here
+  };
+
+  const ShareButton = () => (
+    <button onClick={handleShareNote}>
+      <Share2Icon size={20} />
+    </button>
+  );
 
   return (
     <AppScreen
       appBar={{
-        title: "Note - " + session.id,
+        renderRight: ShareButton,
       }}
     >
       <div className="relative flex h-full flex-col">
@@ -48,7 +59,7 @@ export const NoteActivity: ActivityComponentType<"NoteActivity"> = () => {
 
 declare module "@stackflow/config" {
   interface Register {
-    NoteActivity: {
+    NoteView: {
       id: string;
     };
   }
diff --git a/apps/mobile/src/views/recordings.tsx b/apps/mobile/src/views/recordings.tsx
new file mode 100644
index 0000000000..2f347ef71c
--- /dev/null
+++ b/apps/mobile/src/views/recordings.tsx
@@ -0,0 +1,118 @@
+import type { ActivityLoaderArgs } from "@stackflow/config";
+import { AppScreen } from "@stackflow/plugin-basic-ui";
+import { ActivityComponentType, useFlow, useLoaderData } from "@stackflow/react/future";
+import { UploadIcon } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { RecordingItem } from "../components/recordings/recording-item";
+import { LocalRecording, localRecordings } from "../mock/recordings";
+import { formatDateHeader, getSortedDatesForRecordings, groupRecordingsByDate } from "../utils/date";
+
+import { Button } from "@hypr/ui/components/ui/button";
+
+export function recordingsLoader({}: ActivityLoaderArgs<"RecordingsView">) {
+  return {
+    recordings: localRecordings,
+  };
+}
+
+export const RecordingsView: ActivityComponentType<"RecordingsView"> = () => {
+  const { recordings } = useLoaderData<typeof recordingsLoader>();
+  const [localRecordingsList] = useState<LocalRecording[]>(recordings);
+  const [selectedRecordingId, setSelectedRecordingId] = useState<string | null>(null);
+
+  const { replace } = useFlow();
+
+  const groupedRecordings = useMemo(() => {
+    return groupRecordingsByDate(localRecordingsList);
+  }, [localRecordingsList]);
+
+  const sortedDates = useMemo(() => {
+    return getSortedDatesForRecordings(groupedRecordings);
+  }, [groupedRecordings]);
+
+  const handleClickRecording = (recordingId: string) => {
+    setSelectedRecordingId(prevId => prevId === recordingId ? null : recordingId);
+  };
+
+  const handleConfirmSelection = () => {
+    const selectedRecording = localRecordingsList.find(
+      (recording) => recording.id === selectedRecordingId,
+    );
+
+    if (selectedRecording) {
+      // Create a unique note ID based on the recording ID
+      const noteId = `note-${selectedRecording.id}`;
+
+      // Navigate to the note view with the new note ID by replacing
+      replace("NoteView", { id: noteId });
+    }
+
+    // TODO: Implementation for confirming the selection would go here
+  };
+
+  return (
+    <AppScreen
+      appBar={{
+        title: "Recordings",
+      }}
+    >
+      <div className="relative flex h-full flex-col">
+        <div className="flex-1 overflow-y-auto px-4 pb-20">
+          {localRecordingsList.length === 0
+            ? (
+              <div className="flex flex-col justify-center items-center h-64">
+                <p className="text-neutral-500 mb-4">No recordings yet</p>
+              </div>
+            )
+            : (
+              <>
+                {sortedDates.map((dateKey: string) => {
+                  const { date, recordings: dateRecordings } = groupedRecordings[dateKey];
+
+                  return (
+                    <section key={dateKey} className="mb-6">
+                      <h2 className="font-bold text-neutral-600 mb-3">
+                        {formatDateHeader(date)}
+                      </h2>
+
+                      <div className="space-y-2">
+                        {dateRecordings.map((recording) => (
+                          <RecordingItem
+                            key={recording.id}
+                            recording={recording}
+                            onSelect={() => handleClickRecording(recording.id)}
+                            isSelected={selectedRecordingId === recording.id}
+                          />
+                        ))}
+                      </div>
+                    </section>
+                  );
+                })}
+              </>
+            )}
+        </div>
+
+        {selectedRecordingId && (
+          <div
+            className="absolute z-10 bottom-0 left-0 right-0 flex justify-center px-4 pb-4"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <Button
+              className="w-full py-3 text-lg font-semibold"
+              onClick={handleConfirmSelection}
+            >
+              <UploadIcon size={20} className="mr-2" />Upload Recording
+            </Button>
+          </div>
+        )}
+      </div>
+    </AppScreen>
+  );
+};
+
+declare module "@stackflow/config" {
+  interface Register {
+    RecordingsView: {};
+  }
+}
diff --git a/apps/mobile/src/views/settings.tsx b/apps/mobile/src/views/settings.tsx
index 3d99b73368..cadfe16bb3 100644
--- a/apps/mobile/src/views/settings.tsx
+++ b/apps/mobile/src/views/settings.tsx
@@ -20,12 +20,12 @@ const schema = z.object({
 
 type Schema = z.infer<typeof schema>;
 
-export function settingsActivityLoader({}: ActivityLoaderArgs<"SettingsActivity">) {
+export function settingsLoader({}: ActivityLoaderArgs<"SettingsView">) {
   return { settings: mockUserSettings };
 }
 
-export const SettingsActivity: ActivityComponentType<"SettingsActivity"> = () => {
-  const { settings } = useLoaderData<typeof settingsActivityLoader>();
+export const SettingsView: ActivityComponentType<"SettingsView"> = () => {
+  const { settings } = useLoaderData<typeof settingsLoader>();
   const [showSignOutModal, setShowSignOutModal] = useState(false);
 
   const form = useForm<Schema>({
@@ -37,9 +37,8 @@ export const SettingsActivity: ActivityComponentType<"SettingsActivity"> = () =>
   });
 
   const handleSignOut = () => {
-    // Replace with actual sign out logic
-    console.log("Signing out...");
-    // Close the modal
+    // TODO: Replace with actual sign out logic
+
     setShowSignOutModal(false);
   };
 
@@ -140,6 +139,6 @@ export const SettingsActivity: ActivityComponentType<"SettingsActivity"> = () =>
 
 declare module "@stackflow/config" {
   interface Register {
-    SettingsActivity: {};
+    SettingsView: {};
   }
 }
diff --git a/extensions/linear/src/widgets/components/ticket-card.tsx b/extensions/linear/src/widgets/components/ticket-card.tsx
index 8c972f375a..389e602d0b 100644
--- a/extensions/linear/src/widgets/components/ticket-card.tsx
+++ b/extensions/linear/src/widgets/components/ticket-card.tsx
@@ -62,12 +62,7 @@ export default function TicketCard({ ticket }: { ticket: Ticket }) {
     // Prevent the card click event from firing
     e.stopPropagation();
 
-    // Here you would implement the logic to create a new ticket
-    // For example, open a modal or navigate to a create ticket page
-    console.log("Create new ticket");
-
-    // You might want to call an API or trigger an action in your application
-    // For example: dispatch(createTicket(ticket));
+    // TODO: Implement the logic to create a new ticket
   };
 
   return (