Refine editor toolbar UX and calendar day selection behavior

Journal.App/src/lib/components/EditorPanel.svelte

@@ -27,6 +27,7 @@
   export let calendarBusy = false;
   export let calendarError = "";
   export let previewOnly = true;
+  export let onForceSave: () => Promise<void> | void = () => {};
 
   type CalendarCard = {
     id: string;
@@ -160,6 +161,7 @@
       {openDocumentName}
       {openDocumentContent}
       {onDocumentContentChange}
+      {onForceSave}
       {onOpenDocument}
       {previewOnly}
     />

Journal.App/src/lib/components/SidePanel.svelte

@@ -82,6 +82,7 @@
   let calendarTimelineDebounce: ReturnType<typeof setTimeout> | null = null;
   let lastActiveSection = "";
   let calendarLastRefreshedAt = "";
+  let calendarDateExplicitlySelected = false;
   const CALENDAR_SAVED_VIEWS_KEY = "journal.calendar.savedViews";
 
   let selectedCalendarDate: { year: number; month: number; day: number; key: string } | null = {
@@ -454,7 +455,9 @@
   function handleDateActivate(payload: { year: number; month: number; day: number; key: string }) {
     selectedCalendarDate = payload;
     if (activeSection !== "calendar") return;
-    openOrCreateDailyEntry(payload.key);
+    calendarDateExplicitlySelected = true;
+    calendarStartDate = payload.key;
+    calendarEndDate = payload.key;
   }
 
   function toTemplateStoreId(filePath: string): string {
@@ -505,13 +508,19 @@
     }
 
     if (activeSection === "calendar") {
-      const selected = selectedCalendarDate ?? {
+      if (calendarDateExplicitlySelected) {
-        year: calendarYear,
+        const selected = selectedCalendarDate ?? {
-        month: calendarMonth,
+          year: calendarYear,
-        day: 1,
+          month: calendarMonth,
-        key: toDateKey(calendarYear, calendarMonth, 1)
+          day: 1,
-      };
+          key: toDateKey(calendarYear, calendarMonth, 1)
-      openOrCreateDailyEntry(selected.key);
+        };
+        openOrCreateDailyEntry(selected.key);
+      } else {
+        showNewItemInput = true;
+        newItemName = "";
+        queueMicrotask(() => newItemInput?.focus());
+      }
     }
   }
 
@@ -571,6 +580,11 @@
       entriesStore.update((items) => [item, ...items]);
       onEditItem(item);
       createTemplateMode = false;
+    } else if (activeSection === "calendar") {
+      const id = `entries/draft-${Date.now()}`;
+      const item = { id, label, initialContent: `# ${label}\n\n` };
+      entriesStore.update((items) => [item, ...items]);
+      onEditItem(item);
     } else if (activeSection === "todos") {
       try {
         const { meta, items: todoItems } = await createTodoListFromLabel(label);
@@ -694,6 +708,7 @@
   }
 
   $: if (activeSection === "calendar" && lastActiveSection !== "calendar") {
+    calendarDateExplicitlySelected = false;
     void forceRefreshCalendar({ allowWhileBusy: true });
     setTimeout(() => {
       void forceRefreshCalendar({ allowWhileBusy: true });
@@ -734,6 +749,19 @@
   </header>
 
   {#if isCalendarSection}
+    {#if showNewItemInput}
+      <div class="new-item-input">
+        <input
+          type="text"
+          bind:this={newItemInput}
+          bind:value={newItemName}
+          placeholder="Entry title..."
+          on:keydown={handleNewItemKeydown}
+          on:blur={confirmNewItem}
+        />
+      </div>
+    {/if}
+
     <div class="calendar-controls">
       <div class="calendar-control-row">
         <label>
@@ -1139,12 +1167,16 @@
     width: 100%;
     border: 1px solid var(--border-soft);
     border-radius: 7px;
-    background: var(--surface-2);
+    background-color: var(--surface-2);
     color: var(--text-primary);
     padding: 6px 8px;
     font-size: 0.78rem;
   }
 
+  .calendar-control-row select {
+    padding-right: 30px;
+  }
+
   .calendar-saved-views {
     display: flex;
     flex-direction: column;

Journal.App/src/lib/components/editor/FragmentEditor.svelte

@@ -334,7 +334,7 @@
     width: 100%;
     border: 1px solid var(--border-soft);
     border-radius: 8px;
-    background: color-mix(in srgb, var(--surface-1) 88%, var(--bg-editor) 12%);
+    background-color: color-mix(in srgb, var(--surface-1) 88%, var(--bg-editor) 12%);
     color: var(--text-primary);
     padding: 10px 11px;
     font-size: 0.88rem;

Journal.App/src/lib/components/editor/MarkdownEditor.svelte

@@ -13,6 +13,7 @@
   export let openDocumentName = "";
   export let openDocumentContent = "";
   export let onDocumentContentChange: (content: string) => void = () => {};
+  export let onForceSave: () => Promise<void> | void = () => {};
   export let onOpenDocument: (doc: {
     id: string;
     label: string;
@@ -37,9 +38,12 @@
   let templateError = "";
   let templateRefreshRequested = false;
   let listMode: ListMode = null;
+  let isManualSaving = false;
+  let manualSaveError = "";
   let fragmentAttachmentOptions: AttachmentOption[] = [];
   let listAttachmentOptions: AttachmentOption[] = [];
   let todoAttachmentOptions: AttachmentOption[] = [];
+  let attachmentModalOpen = false;
 
   function updateDraft(value: string) {
     markdownText = value;
@@ -209,6 +213,19 @@
     appendToAttachmentsSection(line, option.id);
   }
 
+  function openAttachmentModal() {
+    attachmentModalOpen = true;
+  }
+
+  function closeAttachmentModal() {
+    attachmentModalOpen = false;
+  }
+
+  function attachFromModal(kind: "Fragment" | "List" | "To-Do", option: AttachmentOption) {
+    attachReference(kind, option);
+    attachmentModalOpen = false;
+  }
+
   function resolveJournalLinkTarget(targetId: string): { id: string; label: string; initialContent: string } | null {
     if (!targetId) return null;
 
@@ -290,6 +307,15 @@
   function handleMarkdownKeydown(event: KeyboardEvent) {
     if (!editorInput) return;
 
+    if ((event.ctrlKey || event.metaKey) && !event.shiftKey && !event.altKey) {
+      const key = event.key.toLowerCase();
+      if (key === "u") {
+        event.preventDefault();
+        applyWrap("++");
+        return;
+      }
+    }
+
     if (event.key === "Escape" && listMode) {
       event.preventDefault();
       const current = markdownText;
@@ -353,6 +379,19 @@
     });
   }
 
+  async function handleManualSave() {
+    if (isManualSaving) return;
+    isManualSaving = true;
+    manualSaveError = "";
+    try {
+      await onForceSave();
+    } catch (error) {
+      manualSaveError = String(error);
+    } finally {
+      isManualSaving = false;
+    }
+  }
+
   onMount(() => {
     void refreshTemplates();
   });
@@ -396,24 +435,106 @@
       {templatesBusy}
       {templateOptions}
       {listMode}
-      fragmentOptions={fragmentAttachmentOptions}
+      attachmentsDisabled={fragmentAttachmentOptions.length + listAttachmentOptions.length + todoAttachmentOptions.length === 0}
-      listOptions={listAttachmentOptions}
-      todoOptions={todoAttachmentOptions}
       onApplyHeading={applyHeading}
       onApplyTemplate={(filePath) => void applyTemplateByPath(filePath)}
-      onAttachFragment={(option) => attachReference("Fragment", option)}
+      onOpenAttachments={openAttachmentModal}
-      onAttachList={(option) => attachReference("List", option)}
-      onAttachTodo={(option) => attachReference("To-Do", option)}
       onBold={() => applyWrap("**")}
       onItalic={() => applyWrap("*")}
+      onUnderline={() => applyWrap("++")}
       onLink={insertLink}
       onToggleUl={() => toggleListMode("ul")}
       onToggleOl={() => toggleListMode("ol")}
       onCode={() => applyWrap("`")}
+      onSave={() => void handleManualSave()}
+      saveBusy={isManualSaving}
     />
     {#if templateError}
       <p class="template-error">{templateError}</p>
     {/if}
+    {#if manualSaveError}
+      <p class="template-error">{manualSaveError}</p>
+    {/if}
+  {/if}
+
+  {#if attachmentModalOpen}
+    <div class="attachment-modal-backdrop" role="presentation">
+      <div class="attachment-modal" role="dialog" aria-modal="true" aria-label="Attach item">
+        <header class="attachment-modal-header">
+          <h2>Attach Item</h2>
+          <button type="button" class="attachment-modal-close" on:click={closeAttachmentModal} aria-label="Close attach dialog">
+            <span class="material-symbols-outlined" aria-hidden="true">close</span>
+          </button>
+        </header>
+
+        {#if fragmentAttachmentOptions.length + listAttachmentOptions.length + todoAttachmentOptions.length === 0}
+          <p class="attachment-empty">No fragments, lists, or to-do lists are available to attach.</p>
+        {:else}
+          {#if fragmentAttachmentOptions.length > 0}
+            <div class="attachment-group">
+              <h3>Fragments</h3>
+              <select
+                class="attachment-select"
+                aria-label="Attach fragment"
+                on:change={(event) => {
+                  const target = event.currentTarget as HTMLSelectElement;
+                  const selected = fragmentAttachmentOptions.find((option) => option.id === target.value);
+                  if (selected) attachFromModal("Fragment", selected);
+                  target.value = "";
+                }}
+              >
+                <option value="">Select fragment...</option>
+                {#each fragmentAttachmentOptions as option}
+                  <option value={option.id}>{option.label}</option>
+                {/each}
+              </select>
+            </div>
+          {/if}
+
+          {#if listAttachmentOptions.length > 0}
+            <div class="attachment-group">
+              <h3>Lists</h3>
+              <select
+                class="attachment-select"
+                aria-label="Attach list"
+                on:change={(event) => {
+                  const target = event.currentTarget as HTMLSelectElement;
+                  const selected = listAttachmentOptions.find((option) => option.id === target.value);
+                  if (selected) attachFromModal("List", selected);
+                  target.value = "";
+                }}
+              >
+                <option value="">Select list...</option>
+                {#each listAttachmentOptions as option}
+                  <option value={option.id}>{option.label}</option>
+                {/each}
+              </select>
+            </div>
+          {/if}
+
+          {#if todoAttachmentOptions.length > 0}
+            <div class="attachment-group">
+              <h3>To-Do Lists</h3>
+              <select
+                class="attachment-select"
+                aria-label="Attach to-do list"
+                on:change={(event) => {
+                  const target = event.currentTarget as HTMLSelectElement;
+                  const selected = todoAttachmentOptions.find((option) => option.id === target.value);
+                  if (selected) attachFromModal("To-Do", selected);
+                  target.value = "";
+                }}
+              >
+                <option value="">Select to-do list...</option>
+                {#each todoAttachmentOptions as option}
+                  <option value={option.id}>{option.label}</option>
+                {/each}
+              </select>
+            </div>
+          {/if}
+        {/if}
+      </div>
+    </div>
   {/if}
 
   <div class="editor-workspace">
@@ -470,6 +591,95 @@
     padding: 0 14px;
   }
 
+  .attachment-modal-backdrop {
+    position: fixed;
+    inset: 0;
+    background: color-mix(in srgb, var(--bg-app) 60%, #000 40%);
+    display: grid;
+    place-items: center;
+    padding: 20px;
+    z-index: 35;
+  }
+
+  .attachment-modal {
+    width: min(680px, 92vw);
+    max-height: 78vh;
+    overflow: auto;
+    border: 1px solid var(--border-soft);
+    border-radius: 12px;
+    background: color-mix(in srgb, var(--surface-1) 94%, var(--bg-editor) 6%);
+    padding: 12px;
+    display: grid;
+    gap: 10px;
+  }
+
+  .attachment-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  .attachment-modal-header h2 {
+    font-size: 0.9rem;
+    color: var(--text-primary);
+  }
+
+  .attachment-modal-close {
+    border: 1px solid var(--border-soft);
+    border-radius: 8px;
+    background: color-mix(in srgb, var(--surface-2) 92%, var(--bg-editor) 8%);
+    color: var(--text-primary);
+    width: 30px;
+    height: 30px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+
+  .attachment-modal-close:hover {
+    background: var(--bg-hover);
+  }
+
+  .attachment-empty {
+    color: var(--text-muted);
+    font-size: 0.82rem;
+  }
+
+  .attachment-group {
+    display: grid;
+    gap: 6px;
+  }
+
+  .attachment-group h3 {
+    font-size: 0.82rem;
+    color: var(--text-muted);
+  }
+
+  .attachment-select {
+    width: 100%;
+    border: 1px solid var(--border-soft);
+    border-radius: 8px;
+    background-color: color-mix(in srgb, var(--surface-2) 90%, var(--bg-editor) 10%);
+    color: var(--text-primary);
+    padding: 8px 34px 8px 10px;
+    font-size: 0.82rem;
+    cursor: pointer;
+  }
+
+  .attachment-select:hover,
+  .attachment-select:focus-visible {
+    background-color: var(--bg-hover);
+    border-color: var(--border-strong);
+    outline: none;
+  }
+
+  .attachment-select option {
+    color: #111827;
+    background: #ffffff;
+  }
+
   .editor-workspace {
     min-height: 0;
     height: 100%;

Journal.App/src/lib/components/editor/MarkdownToolbar.svelte

@@ -6,129 +6,181 @@
   export let templatesBusy = false;
   export let templateOptions: EntryTemplateItemDto[] = [];
   export let listMode: "ul" | "ol" | null = null;
-  export let fragmentOptions: AttachmentOption[] = [];
+  export let attachmentsDisabled = false;
-  export let listOptions: AttachmentOption[] = [];
-  export let todoOptions: AttachmentOption[] = [];
 
   export let onApplyHeading: (level: number) => void = () => {};
   export let onApplyTemplate: (filePath: string) => void = () => {};
-  export let onAttachFragment: (option: AttachmentOption) => void = () => {};
+  export let onOpenAttachments: () => void = () => {};
-  export let onAttachList: (option: AttachmentOption) => void = () => {};
-  export let onAttachTodo: (option: AttachmentOption) => void = () => {};
   export let onBold: () => void = () => {};
   export let onItalic: () => void = () => {};
+  export let onUnderline: () => void = () => {};
   export let onLink: () => void = () => {};
   export let onToggleUl: () => void = () => {};
   export let onToggleOl: () => void = () => {};
   export let onCode: () => void = () => {};
+  export let onSave: () => void = () => {};
+  export let saveBusy = false;
+
+  let headingMenuOpen = false;
+  let headingMenuEl: HTMLDivElement | null = null;
+  let templateMenuOpen = false;
+  let templateMenuEl: HTMLDivElement | null = null;
+
+  function toggleHeadingMenu() {
+    headingMenuOpen = !headingMenuOpen;
+  }
+
+  function selectHeading(level: number) {
+    onApplyHeading(level);
+    headingMenuOpen = false;
+  }
+
+  function handleHeadingFocusOut(event: FocusEvent) {
+    const next = event.relatedTarget as Node | null;
+    if (headingMenuEl && next && headingMenuEl.contains(next)) return;
+    headingMenuOpen = false;
+  }
+
+  function toggleTemplateMenu() {
+    if (templatesBusy) return;
+    templateMenuOpen = !templateMenuOpen;
+  }
+
+  function selectTemplate(filePath: string) {
+    onApplyTemplate(filePath);
+    templateMenuOpen = false;
+  }
+
+  function handleTemplateFocusOut(event: FocusEvent) {
+    const next = event.relatedTarget as Node | null;
+    if (templateMenuEl && next && templateMenuEl.contains(next)) return;
+    templateMenuOpen = false;
+  }
 </script>
 
 <div class="editor-toolbar">
   <div class="toolbar-group">
-    <select
+    <div class="toolbar-select-wrap heading-wrap" bind:this={headingMenuEl} on:focusout={handleHeadingFocusOut}>
-      class="toolbar-select"
+      <span class="material-symbols-outlined" aria-hidden="true">title</span>
-      aria-label="Header size"
+      <button
-      on:change={(event) => {
+        type="button"
-        const target = event.currentTarget as HTMLSelectElement;
+        class="heading-trigger"
-        const level = Number(target.value);
+        aria-label="Heading"
-        if (level) onApplyHeading(level);
+        title="Heading"
-        target.value = "";
+        aria-haspopup="listbox"
-      }}
+        aria-expanded={headingMenuOpen}
-    >
+        on:click={toggleHeadingMenu}
-      <option value="">Heading</option>
+      >
-      <option value="1">H1</option>
+        <span class="material-symbols-outlined" aria-hidden="true">expand_more</span>
-      <option value="2">H2</option>
+      </button>
-      <option value="3">H3</option>
+      {#if headingMenuOpen}
-      <option value="4">H4</option>
+        <div class="heading-menu" role="listbox" aria-label="Header size">
-      <option value="5">H5</option>
+          <button type="button" class="heading-option" on:click={() => selectHeading(1)}>H1</button>
-      <option value="6">H6</option>
+          <button type="button" class="heading-option" on:click={() => selectHeading(2)}>H2</button>
-    </select>
+          <button type="button" class="heading-option" on:click={() => selectHeading(3)}>H3</button>
+          <button type="button" class="heading-option" on:click={() => selectHeading(4)}>H4</button>
+          <button type="button" class="heading-option" on:click={() => selectHeading(5)}>H5</button>
+          <button type="button" class="heading-option" on:click={() => selectHeading(6)}>H6</button>
+        </div>
+      {/if}
+    </div>
     {#if isEntryDocument}
-      <select
+      <div class="toolbar-select-wrap template-wrap" bind:this={templateMenuEl} on:focusout={handleTemplateFocusOut}>
-        class="toolbar-select"
+        <span class="material-symbols-outlined" aria-hidden="true">description</span>
-        aria-label="Insert template"
+        <button
-        disabled={templatesBusy}
+          type="button"
-        on:change={(event) => {
+          class="template-trigger"
-          const target = event.currentTarget as HTMLSelectElement;
+          aria-label="Insert template"
-          const filePath = target.value;
+          title="Insert template"
-          if (filePath) {
+          aria-haspopup="listbox"
-            onApplyTemplate(filePath);
+          aria-expanded={templateMenuOpen}
-          }
+          disabled={templatesBusy}
-          target.value = "";
+          on:click={toggleTemplateMenu}
-        }}
+        >
-      >
+          <span class="template-trigger-text">{templatesBusy ? "Loading..." : "Template"}</span>
-        <option value="">{templatesBusy ? "Loading templates..." : "Template"}</option>
+          <span class="material-symbols-outlined" aria-hidden="true">expand_more</span>
-        {#each templateOptions as template}
+        </button>
-          <option value={template.filePath}>{template.fileName.replace(/\.template\.md$/i, "")}</option>
+        {#if templateMenuOpen}
-        {/each}
+          <div class="template-menu" role="listbox" aria-label="Template">
-      </select>
+            {#if templateOptions.length === 0}
+              <div class="template-empty">No templates</div>
+            {:else}
+              {#each templateOptions as template}
+                <button
+                  type="button"
+                  class="template-option"
+                  on:click={() => selectTemplate(template.filePath)}
+                >
+                  {template.fileName.replace(/\.template\.md$/i, "")}
+                </button>
+              {/each}
+            {/if}
+          </div>
+        {/if}
+      </div>
 
-      <select
+      <button
-        class="toolbar-select"
+        type="button"
-        aria-label="Attach fragment"
+        class="toolbar-btn toolbar-icon-btn"
-        disabled={fragmentOptions.length === 0}
+        on:click={onOpenAttachments}
-        on:change={(event) => {
+        disabled={attachmentsDisabled}
-          const target = event.currentTarget as HTMLSelectElement;
+        aria-label="Attach item"
-          const selected = fragmentOptions.find((option) => option.id === target.value);
+        title="Attach item"
-          if (selected) {
-            onAttachFragment(selected);
-          }
-          target.value = "";
-        }}
       >
-        <option value="">Attach Fragment</option>
+        <span class="material-symbols-outlined" aria-hidden="true">add</span>
-        {#each fragmentOptions as option}
+      </button>
-          <option value={option.id}>{option.label}</option>
-        {/each}
-      </select>
-
-      <select
-        class="toolbar-select"
-        aria-label="Attach list"
-        disabled={listOptions.length === 0}
-        on:change={(event) => {
-          const target = event.currentTarget as HTMLSelectElement;
-          const selected = listOptions.find((option) => option.id === target.value);
-          if (selected) {
-            onAttachList(selected);
-          }
-          target.value = "";
-        }}
-      >
-        <option value="">Attach List</option>
-        {#each listOptions as option}
-          <option value={option.id}>{option.label}</option>
-        {/each}
-      </select>
-
-      <select
-        class="toolbar-select"
-        aria-label="Attach to-do list"
-        disabled={todoOptions.length === 0}
-        on:change={(event) => {
-          const target = event.currentTarget as HTMLSelectElement;
-          const selected = todoOptions.find((option) => option.id === target.value);
-          if (selected) {
-            onAttachTodo(selected);
-          }
-          target.value = "";
-        }}
-      >
-        <option value="">Attach To-Do</option>
-        {#each todoOptions as option}
-          <option value={option.id}>{option.label}</option>
-        {/each}
-      </select>
     {/if}
   </div>
   <div class="toolbar-divider" aria-hidden="true"></div>
   <div class="toolbar-group">
-    <button type="button" class="toolbar-btn" on:click={onBold}>Bold</button>
+    <button type="button" class="toolbar-btn toolbar-icon-btn" on:click={onBold} aria-label="Bold" title="Bold">
-    <button type="button" class="toolbar-btn" on:click={onItalic}>Italic</button>
+      <span class="material-symbols-outlined" aria-hidden="true">format_bold</span>
-    <button type="button" class="toolbar-btn" on:click={onLink}>Link</button>
+    </button>
-    <button type="button" class="toolbar-btn" class:is-active={listMode === "ul"} on:click={onToggleUl}>UL</button>
+    <button type="button" class="toolbar-btn toolbar-icon-btn" on:click={onItalic} aria-label="Italic" title="Italic">
-    <button type="button" class="toolbar-btn" class:is-active={listMode === "ol"} on:click={onToggleOl}>OL</button>
+      <span class="material-symbols-outlined" aria-hidden="true">format_italic</span>
-    <button type="button" class="toolbar-btn" on:click={onCode}>Code</button>
+    </button>
+    <button type="button" class="toolbar-btn toolbar-icon-btn" on:click={onUnderline} aria-label="Underline" title="Underline">
+      <span class="material-symbols-outlined" aria-hidden="true">format_underlined</span>
+    </button>
+    <button type="button" class="toolbar-btn toolbar-icon-btn" on:click={onLink} aria-label="Link" title="Link">
+      <span class="material-symbols-outlined" aria-hidden="true">link</span>
+    </button>
+    <button
+      type="button"
+      class="toolbar-btn toolbar-icon-btn"
+      class:is-active={listMode === "ul"}
+      on:click={onToggleUl}
+      aria-label="Bulleted list"
+      title="Bulleted list"
+    >
+      <span class="material-symbols-outlined" aria-hidden="true">format_list_bulleted</span>
+    </button>
+    <button
+      type="button"
+      class="toolbar-btn toolbar-icon-btn"
+      class:is-active={listMode === "ol"}
+      on:click={onToggleOl}
+      aria-label="Numbered list"
+      title="Numbered list"
+    >
+      <span class="material-symbols-outlined" aria-hidden="true">format_list_numbered</span>
+    </button>
+    <button type="button" class="toolbar-btn toolbar-icon-btn" on:click={onCode} aria-label="Inline code" title="Inline code">
+      <span class="material-symbols-outlined" aria-hidden="true">code</span>
+    </button>
+  </div>
+  <div class="toolbar-divider" aria-hidden="true"></div>
+  <div class="toolbar-group">
+    <button
+      type="button"
+      class="toolbar-btn toolbar-icon-btn"
+      on:click={onSave}
+      disabled={saveBusy}
+      aria-label="Save now"
+      title="Save now"
+    >
+      <span class="material-symbols-outlined" aria-hidden="true">save</span>
+    </button>
   </div>
 </div>
 
@@ -155,6 +207,23 @@
     gap: 6px;
   }
 
+  .toolbar-select-wrap {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    border-radius: 8px;
+    border: 1px solid var(--border-soft);
+    background: color-mix(in srgb, var(--surface-2) 92%, var(--zinc-700) 8%);
+    color: color-mix(in srgb, var(--text-muted) 86%, var(--text-primary) 14%);
+    padding: 0 8px;
+    min-height: 30px;
+  }
+
+  .toolbar-select-wrap .material-symbols-outlined {
+    font-size: 16px;
+    line-height: 1;
+  }
+
   .toolbar-divider {
     width: 1px;
     height: 22px;
@@ -175,18 +244,126 @@
     transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
   }
 
-  .toolbar-select {
+  .toolbar-icon-btn {
-    border-radius: 8px;
+    padding: 4px 6px;
-    border: 1px solid var(--border-soft);
+    width: 32px;
-    background: color-mix(in srgb, var(--surface-2) 92%, var(--zinc-700) 8%);
+    min-width: 32px;
-    color: color-mix(in srgb, var(--text-muted) 86%, var(--text-primary) 14%);
+    justify-content: center;
-    padding: 6px 10px;
+    display: inline-flex;
-    min-height: 30px;
+    align-items: center;
-    font-size: 0.73rem;
+  }
-    letter-spacing: 0.01em;
+
-    font-weight: 600;
+  .toolbar-icon-btn .material-symbols-outlined {
+    font-size: 17px;
+    line-height: 1;
+  }
+
+  .heading-wrap {
+    padding-right: 6px;
+    gap: 3px;
+    position: relative;
+  }
+
+  .heading-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    min-height: 18px;
+    color: var(--text-primary);
     cursor: pointer;
-    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
+  }
+
+  .heading-menu {
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    min-width: 68px;
+    border: 1px solid var(--border-soft);
+    border-radius: 8px;
+    background: color-mix(in srgb, var(--surface-1) 94%, var(--bg-editor) 6%);
+    padding: 4px;
+    display: grid;
+    gap: 2px;
+    z-index: 20;
+  }
+
+  .template-wrap {
+    position: relative;
+    padding-right: 6px;
+    gap: 3px;
+  }
+
+  .template-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    min-height: 18px;
+    color: var(--text-primary);
+    cursor: pointer;
+  }
+
+  .template-trigger:disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+
+  .template-menu {
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    min-width: 132px;
+    max-width: 260px;
+    border: 1px solid var(--border-soft);
+    border-radius: 8px;
+    background: color-mix(in srgb, var(--surface-1) 94%, var(--bg-editor) 6%);
+    padding: 4px;
+    display: grid;
+    gap: 2px;
+    z-index: 20;
+  }
+
+  .template-empty {
+    padding: 6px 8px;
+    font-size: 0.76rem;
+    color: var(--text-dim);
+  }
+
+  .template-option {
+    width: 100%;
+    text-align: left;
+    border-radius: 6px;
+    padding: 6px 8px;
+    font-size: 0.76rem;
+    color: var(--text-primary);
+    cursor: pointer;
+  }
+
+  .template-trigger-text {
+    display: none;
+  }
+
+  .template-option:hover {
+    background: var(--bg-hover);
+  }
+
+  .heading-option {
+    width: 100%;
+    text-align: left;
+    border-radius: 6px;
+    padding: 6px 8px;
+    font-size: 0.76rem;
+    color: var(--text-primary);
+    cursor: pointer;
+  }
+
+  .heading-option:hover {
+    background: var(--bg-hover);
   }
 
   .toolbar-btn:hover,
@@ -207,15 +384,12 @@
     color: var(--text-primary);
   }
 
-  .toolbar-select:hover,
+  .toolbar-select-wrap:hover,
-  .toolbar-select:focus-visible {
+  .toolbar-select-wrap:focus-within {
     background: color-mix(in srgb, var(--bg-hover) 88%, var(--surface-2) 12%);
-    color: var(--text-primary);
     border-color: var(--border-strong);
-    outline: none;
   }
 
-  .toolbar-select:disabled,
   .toolbar-btn:disabled {
     opacity: 0.55;
     cursor: default;

Journal.App/src/lib/utils/markdown.ts

@@ -11,6 +11,7 @@ export function parseInline(input: string): string {
   let value = escapeHtml(input);
   value = value.replace(/`([^`]+)`/g, "<code>$1</code>");
   value = value.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+  value = value.replace(/\+\+([^+]+)\+\+/g, "<u>$1</u>");
   value = value.replace(/\*([^*]+)\*/g, "<em>$1</em>");
   value = value.replace(
     /\[([^\]]+)\]\((journal:[^\s)]+)\)/g,

Journal.App/src/routes/+page.svelte

@@ -441,6 +441,10 @@
     openDocuments = { ...openDocuments, [activeDocumentId]: content };
   }
 
+  async function handleForceSave() {
+    await saveCurrentDocument();
+  }
+
   function handleDeleteDocument(id: string) {
     const { [id]: _, ...remaining } = openDocuments;
     openDocuments = remaining;
@@ -541,6 +545,7 @@
     calendarBusy={calendarPanelState.busy}
     calendarError={calendarPanelState.error}
     previewOnly={!editMode}
+    onForceSave={handleForceSave}
   />
 </div>
 

Journal.App/src/routes/settings/+page.svelte

@@ -527,9 +527,9 @@
   .route-card select {
     border: 1px solid var(--border-soft);
     border-radius: 8px;
-    background: color-mix(in srgb, var(--surface-2) 88%, var(--bg-editor) 12%);
+    background-color: color-mix(in srgb, var(--surface-2) 88%, var(--bg-editor) 12%);
     color: var(--text-primary);
-    padding: 9px 10px;
+    padding: 9px 34px 9px 10px;
     font-size: 0.84rem;
   }
 

Journal.App/static/style.css

@@ -63,13 +63,25 @@ body {
 }
 
 button,
-input {
+input,
+select {
   border: none;
   outline: none;
   background: none;
   color: inherit;
 }
 
+select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 12px 12px;
+  padding-right: 30px;
+}
+
 .app-shell {
   min-height: 100vh;
   display: grid;