fixed and added modal

[MisbahAnsar]

Fixes #2052

Problem: Remove project used window.confirm and window.alert.

Solution: In-app confirm modal (RemoveProjectConfirmModal) and error toasts via useToast.

issue-done-1779630023318.mp4

[greptile-apps]

Greptile Summary

This PR replaces window.confirm / window.alert in the remove-project flow with an in-app RemoveProjectConfirmModal component and error toasts via useToast, resolving #2052.

• New RemoveProjectConfirmModal: renders a role="dialog" with a backdrop, focus trap, Escape-key dismiss guard, and busy-state button disabling; cancelRemoveProject and confirmRemoveProject are correctly memoized with useCallback.
• ToastProvider wrapping: added at the ProjectSidebar level so showToast is available throughout ProjectSidebarInner; z-index of the toast container (400) is correctly above the modal backdrop (60), so error toasts remain visible while the dialog is open.
• Tests: three new test cases cover the confirm, cancel, and error-toast paths, plus a dedicated unit test file for the modal's focus-trap and Escape-key behaviour.

Confidence Score: 5/5

The change is safe to merge — it replaces browser-native dialogs with a well-scoped React modal and toast, with correct state management and test coverage.

State management around pending removal, busy guards, error recovery, and z-index layering are all correct. The only findings are minor accessibility suggestions (missing aria-describedby) that do not affect runtime behaviour.

No files require special attention.

Important Files Changed

Filename	Overview
packages/web/src/components/RemoveProjectConfirmModal.tsx	New confirm dialog replacing window.confirm/window.alert; focus trap is implemented via useEffect; missing aria-describedby association for the description paragraph.
packages/web/src/components/ProjectSidebar.tsx	Replaces window.confirm/alert with modal + toast; state management for pending removal is correct; cancelRemoveProject and confirmRemoveProject are properly memoized.
packages/web/src/app/globals.css	Adds confirm modal and action button styles; z-index correctly set above the backdrop (toast at 400, backdrop at 60).
packages/web/src/components/tests/ProjectSidebar.test.tsx	Removes window.confirm stub; adds confirm, cancel, and error-toast test cases that correctly exercise the new modal flow.
packages/web/src/components/tests/RemoveProjectConfirmModal.test.tsx	New test file covering focus trapping, Escape dismissal, and busy-state guard; assertions are correct.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User clicks Remove project menu item] --> B[requestRemoveProject\nclose menu, set projectPendingRemoval]
    B --> C[RemoveProjectConfirmModal opens\nproject prop non-null]
    C --> D{User action}
    D -->|Cancel / Escape / backdrop click| E[cancelRemoveProject\nclear projectPendingRemoval]
    E --> F[Modal closes]
    D -->|Confirm click| G[confirmRemoveProject\nsetDeletingProjectId → busy=true]
    G --> H[DELETE /api/projects/:id]
    H -->|ok: true| I[setRemovedProjectIds\nsetProjectPendingRemoval null\nrouter.push or refresh]
    I --> J[Modal closes, sidebar updates]
    H -->|ok: false| K[showToast error message]
    K --> L[setDeletingProjectId null\nModal stays open for retry]

Loading

Prompt To Fix All With AI

Fix the following 2 code review issues. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 2
packages/web/src/components/RemoveProjectConfirmModal.tsx:65-73
The description paragraph is not formally associated with the dialog. Without `aria-describedby`, screen readers may not announce the consequence text when the dialog receives focus — users relying on assistive technology would hear the title but miss the explanation of what the action does.

```suggestion
      <div
        ref={modalRef}
        role="dialog"
        aria-modal="true"
        aria-labelledby="remove-project-title"
        aria-describedby="remove-project-description"
        className="project-settings-modal project-settings-modal--confirm"
        tabIndex={-1}
        onClick={(event) => event.stopPropagation()}
      >
```

### Issue 2 of 2
packages/web/src/components/RemoveProjectConfirmModal.tsx:92
Pair the `aria-describedby` added to the dialog with a matching `id` on the description paragraph.

```suggestion
        <p id="remove-project-description" className="project-settings-modal__confirm-body">{REMOVE_PROJECT_CONFIRM_MESSAGE}</p>
```

_{Reviews (2): Last reviewed commit: "fixed all the issues" | Re-trigger Greptile}

[MisbahAnsar]

Fixed all the issues in last commit.

[MisbahAnsar]

@ashish921998
@suraj-markup