Mobile

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"],
       },

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 (

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 (

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);

apps/mobile/package.json

@@ -13,12 +13,12 @@
   "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:^",
     "@hypr/plugin-misc": "workspace:^",
     "@hypr/plugin-template": "workspace:^",
+    "@hypr/tiptap": "workspace:^",
     "@hypr/ui": "workspace:^",
     "@stackflow/config": "^1.2.1",
     "@stackflow/core": "^1.2.0",
@@ -39,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",

apps/mobile/src/components/home/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>
+  );
+}

apps/mobile/src/components/home/index.ts

@@ -0,0 +1,2 @@
+export * from "./event-item";
+export * from "./note-item";

apps/mobile/src/components/home/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>
+  );
+}

apps/mobile/src/components/note/index.ts

@@ -0,0 +1,2 @@
+export * from "./note-content";
+export * from "./note-info";

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>
+  );
+}

apps/mobile/src/components/note/note-info.tsx

@@ -0,0 +1,94 @@
+import { 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>
+  );
+}

apps/mobile/src/components/recordings/index.ts

@@ -0,0 +1 @@
+export * from "./recording-item";

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>
+  );
+};

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>,