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

fix: show tablet actions without hover

Browse Source 
Makes hover-only controls visible on tablets
Preserves existing mobile and desktop layouts
Covers chat, session sidebar, file, tab, and picker actions
This commit is contained in:
Bohdan Triapitsyn
2026-05-03 17:19:55 +03:00
parent 43f98e0344
commit 6595322f1a
20 changed files with 164 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/session/DirectoryTree.tsx
+7 -3
View File
@@ -57,7 +57,8 @@ export const DirectoryTree: React.FC<DirectoryTreeProps> = ({
disabledPaths,
}) => {
const { t } = useI18n();
const { isMobile } = useDeviceInfo();
const { isMobile, isTablet } = useDeviceInfo();
const showHoverActions = alwaysShowActions || isTablet;
const [directories, setDirectories] = React.useState<DirectoryItem[]>([]);
const [expandedPaths, setExpandedPaths] = React.useState<Set<string>>(new Set());
const [isLoading, setIsLoading] = React.useState(true);
@@ -1146,7 +1147,7 @@ export const DirectoryTree: React.FC<DirectoryTreeProps> = ({
onClick={() => togglePin(path)}
className={cn(
"hover:bg-interactive-hover rounded-md transition-opacity",
isMobile ? "p-1.5 opacity-60" : "p-1 opacity-0 group-hover:opacity-100"
showHoverActions ? "p-1.5 opacity-60" : "p-1 opacity-0 group-hover:opacity-100"
)}
title={t('directoryTree.actions.unpinDirectory')}
>
@@ -1200,7 +1201,10 @@ export const DirectoryTree: React.FC<DirectoryTreeProps> = ({
e.preventDefault();
togglePin(path);
}}
className="p-1 opacity-0 group-hover:opacity-100 hover:bg-interactive-hover rounded transition-opacity flex-shrink-0"
className={cn(
"hover:bg-interactive-hover rounded transition-opacity flex-shrink-0",
showHoverActions ? "p-1.5 opacity-60" : "p-1 opacity-0 group-hover:opacity-100"
)}
title={t('directoryTree.actions.unpinDirectory')}
>
<RiPushpin2Line className="h-3 w-3 text-primary" />
packages/ui/src/components/session/GitHubIssuePickerDialog.tsx
+7 -1
View File
@@ -32,6 +32,7 @@ import { useGitHubAuthStore } from '@/stores/useGitHubAuthStore';
import { opencodeClient } from '@/lib/opencode/client';
import { renderMagicPrompt } from '@/lib/magicPrompts';
import { parseModelIdentifier } from '@/lib/modelIdentifier';
import { useDeviceInfo } from '@/lib/device';
import { createWorktreeSessionForNewBranch } from '@/lib/worktreeSessionCreator';
import { generateBranchSlug } from '@/lib/git/branchNameGenerator';
import type { GitHubIssue, GitHubIssueComment, GitHubIssuesListResult, GitHubIssueSummary, GitHubRepoSelector } from '@/lib/api/types';
@@ -87,6 +88,8 @@ export function GitHubIssuePickerDialog({
const setSettingsDialogOpen = useUIStore((state) => state.setSettingsDialogOpen);
const setSettingsPage = useUIStore((state) => state.setSettingsPage);
const isMobile = useUIStore((state) => state.isMobile);
const { isTablet } = useDeviceInfo();
const alwaysShowActions = isMobile || isTablet;
const activeProject = useProjectsStore((state) => state.getActiveProject());
const currentDirectory = useDirectoryStore((state) => state.currentDirectory);
@@ -591,7 +594,10 @@ export function GitHubIssuePickerDialog({
href={issue.url}
target="_blank"
rel="noopener noreferrer"
className="hidden group-hover:flex h-5 w-5 items-center justify-center text-muted-foreground hover:text-foreground transition-colors"
className={cn(
"h-5 w-5 items-center justify-center text-muted-foreground hover:text-foreground transition-colors",
alwaysShowActions ? "flex" : "hidden group-hover:flex"
)}
onClick={(e) => e.stopPropagation()}
aria-label={t('session.githubIssuePicker.actions.openInGitHubAria')}
>
packages/ui/src/components/session/GitHubPrPickerDialog.tsx
+7 -1
View File
@@ -23,6 +23,7 @@ import { useProjectsStore } from '@/stores/useProjectsStore';
import { useUIStore } from '@/stores/useUIStore';
import { useGitHubAuthStore } from '@/stores/useGitHubAuthStore';
import { renderMagicPrompt } from '@/lib/magicPrompts';
import { useDeviceInfo } from '@/lib/device';
import type { GitHubPullRequestContextResult, GitHubPullRequestSummary, GitHubPullRequestsListResult, GitHubRepoSelector } from '@/lib/api/types';
import { useI18n } from '@/lib/i18n';
@@ -75,6 +76,8 @@ export function GitHubPrPickerDialog({
const setSettingsDialogOpen = useUIStore((state) => state.setSettingsDialogOpen);
const setSettingsPage = useUIStore((state) => state.setSettingsPage);
const isMobile = useUIStore((state) => state.isMobile);
const { isTablet } = useDeviceInfo();
const alwaysShowActions = isMobile || isTablet;
const activeProject = useProjectsStore((state) => state.getActiveProject());
const projectDirectory = activeProject?.path ?? null;
@@ -377,7 +380,10 @@ export function GitHubPrPickerDialog({
href={pr.url}
target="_blank"
rel="noopener noreferrer"
className="hidden group-hover:flex h-5 w-5 items-center justify-center text-muted-foreground hover:text-foreground transition-colors"
className={cn(
"h-5 w-5 items-center justify-center text-muted-foreground hover:text-foreground transition-colors",
alwaysShowActions ? "flex" : "hidden group-hover:flex"
)}
onClick={(e) => e.stopPropagation()}
aria-label={t('session.githubPrPicker.actions.openInGitHubAria')}
>
packages/ui/src/components/session/SessionFolderItem.tsx
+4 -2
View File
@@ -34,6 +34,7 @@ interface SessionFolderItemProps<TSessionNode> {
groupDirectory?: string | null;
projectId?: string | null;
mobileVariant?: boolean;
alwaysShowActions?: boolean;
isRenaming?: boolean;
renameDraft?: string;
onRenameDraftChange?: (value: string) => void;
@@ -67,6 +68,7 @@ const SessionFolderItemBase = <TSessionNode,>({
groupDirectory,
projectId,
mobileVariant = false,
alwaysShowActions = mobileVariant,
isRenaming = false,
renameDraft = '',
onRenameDraftChange,
@@ -174,7 +176,7 @@ const SessionFolderItemBase = <TSessionNode,>({
<div className={cn(
'min-w-0 flex items-center gap-1.5 pl-1.5 flex-1 transition-[padding]',
archivedBucket
? (mobileVariant ? 'pr-7' : 'group-hover/folder:pr-7 group-focus-within/folder:pr-7')
? (alwaysShowActions ? 'pr-7' : 'group-hover/folder:pr-7 group-focus-within/folder:pr-7')
: '',
)}>
<FolderIcon className={cn('h-3.5 w-3.5 flex-shrink-0', isDropTarget ? 'text-primary' : 'text-muted-foreground')} />
@@ -257,7 +259,7 @@ const SessionFolderItemBase = <TSessionNode,>({
<div
className={cn(
'flex items-center gap-0.5 transition-opacity',
mobileVariant ? 'opacity-100' : 'opacity-0 group-hover/folder:opacity-100 group-focus-within/folder:opacity-100',
alwaysShowActions ? 'opacity-100' : 'opacity-0 group-hover/folder:opacity-100 group-focus-within/folder:opacity-100',
archivedBucket && 'absolute right-0.5 top-1/2 z-10 -translate-y-1/2 px-0',
)}
>
packages/ui/src/components/session/SessionSidebar.tsx
+8
View File
@@ -4,6 +4,7 @@ import { RiLayoutLeftLine } from '@remixicon/react';
import { toast } from '@/components/ui';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { useI18n } from '@/lib/i18n';
import { useDeviceInfo } from '@/lib/device';
import { isDesktopShell } from '@/lib/desktop';
import { isDesktopWindowFullscreen as getDesktopWindowFullscreen, onDesktopWindowResized, startDesktopWindowDrag } from '@/lib/desktopNative';
import { sessionEvents } from '@/lib/sessionEvents';
@@ -437,6 +438,8 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
const [isDesktopWindowFullscreen, setIsDesktopWindowFullscreen] = React.useState(false);
const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
const { isTablet } = useDeviceInfo();
const alwaysShowSidebarActions = mobileVariant || isTablet;
const isMacPlatform = React.useMemo(() => {
if (typeof navigator === 'undefined') {
return false;
@@ -1281,6 +1284,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
openContextPanelTab={openContextPanelTab}
handleDeleteSession={handleDeleteSession}
mobileVariant={mobileVariant}
alwaysShowActions={alwaysShowSidebarActions}
renderSessionNode={renderSessionNode}
secondaryMeta={secondaryMeta}
renderContext={renderContext}
@@ -1319,6 +1323,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
openContextPanelTab,
handleDeleteSession,
mobileVariant,
alwaysShowSidebarActions,
],
);
@@ -1378,6 +1383,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
lastRepoStatus={lastRepoStatusRef.current}
toggleGroupSessionLimit={toggleGroupSessionLimit}
mobileVariant={mobileVariant}
alwaysShowActions={alwaysShowSidebarActions}
activeProjectId={activeProjectId}
setActiveProjectIdOnly={setActiveProjectIdOnly}
setActiveMainTab={setActiveMainTab}
@@ -1413,6 +1419,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
projectRepoStatus,
toggleGroupSessionLimit,
mobileVariant,
alwaysShowSidebarActions,
activeProjectId,
setActiveProjectIdOnly,
setActiveMainTab,
@@ -1692,6 +1699,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
isDesktopShellRuntime={isDesktopShellRuntime}
stuckProjectHeaders={stuckProjectHeaders}
mobileVariant={mobileVariant}
alwaysShowActions={alwaysShowSidebarActions}
toggleProject={toggleProject}
setActiveProjectIdOnly={setActiveProjectIdOnly}
setActiveMainTab={setActiveMainTab}
packages/ui/src/components/session/sidebar/SessionGroupSection.tsx
+22 -10
View File
@@ -55,6 +55,7 @@ type Props = {
lastRepoStatus: boolean;
toggleGroupSessionLimit: (groupKey: string) => void;
mobileVariant: boolean;
alwaysShowActions: boolean;
activeProjectId: string | null;
setActiveProjectIdOnly: (id: string) => void;
setActiveMainTab: (tab: MainTab) => void;
@@ -120,6 +121,7 @@ export function SessionGroupSection(props: Props): React.ReactNode {
lastRepoStatus,
toggleGroupSessionLimit,
mobileVariant,
alwaysShowActions,
activeProjectId,
setActiveProjectIdOnly,
setActiveMainTab,
@@ -405,6 +407,7 @@ export function SessionGroupSection(props: Props): React.ReactNode {
groupDirectory={group.directory}
projectId={projectId}
mobileVariant={mobileVariant}
alwaysShowActions={alwaysShowActions}
isRenaming={renamingFolderId === folder.id}
renameDraft={renamingFolderId === folder.id ? renameFolderDraft : undefined}
onRenameDraftChange={(value) => setRenameFolderDraft(value)}
@@ -443,7 +446,7 @@ export function SessionGroupSection(props: Props): React.ReactNode {
const renderFolderItems = () => rootFolders.map(({ folder, nodes }) => renderOneFolderItem(folder, nodes, 0));
const hasWorktreeDeleteAction = Boolean(!group.isMain && group.worktree);
const groupHeaderRightPadding = mobileVariant
const groupHeaderRightPadding = alwaysShowActions
? (hasWorktreeDeleteAction ? 'pr-14' : 'pr-7')
: isMinimalMode
? (hasWorktreeDeleteAction
@@ -534,10 +537,13 @@ export function SessionGroupSection(props: Props): React.ReactNode {
<span className="inline-flex shrink-0 items-center gap-1 leading-none align-middle">
<span className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center">
<RiGitBranchLine
className="h-3.5 w-3.5 shrink-0 group-hover/gh:hidden"
className={cn('h-3.5 w-3.5 shrink-0', alwaysShowActions ? 'hidden' : 'group-hover/gh:hidden')}
style={branchIconColor ? { color: branchIconColor } : undefined}
/>
<span className="hidden text-muted-foreground group-hover/gh:inline-flex h-3.5 w-3.5 items-center justify-center">
<span className={cn(
'text-muted-foreground h-3.5 w-3.5 items-center justify-center',
alwaysShowActions ? 'inline-flex' : 'hidden group-hover/gh:inline-flex',
)}>
{isCollapsed ? <RiArrowRightSLine className="h-3.5 w-3.5" /> : <RiArrowDownSLine className="h-3.5 w-3.5" />}
</span>
</span>
@@ -587,8 +593,11 @@ export function SessionGroupSection(props: Props): React.ReactNode {
) : group.isArchivedBucket ? (
<span className="inline-flex min-w-0 max-w-full items-center gap-1">
<span className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center">
<RiArchiveLine className="h-3.5 w-3.5 shrink-0 text-muted-foreground group-hover/gh:hidden" />
<span className="hidden text-muted-foreground group-hover/gh:inline-flex h-3.5 w-3.5 items-center justify-center">
<RiArchiveLine className={cn('h-3.5 w-3.5 shrink-0 text-muted-foreground', alwaysShowActions ? 'hidden' : 'group-hover/gh:hidden')} />
<span className={cn(
'text-muted-foreground h-3.5 w-3.5 items-center justify-center',
alwaysShowActions ? 'inline-flex' : 'hidden group-hover/gh:inline-flex',
)}>
{isCollapsed ? <RiArrowRightSLine className="h-3.5 w-3.5" /> : <RiArrowDownSLine className="h-3.5 w-3.5" />}
</span>
</span>
@@ -598,10 +607,13 @@ export function SessionGroupSection(props: Props): React.ReactNode {
<span className="inline-flex min-w-0 max-w-full items-center gap-1">
<span className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center">
<RiGitBranchLine
className="h-3.5 w-3.5 shrink-0 text-muted-foreground group-hover/gh:hidden"
className={cn('h-3.5 w-3.5 shrink-0 text-muted-foreground', alwaysShowActions ? 'hidden' : 'group-hover/gh:hidden')}
style={branchIconColor ? { color: branchIconColor } : undefined}
/>
<span className="hidden text-muted-foreground group-hover/gh:inline-flex h-3.5 w-3.5 items-center justify-center">
<span className={cn(
'text-muted-foreground h-3.5 w-3.5 items-center justify-center',
alwaysShowActions ? 'inline-flex' : 'hidden group-hover/gh:inline-flex',
)}>
{isCollapsed ? <RiArrowRightSLine className="h-3.5 w-3.5" /> : <RiArrowDownSLine className="h-3.5 w-3.5" />}
</span>
</span>
@@ -671,7 +683,7 @@ export function SessionGroupSection(props: Props): React.ReactNode {
</div>
</div>
{group.isArchivedBucket && allGroupSessions.length > 0 ? (
<div className={cn('absolute right-0.5 top-1/2 -translate-y-1/2 z-10 transition-opacity', mobileVariant ? 'opacity-100' : 'opacity-0 group-hover/gh:opacity-100 group-focus-within/gh:opacity-100')}>
<div className={cn('absolute right-0.5 top-1/2 -translate-y-1/2 z-10 transition-opacity', alwaysShowActions ? 'opacity-100' : 'opacity-0 group-hover/gh:opacity-100 group-focus-within/gh:opacity-100')}>
<Tooltip>
<TooltipTrigger asChild>
<button
@@ -694,7 +706,7 @@ export function SessionGroupSection(props: Props): React.ReactNode {
</div>
) : null}
{group.directory && !group.isMain && group.worktree ? (
<div className={cn('absolute right-7 top-1/2 -translate-y-1/2 z-10 transition-opacity', mobileVariant ? 'opacity-100' : 'opacity-0 group-hover/gh:opacity-100 group-focus-within/gh:opacity-100')}>
<div className={cn('absolute right-7 top-1/2 -translate-y-1/2 z-10 transition-opacity', alwaysShowActions ? 'opacity-100' : 'opacity-0 group-hover/gh:opacity-100 group-focus-within/gh:opacity-100')}>
<Tooltip>
<TooltipTrigger asChild>
<button
@@ -718,7 +730,7 @@ export function SessionGroupSection(props: Props): React.ReactNode {
</div>
) : null}
{group.directory ? (
<div className={cn('absolute right-0.5 top-1/2 -translate-y-1/2 z-10 transition-opacity', mobileVariant ? 'opacity-100' : 'opacity-0 group-hover/gh:opacity-100 group-focus-within/gh:opacity-100')}>
<div className={cn('absolute right-0.5 top-1/2 -translate-y-1/2 z-10 transition-opacity', alwaysShowActions ? 'opacity-100' : 'opacity-0 group-hover/gh:opacity-100 group-focus-within/gh:opacity-100')}>
<Tooltip>
<TooltipTrigger asChild>
<button
packages/ui/src/components/session/sidebar/SessionNodeItem.tsx
+12 -9
View File
@@ -95,6 +95,7 @@ type Props = {
openContextPanelTab: (directory: string, options: { mode: 'chat'; dedupeKey: string; label: string }) => void;
handleDeleteSession: (session: Session, source?: { archivedBucket?: boolean }) => void;
mobileVariant: boolean;
alwaysShowActions: boolean;
renderSessionNode: (node: SessionNode, depth?: number, groupDirectory?: string | null, projectId?: string | null, archivedBucket?: boolean, secondaryMeta?: SecondaryMeta | null, renderContext?: 'project' | 'recent') => React.ReactNode;
secondaryMeta?: SecondaryMeta | null;
renderContext?: 'project' | 'recent';
@@ -207,6 +208,7 @@ const areEqual = (prev: Props, next: Props): boolean => {
if ((prev.secondaryMeta?.projectLabel ?? null) !== (next.secondaryMeta?.projectLabel ?? null)) return false;
if ((prev.secondaryMeta?.branchLabel ?? null) !== (next.secondaryMeta?.branchLabel ?? null)) return false;
if (prev.mobileVariant !== next.mobileVariant) return false;
if (prev.alwaysShowActions !== next.alwaysShowActions) return false;
if ((prev.renderContext ?? 'project') !== (next.renderContext ?? 'project')) return false;
if (prev.renamingFolderId !== next.renamingFolderId) return false;
@@ -253,6 +255,7 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
openContextPanelTab,
handleDeleteSession,
mobileVariant,
alwaysShowActions,
renderSessionNode,
secondaryMeta,
renderContext = 'project',
@@ -500,7 +503,7 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
'pointer-events-none absolute inline-flex h-3.5 items-center justify-center gap-0.5 transition-opacity',
isMinimalMode ? 'top-1/2 -translate-y-1/2' : 'top-[14.5px] -translate-y-1/2',
showStatusMarker && isPinnedSession ? 'left-[-18px] w-6' : 'left-[-10px] w-3.5',
hasChildren ? 'opacity-100 group-hover:opacity-0 group-focus-within:opacity-0' : '',
hasChildren && !alwaysShowActions ? 'opacity-100 group-hover:opacity-0 group-focus-within:opacity-0' : '',
)}
>
{showStatusMarker ? statusMarkerContent : null}
@@ -525,7 +528,7 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
className={cn(
'absolute left-[-10px] inline-flex h-3.5 w-3.5 items-center justify-center rounded-md text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-opacity',
isMinimalMode ? 'top-1/2 -translate-y-1/2' : 'top-[14.5px] -translate-y-1/2',
isMinimalMode && showStatusMarker
isMinimalMode && showStatusMarker && !alwaysShowActions
? 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto'
: '',
)}
@@ -741,15 +744,15 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
className={cn(
'flex min-w-0 flex-1 cursor-pointer flex-col gap-0 overflow-hidden rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 text-foreground select-none disabled:cursor-not-allowed transition-[padding]',
isTouchPressed && 'bg-interactive-hover/70',
mobileVariant
alwaysShowActions
? (isVSCode ? revealPaddingClass : 'pr-7')
: revealPaddingClass,
)}
>
<div className={cn('flex w-full items-center min-w-0 flex-1 overflow-hidden', isMinimalMode ? 'gap-1' : 'gap-1')}>
<div className={cn('block min-w-0 flex-1 truncate typography-ui-label font-normal', isActive ? 'text-primary' : 'text-foreground')}>{renderHighlightedText(sessionTitle, normalizedSessionSearchQuery)}</div>
{mobileVariant ? <span className="ml-2 flex-shrink-0 text-[0.72rem] text-muted-foreground/75">{sessionCompactUpdatedLabel}</span> : null}
{!mobileVariant ? (
{alwaysShowActions ? <span className="ml-2 flex-shrink-0 text-[0.72rem] text-muted-foreground/75">{sessionCompactUpdatedLabel}</span> : null}
{!alwaysShowActions ? (
<div className="relative ml-1 flex h-4 min-w-4 flex-shrink-0 items-center justify-end">
<span className={cn(
'whitespace-nowrap text-right text-[0.72rem] text-muted-foreground/75 transition-opacity duration-150',
@@ -805,7 +808,7 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
className={cn(
'flex min-w-0 flex-1 cursor-pointer flex-col gap-0 overflow-hidden rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 text-foreground select-none disabled:cursor-not-allowed transition-[padding]',
isTouchPressed && 'bg-interactive-hover/70',
mobileVariant
alwaysShowActions
? (isVSCode ? revealPaddingClass : 'pr-7')
: revealPaddingClass
)}
@@ -844,7 +847,7 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
'absolute right-0 top-1/2 z-10 -translate-y-1/2 transition-opacity',
isMenuOpen
? 'opacity-100'
: (mobileVariant && !isVSCode)
: (alwaysShowActions && !isVSCode)
? 'opacity-100'
: cn('opacity-0', revealOnHoverClass),
)}>
@@ -854,7 +857,7 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
type="button"
className={cn(
'inline-flex items-center justify-center rounded-md text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-opacity',
isMinimalMode && !mobileVariant
isMinimalMode && !alwaysShowActions
? (isMenuOpen
? 'h-4 w-4 opacity-100'
: cn('h-4 w-4 opacity-0', revealOnHoverClass))
@@ -866,7 +869,7 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
onClick={handleMenuTriggerClick}
onKeyDown={(event) => event.stopPropagation()}
>
<RiMore2Line className={cn(isMinimalMode && !mobileVariant ? 'h-2.5 w-2.5' : 'h-3.5 w-3.5')} />
<RiMore2Line className={cn(isMinimalMode && !alwaysShowActions ? 'h-2.5 w-2.5' : 'h-3.5 w-3.5')} />
</button>
</DropdownMenuTrigger>
{sessionMenuContent}
packages/ui/src/components/session/sidebar/SidebarProjectsList.tsx
+2
View File
@@ -47,6 +47,7 @@ type Props = {
isDesktopShellRuntime: boolean;
stuckProjectHeaders: Set<string>;
mobileVariant: boolean;
alwaysShowActions: boolean;
toggleProject: (id: string) => void;
setActiveProjectIdOnly: (id: string) => void;
setActiveMainTab: (tab: 'chat' | 'plan' | 'git' | 'diff' | 'terminal' | 'files') => void;
@@ -168,6 +169,7 @@ export function SidebarProjectsList(props: Props): React.ReactNode {
isStuck={props.stuckProjectHeaders.has(projectKey)}
hideDirectoryControls={props.hideDirectoryControls}
mobileVariant={props.mobileVariant}
alwaysShowActions={props.alwaysShowActions}
onToggle={() => props.toggleProject(projectKey)}
onNewSession={() => {
if (projectKey !== props.activeProjectId) props.setActiveProjectIdOnly(projectKey);
packages/ui/src/components/session/sidebar/sortableItems.tsx
+17 -10
View File
@@ -38,6 +38,7 @@ export interface SortableProjectItemProps {
isStuck: boolean;
hideDirectoryControls: boolean;
mobileVariant: boolean;
alwaysShowActions: boolean;
onToggle: () => void;
onNewSession: () => void;
onNewWorktreeSession?: () => void;
@@ -70,7 +71,7 @@ export const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
isDesktopShell,
isStuck,
hideDirectoryControls,
mobileVariant,
alwaysShowActions,
onToggle,
onNewSession,
onNewWorktreeSession,
@@ -176,17 +177,23 @@ export const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
className={cn(
'flex-1 min-w-0 flex items-center gap-1.5 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 rounded-md cursor-grab active:cursor-grabbing transition-[padding]',
isRepo && !hideDirectoryControls
? (mobileVariant ? 'pr-20' : 'pr-7 group-hover/project:pr-20 group-focus-within/project:pr-20')
: (mobileVariant ? 'pr-14' : 'pr-7 group-hover/project:pr-14 group-focus-within/project:pr-14'),
? (alwaysShowActions ? 'pr-20' : 'pr-7 group-hover/project:pr-20 group-focus-within/project:pr-20')
: (alwaysShowActions ? 'pr-14' : 'pr-7 group-hover/project:pr-14 group-focus-within/project:pr-14'),
)}
>
<span className="inline-flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center">
<span className="hidden h-3.5 w-3.5 items-center justify-center text-muted-foreground group-hover/project:inline-flex group-focus-within/project:inline-flex">
<span className={cn(
'h-3.5 w-3.5 items-center justify-center text-muted-foreground',
alwaysShowActions ? 'inline-flex' : 'hidden group-hover/project:inline-flex group-focus-within/project:inline-flex',
)}>
{isCollapsed ? <RiArrowRightSLine className="h-3.5 w-3.5" /> : <RiArrowDownSLine className="h-3.5 w-3.5" />}
</span>
{imageUrl ? (
<span
className="inline-flex h-3.5 w-3.5 items-center justify-center overflow-hidden rounded-[3px] group-hover/project:hidden group-focus-within/project:hidden"
className={cn(
'h-3.5 w-3.5 items-center justify-center overflow-hidden rounded-[3px]',
alwaysShowActions ? 'hidden' : 'inline-flex group-hover/project:hidden group-focus-within/project:hidden',
)}
style={projectIconBackground ? { backgroundColor: projectIconBackground } : undefined}
>
<img
@@ -198,9 +205,9 @@ export const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
/>
</span>
) : ProjectIcon ? (
<ProjectIcon className="h-3.5 w-3.5 group-hover/project:hidden group-focus-within/project:hidden" style={iconColor ? { color: iconColor } : undefined} />
<ProjectIcon className={cn('h-3.5 w-3.5', alwaysShowActions ? 'hidden' : 'group-hover/project:hidden group-focus-within/project:hidden')} style={iconColor ? { color: iconColor } : undefined} />
) : (
<RiFolderLine className="h-3.5 w-3.5 text-muted-foreground/80 group-hover/project:hidden group-focus-within/project:hidden" style={iconColor ? { color: iconColor } : undefined} />
<RiFolderLine className={cn('h-3.5 w-3.5 text-muted-foreground/80', alwaysShowActions ? 'hidden' : 'group-hover/project:hidden group-focus-within/project:hidden')} style={iconColor ? { color: iconColor } : undefined} />
)}
</span>
<span className={cn(
@@ -231,7 +238,7 @@ export const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
}}
className={cn(
'inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 hover:text-foreground transition-opacity',
mobileVariant ? 'opacity-100' : 'opacity-0 pointer-events-none group-hover/project:opacity-100 group-hover/project:pointer-events-auto group-focus-within/project:opacity-100 group-focus-within/project:pointer-events-auto',
alwaysShowActions ? 'opacity-100' : 'opacity-0 pointer-events-none group-hover/project:opacity-100 group-hover/project:pointer-events-auto group-focus-within/project:opacity-100 group-focus-within/project:pointer-events-auto',
)}
aria-label={t('sessions.sidebar.project.actions.newWorktree')}
>
@@ -255,7 +262,7 @@ export const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
'inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 hover:text-foreground',
isMenuOpen
? 'opacity-100 pointer-events-auto'
: mobileVariant
: alwaysShowActions
? 'opacity-100'
: 'opacity-0 pointer-events-none group-hover/project:opacity-100 group-hover/project:pointer-events-auto group-focus-within/project:opacity-100 group-focus-within/project:pointer-events-auto',
)}
@@ -301,7 +308,7 @@ export const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
}}
className={cn(
'inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-opacity',
mobileVariant ? 'opacity-100' : 'opacity-0 pointer-events-none group-hover/project:opacity-100 group-hover/project:pointer-events-auto group-focus-within/project:opacity-100 group-focus-within/project:pointer-events-auto',
alwaysShowActions ? 'opacity-100' : 'opacity-0 pointer-events-none group-hover/project:opacity-100 group-hover/project:pointer-events-auto group-focus-within/project:opacity-100 group-focus-within/project:pointer-events-auto',
)}
aria-label={isRepo
? t('sessions.sidebar.project.actions.newDraftSession')