Merge pull request #131 from DenisValeev/codex/reduce-font-size-and-show-two-cards

Show next Total Recall card alongside the current one

Author: DenisValeev

apps/total-recall/app.js

@@ -1,6 +1,8 @@
 (function () {
   const notesInput = document.querySelector('[data-notes-input]');
-  const entryEl = document.querySelector('[data-entry-text]');
+  const currentEntryEl = document.querySelector('[data-current-text]');
+  const previewEntryEl = document.querySelector('[data-preview-text]');
+  const previewCard = document.querySelector('[data-preview-card]');
   const counterEl = document.querySelector('[data-counter]');
   const prevButton = document.querySelector('[data-prev]');
   const nextButton = document.querySelector('[data-next]');
@@ -11,7 +13,9 @@
 
   if (
     !notesInput ||
-    !entryEl ||
+    !currentEntryEl ||
+    !previewEntryEl ||
+    !previewCard ||
     !counterEl ||
     !prevButton ||
     !nextButton ||
@@ -30,6 +34,7 @@
     "I told my computer I needed a break, and it said 'No problem — I'll go to sleep.'",
     'Why did the scarecrow get a promotion? He was outstanding in his field.'
   ].join('\n\n');
+  const PREVIEW_PLACEHOLDER = 'Add another note to preview the upcoming card.';
 
   let entries = [];
   let deckOrder = [];
@@ -177,8 +182,11 @@
 
   function renderEmptyState() {
     counterEl.textContent = '0 of 0';
-    entryEl.textContent = 'No notes yet. Add entries below to start reviewing.';
-    entryEl.classList.add('is-empty');
+    currentEntryEl.textContent = 'No notes yet. Add entries below to start reviewing.';
+    currentEntryEl.classList.add('is-empty');
+    previewEntryEl.textContent = PREVIEW_PLACEHOLDER;
+    previewEntryEl.classList.add('is-empty');
+    previewCard.setAttribute('aria-hidden', 'true');
     prevButton.disabled = true;
     nextButton.disabled = true;
     shuffleButton.disabled = true;
@@ -200,13 +208,25 @@
     const currentEntryIndex = deckOrder[index];
     const current = entries[currentEntryIndex];
 
-    entryEl.textContent = current;
-    entryEl.classList.remove('is-empty');
+    currentEntryEl.textContent = current;
+    currentEntryEl.classList.remove('is-empty');
     counterEl.textContent = `${index + 1} of ${deckOrder.length}`;
     const disableNav = deckOrder.length <= 1;
     prevButton.disabled = disableNav;
     nextButton.disabled = disableNav;
     shuffleButton.disabled = deckOrder.length <= 1;
+
+    if (deckOrder.length > 1) {
+      const previewEntryIndex = deckOrder[(index + 1) % deckOrder.length];
+      const preview = entries[previewEntryIndex];
+      previewEntryEl.textContent = preview;
+      previewEntryEl.classList.remove('is-empty');
+      previewCard.removeAttribute('aria-hidden');
+    } else {
+      previewEntryEl.textContent = PREVIEW_PLACEHOLDER;
+      previewEntryEl.classList.add('is-empty');
+      previewCard.setAttribute('aria-hidden', 'true');
+    }
   }
 
   function showNext() {

apps/total-recall/index.html

@@ -111,6 +111,13 @@
       border: 0;
     }
 
+    .card-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: clamp(18px, 4vw, 28px);
+      align-items: stretch;
+    }
+
     .card {
       background: var(--surface);
       border-radius: 24px;
@@ -121,7 +128,7 @@
       display: flex;
       flex-direction: column;
       gap: 18px;
-      min-height: 260px;
+      min-height: 220px;
     }
 
     .card__meta {
@@ -144,14 +151,22 @@
 
     .card__text {
       margin: 0;
-      font-size: clamp(1.25rem, 2.2vw + 1rem, 2.05rem);
-      line-height: 1.55;
+      font-size: clamp(1.1rem, 1.8vw + 0.95rem, 1.7rem);
+      line-height: 1.5;
       white-space: pre-line;
     }
 
     .card__text.is-empty {
       color: var(--text-secondary);
-      font-size: clamp(1rem, 1.4vw + 0.85rem, 1.2rem);
+      font-size: clamp(0.95rem, 1.2vw + 0.85rem, 1.1rem);
+    }
+
+    .card--preview {
+      opacity: 0.92;
+    }
+
+    .card--preview[aria-hidden="true"] {
+      opacity: 0.6;
     }
 
     .controls {
@@ -316,6 +331,10 @@
         gap: 28px;
       }
 
+      .card-grid {
+        grid-template-columns: 1fr;
+      }
+
       .card {
         padding: clamp(24px, 8vw, 36px);
       }
@@ -347,14 +366,25 @@
         <span>Home</span>
       </a>
     </nav>
-    <article class="card" aria-live="polite">
-      <div class="card__meta">
-        <span id="card-counter" data-counter>0 of 0</span>
-      </div>
-      <div class="card__body">
-        <p id="entry-text" class="card__text is-empty" data-entry-text>Add notes below to get started.</p>
-      </div>
-    </article>
+    <section class="card-grid" aria-live="polite">
+      <article class="card card--current">
+        <div class="card__meta">
+          <span id="card-counter" data-counter>0 of 0</span>
+          <span>Now playing</span>
+        </div>
+        <div class="card__body">
+          <p id="entry-text" class="card__text is-empty" data-current-text>Add notes below to get started.</p>
+        </div>
+      </article>
+      <article class="card card--preview" data-preview-card aria-label="Next card">
+        <div class="card__meta">
+          <span>Next up</span>
+        </div>
+        <div class="card__body">
+          <p class="card__text is-empty" data-preview-text>Add another note to preview the upcoming card.</p>
+        </div>
+      </article>
+    </section>
     <div class="controls" role="group" aria-label="Deck controls">
       <button class="control-button control-button--secondary" type="button" data-prev>
         Previous