experiments in a post-browser web
fix(ui): undo/redo at top, reduce gaps, add webview link for text items
+38
-22
+8
-6
backend/tauri-mobile/src/App.css
+8
-6
backend/tauri-mobile/src/App.css
···
2667
2667
2668
2668
/* Editor Card - base layout for all editors */
2669
2669
.editor-card {
2670
+
position: relative;
2670
2671
display: flex;
2671
2672
flex-direction: column;
2672
2673
max-height: calc(100% - 1rem);
···
2736
2737
bottom: auto;
2737
2738
transform: none;
2738
2739
height: auto;
2739
-
padding: 16px 0;
2740
+
padding: 8px 0;
2740
2741
}
2741
2742
2742
2743
body.dark .resizable-input-textarea {
···
3283
3284
/* Editor drag handle for swipe-to-close */
3284
3285
.editor-drag-handle {
3285
3286
width: 100%;
3286
-
padding: 16px 0;
3287
+
padding: 10px 0;
3287
3288
display: flex;
3288
3289
align-items: center;
3289
3290
justify-content: center;
···
3324
3325
padding: 0.5rem;
3325
3326
}
3326
3327
3327
-
/* Undo/Redo buttons for editor */
3328
+
/* Undo/Redo buttons for editor — positioned at top-right of editor card, level with swipe indicator */
3328
3329
.undo-redo-buttons {
3330
+
position: absolute;
3331
+
top: 6px;
3332
+
right: 12px;
3333
+
z-index: 10;
3329
3334
display: flex;
3330
3335
gap: 4px;
3331
-
padding: 4px 12px;
3332
-
justify-content: flex-end;
3333
-
flex-shrink: 0;
3334
3336
}
3335
3337
3336
3338
.undo-redo-buttons button {
+30
-16
backend/tauri-mobile/src/App.tsx
+30
-16
backend/tauri-mobile/src/App.tsx
···
148
148
149
149
const EditorOverlay: React.FC<EditorOverlayProps> = ({ children, onDismiss, keyboardHeight, className = '' }) => {
150
150
// Use actual keyboard height when available, fall back to fixed estimate
151
-
const effectiveKeyboardPadding = keyboardHeight > 0 ? keyboardHeight + 20 : 350;
151
+
const effectiveKeyboardPadding = keyboardHeight > 0 ? keyboardHeight : 350;
152
152
153
153
// Swipe-down-to-close state
154
154
const [swipeOffset, setSwipeOffset] = useState(0);
···
559
559
}, []);
560
560
561
561
return (
562
+
<>
563
+
<div className="undo-redo-buttons">
564
+
<button type="button" onClick={handleUndo} disabled={historyIndexRef.current <= 0} title="Undo">
565
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
566
+
<polyline points="1 4 1 10 7 10"></polyline>
567
+
<path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
568
+
</svg>
569
+
</button>
570
+
<button type="button" onClick={handleRedo} disabled={historyIndexRef.current >= historyRef.current.length - 1} title="Redo">
571
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
572
+
<polyline points="23 4 23 10 17 10"></polyline>
573
+
<path d="M20.49 15a9 9 0 1 1-2.13-9.36L23 10"></path>
574
+
</svg>
575
+
</button>
576
+
</div>
562
577
<div
563
578
className="resizable-input-wrapper"
564
579
ref={wrapperRef}
565
580
style={{ height: `${currentHeight}px`, minHeight: `${minHeight}px` }}
566
581
>
567
-
<div className="undo-redo-buttons">
568
-
<button type="button" onClick={handleUndo} disabled={historyIndexRef.current <= 0} title="Undo">
569
-
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
570
-
<polyline points="1 4 1 10 7 10"></polyline>
571
-
<path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
572
-
</svg>
573
-
</button>
574
-
<button type="button" onClick={handleRedo} disabled={historyIndexRef.current >= historyRef.current.length - 1} title="Redo">
575
-
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
576
-
<polyline points="23 4 23 10 17 10"></polyline>
577
-
<path d="M20.49 15a9 9 0 1 1-2.13-9.36L23 10"></path>
578
-
</svg>
579
-
</button>
580
-
</div>
581
582
<textarea
582
583
ref={textareaRef}
583
584
className="resizable-input-textarea"
···
611
612
<div className="drag-handle-bar" />
612
613
</div>
613
614
</div>
615
+
</>
614
616
);
615
617
};
616
618
···
2319
2321
</div>
2320
2322
<div className="card-title">{summary}</div>
2321
2323
{urlMatch && (
2324
+
<>
2325
+
<button
2326
+
className="card-open-url-btn"
2327
+
onClick={(e) => openInWebview(urlMatch[0], item.id, e)}
2328
+
title="Open in app"
2329
+
>
2330
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
2331
+
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
2332
+
<line x1="3" y1="9" x2="21" y2="9"></line>
2333
+
</svg>
2334
+
</button>
2322
2335
<button
2323
2336
className="card-open-url-btn"
2324
2337
onClick={(e) => {
2325
2338
e.stopPropagation();
2326
2339
openUrl(urlMatch[0]);
2327
2340
}}
2328
-
title="Open URL"
2341
+
title="Open in Safari"
2329
2342
>
2330
2343
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
2331
2344
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
···
2333
2346
<line x1="10" y1="14" x2="21" y2="3"></line>
2334
2347
</svg>
2335
2348
</button>
2349
+
</>
2336
2350
)}
2337
2351
<button
2338
2352
className="card-delete-btn"