burrito.space / peek
experiments in a post-browser web
10
fork

Configure Feed

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

refactor(mobile): shared EditorLayout component for all editor types

burrito.space eed9b042 5e3fc615

+83 -53
+83 -53
backend/tauri-mobile/src/App.tsx
··· 365 365 </div> 366 366 ); 367 367 368 + interface EditorLayoutProps { 369 + onDismiss: () => void; 370 + keyboardHeight: number; 371 + children?: React.ReactNode; 372 + tags?: TagsSectionProps; 373 + buttons: EditorButtonsProps; 374 + className?: string; 375 + } 376 + 377 + const EditorLayout: React.FC<EditorLayoutProps> = ({ 378 + onDismiss, keyboardHeight, children, tags, buttons, className 379 + }) => ( 380 + <EditorOverlay onDismiss={onDismiss} keyboardHeight={keyboardHeight} className={className || "text-editor-overlay"}> 381 + {children} 382 + {tags && <TagsSection {...tags} />} 383 + <EditorButtons {...buttons} /> 384 + </EditorOverlay> 385 + ); 386 + 368 387 interface ResizableInputProps { 369 388 value: string; 370 389 onChange: (value: string) => void; ··· 2187 2206 if (!item) return null; 2188 2207 2189 2208 return ( 2190 - <EditorOverlay onDismiss={requestCancelEditing} keyboardHeight={keyboardHeight} className="text-editor-overlay"> 2209 + <EditorLayout 2210 + onDismiss={requestCancelEditing} 2211 + keyboardHeight={keyboardHeight} 2212 + tags={{ 2213 + selectedTags: editingTags, 2214 + availableTags: editingUrlTags, 2215 + tagInput: newTagInput, 2216 + onTagInputChange: setNewTagInput, 2217 + onToggleTag: toggleTag, 2218 + onAddTag: addNewTag, 2219 + }} 2220 + buttons={{ 2221 + onSave: saveChanges, 2222 + onCancel: requestCancelEditing, 2223 + onDelete: () => requestDelete(editingUrlId, "page"), 2224 + }} 2225 + > 2191 2226 <div className="input-with-clear editor-url-wrapper"> 2192 2227 <input 2193 2228 type="url" ··· 2204 2239 /> 2205 2240 <ClearButton show={editingUrlValue.length > 0} onClear={() => setEditingUrlValue('')} /> 2206 2241 </div> 2207 - <TagsSection 2208 - selectedTags={editingTags} 2209 - availableTags={editingUrlTags} 2210 - tagInput={newTagInput} 2211 - onTagInputChange={setNewTagInput} 2212 - onToggleTag={toggleTag} 2213 - onAddTag={addNewTag} 2214 - /> 2215 - <EditorButtons 2216 - onSave={saveChanges} 2217 - onCancel={requestCancelEditing} 2218 - onDelete={() => requestDelete(editingUrlId, "page")} 2219 - /> 2220 - </EditorOverlay> 2242 + </EditorLayout> 2221 2243 ); 2222 2244 } 2223 2245 2224 2246 // Text/Note editing 2225 2247 if (editingTextId) { 2226 2248 return ( 2227 - <EditorOverlay onDismiss={requestCancelEditingText} keyboardHeight={keyboardHeight} className="text-editor-overlay"> 2249 + <EditorLayout 2250 + onDismiss={requestCancelEditingText} 2251 + keyboardHeight={keyboardHeight} 2252 + tags={{ 2253 + selectedTags: editingTextTags, 2254 + availableTags: allTags, 2255 + tagInput: editingTextTagInput, 2256 + onTagInputChange: setEditingTextTagInput, 2257 + onToggleTag: toggleEditingTextTag, 2258 + onAddTag: addEditingTextTag, 2259 + }} 2260 + buttons={{ 2261 + onSave: saveTextChanges, 2262 + onCancel: requestCancelEditingText, 2263 + onDelete: () => requestDelete(editingTextId, "text"), 2264 + saveLabel: "Done", 2265 + }} 2266 + > 2228 2267 <ResizableInput 2229 2268 value={editingTextContent} 2230 2269 onChange={setEditingTextContent} ··· 2234 2273 showClearButton={false} 2235 2274 onAutoSave={scheduleAutoSave} 2236 2275 /> 2237 - <TagsSection 2238 - selectedTags={editingTextTags} 2239 - availableTags={allTags} 2240 - tagInput={editingTextTagInput} 2241 - onTagInputChange={setEditingTextTagInput} 2242 - onToggleTag={toggleEditingTextTag} 2243 - onAddTag={addEditingTextTag} 2244 - /> 2245 - <EditorButtons 2246 - onSave={saveTextChanges} 2247 - onCancel={requestCancelEditingText} 2248 - onDelete={() => requestDelete(editingTextId, "text")} 2249 - saveLabel="Done" 2250 - /> 2251 - </EditorOverlay> 2276 + </EditorLayout> 2252 2277 ); 2253 2278 } 2254 2279 2255 2280 // Tagset editing 2256 2281 if (editingTagsetId) { 2257 2282 return ( 2258 - <EditorOverlay onDismiss={requestCancelEditingTagset} keyboardHeight={keyboardHeight} className="text-editor-overlay"> 2259 - <TagsSection 2260 - selectedTags={editingTagsetTags} 2261 - availableTags={allTags} 2262 - tagInput={editingTagsetInput} 2263 - onTagInputChange={setEditingTagsetInput} 2264 - onToggleTag={toggleEditingTagsetTag} 2265 - onAddTag={addEditingTagsetTag} 2266 - /> 2267 - <EditorButtons 2268 - onSave={saveTagsetChanges} 2269 - onCancel={requestCancelEditingTagset} 2270 - onDelete={() => requestDelete(editingTagsetId, "tagset")} 2271 - /> 2272 - </EditorOverlay> 2283 + <EditorLayout 2284 + onDismiss={requestCancelEditingTagset} 2285 + keyboardHeight={keyboardHeight} 2286 + tags={{ 2287 + selectedTags: editingTagsetTags, 2288 + availableTags: allTags, 2289 + tagInput: editingTagsetInput, 2290 + onTagInputChange: setEditingTagsetInput, 2291 + onToggleTag: toggleEditingTagsetTag, 2292 + onAddTag: addEditingTagsetTag, 2293 + }} 2294 + buttons={{ 2295 + onSave: saveTagsetChanges, 2296 + onCancel: requestCancelEditingTagset, 2297 + onDelete: () => requestDelete(editingTagsetId, "tagset"), 2298 + }} 2299 + /> 2273 2300 ); 2274 2301 } 2275 2302 ··· 2280 2307 const metadata = item.metadata as Record<string, unknown> | undefined; 2281 2308 const title = metadata?.title as string | undefined; 2282 2309 return ( 2283 - <EditorOverlay onDismiss={requestCancelEditingImage} keyboardHeight={keyboardHeight} className="text-editor-overlay"> 2310 + <EditorLayout 2311 + onDismiss={requestCancelEditingImage} 2312 + keyboardHeight={keyboardHeight} 2313 + buttons={{ 2314 + onSave: saveImageChanges, 2315 + onCancel: requestCancelEditingImage, 2316 + onDelete: () => requestDelete(editingImageId, "image"), 2317 + }} 2318 + > 2284 2319 <div className="editor-image-preview"> 2285 2320 {item.thumbnail ? ( 2286 2321 <img ··· 2314 2349 onAddTag={addEditingImageTag} 2315 2350 /> 2316 2351 </div> 2317 - <EditorButtons 2318 - onSave={saveImageChanges} 2319 - onCancel={requestCancelEditingImage} 2320 - onDelete={() => requestDelete(editingImageId, "image")} 2321 - /> 2322 - </EditorOverlay> 2352 + </EditorLayout> 2323 2353 ); 2324 2354 } 2325 2355