diff --git a/frontend/components/ClipboardApp.tsx b/frontend/components/ClipboardApp.tsx index f5a9b8d..a6ae5bf 100644 --- a/frontend/components/ClipboardApp.tsx +++ b/frontend/components/ClipboardApp.tsx @@ -202,6 +202,7 @@ const ClipboardApp = () => { shareMessage={shareMessage} currentValidatedShareRoomId={shareRoomId} handleLeaveSenderRoom={handleLeaveSenderRoom} + putMessageInMs={putMessageInMs} /> ) : ( (false); + useEffect(() => { + setHasCachedId(!!getCachedId()); + }, []); + const onLocationPick = useCallback(async (): Promise => { if (!messages) return false; // Should not happen if panel is rendered if (!window.showDirectoryPicker) { @@ -111,6 +119,46 @@ export function RetrieveTabPanel({ title={messages.text.ClipboardApp.html.readClipboard_dis} onRead={setRetrieveRoomIdInput} /> + {/* Save/Use Cached ID Button placed after Paste button */} + + + + + void; // New prop for leaving room + putMessageInMs: ( + message: string, + isShareEnd?: boolean, + displayTimeMs?: number + ) => void; } export function SendTabPanel({ @@ -53,6 +60,7 @@ export function SendTabPanel({ shareMessage, currentValidatedShareRoomId, handleLeaveSenderRoom, + putMessageInMs, }: SendTabPanelProps) { // Get the status from the store const { @@ -69,12 +77,18 @@ export function SendTabPanel({ ); // State to track ID generation mode (false = will show simple next, true = will show random next) const [isSimpleIdMode, setIsSimpleIdMode] = useState(true); + // Cached ID state + const [hasCachedId, setHasCachedId] = useState(false); // When the validatedShareRoomId from the parent component changes (e.g., after initial fetch), synchronize the local input field's value useEffect(() => { setInputFieldValue(currentValidatedShareRoomId); }, [currentValidatedShareRoomId]); + useEffect(() => { + setHasCachedId(!!getCachedId()); + }, []); + const handleInputChange = useCallback( (e: React.ChangeEvent) => { const newValue = e.target.value; @@ -127,6 +141,31 @@ export function SendTabPanel({ setIsSimpleIdMode(!isSimpleIdMode); }, [isSimpleIdMode, processRoomIdInput, setInputFieldValue]); + // Save/Use cached ID button handlers + const isSaveEnabled = (inputFieldValue || "").trim().length >= 8; + const handleSaveOrUseCachedId = useCallback(() => { + if (hasCachedId) { + const cached = getCachedId(); + if (cached) { + setInputFieldValue(cached); + } + return; + } + // Save current input to cache + const trimmed = (inputFieldValue || "").trim(); + if (trimmed.length >= 8) { + setCachedId(trimmed); + setHasCachedId(true); + // Notify via messages on sender side + putMessageInMs(messages.text.ClipboardApp.saveId_success, true); + } + }, [ + hasCachedId, + inputFieldValue, + putMessageInMs, + messages.text.ClipboardApp.saveId_success, + ]); + return (
@@ -183,6 +222,27 @@ export function SendTabPanel({ ? messages.text.ClipboardApp.html.generateRandomId_tips : messages.text.ClipboardApp.html.generateSimpleId_tips} + {/* Save/Use Cached ID Button in between */} + + + + +