experiments in a post-browser web
10
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix(mobile): card footer layout + keyboard focus priming

+19 -14
+3 -2
backend/tauri-mobile/src/App.css
··· 456 456 457 457 .card-footer { 458 458 display: flex; 459 - align-items: center; 460 - justify-content: space-between; 459 + align-items: flex-start; 461 460 margin-top: 0.35rem; 462 461 gap: 0.5rem; 463 462 } ··· 468 467 gap: 0.3rem; 469 468 flex: 1; 470 469 min-width: 0; 470 + align-items: center; 471 471 } 472 472 473 473 .card-tag { ··· 481 481 .card-date { 482 482 font-size: 0.7rem; 483 483 color: #aaa; 484 + margin-left: auto; 484 485 flex-shrink: 0; 485 486 } 486 487
+16 -12
backend/tauri-mobile/src/App.tsx
··· 724 724 const [capturedImageTags, setCapturedImageTags] = useState<Set<string>>(new Set()); 725 725 const [capturedImageTagInput, setCapturedImageTagInput] = useState(""); 726 726 const cameraInputRef = useRef<HTMLInputElement>(null); 727 + const keyboardPrimerRef = useRef<HTMLInputElement>(null); 727 728 728 729 // Scroll ref for scroll-to-top 729 730 const mainRef = useRef<HTMLElement>(null); ··· 1563 1564 }; 1564 1565 1565 1566 const startEditingText = (item: SavedText) => { 1567 + keyboardPrimerRef.current?.focus(); 1566 1568 setEditingTextId(item.id); 1567 1569 setEditingTextContent(item.content); 1568 1570 const existingTags = item.tags.length > 0 ? item.tags : extractHashtags(item.content); ··· 2347 2349 {item.tags.map((tag) => ( 2348 2350 <span key={tag} className="card-tag">{tag}</span> 2349 2351 ))} 2350 - </div> 2351 - <div className="card-date"> 2352 - {new Date(item.saved_at).toLocaleDateString()} 2352 + <span className="card-date"> 2353 + {new Date(item.saved_at).toLocaleDateString()} 2354 + </span> 2353 2355 </div> 2354 2356 </div> 2355 2357 </div> ··· 2449 2451 {tags.map((tag) => ( 2450 2452 <span key={tag} className="card-tag">{tag}</span> 2451 2453 ))} 2452 - </div> 2453 - <div className="card-date"> 2454 - {new Date(item.saved_at).toLocaleDateString()} 2454 + <span className="card-date"> 2455 + {new Date(item.saved_at).toLocaleDateString()} 2456 + </span> 2455 2457 </div> 2456 2458 </div> 2457 2459 </div> ··· 2483 2485 </button> 2484 2486 </div> 2485 2487 <div className="card-footer"> 2486 - <div className="card-tags"></div> 2487 - <div className="card-date"> 2488 - {new Date(item.saved_at).toLocaleDateString()} 2488 + <div className="card-tags"> 2489 + <span className="card-date"> 2490 + {new Date(item.saved_at).toLocaleDateString()} 2491 + </span> 2489 2492 </div> 2490 2493 </div> 2491 2494 </div> ··· 2790 2793 {item.tags.map((tag) => ( 2791 2794 <span key={tag} className="card-tag">{tag}</span> 2792 2795 ))} 2793 - </div> 2794 - <div className="card-date"> 2795 - {new Date(item.saved_at).toLocaleDateString()} 2796 + <span className="card-date"> 2797 + {new Date(item.saved_at).toLocaleDateString()} 2798 + </span> 2796 2799 </div> 2797 2800 </div> 2798 2801 </div> ··· 3293 3296 3294 3297 return ( 3295 3298 <div className={`app ${expandedWebview ? 'webview-active' : ''}`} ref={appRef}> 3299 + <input ref={keyboardPrimerRef} style={{ position: 'fixed', opacity: 0, top: '-100px' }} readOnly /> 3296 3300 {cameraInput} 3297 3301 <header> 3298 3302 <h1