Home: header with date and quick actions, compact app launcher, two-column cards on wide screens, apps first on phones

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

public/app.js

@@ -274,15 +274,18 @@ function viewHome() {
   const greet = h < 5 ? 'Good night' : h < 12 ? 'Good morning' : h < 18 ? 'Good afternoon' : 'Good evening';
   const recents = store.get('recents', []).slice(0, 5);
   const t = typeof cur === 'function' ? cur() : null;
-  $('#view').innerHTML = `<div class="wrap"><h1>${greet}</h1>
+  const today = new Date().toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' });
+  $('#view').innerHTML = `<div class="wrap home">
+    <header class="homehead"><div><h1>${greet}</h1><p class="sub">${today}</p></div>
+      <div class="homeact"><button class="btn ghost" id="qadd">${icon('plus')}Quick add</button><button class="btn ghost" id="qpal">${icon('search')}Command palette <small style="opacity:.7;margin-left:4px">${/Mac|iPhone|iPad/.test(navigator.platform) ? '⌘K' : 'Ctrl K'}</small></button></div></header>
     ${allowed('search') ? `<a class="searchbar" href="#/search">${icon('search')}<span>Search tasks, events, files, music</span></a>` : ''}
-    <div class="bar" style="margin-top:8px"><button class="btn ghost" id="qadd">${icon('plus')}Quick add</button><button class="btn ghost" id="qpal">${icon('search')}Command palette <small style="opacity:.7;margin-left:4px">${/Mac|iPhone|iPad/.test(navigator.platform) ? '⌘K' : 'Ctrl K'}</small></button></div>
     ${allowed('music') ? '<div id="npslot"></div>' : ''}
-    <div id="tcard"></div>
+    <div class="homecols">
-    <div id="agenda"></div>
+      <div class="hcol"><div id="tcard"></div><div id="agenda"></div></div>
-    ${recents.length && allowed('files') ? `<h2>Recent files</h2><div class="list">${recents.map((r, i) => `<button class="row" data-r="${i}"><span class="ic" style="background:${OFFICE_EXT.has(ext(r.name)) ? '#e0742b' : '#6a7280'}">${icon('file')}</span><span class="grow"><b>${esc(r.name)}</b><small>${esc(r.path.slice(0, r.path.lastIndexOf('/')) || '/')}</small></span></button>`).join('')}</div>` : ''}
+      <div class="hcol">${allowed('mail') && cfg.mail ? '<div id="mcard"></div>' : ''}
-    ${homeApps()}
+        ${recents.length && allowed('files') ? `<h2>Recent files</h2><div class="list">${recents.map((r, i) => `<button class="row" data-r="${i}"><span class="ic" style="background:${OFFICE_EXT.has(ext(r.name)) ? '#e0742b' : '#6a7280'}">${icon('file')}</span><span class="grow"><b>${esc(r.name)}</b><small>${esc(r.path.slice(0, r.path.lastIndexOf('/')) || '/')}</small></span></button>`).join('')}</div>` : ''}</div>
-    ${allowed('mail') && cfg.mail ? '<div id="mcard"></div>' : ''}</div>`;
+    </div>
+    <div class="homeapps">${homeApps()}</div></div>`;
   renderNpCard(); // the live Now Playing card (it follows the song and has the controls)
   $('#view').querySelectorAll('button[data-r]').forEach(b => b.onclick = () => {
     const r = recents[b.dataset.r]; openFile(r.repo, r.path, r.name, r.path.slice(0, r.path.lastIndexOf('/')) || '/');

public/style.css

@@ -708,3 +708,29 @@ body.nav-mini .ngrp span { display: none; }
 .vpick{padding:0;min-height:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:var(--panel2);cursor:pointer;line-height:0}
 .vpick.on{border-color:var(--accent)}
 .vpick img{width:100%;height:auto;display:block}
+
+/* Home: header with the quick actions beside it, today's cards in two columns on wide screens, apps as a compact launcher */
+.homehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+.homehead h1 { margin: 0; }
+.homehead .sub { margin: 2px 0 0; }
+.homeact { display: flex; gap: 8px; flex-wrap: wrap; }
+.homeact .btn { margin: 0; }
+.home .searchbar { margin: 14px 0 4px; }
+.homecols { display: grid; grid-template-columns: 1fr; gap: 0 24px; align-items: start; }
+.hcol:empty, .hcol > :empty { display: none; }
+.home .homeapps h2:first-child { margin-top: 24px; }
+.home .tile { flex-direction: row; align-items: center; gap: 12px; min-height: 0; padding: 12px 14px; border-radius: 14px; }
+.home .tile .ic { flex: none; width: 36px; height: 36px; border-radius: 10px; }
+.home .tile b, .home .tile small { display: block; line-height: 1.25; }
+.home .tile small { font-size: 12px; word-break: normal; overflow-wrap: anywhere; }
+@media (min-width: 1024px) {
+  .homecols { grid-template-columns: 1.2fr 1fr; }
+  .home .grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
+}
+@media (max-width: 560px) { .homeact .btn small { display: none; } }
+@media (max-width: 767px) { /* phone: the compact app launcher comes before the cards (the bottom tabs reach the same places) */
+  .home { display: flex; flex-direction: column; }
+  .homecols { order: 5; }
+  .homeapps { order: 4; }
+  .homeapps h2:first-child { margin-top: 18px; }
+}