Notes widget (w/ syncing backend) #3293
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| // Copyright 2026, Command Line Inc. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| import { modalsModel } from "@/app/store/modalmodel"; | ||
| import { makeIconClass } from "@/util/util"; | ||
| import { ReactNode, useEffect } from "react"; | ||
| import ReactDOM from "react-dom"; | ||
|
|
||
| interface AlertModalProps { | ||
| children: ReactNode; | ||
| title?: string; | ||
| icon?: string; | ||
| iconClassName?: string; | ||
| okLabel?: string; | ||
| onClose?: () => void; | ||
| } | ||
|
|
||
| interface AlertOptions { | ||
| title?: string; | ||
| message: ReactNode; | ||
| icon?: string; | ||
| iconClassName?: string; | ||
| okLabel?: string; | ||
| } | ||
|
|
||
| function showAlert(opts: AlertOptions) { | ||
| modalsModel.pushModal("AlertModal", { | ||
| children: opts.message, | ||
| title: opts.title ?? "Alert", | ||
| icon: opts.icon, | ||
| iconClassName: opts.iconClassName, | ||
| okLabel: opts.okLabel, | ||
| }); | ||
| } | ||
|
|
||
| function showErrorAlert(message: ReactNode, title?: string) { | ||
| showAlert({ title: title ?? "Error", message, icon: "circle-exclamation", iconClassName: "text-error" }); | ||
| } | ||
|
|
||
| const AlertModal = ({ children, title = "Alert", icon = "circle-info", iconClassName, okLabel = "Ok", onClose }: AlertModalProps) => { | ||
| function close() { | ||
| if (onClose) { | ||
| onClose(); | ||
| } else { | ||
| modalsModel.popModal(); | ||
| } | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| function handleKeyDown(e: KeyboardEvent) { | ||
| if (e.key === "Escape" || e.key === "Enter") { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| close(); | ||
| } | ||
| } | ||
| window.addEventListener("keydown", handleKeyDown, true); | ||
| return () => window.removeEventListener("keydown", handleKeyDown, true); | ||
| }, []); | ||
|
|
||
| const iconClass = makeIconClass(icon, false); | ||
|
|
||
| return ReactDOM.createPortal( | ||
| <div | ||
| className="fixed inset-0 flex items-center justify-center" | ||
| style={{ zIndex: "var(--zindex-modal-wrapper)" }} | ||
| > | ||
|
Comment on lines
+64
to
+67
Contributor
There was a problem hiding this comment. Add dialog semantics and keyboard-accessible close control. The modal container is missing 💡 Proposed fix- <div
+ <div
className="fixed inset-0 flex items-center justify-center"
style={{ zIndex: "var(--zindex-modal-wrapper)" }}
+ role="dialog"
+ aria-modal="true"
+ aria-label={title}
>
@@
- <button
+ <button
className="text-muted hover:text-primary transition-colors cursor-pointer p-0.5"
onClick={close}
- tabIndex={-1}
+ aria-label="Close alert"
>Also applies to: 80-90 🤖 Prompt for AI Agents |
||
| <div | ||
| className="fixed inset-0" | ||
| style={{ zIndex: "var(--zindex-modal-backdrop)", backgroundColor: "rgba(21,23,21,0.7)", top: "36px" }} | ||
| /> | ||
| <div | ||
| className="relative flex flex-col rounded-lg shadow-[0px_8px_32px_rgba(0,0,0,0.4)] min-w-[380px] max-w-[560px]" | ||
| style={{ | ||
| zIndex: "var(--zindex-modal)", | ||
| background: "var(--modal-bg-color)", | ||
| border: "0.5px solid var(--modal-border-color)", | ||
| }} | ||
| > | ||
| <div className="flex items-center gap-3 px-4 py-2.5 border-b border-white/10"> | ||
| <i className={`${iconClass} text-base ${iconClassName ?? "text-warning"}`} /> | ||
| <span className="text-sm font-semibold text-primary flex-1">{title}</span> | ||
| <button | ||
| className="text-muted hover:text-primary transition-colors cursor-pointer p-0.5" | ||
| onClick={close} | ||
| tabIndex={-1} | ||
| > | ||
| <i className="fa-sharp fa-solid fa-xmark text-sm" /> | ||
| </button> | ||
| </div> | ||
| <div className="px-5 pt-3 pb-2 text-sm text-secondary leading-relaxed">{children}</div> | ||
| <div className="flex justify-end px-5 pb-3 pt-1"> | ||
| <button | ||
| className="bg-white/10 text-primary rounded px-5 py-1.5 text-sm font-medium hover:bg-white/20 transition-colors cursor-pointer outline-none" | ||
| onClick={close} | ||
| autoFocus | ||
| > | ||
| {okLabel} | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div>, | ||
| document.getElementById("main") | ||
| ); | ||
| }; | ||
|
|
||
| AlertModal.displayName = "AlertModal"; | ||
|
|
||
| export { AlertModal, showAlert, showErrorAlert }; | ||
| export type { AlertOptions }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🧩 Analysis chain
🏁 Script executed:
Repository: wavetermdev/waveterm
Length of output: 143
🏁 Script executed:
Repository: wavetermdev/waveterm
Length of output: 2464
🏁 Script executed:
Repository: wavetermdev/waveterm
Length of output: 255
🏁 Script executed:
Repository: wavetermdev/waveterm
Length of output: 1262
🏁 Script executed:
Repository: wavetermdev/waveterm
Length of output: 46
🏁 Script executed:
Repository: wavetermdev/waveterm
Length of output: 322
🏁 Script executed:
Repository: wavetermdev/waveterm
Length of output: 92
🏁 Script executed:
Repository: wavetermdev/waveterm
Length of output: 3272
🏁 Script executed:
Repository: wavetermdev/waveterm
Length of output: 113
🏁 Script executed:
Repository: wavetermdev/waveterm
Length of output: 46
🏁 Script executed:
Repository: wavetermdev/waveterm
Length of output: 742
🏁 Script executed:
# Verify the exact line numbers in alertmodal.tsx where the createPortal call is wc -l frontend/app/modals/alertmodal.tsxRepository: wavetermdev/waveterm
Length of output: 103
🏁 Script executed:
Repository: wavetermdev/waveterm
Length of output: 293
Use non-null assertion for consistency with modal.tsx pattern.
While
document.getElementById("main")is guaranteed to exist at this point (the app initialization in wave.ts already depends on it), use the non-null assertion!for consistency with the codebase pattern seen in modal.tsx rather than adding a runtime guard.The same applies at lines 103-104.
🤖 Prompt for AI Agents