BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve GitHub picker dialogs layout and mobile cleanup fixes #336 (#338)

Browse Source
This commit is contained in:
gsxdsm
2026-02-06 12:29:26 +02:00
committed by GitHub
parent f25d20a61e
commit 9e9fbbe0ce
3 changed files with 105 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/session/GitHubIssuePickerDialog.tsx
+15 -13
View File
@@ -587,7 +587,7 @@ Do not implement changes until I confirm; end with: “Next actions: <1 sentence
<div className="mt-4 p-3 bg-muted/30 rounded-lg"> <div className="mt-4 p-3 bg-muted/30 rounded-lg">
<p className="typography-meta text-muted-foreground font-medium mb-2">Actions</p> <p className="typography-meta text-muted-foreground font-medium mb-2">Actions</p>
<div className="flex items-center gap-2"> <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-2">
<div <div
className="flex items-center gap-2 cursor-pointer" className="flex items-center gap-2 cursor-pointer"
role="button" role="button"
@@ -618,20 +618,22 @@ Do not implement changes until I confirm; end with: “Next actions: <1 sentence
)} )}
</button> </button>
<span className="typography-meta text-muted-foreground">Create in worktree</span> <span className="typography-meta text-muted-foreground">Create in worktree</span>
<span className="typography-meta text-muted-foreground/70">(issue-&lt;number&gt;-&lt;slug&gt;)</span> <span className="typography-meta text-muted-foreground/70 hidden sm:inline">(issue-&lt;number&gt;-&lt;slug&gt;)</span>
</div> </div>
<div className="flex-1" /> <div className="hidden sm:block sm:flex-1" />
{repoUrl ? ( <div className="flex items-center gap-2">
<Button variant="outline" size="sm" asChild> {repoUrl ? (
<a href={repoUrl} target="_blank" rel="noopener noreferrer"> <Button variant="outline" size="sm" asChild>
<RiExternalLinkLine className="size-4" /> <a href={repoUrl} target="_blank" rel="noopener noreferrer">
Open Repo <RiExternalLinkLine className="size-4" />
</a> Open Repo
</a>
</Button>
) : null}
<Button variant="outline" size="sm" onClick={refresh} disabled={isLoading || Boolean(startingIssueNumber)}>
Refresh
</Button> </Button>
) : null} </div>
<Button variant="outline" size="sm" onClick={refresh} disabled={isLoading || Boolean(startingIssueNumber)}>
Refresh
</Button>
</div> </div>
</div> </div>
</DialogContent> </DialogContent>
packages/ui/src/components/session/GitHubPullRequestPickerDialog.tsx
+76 -73
View File
@@ -743,84 +743,87 @@ Nice-to-have:
<div className="mt-4 p-3 bg-muted/30 rounded-lg"> <div className="mt-4 p-3 bg-muted/30 rounded-lg">
<p className="typography-meta text-muted-foreground font-medium mb-2">Actions</p> <p className="typography-meta text-muted-foreground font-medium mb-2">Actions</p>
<div className="flex items-center gap-2"> <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:gap-x-4 sm:gap-y-2">
<div <div className="flex flex-col gap-2 sm:flex-row sm:gap-4">
className="flex items-center gap-2 cursor-pointer" <div
role="button" className="flex items-center gap-2 cursor-pointer"
tabIndex={0} role="button"
aria-pressed={createInWorktree} tabIndex={0}
onClick={() => setCreateInWorktree((v) => !v)} aria-pressed={createInWorktree}
onKeyDown={(e) => { onClick={() => setCreateInWorktree((v) => !v)}
if (e.key === ' ' || e.key === 'Enter') { onKeyDown={(e) => {
e.preventDefault(); if (e.key === ' ' || e.key === 'Enter') {
setCreateInWorktree((v) => !v); e.preventDefault();
} setCreateInWorktree((v) => !v);
}} }
>
<button
type="button"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setCreateInWorktree((v) => !v);
}} }}
aria-label="Toggle worktree"
className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
> >
{createInWorktree ? ( <button
<RiCheckboxLine className="h-4 w-4 text-primary" /> type="button"
) : ( onClick={(e) => {
<RiCheckboxBlankLine className="h-4 w-4" /> e.preventDefault();
)} e.stopPropagation();
</button> setCreateInWorktree((v) => !v);
<span className="typography-meta text-muted-foreground">Create session in PR worktree</span> }}
aria-label="Toggle worktree"
className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
>
{createInWorktree ? (
<RiCheckboxLine className="h-4 w-4 text-primary" />
) : (
<RiCheckboxBlankLine className="h-4 w-4" />
)}
</button>
<span className="typography-meta text-muted-foreground">Create in PR worktree</span>
</div>
<div
className="flex items-center gap-2 cursor-pointer"
role="button"
tabIndex={0}
aria-pressed={includeDiff}
onClick={() => setIncludeDiff((v) => !v)}
onKeyDown={(e) => {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
setIncludeDiff((v) => !v);
}
}}
>
<button
type="button"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setIncludeDiff((v) => !v);
}}
aria-label="Toggle diff"
className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
>
{includeDiff ? (
<RiCheckboxLine className="h-4 w-4 text-primary" />
) : (
<RiCheckboxBlankLine className="h-4 w-4" />
)}
</button>
<span className="typography-meta text-muted-foreground">Include full diff</span>
</div>
</div> </div>
<div className="hidden sm:block sm:flex-1" />
<div <div className="flex items-center gap-2">
className="flex items-center gap-2 cursor-pointer" {repoUrl ? (
role="button" <Button variant="outline" size="sm" asChild>
tabIndex={0} <a href={repoUrl} target="_blank" rel="noopener noreferrer">
aria-pressed={includeDiff} <RiExternalLinkLine className="size-4" />
onClick={() => setIncludeDiff((v) => !v)} Open Repo
onKeyDown={(e) => { </a>
if (e.key === ' ' || e.key === 'Enter') { </Button>
e.preventDefault(); ) : null}
setIncludeDiff((v) => !v); <Button variant="outline" size="sm" onClick={refresh} disabled={isLoading || Boolean(startingNumber)}>
} Refresh
}}
>
<button
type="button"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setIncludeDiff((v) => !v);
}}
aria-label="Toggle diff"
className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
>
{includeDiff ? (
<RiCheckboxLine className="h-4 w-4 text-primary" />
) : (
<RiCheckboxBlankLine className="h-4 w-4" />
)}
</button>
<span className="typography-meta text-muted-foreground">Include full diff</span>
</div>
<div className="flex-1" />
{repoUrl ? (
<Button variant="outline" size="sm" asChild>
<a href={repoUrl} target="_blank" rel="noopener noreferrer">
<RiExternalLinkLine className="size-4" />
Open Repo
</a>
</Button> </Button>
) : null} </div>
<Button variant="outline" size="sm" onClick={refresh} disabled={isLoading || Boolean(startingNumber)}>
Refresh
</Button>
</div> </div>
</div> </div>
</DialogContent> </DialogContent>
packages/ui/src/components/session/SessionSidebar.tsx
+14 -10
View File
@@ -1800,20 +1800,12 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
if (projectKey !== activeProjectId) { if (projectKey !== activeProjectId) {
setActiveProject(projectKey); setActiveProject(projectKey);
} }
setActiveMainTab('chat');
if (mobileVariant) {
setSessionSwitcherOpen(false);
}
setIssuePickerOpen(true); setIssuePickerOpen(true);
}} }}
onNewSessionFromGitHubPR={() => { onNewSessionFromGitHubPR={() => {
if (projectKey !== activeProjectId) { if (projectKey !== activeProjectId) {
setActiveProject(projectKey); setActiveProject(projectKey);
} }
setActiveMainTab('chat');
if (mobileVariant) {
setSessionSwitcherOpen(false);
}
setPullRequestPickerOpen(true); setPullRequestPickerOpen(true);
}} }}
onOpenMultiRunLauncher={() => { onOpenMultiRunLauncher={() => {
@@ -1870,12 +1862,24 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
<GitHubIssuePickerDialog <GitHubIssuePickerDialog
open={issuePickerOpen} open={issuePickerOpen}
onOpenChange={setIssuePickerOpen} onOpenChange={(open) => {
setIssuePickerOpen(open);
if (!open && mobileVariant) {
setActiveMainTab('chat');
setSessionSwitcherOpen(false);
}
}}
/> />
<GitHubPullRequestPickerDialog <GitHubPullRequestPickerDialog
open={pullRequestPickerOpen} open={pullRequestPickerOpen}
onOpenChange={setPullRequestPickerOpen} onOpenChange={(open) => {
setPullRequestPickerOpen(open);
if (!open && mobileVariant) {
setActiveMainTab('chat');
setSessionSwitcherOpen(false);
}
}}
/> />
</div> </div>
); );