experiments in a post-browser web
fix(mobile): image editor remove undo/redo buttons, HR border, improve drag handle
+29
-68
+2
-1
backend/tauri-mobile/src-tauri/tauri.conf.json
+2
-1
backend/tauri-mobile/src-tauri/tauri.conf.json
+2
-47
backend/tauri-mobile/src/App.css
+2
-47
backend/tauri-mobile/src/App.css
···
2771
2771
bottom: auto;
2772
2772
transform: none;
2773
2773
height: auto;
2774
-
padding: 4px 0;
2774
+
padding: 12px 0;
2775
+
flex-shrink: 0;
2775
2776
}
2776
2777
2777
2778
body.dark .resizable-input-textarea {
···
2827
2828
/* Image preview for editor */
2828
2829
.editor-image-preview {
2829
2830
padding: 0.75rem 1.15rem;
2830
-
border-bottom: 1px solid #e0e0e0;
2831
2831
text-align: center;
2832
2832
flex-shrink: 0;
2833
2833
}
···
2847
2847
color: #999;
2848
2848
}
2849
2849
2850
-
.editor-image-preview .edit-image-title {
2851
-
margin-top: 0.5rem;
2852
-
font-size: 0.85rem;
2853
-
color: #666;
2854
-
text-overflow: ellipsis;
2855
-
overflow: hidden;
2856
-
white-space: nowrap;
2857
-
}
2858
-
2859
2850
body.dark .editor-image-preview {
2860
-
border-bottom-color: #444;
2861
-
}
2862
-
2863
-
body.dark .editor-image-preview .edit-image-title {
2864
-
color: #999;
2865
-
}
2866
-
2867
-
/* Scrollable area below image preview — holds content text + tags */
2868
-
.editor-image-scrollable {
2869
-
flex: 1 1 auto;
2870
-
min-height: 0;
2871
-
overflow-y: auto;
2872
-
-webkit-overflow-scrolling: touch;
2873
-
}
2874
-
2875
-
/* Image content text in editor */
2876
-
.edit-image-content {
2877
-
padding: 0.75rem 1.15rem;
2878
-
font-size: 0.875rem;
2879
-
line-height: 1.5;
2880
-
opacity: 0.85;
2881
-
white-space: pre-wrap;
2882
-
word-break: break-word;
2883
-
}
2884
-
2885
-
body.dark .edit-image-content {
2886
-
color: #e0e0e0;
2887
2851
}
2888
2852
2889
2853
/* Legacy text editor classes - keep for backwards compatibility */
···
3021
2985
margin-bottom: 0.5rem;
3022
2986
}
3023
2987
3024
-
.edit-image-title {
3025
-
font-size: 0.9rem;
3026
-
color: #333;
3027
-
text-align: center;
3028
-
margin-bottom: 1rem;
3029
-
}
3030
2988
3031
2989
.edit-modal-buttons {
3032
2990
display: flex;
···
3088
3046
background: #1c1c1e;
3089
3047
}
3090
3048
3091
-
body.dark .edit-image-title {
3092
-
color: #f6f6f6;
3093
-
}
3094
3049
3095
3050
body.dark .edit-modal-buttons {
3096
3051
border-top-color: #444;
+25
-20
backend/tauri-mobile/src/App.tsx
+25
-20
backend/tauri-mobile/src/App.tsx
···
395
395
onAutoSave?: (value: string) => void;
396
396
autoCapitalize?: string;
397
397
autoCorrect?: string;
398
+
showUndoRedo?: boolean;
398
399
}
399
400
400
401
const ResizableInput: React.FC<ResizableInputProps> = ({
···
407
408
showClearButton = true,
408
409
onAutoSave,
409
410
autoCapitalize: autoCapitalizeProp = "sentences",
410
-
autoCorrect: autoCorrectProp = "on"
411
+
autoCorrect: autoCorrectProp = "on",
412
+
showUndoRedo = true
411
413
}) => {
412
414
const [height, setHeight] = useState<number | null>(null);
413
415
const wrapperRef = useRef<HTMLDivElement>(null);
···
600
602
601
603
return (
602
604
<>
603
-
<div className="undo-redo-buttons">
605
+
{showUndoRedo && <div className="undo-redo-buttons">
604
606
<button type="button" onClick={handleUndo} disabled={historyIndexRef.current <= 0} title="Undo">
605
607
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
606
608
<polyline points="1 4 1 10 7 10"></polyline>
···
613
615
<path d="M20.49 15a9 9 0 1 1-2.13-9.36L23 10"></path>
614
616
</svg>
615
617
</button>
616
-
</div>
618
+
</div>}
617
619
<div
618
620
className="resizable-input-wrapper"
619
621
ref={wrapperRef}
···
734
736
735
737
// Image editing state
736
738
const [editingImageId, setEditingImageId] = useState<string | null>(null);
739
+
const [editingImageContent, setEditingImageContent] = useState("");
737
740
const [editingImageTags, setEditingImageTags] = useState<Set<string>>(new Set());
738
741
const [editingImageTagInput, setEditingImageTagInput] = useState("");
739
742
···
1400
1403
};
1401
1404
const hasImageChanges = (): boolean => {
1402
1405
if (!originalEditValues) return false;
1403
-
return JSON.stringify(Array.from(editingImageTags).sort()) !== JSON.stringify(originalEditValues.tags);
1406
+
return editingImageContent !== (originalEditValues.content ?? "") || JSON.stringify(Array.from(editingImageTags).sort()) !== JSON.stringify(originalEditValues.tags);
1404
1407
};
1405
1408
1406
1409
const startEditing = async (item: SavedUrl) => {
···
1886
1889
const startEditingImage = (item: SavedImage) => {
1887
1890
keyboardPrimerRef.current?.focus();
1888
1891
setEditingImageId(item.id);
1892
+
setEditingImageContent(item.content || "");
1889
1893
setEditingImageTags(new Set(item.tags));
1890
1894
setEditingImageTagInput("");
1891
-
setOriginalEditValues({ tags: [...item.tags].sort() });
1895
+
setOriginalEditValues({ content: item.content || "", tags: [...item.tags].sort() });
1892
1896
};
1893
1897
1894
1898
const cancelEditingImage = () => {
1895
1899
setEditingImageId(null);
1900
+
setEditingImageContent("");
1896
1901
setEditingImageTags(new Set());
1897
1902
setEditingImageTagInput("");
1898
1903
setOriginalEditValues(null);
···
2310
2315
<EditorLayout
2311
2316
onDismiss={requestCancelEditingImage}
2312
2317
keyboardHeight={keyboardHeight}
2318
+
tags={{
2319
+
selectedTags: editingImageTags,
2320
+
availableTags: allTags,
2321
+
tagInput: editingImageTagInput,
2322
+
onTagInputChange: setEditingImageTagInput,
2323
+
onToggleTag: toggleEditingImageTag,
2324
+
onAddTag: addEditingImageTag,
2325
+
}}
2313
2326
buttons={{
2314
2327
onSave: saveImageChanges,
2315
2328
onCancel: requestCancelEditingImage,
···
2332
2345
</svg>
2333
2346
</div>
2334
2347
)}
2335
-
{title && <div className="edit-image-title">{title}</div>}
2336
2348
</div>
2337
-
<div className="editor-image-scrollable">
2338
-
{item.content && (
2339
-
<div className="edit-image-content">
2340
-
{item.content}
2341
-
</div>
2342
-
)}
2343
-
<TagsSection
2344
-
selectedTags={editingImageTags}
2345
-
availableTags={allTags}
2346
-
tagInput={editingImageTagInput}
2347
-
onTagInputChange={setEditingImageTagInput}
2348
-
onToggleTag={toggleEditingImageTag}
2349
-
onAddTag={addEditingImageTag}
2349
+
<ResizableInput
2350
+
value={editingImageContent}
2351
+
onChange={setEditingImageContent}
2352
+
placeholder="Image description..."
2353
+
keyboardHeight={keyboardHeight}
2354
+
showClearButton={false}
2355
+
showUndoRedo={false}
2350
2356
/>
2351
-
</div>
2352
2357
</EditorLayout>
2353
2358
);
2354
2359
}