Welcome screen for daily notes

apps/desktop/src/editor/node-views/session-view.tsx

@@ -156,26 +156,23 @@ export const SessionNodeView = forwardRef<
         onMouseDown={handleRowMouseDown}
         onClick={handleRowClick}
         className={cn([
-          "group flex items-start rounded-md px-2 py-1 transition-colors",
+          "group flex items-start rounded-md px-2 py-1.5 transition-colors",
           "-mx-2 focus-within:bg-neutral-50 hover:bg-neutral-50",
           "cursor-pointer",
         ])}
       >
         {isRecording ? (
-          <div
-            className="flex size-[18px] shrink-0 items-center justify-center"
-            contentEditable={false}
-          >
+          <div className="flex size-[18px] shrink-0" contentEditable={false}>
             <div className="size-2.5 animate-pulse rounded-full bg-red-500" />
           </div>
         ) : (
           <TaskCheckbox status={status} isInteractive onToggle={handleToggle} />
         )}
-        <div className="flex min-w-0 flex-1 items-baseline gap-2">
+        <div className="flex min-w-0 flex-1 gap-2">
           <div
             data-session-title
             className={cn([
-              "min-w-0 text-sm text-neutral-900",
+              "min-w-0 text-neutral-900",
               "[&>p]:m-0 [&>p]:min-w-0 [&>p]:truncate",
               status === "done" && "[&>p]:line-through [&>p]:opacity-60",
             ])}

apps/desktop/src/editor/node-views/task-item-view.tsx

@@ -144,7 +144,7 @@ export const TaskItemView = forwardRef<
         onToggle={handleToggle}
       />
       <div className="flex min-w-0 flex-1 flex-wrap items-start gap-2">
-        <div className="min-w-0 flex-1">{children}</div>
+        <div className="text-box-trim min-w-0 flex-1">{children}</div>
         {taskSource && taskId ? (
           <div contentEditable={false} suppressContentEditableWarning>
             {showDueDateInput ? (

apps/desktop/src/main2/home/date-header.tsx

@@ -19,7 +19,17 @@ function formatDateHeader(dateStr: string): string {
   return `${month} ${day}${ordinalSuffix(day)}`;
 }
 
-export function DateHeader({ date, muted }: { date: string; muted?: boolean }) {
+export function DateHeader({
+  date,
+  muted,
+  isToday,
+  onDismissWelcome,
+}: {
+  date: string;
+  muted?: boolean;
+  isToday?: boolean;
+  onDismissWelcome?: () => void;
+}) {
   return (
     <div className="flex items-center gap-3 px-6 pt-6 pb-3">
       <h2
@@ -31,6 +41,20 @@ export function DateHeader({ date, muted }: { date: string; muted?: boolean }) {
       >
         {formatDateHeader(date)}
       </h2>
+      {isToday && (
+        <span className="rounded-full bg-neutral-900 px-2.5 py-0.5 text-xs font-medium text-white">
+          today
+        </span>
+      )}
+      <div className="flex-1" />
+      {onDismissWelcome && (
+        <button
+          onClick={onDismissWelcome}
+          className="text-xs text-neutral-400 transition-colors hover:text-neutral-600"
+        >
+          Clear welcome message
+        </button>
+      )}
     </div>
   );
 }

apps/desktop/src/main2/home/index.tsx

@@ -7,6 +7,7 @@ import { LazyNote } from "./lazy-note";
 import { DailyNoteEditor } from "./note-editor";
 import { TodayButton } from "./today-button";
 import { useToday } from "./use-today";
+import { WELCOME_DATE_KEY, WELCOME_DISMISSED_KEY } from "./welcome-content";
 
 import { useTimezone, toTz } from "~/calendar/hooks";
 import { StandardTabWrapper } from "~/shared/main";
@@ -17,6 +18,15 @@ export function Main2Home() {
   const scrollRef = useRef<HTMLDivElement>(null);
   const todayRef = useRef<HTMLDivElement>(null);
   const [showTodayButton, setShowTodayButton] = useState(false);
+  const [showWelcome, setShowWelcome] = useState(() => {
+    if (localStorage.getItem(WELCOME_DISMISSED_KEY) === "true") return false;
+    const welcomeDate = localStorage.getItem(WELCOME_DATE_KEY);
+    if (!welcomeDate) {
+      localStorage.setItem(WELCOME_DATE_KEY, today);
+      return true;
+    }
+    return welcomeDate === today;
+  });
 
   const tomorrow = useMemo(() => {
     const d = new Date();
@@ -32,14 +42,19 @@ export function Main2Home() {
     });
   }, [today, tz]);
 
+  const handleDismissWelcome = useCallback(() => {
+    localStorage.setItem(WELCOME_DISMISSED_KEY, "true");
+    setShowWelcome(false);
+  }, []);
+
   const scrollToToday = useCallback(() => {
     todayRef.current?.scrollIntoView({ behavior: "smooth" });
   }, []);
 
   useEffect(() => {
     const scrollEl = scrollRef.current;
-    const todayEl = todayRef.current;
-    if (!scrollEl || !todayEl) return;
+    const targetEl = todayRef.current;
+    if (!scrollEl || !targetEl) return;
 
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -48,7 +63,7 @@ export function Main2Home() {
       { root: scrollEl, threshold: 0 },
     );
 
-    observer.observe(todayEl);
+    observer.observe(targetEl);
     return () => observer.disconnect();
   }, []);
 
@@ -70,8 +85,14 @@ export function Main2Home() {
             <div className="mx-6 border-t border-neutral-200" />
 
             <div ref={todayRef} className="min-h-[400px]">
-              <DateHeader date={today} />
-              <DailyNoteEditor date={today} isToday />
+              <DateHeader
+                date={today}
+                isToday
+                onDismissWelcome={
+                  showWelcome ? handleDismissWelcome : undefined
+                }
+              />
+              <DailyNoteEditor date={today} isToday showWelcome={showWelcome} />
             </div>
 
             {pastDates.map((date) => (
@@ -80,9 +101,33 @@ export function Main2Home() {
                 <LazyNote date={date} muted />
               </div>
             ))}
+
+            {import.meta.env.DEV && !showWelcome && (
+              <div className="px-6 py-4">
+                <DebugResetWelcome
+                  onReset={() => {
+                    localStorage.removeItem(WELCOME_DISMISSED_KEY);
+                    localStorage.removeItem(WELCOME_DATE_KEY);
+                    localStorage.setItem(WELCOME_DATE_KEY, today);
+                    setShowWelcome(true);
+                  }}
+                />
+              </div>
+            )}
           </div>
         </div>
       </div>
     </StandardTabWrapper>
   );
 }
+
+function DebugResetWelcome({ onReset }: { onReset: () => void }) {
+  return (
+    <button
+      onClick={onReset}
+      className="rounded bg-neutral-100 px-3 py-1.5 text-xs text-neutral-500 hover:bg-neutral-200"
+    >
+      [debug] Reset welcome note
+    </button>
+  );
+}

apps/desktop/src/main2/home/note-editor.css

@@ -1,16 +1,80 @@
+/* --- Daily notes editor style overrides --- */
+
+.main2-daily-note-editor .tiptap p {
+  margin-bottom: 0rem;
+  line-height: 26px;
+}
+
+.main2-daily-note-editor .tiptap h1 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-top: 1.5rem;
+  margin-bottom: 1.25rem;
+}
+.main2-daily-note-editor .tiptap h2 {
+  font-weight: 600;
+  font-size: 1.25rem;
+  margin-top: 1.25rem;
+  margin-bottom: 1rem;
+}
+
+.main2-daily-note-editor .tiptap h3,
+.main2-daily-note-editor .tiptap h4,
+.main2-daily-note-editor .tiptap h5,
+.main2-daily-note-editor .tiptap h6 {
+  font-weight: 600;
+  font-size: 1rem;
+  margin-top: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.main2-daily-note-editor .tiptap :not(:first-child):is(h1, h2, h3, h4, h5, h6) {
+  margin-top: 1rem;
+}
+
+.main2-daily-note-editor .tiptap ul[data-type="taskList"] {
+  padding: 0;
+  margin-left: 0;
+  margin-top: 0rem;
+}
+
+.main2-daily-note-editor .tiptap ul[data-type="taskList"] li {
+  margin-bottom: 0.5rem;
+}
+
+.main2-daily-note-editor .tiptap li[data-type="taskItem"] {
+  margin-bottom: 0.5rem;
+}
+
+.text-box-trim {
+  text-box-trim: trim-start;
+}
+
+.main2-daily-note-editor .tiptap hr {
+  border: none;
+  border-top: 1px solid #e5e5e5;
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+}
+/* --- Session title icon --- */
+
 .main2-daily-note-editor [data-session-title] {
   position: relative;
-  padding-left: 28px;
+  padding-left: 24px;
   line-height: 1.25rem;
 }
 
+.main2-daily-note-editor [data-session-title] > p {
+  text-box-trim: trim-both;
+}
+
 .main2-daily-note-editor [data-session-title]::before {
   content: "";
   position: absolute;
-  top: calc((1.25rem - 13px) / 2);
-  left: 8px;
-  width: 13px;
-  height: 13px;
+  top: calc((1.25rem - 12px) / 2);
+  left: 4px;
+  width: 12px;
+  height: 12px;
   pointer-events: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
   background-position: center;