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/chat/ChatMessage.tsx
+11 -7
View File
@@ -149,7 +149,8 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
animateUserOnMount = false,
onUserAnimationConsumed,
}) => {
const { isMobile, hasTouchInput } = useDeviceInfo();
const { isMobile, isTablet, hasTouchInput } = useDeviceInfo();
const alwaysShowMessageActions = isMobile || isTablet;
const { currentTheme } = useThemeSystem();
const messageContainerRef = React.useRef<HTMLDivElement | null>(null);
@@ -1030,8 +1031,9 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
isMessageCompleted={isMessageCompleted}
messageFinish={messageFinish}
syntaxTheme={syntaxTheme}
isMobile={isMobile}
hasTouchInput={hasTouchInput}
isMobile={isMobile}
alwaysShowActions={alwaysShowMessageActions}
hasTouchInput={hasTouchInput}
copiedCode={copiedCode}
onCopyCode={handleCopyCode}
expandedTools={expandedTools}
@@ -1063,8 +1065,9 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
isMessageCompleted={isMessageCompleted}
messageFinish={messageFinish}
syntaxTheme={syntaxTheme}
isMobile={isMobile}
hasTouchInput={hasTouchInput}
isMobile={isMobile}
alwaysShowActions={alwaysShowMessageActions}
hasTouchInput={hasTouchInput}
copiedCode={copiedCode}
onCopyCode={handleCopyCode}
expandedTools={expandedTools}
@@ -1115,8 +1118,9 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
messageCompletedAt={messageCompletedAt ?? undefined}
messageCreatedAt={messageCreatedAt ?? undefined}
syntaxTheme={syntaxTheme}
isMobile={isMobile}
hasTouchInput={hasTouchInput}
isMobile={isMobile}
alwaysShowActions={alwaysShowMessageActions}
hasTouchInput={hasTouchInput}
copiedCode={copiedCode}
onCopyCode={handleCopyCode}
expandedTools={effectiveExpandedTools}
packages/ui/src/components/chat/FileAttachment.tsx
+7 -1
View File
@@ -10,6 +10,7 @@ import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip
import { useIsVSCodeRuntime } from '@/hooks/useRuntimeAPIs';
import { FileTypeIcon } from '@/components/icons/FileTypeIcon';
import { useI18n } from '@/lib/i18n';
import { useDeviceInfo } from '@/lib/device';
import type { ToolPopupContent } from './message/types';
@@ -127,6 +128,8 @@ interface ImagePreviewProps {
const ImagePreview = memo(({ file, onRemove }: ImagePreviewProps) => {
const { t } = useI18n();
const { isMobile, isTablet } = useDeviceInfo();
const alwaysShowActions = isMobile || isTablet;
const isLocalImagePreview =
file.source !== 'server' &&
file.mimeType.startsWith('image/') &&
@@ -184,7 +187,10 @@ const ImagePreview = memo(({ file, onRemove }: ImagePreviewProps) => {
/>
<button
onClick={onRemove}
className="absolute top-0.5 right-0.5 h-4 w-4 rounded-full bg-background/80 text-foreground hover:text-destructive flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
className={cn(
"absolute top-0.5 right-0.5 h-4 w-4 rounded-full bg-background/80 text-foreground hover:text-destructive flex items-center justify-center transition-opacity focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
alwaysShowActions ? "opacity-100" : "opacity-0 group-hover:opacity-100"
)}
title={t('chat.fileAttachment.actions.removeImage')}
aria-label={t('chat.fileAttachment.actions.removeNamed', { name: displayName })}
>
packages/ui/src/components/chat/MarkdownRendererImpl.tsx
+13 -4
View File
@@ -311,10 +311,15 @@ const TableDownloadButton: React.FC<{ tableRef: React.RefObject<HTMLDivElement |
// Table wrapper with custom controls
const TableWrapper: React.FC<{ children?: React.ReactNode; className?: string }> = ({ children, className }) => {
const tableRef = React.useRef<HTMLDivElement>(null);
const { isMobile, isTablet } = useDeviceInfo();
const alwaysShowActions = isMobile || isTablet;
return (
<div className="group my-4 flex flex-col space-y-2" data-markdown="table-wrapper" ref={tableRef}>
<div className="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
<div className={cn(
"flex items-center justify-end gap-1 transition-opacity",
alwaysShowActions ? "opacity-100" : "opacity-0 group-hover:opacity-100"
)}>
<TableCopyButton tableRef={tableRef} />
<TableDownloadButton tableRef={tableRef} />
</div>
@@ -330,7 +335,7 @@ const TableWrapper: React.FC<{ children?: React.ReactNode; className?: string }>
const MermaidBlock: React.FC<{ source: string; mode: 'svg' | 'ascii' }> = ({ source, mode }) => {
const { t } = useI18n();
const currentTheme = useCurrentMermaidTheme();
const { isMobile } = useDeviceInfo();
const { isMobile, isTablet } = useDeviceInfo();
const [copied, setCopied] = React.useState(false);
const [downloaded, setDownloaded] = React.useState(false);
@@ -362,7 +367,7 @@ const MermaidBlock: React.FC<{ source: string; mode: 'svg' | 'ascii' }> = ({ sou
}
}, [mode, source]);
const copyVisibilityClass = isMobile ? 'opacity-100' : 'opacity-0 group-hover:opacity-100';
const copyVisibilityClass = isMobile || isTablet ? 'opacity-100' : 'opacity-0 group-hover:opacity-100';
const handleCopyAscii = async (asciiText: string) => {
if (!asciiText) return;
@@ -724,6 +729,7 @@ const MarkdownCodeBlock: React.FC<{
const [viewMode, setViewMode] = React.useState<'code' | 'preview'>('code');
const prevCodeRef = React.useRef<string>(code);
const timerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
const { isMobile, isTablet } = useDeviceInfo();
const canPreview = language === 'html' || language === 'htm';
@@ -774,7 +780,10 @@ const MarkdownCodeBlock: React.FC<{
<div data-component="markdown-code" className="my-4 group overflow-hidden rounded-2xl border border-border/80 bg-[var(--surface-elevated)]">
<div className="flex items-center justify-between border-b border-border/70 px-3 py-1.5">
<span className="font-mono text-[13px] text-muted-foreground">{language}</span>
<div className="flex items-center gap-1 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100">
<div className={cn(
"flex items-center gap-1 transition-opacity",
isMobile || isTablet ? "opacity-100" : "opacity-100 md:opacity-0 md:group-hover:opacity-100"
)}>
{canPreview ? (
<button
type="button"
packages/ui/src/components/chat/ModelControls.tsx
+3 -2
View File
@@ -426,7 +426,8 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
const [isAgentSelectorOpen, setIsAgentSelectorOpen] = React.useState(false);
const { favoriteModelsList, recentModelsList } = useModelLists();
const { isMobile } = useDeviceInfo();
const { isMobile, isTablet } = useDeviceInfo();
const alwaysShowHoverDetails = isMobile || isTablet;
const isDesktop = React.useMemo(() => isDesktopShell(), []);
const isVSCodeRuntime = useIsVSCodeRuntime();
// Only use mobile panels on actual mobile devices, VSCode uses desktop dropdowns
@@ -2378,7 +2379,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
) : slides.length > 0 ? (
<div className={cn(
"items-center",
shouldAnimate ? "flex w-[140px] justify-end" : ((isHighlighted || isSelected) ? "flex" : "hidden group-hover:flex")
shouldAnimate ? "flex w-[140px] justify-end" : ((isHighlighted || isSelected || alwaysShowHoverDetails) ? "flex" : "hidden group-hover:flex")
)}>
{shouldAnimate ? (
<TextLoop interval={2.1} transition={{ duration: 0.25 }} trigger={shouldAnimate}>
packages/ui/src/components/chat/TimelineDialog.tsx
+6 -2
View File
@@ -13,6 +13,8 @@ import { RiLoader4Line, RiSearchLine, RiTimeLine, RiGitBranchLine, RiArrowGoBack
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import type { Part } from '@opencode-ai/sdk/v2';
import { useI18n } from '@/lib/i18n';
import { useDeviceInfo } from '@/lib/device';
import { cn } from '@/lib/utils';
interface TimelineDialogProps {
open: boolean;
@@ -34,6 +36,8 @@ export const TimelineDialog: React.FC<TimelineDialogProps> = ({
const messages = useSessionMessageRecords(currentSessionId ?? '');
const revertToMessage = useSessionUIStore((state) => state.revertToMessage);
const forkFromMessage = useSessionUIStore((state) => state.forkFromMessage);
const { isMobile, isTablet } = useDeviceInfo();
const alwaysShowActions = isMobile || isTablet;
const [forkingMessageId, setForkingMessageId] = React.useState<string | null>(null);
const [searchQuery, setSearchQuery] = React.useState('');
@@ -140,11 +144,11 @@ export const TimelineDialog: React.FC<TimelineDialogProps> = ({
</p>
<div className="flex-shrink-0 h-5 flex items-center mr-2">
<span className="typography-meta text-muted-foreground whitespace-nowrap group-hover:hidden">
<span className={cn("typography-meta text-muted-foreground whitespace-nowrap", alwaysShowActions ? "hidden" : "group-hover:hidden")}>
{relativeTime}
</span>
<div className="hidden group-hover:flex gap-1">
<div className={cn("gap-1", alwaysShowActions ? "flex" : "hidden group-hover:flex")}>
<Tooltip>
<TooltipTrigger asChild>
<button
packages/ui/src/components/chat/message/MessageBody.tsx
+9 -2
View File
@@ -282,6 +282,7 @@ interface MessageBodyProps {
syntaxTheme: { [key: string]: React.CSSProperties };
isMobile: boolean;
alwaysShowActions?: boolean;
hasTouchInput?: boolean;
copiedCode: string | null;
onCopyCode: (code: string) => void;
@@ -326,10 +327,11 @@ const writeRevealedToolIds = (messageId: string, value: Set<string>): void => {
revealedToolIdsByMessage.set(messageId, new Set(value));
};
const UserMessageBody = React.memo(({ messageId, parts, isMobile, hasTouchInput, hasTextContent, onCopyMessage, copiedMessage, onShowPopup, agentMention, onRevert, onFork, userActionsMode = 'inline', stickyUserHeaderEnabled = true }: {
const UserMessageBody = React.memo(({ messageId, parts, isMobile, alwaysShowActions = isMobile, hasTouchInput, hasTextContent, onCopyMessage, copiedMessage, onShowPopup, agentMention, onRevert, onFork, userActionsMode = 'inline', stickyUserHeaderEnabled = true }: {
messageId: string;
parts: Part[];
isMobile: boolean;
alwaysShowActions?: boolean;
hasTouchInput?: boolean;
hasTextContent?: boolean;
onCopyMessage?: () => void;
@@ -438,7 +440,7 @@ const UserMessageBody = React.memo(({ messageId, parts, isMobile, hasTouchInput,
: userActionsMode === 'inline'
? 'translate-x-5'
: 'translate-x-0',
isMobile
alwaysShowActions
? 'pointer-events-auto opacity-100'
: 'pointer-events-none opacity-0 transition-opacity duration-150 group-hover/message:pointer-events-auto group-hover/message:opacity-100 group-hover/user-actions:pointer-events-auto group-hover/user-actions:opacity-100 group-hover/user-shell:pointer-events-auto group-hover/user-shell:opacity-100'
)}
@@ -838,6 +840,7 @@ const AssistantMessageBody = React.memo(({
syntaxTheme,
isMobile,
alwaysShowActions,
hasTouchInput,
expandedTools,
onToggleTool,
@@ -865,6 +868,7 @@ const AssistantMessageBody = React.memo(({
}, []);
const isTouchContext = Boolean(hasTouchInput ?? isMobile);
const alwaysShowMessageActions = Boolean(alwaysShowActions ?? isMobile);
const awaitingMessageCompletion = !isMessageCompleted;
const animateActivityRows = awaitingMessageCompletion || Boolean(turnGroupingContext?.isWorking);
@@ -1550,6 +1554,7 @@ const AssistantMessageBody = React.memo(({
part={part}
messageId={messageId}
onContentChange={onContentChange}
alwaysShowActions={alwaysShowMessageActions}
/>
);
} else {
@@ -1601,6 +1606,7 @@ const AssistantMessageBody = React.memo(({
onToggle={onToggleTool}
syntaxTheme={syntaxTheme}
isMobile={isMobile}
alwaysShowActions={alwaysShowMessageActions}
onContentChange={onContentChange}
onShowPopup={onShowPopup}
animateTailText={animatedToolIdsLookup.has(toolPart.id)}
@@ -1890,6 +1896,7 @@ const MessageBody = React.memo(({ isUser, ...props }: MessageBodyProps) => {
messageId={props.messageId}
parts={props.parts}
isMobile={props.isMobile}
alwaysShowActions={props.alwaysShowActions}
hasTouchInput={props.hasTouchInput}
hasTextContent={props.hasTextContent}
onCopyMessage={props.onCopyMessage}
packages/ui/src/components/chat/message/parts/ReasoningPart.tsx
+7 -2
View File
@@ -82,6 +82,7 @@ type ReasoningTimelineBlockProps = {
showDuration?: boolean;
isStreaming?: boolean;
actions?: React.ReactNode;
alwaysShowActions?: boolean;
};
export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
@@ -93,6 +94,7 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
showDuration = true,
isStreaming = false,
actions,
alwaysShowActions = false,
}) => {
const [isExpanded, setIsExpanded] = React.useState(false);
@@ -126,7 +128,7 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
className={cn(
'absolute inset-0 transition-opacity',
isExpanded && 'opacity-0',
!isExpanded && 'group-hover/tool:opacity-0'
!isExpanded && (alwaysShowActions ? 'opacity-0' : 'group-hover/tool:opacity-0')
)}
>
<Icon className="h-3.5 w-3.5" />
@@ -135,7 +137,7 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
className={cn(
'absolute inset-0 transition-opacity flex items-center justify-center',
isExpanded && 'opacity-100',
!isExpanded && 'opacity-0 group-hover/tool:opacity-100'
!isExpanded && (alwaysShowActions ? 'opacity-100' : 'opacity-0 group-hover/tool:opacity-100')
)}
>
{isExpanded ? <RiArrowDownSLine className="h-3.5 w-3.5" /> : <RiArrowRightSLine className="h-3.5 w-3.5" />}
@@ -200,12 +202,14 @@ type ReasoningPartProps = {
part: Part;
onContentChange?: (reason?: ContentChangeReason) => void;
messageId: string;
alwaysShowActions?: boolean;
};
const ReasoningPart = React.memo(({
part,
onContentChange,
messageId,
alwaysShowActions = false,
}: ReasoningPartProps) => {
const chatRenderMode = useUIStore((state) => state.chatRenderMode);
const partWithText = part as PartWithText;
@@ -234,6 +238,7 @@ const ReasoningPart = React.memo(({
time={time}
showDuration={chatRenderMode !== 'sorted'}
isStreaming={isStreaming}
alwaysShowActions={alwaysShowActions}
/>
);
});
packages/ui/src/components/chat/message/parts/ToolPart.tsx
+5 -2
View File
@@ -51,6 +51,7 @@ interface ToolPartProps {
onToggle: (toolId: string) => void;
syntaxTheme: { [key: string]: React.CSSProperties };
isMobile: boolean;
alwaysShowActions?: boolean;
onContentChange?: (reason?: ContentChangeReason) => void;
onShowPopup?: (content: ToolPopupContent) => void;
animateTailText?: boolean;
@@ -1804,6 +1805,7 @@ const ToolPart: React.FC<ToolPartProps> = ({
onToggle,
syntaxTheme,
isMobile,
alwaysShowActions = isMobile,
onContentChange,
onShowPopup,
animateTailText = true,
@@ -2522,7 +2524,7 @@ const ToolPart: React.FC<ToolPartProps> = ({
className={cn(
'absolute inset-0 transition-opacity',
isExpanded && 'opacity-0',
!isExpanded && 'group-hover/tool:opacity-0'
!isExpanded && (alwaysShowActions ? 'opacity-0' : 'group-hover/tool:opacity-0')
)}
style={iconStyle}
>
@@ -2533,7 +2535,7 @@ const ToolPart: React.FC<ToolPartProps> = ({
className={cn(
'absolute inset-0 transition-opacity flex items-center justify-center',
isExpanded && 'opacity-100',
!isExpanded && 'opacity-0 group-hover/tool:opacity-100'
!isExpanded && (alwaysShowActions ? 'opacity-100' : 'opacity-0 group-hover/tool:opacity-100')
)}
>
{isExpanded ? <RiArrowDownSLine className="h-3.5 w-3.5" /> : <RiArrowRightSLine className="h-3.5 w-3.5" />}
@@ -2661,6 +2663,7 @@ export default React.memo(ToolPart, (prev, next) => {
&& prev.isExpanded === next.isExpanded
&& prev.syntaxTheme === next.syntaxTheme
&& prev.isMobile === next.isMobile
&& prev.alwaysShowActions === next.alwaysShowActions
&& prev.onContentChange === next.onContentChange
&& prev.onShowPopup === next.onShowPopup
&& prev.animateTailText === next.animateTailText;
packages/ui/src/components/sections/openchamber/WorktreeSectionContent.tsx
+3 -2
View File
@@ -22,7 +22,8 @@ export interface WorktreeSectionContentProps {
export const WorktreeSectionContent: React.FC<WorktreeSectionContentProps> = ({ projectRef: projectRefProp = null }) => {
const { t } = useI18n();
const { isMobile } = useDeviceInfo();
const { isMobile, isTablet } = useDeviceInfo();
const alwaysShowActions = isMobile || isTablet;
const activeProject = useProjectsStore((state) => state.getActiveProject());
const projectPath = projectRefProp?.path ?? activeProject?.path ?? null;
@@ -374,7 +375,7 @@ export const WorktreeSectionContent: React.FC<WorktreeSectionContentProps> = ({
onClick={() => handleDeleteWorktree(worktree)}
className={cn(
"flex-shrink-0 flex h-7 w-7 items-center justify-center rounded text-muted-foreground/50 hover:text-destructive hover:bg-destructive/10 transition-opacity focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
isMobile ? "opacity-100" : "opacity-0 group-hover:opacity-100"
alwaysShowActions ? "opacity-100" : "opacity-0 group-hover:opacity-100"
)}
aria-label={t('settings.openchamber.worktrees.list.deleteWorktreeAria', { name: worktree.branch || worktree.label || worktree.path })}
>
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')
packages/ui/src/components/ui/sortable-tabs-strip.tsx
+7 -4
View File
@@ -20,6 +20,7 @@ import { RiCloseLine } from '@remixicon/react';
import { useI18n } from '@/lib/i18n';
import { cn } from '@/lib/utils';
import { useUIStore } from '@/stores/useUIStore';
import { useDeviceInfo } from '@/lib/device';
export type SortableTabsStripItem = {
id: string;
@@ -99,6 +100,8 @@ export const SortableTabsStrip: React.FC<SortableTabsStripProps> = ({
}) => {
const { t } = useI18n();
const isMobile = useUIStore((state) => state.isMobile);
const { isTablet } = useDeviceInfo();
const alwaysShowCloseControls = isMobile || isTablet;
const scrollRef = React.useRef<HTMLDivElement>(null);
const [overflow, setOverflow] = React.useState<{ left: boolean; right: boolean }>({ left: false, right: false });
const itemIDs = React.useMemo(() => items.map((item) => item.id), [items]);
@@ -435,12 +438,12 @@ export const SortableTabsStrip: React.FC<SortableTabsStripProps> = ({
<>
{item.icon ? (
<span className="relative flex h-4 w-4 shrink-0 items-center justify-center">
<span className={cn('flex items-center justify-center transition-opacity', closeReplacesIcon && (isMobile ? 'opacity-0' : 'group-hover:opacity-0'))}>{item.icon}</span>
<span className={cn('flex items-center justify-center transition-opacity', closeReplacesIcon && (alwaysShowCloseControls ? 'opacity-0' : 'group-hover:opacity-0'))}>{item.icon}</span>
{closeReplacesIcon ? (
<span
role="button"
tabIndex={-1}
className={cn('absolute inset-0 z-20 flex items-center justify-center rounded-sm text-muted-foreground transition-opacity hover:text-foreground', isMobile ? 'opacity-100' : 'opacity-0 group-hover:opacity-100')}
className={cn('absolute inset-0 z-20 flex items-center justify-center rounded-sm text-muted-foreground transition-opacity hover:text-foreground', alwaysShowCloseControls ? 'opacity-100' : 'opacity-0 group-hover:opacity-100')}
onPointerDown={(event) => {
event.stopPropagation();
}}
@@ -467,12 +470,12 @@ export const SortableTabsStrip: React.FC<SortableTabsStripProps> = ({
isActive ? 'text-[var(--primary-base)]' : 'text-muted-foreground'
)}
>
<span className={cn('flex items-center justify-center transition-opacity', closeReplacesIcon && (isMobile ? 'opacity-0' : 'group-hover:opacity-0'))}>{item.icon}</span>
<span className={cn('flex items-center justify-center transition-opacity', closeReplacesIcon && (alwaysShowCloseControls ? 'opacity-0' : 'group-hover:opacity-0'))}>{item.icon}</span>
{closeReplacesIcon ? (
<span
role="button"
tabIndex={-1}
className={cn('absolute inset-0 z-20 flex items-center justify-center rounded-sm text-muted-foreground transition-opacity hover:text-foreground', isMobile ? 'opacity-100' : 'opacity-0 group-hover:opacity-100')}
className={cn('absolute inset-0 z-20 flex items-center justify-center rounded-sm text-muted-foreground transition-opacity hover:text-foreground', alwaysShowCloseControls ? 'opacity-100' : 'opacity-0 group-hover:opacity-100')}
onPointerDown={(event) => {
event.stopPropagation();
}}
packages/ui/src/components/views/FilesView.tsx
+7 -4
View File
@@ -295,6 +295,7 @@ interface FileRowProps {
isExpanded: boolean;
isActive: boolean;
isMobile: boolean;
alwaysShowActions: boolean;
status?: FileStatus | null;
badge?: { modified: number; added: number } | null;
permissions: {
@@ -319,6 +320,7 @@ const FileRow: React.FC<FileRowProps> = ({
isExpanded,
isActive,
isMobile,
alwaysShowActions,
status,
badge,
permissions,
@@ -395,8 +397,7 @@ const FileRow: React.FC<FileRowProps> = ({
{(canRename || canCreateFile || canCreateFolder || canDelete || canReveal) && (
<div className={cn(
"absolute right-1 top-1/2 -translate-y-1/2",
!isMobile && "opacity-0 focus-within:opacity-100 group-hover:opacity-100",
isMobile && "opacity-100"
alwaysShowActions ? "opacity-100" : "opacity-0 focus-within:opacity-100 group-hover:opacity-100"
)}>
<DropdownMenu
open={contextMenuPath === node.path}
@@ -498,7 +499,8 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
const { t } = useI18n();
const { files, runtime } = useRuntimeAPIs();
const { currentTheme, availableThemes, lightThemeId, darkThemeId } = useThemeSystem();
const { isMobile, screenWidth } = useDeviceInfo();
const { isMobile, isTablet, screenWidth } = useDeviceInfo();
const alwaysShowActions = isMobile || isTablet;
const showHidden = useDirectoryShowHidden();
const showGitignored = useFilesViewShowGitignored();
@@ -1815,6 +1817,7 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
isExpanded={isExpanded}
isActive={isActive}
isMobile={isMobile}
alwaysShowActions={alwaysShowActions}
status={!isDir ? getFileStatus(node.path) : undefined}
badge={isDir ? getFolderBadge(node.path) : undefined}
permissions={fileRowPermissions}
@@ -2886,7 +2889,7 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
}}
className={cn(
'rounded-sm p-0.5 text-[var(--surface-muted-foreground)] hover:text-[var(--surface-foreground)]',
!isActive && 'opacity-0 group-hover:opacity-100'
!isActive && !alwaysShowActions && 'opacity-0 group-hover:opacity-100'
)}
aria-label={t('filesView.editor.closeFileAria', { name: file.name })}
>