paperclip/ui/src/context/DialogContext.tsx
Dotta 6b7f6ce4b8
[codex] Split PR #4692 UI/QoL updates (#4701)
## Thinking Path

> - Paperclip orchestrates AI agents through a company-scoped control
plane.
> - The affected surface is the board UI for issue threads, issue lists,
routines, dialogs, navigation, and issue review indicators.
> - Closed PR #4692 bundled backend, schema, docs, workflow, and UI/QoL
work into one oversized change set.
> - Greptile could not keep reviewing that broad PR because it exceeded
the 100-file review limit and mixed unrelated concerns.
> - This pull request extracts the UI/QoL slice into a fresh branch
under the review limit while leaving workflow and lockfile churn out.
> - The benefit is a focused review path for the board UI performance
and workflow improvements without reopening the oversized PR.

## What Changed

- Added long issue-thread virtualization, scroll-container binding,
anchor preservation, latest-comment jump targeting, and related
regression/perf fixtures.
- Improved issue list scalability with scroll-based loading, server
offset parameters, and pagination-focused UI tests.
- Reduced new issue dialog typing churn and split dialog action
subscriptions so broad layout/nav surfaces avoid unnecessary renders.
- Added routine variables help and routine description mention options
for users, agents, and projects.
- Added productivity review badge/link UI and fixed the badge to use
Paperclip's company-prefixed router link.
- Kept the split PR below Greptile's review limit and excluded
`.github/workflows/pr.yml` and `pnpm-lock.yaml`.

## Verification

- `pnpm install --no-frozen-lockfile` in the clean worktree to install
`@tanstack/react-virtual` locally without committing lockfile churn.
- `pnpm --filter @paperclipai/ui exec vitest run --config
vitest.config.ts src/components/IssueChatThread.test.tsx
src/components/IssuesList.test.tsx
src/components/NewIssueDialog.test.tsx src/pages/Routines.test.tsx
src/pages/Issues.test.tsx` passed: 5 files, 83 tests.
- `pnpm --filter @paperclipai/ui typecheck` passed.
- `git diff --check origin/master..HEAD` passed.
- Split-scope checks: 53 changed files; no `.github/workflows/pr.yml`;
no `pnpm-lock.yaml`.
- Screenshots were not captured in this heartbeat; the changes are
primarily virtualization, routing, pagination, and editor behavior
covered by focused regression tests.

## Risks

- Moderate UI risk because issue-thread virtualization changes scroll
behavior on long conversations; regression tests cover anchor jumps,
latest-comment targeting, row metadata, and short-thread fallback.
- Moderate integration risk because the issue-list offset parameter and
productivity review field depend on matching API behavior.
- Dependency risk: the UI package adds `@tanstack/react-virtual` while
repository policy keeps `pnpm-lock.yaml` out of PRs, so CI must resolve
dependency changes through the repo's normal lockfile policy.

> For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and
discuss it in `#dev` before opening the PR. Feature PRs that overlap
with planned core work may need to be redirected — check the roadmap
first. See `CONTRIBUTING.md`.

## Model Used

- OpenAI Codex, GPT-5 coding agent, tool-enabled local repository and
GitHub workflow. Exact runtime context window was not exposed by the
harness.

## Checklist

- [x] I have included a thinking path that traces from project context
to this change
- [x] I have specified the model used (with version and capability
details)
- [x] I have checked ROADMAP.md and confirmed this PR does not duplicate
planned core work
- [x] I have run tests locally and they pass
- [x] I have added or updated tests where applicable
- [ ] If this change affects the UI, I have included before/after
screenshots
- [x] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] I will address all Greptile and reviewer comments before
requesting merge

---------

Co-authored-by: Paperclip <noreply@paperclip.ing>
2026-04-28 17:18:58 -05:00

204 lines
5 KiB
TypeScript

import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from "react";
interface NewIssueDefaults {
status?: string;
priority?: string;
projectId?: string;
projectWorkspaceId?: string;
goalId?: string;
parentId?: string;
parentIdentifier?: string;
parentTitle?: string;
executionWorkspaceId?: string;
executionWorkspaceMode?: string;
parentExecutionWorkspaceLabel?: string;
assigneeAgentId?: string;
assigneeUserId?: string;
title?: string;
description?: string;
}
interface NewGoalDefaults {
parentId?: string;
}
interface OnboardingOptions {
initialStep?: 1 | 2 | 3 | 4;
companyId?: string;
}
interface DialogContextValue {
newIssueOpen: boolean;
newIssueDefaults: NewIssueDefaults;
openNewIssue: (defaults?: NewIssueDefaults) => void;
closeNewIssue: () => void;
newProjectOpen: boolean;
openNewProject: () => void;
closeNewProject: () => void;
newGoalOpen: boolean;
newGoalDefaults: NewGoalDefaults;
openNewGoal: (defaults?: NewGoalDefaults) => void;
closeNewGoal: () => void;
newAgentOpen: boolean;
openNewAgent: () => void;
closeNewAgent: () => void;
onboardingOpen: boolean;
onboardingOptions: OnboardingOptions;
openOnboarding: (options?: OnboardingOptions) => void;
closeOnboarding: () => void;
}
type DialogStateValue = Pick<
DialogContextValue,
| "newIssueOpen"
| "newIssueDefaults"
| "newProjectOpen"
| "newGoalOpen"
| "newGoalDefaults"
| "newAgentOpen"
| "onboardingOpen"
| "onboardingOptions"
>;
type DialogActionsValue = Omit<DialogContextValue, keyof DialogStateValue>;
const DialogStateContext = createContext<DialogStateValue | null>(null);
const DialogActionsContext = createContext<DialogActionsValue | null>(null);
export function DialogProvider({ children }: { children: ReactNode }) {
const [newIssueOpen, setNewIssueOpen] = useState(false);
const [newIssueDefaults, setNewIssueDefaults] = useState<NewIssueDefaults>({});
const [newProjectOpen, setNewProjectOpen] = useState(false);
const [newGoalOpen, setNewGoalOpen] = useState(false);
const [newGoalDefaults, setNewGoalDefaults] = useState<NewGoalDefaults>({});
const [newAgentOpen, setNewAgentOpen] = useState(false);
const [onboardingOpen, setOnboardingOpen] = useState(false);
const [onboardingOptions, setOnboardingOptions] = useState<OnboardingOptions>({});
const openNewIssue = useCallback((defaults: NewIssueDefaults = {}) => {
setNewIssueDefaults(defaults);
setNewIssueOpen(true);
}, []);
const closeNewIssue = useCallback(() => {
setNewIssueOpen(false);
setNewIssueDefaults({});
}, []);
const openNewProject = useCallback(() => {
setNewProjectOpen(true);
}, []);
const closeNewProject = useCallback(() => {
setNewProjectOpen(false);
}, []);
const openNewGoal = useCallback((defaults: NewGoalDefaults = {}) => {
setNewGoalDefaults(defaults);
setNewGoalOpen(true);
}, []);
const closeNewGoal = useCallback(() => {
setNewGoalOpen(false);
setNewGoalDefaults({});
}, []);
const openNewAgent = useCallback(() => {
setNewAgentOpen(true);
}, []);
const closeNewAgent = useCallback(() => {
setNewAgentOpen(false);
}, []);
const openOnboarding = useCallback((options: OnboardingOptions = {}) => {
setOnboardingOptions(options);
setOnboardingOpen(true);
}, []);
const closeOnboarding = useCallback(() => {
setOnboardingOpen(false);
setOnboardingOptions({});
}, []);
const stateValue = useMemo<DialogStateValue>(
() => ({
newIssueOpen,
newIssueDefaults,
newProjectOpen,
newGoalOpen,
newGoalDefaults,
newAgentOpen,
onboardingOpen,
onboardingOptions,
}),
[
newIssueOpen,
newIssueDefaults,
newProjectOpen,
newGoalOpen,
newGoalDefaults,
newAgentOpen,
onboardingOpen,
onboardingOptions,
],
);
const actionsValue = useMemo<DialogActionsValue>(
() => ({
openNewIssue,
closeNewIssue,
openNewProject,
closeNewProject,
openNewGoal,
closeNewGoal,
openNewAgent,
closeNewAgent,
openOnboarding,
closeOnboarding,
}),
[
openNewIssue,
closeNewIssue,
openNewProject,
closeNewProject,
openNewGoal,
closeNewGoal,
openNewAgent,
closeNewAgent,
openOnboarding,
closeOnboarding,
],
);
return (
<DialogActionsContext.Provider value={actionsValue}>
<DialogStateContext.Provider value={stateValue}>
{children}
</DialogStateContext.Provider>
</DialogActionsContext.Provider>
);
}
export function useDialogActions() {
const ctx = useContext(DialogActionsContext);
if (!ctx) {
throw new Error("useDialogActions must be used within DialogProvider");
}
return ctx;
}
export function useDialogState() {
const ctx = useContext(DialogStateContext);
if (!ctx) {
throw new Error("useDialogState must be used within DialogProvider");
}
return ctx;
}
export function useDialog() {
return {
...useDialogState(),
...useDialogActions(),
};
}