Skip to content

[codex] improve mobile workspace UX #556

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
urjitc merged 4 commits into from
Jul 1, 2026
Merged

[codex] improve mobile workspace UX #556

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
61d818c
fix(workspaces): polish mobile home header
urjitc Jun 30, 2026
445f5fe
fix(workspaces): add mobile workspace shell
urjitc Jun 30, 2026
67088ea
fix(workspaces): improve mobile item rows
urjitc Jun 30, 2026
9d330c0
fix(workspaces): address mobile review feedback
urjitc Jul 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/AppShell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default function AppShell({
data-app-shell
className="flex h-screen flex-col overflow-hidden bg-background text-foreground"
>
<header className="z-40 shrink-0 border-b border-border/60 bg-background">
<header className="z-40 shrink-0 bg-muted">
<div className="relative flex h-12 w-full items-center gap-3 px-4">
<div className="relative z-10 flex min-w-0 shrink-0 items-center gap-3 text-foreground">
<Link
Expand Down
232 changes: 137 additions & 95 deletions src/features/workspaces/components/WorkspaceContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,10 @@ import { MoveWorkspaceItemsDialog } from "#/features/workspaces/components/Works
import { useWorkspacePaneHotkey } from "#/features/workspaces/components/WorkspacePaneRuntime";
import { WorkspaceRootEmptyPreview } from "#/features/workspaces/components/WorkspaceRootEmptyPreview";
import WorkspaceSelectionActionBar from "#/features/workspaces/components/WorkspaceSelectionActionBar";
import { WorkspaceUploadClickTarget } from "#/features/workspaces/components/WorkspaceUploadClickTarget";
import { workspaceItemGridClass } from "#/features/workspaces/components/workspace-item-card-chrome";
import { useWorkspaceMutationAccess } from "#/features/workspaces/components/workspace-mutation-access";
import { useWorkspaceViewCapabilities } from "#/features/workspaces/components/workspace-view-policy";
import type { WorkspaceItemType, WorkspaceSummary } from "#/features/workspaces/contracts";
import { getWorkspaceItemDisplay } from "#/features/workspaces/model/item-display";
import { getWorkspaceChildren, splitWorkspaceChildren } from "#/features/workspaces/model/tree";
Expand Down Expand Up @@ -116,12 +118,14 @@ function WorkspaceBrowseContent({
const [moveSelectedDialogOpen, setMoveSelectedDialogOpen] = useState(false);
const [isNativeFileDropTarget, setIsNativeFileDropTarget] = useState(false);
const browseSurfaceRef = useRef<HTMLElement>(null);
const { uploadFiles } = useWorkspaceFileIntake();
const { requestFileUpload, uploadFiles } = useWorkspaceFileIntake();
const viewCapabilities = useWorkspaceViewCapabilities();
const parentId = getWorkspaceBrowseParentId(activeItem);
const children = getWorkspaceChildren(items, parentId);
const { folders, items: nonFolderItems } = splitWorkspaceChildren(children);
const isWorkspaceRoot = parentId === null;
const isEmpty = children.length === 0;
const requestUploadToBrowseLocation = () => requestFileUpload(parentId);
const handleNativeFileDrop = (files: FileList) => {
if (!capabilities.canMutateContent) {
return;
Expand Down Expand Up @@ -195,60 +199,73 @@ function WorkspaceBrowseContent({
stopPropagation: false,
});

const browseSurfaceContent = (
<>
{folders.length > 0 ? (
<WorkspaceItemGrid
items={folders}
allItems={items}
selectedItemIds={selectedItemIds}
onOpenItem={onOpenItem}
onMoveItem={actionDialogs.openMoveDialog}
onRenameItem={actionDialogs.setRenamingItem}
onDeleteItem={actionDialogs.openDeleteAlert}
onSelectionChange={setItemSelected}
onItemElementChange={registerItemElement}
/>
) : null}
{nonFolderItems.length > 0 ? (
<WorkspaceItemGrid
items={nonFolderItems}
allItems={items}
selectedItemIds={selectedItemIds}
onOpenItem={onOpenItem}
onMoveItem={actionDialogs.openMoveDialog}
onRenameItem={actionDialogs.setRenamingItem}
onDeleteItem={actionDialogs.openDeleteAlert}
onSelectionChange={setItemSelected}
onItemElementChange={registerItemElement}
/>
) : null}
{isEmpty ? (
isWorkspaceRoot && capabilities.canMutateContent ? (
<WorkspaceRootEmptyPreview onUploadFiles={requestUploadToBrowseLocation} />
) : (
<WorkspaceBrowseEmptyState
canUpload={capabilities.canMutateContent}
isWorkspaceRoot={isWorkspaceRoot}
onUploadFiles={requestUploadToBrowseLocation}
/>
)
) : null}
</>
);
const browseSurface = (
<section
data-scroll-root
ref={browseSurfaceRef}
className="flex h-full flex-col gap-6 overflow-y-auto px-4 py-3 outline-none"
aria-label="Workspace content"
tabIndex={-1}
{...marqueeSurfaceProps}
>
{browseSurfaceContent}
</section>
);

return (
<>
<div className="relative h-full min-h-0">
<ContextMenu>
<ContextMenuTrigger
render={
<section
data-scroll-root
ref={browseSurfaceRef}
className="flex h-full flex-col gap-6 overflow-y-auto px-4 py-3 outline-none"
aria-label="Workspace content"
tabIndex={-1}
{...marqueeSurfaceProps}
/>
}
>
{folders.length > 0 ? (
<WorkspaceItemGrid
items={folders}
allItems={items}
selectedItemIds={selectedItemIds}
onOpenItem={onOpenItem}
onMoveItem={actionDialogs.openMoveDialog}
onRenameItem={actionDialogs.setRenamingItem}
onDeleteItem={actionDialogs.openDeleteAlert}
onSelectionChange={setItemSelected}
onItemElementChange={registerItemElement}
/>
) : null}
{nonFolderItems.length > 0 ? (
<WorkspaceItemGrid
items={nonFolderItems}
allItems={items}
selectedItemIds={selectedItemIds}
onOpenItem={onOpenItem}
onMoveItem={actionDialogs.openMoveDialog}
onRenameItem={actionDialogs.setRenamingItem}
onDeleteItem={actionDialogs.openDeleteAlert}
onSelectionChange={setItemSelected}
onItemElementChange={registerItemElement}
/>
) : null}
{isEmpty ? (
isWorkspaceRoot && capabilities.canMutateContent ? (
<WorkspaceRootEmptyPreview />
) : (
<WorkspaceBrowseEmptyState isWorkspaceRoot={isWorkspaceRoot} />
)
) : null}
</ContextMenuTrigger>
<ContextMenuContent className="w-56">
<WorkspaceCreateContextMenuContent parentId={parentId} onCreateItem={onCreateItem} />
</ContextMenuContent>
</ContextMenu>
{viewCapabilities.contextMenus ? (
<ContextMenu>
<ContextMenuTrigger render={browseSurface} />
<ContextMenuContent className="w-56">
<WorkspaceCreateContextMenuContent parentId={parentId} onCreateItem={onCreateItem} />
</ContextMenuContent>
</ContextMenu>
) : (
browseSurface
)}
<WorkspaceSelectionActionBar
selectedCount={selectedItems.length}
onMove={openMoveSelectedDialog}
Expand Down Expand Up @@ -298,34 +315,55 @@ function WorkspaceBrowseContent({
);
}

function WorkspaceBrowseEmptyState({ isWorkspaceRoot }: { isWorkspaceRoot: boolean }) {
if (!isWorkspaceRoot) {
return (
<Empty className="border border-dashed bg-muted/20">
<EmptyHeader>
<EmptyMedia variant="icon">
<FolderOpen />
</EmptyMedia>
<EmptyTitle>This folder is empty</EmptyTitle>
<EmptyDescription>Items added here will appear in this folder.</EmptyDescription>
</EmptyHeader>
</Empty>
);
}

return (
<Empty className="border border-dashed bg-muted/20">
function WorkspaceBrowseEmptyState({
canUpload,
isWorkspaceRoot,
onUploadFiles,
}: {
canUpload: boolean;
isWorkspaceRoot: boolean;
onUploadFiles: () => void;
}) {
const uploadLabel = isWorkspaceRoot
? "Upload files to this workspace"
: "Upload files to this folder";
const Icon = isWorkspaceRoot ? Eye : FolderOpen;
const title = isWorkspaceRoot ? "This workspace is empty" : "This folder is empty";
const description = canUpload
? "Click anywhere here to upload files."
: isWorkspaceRoot
? "An editor needs to add the first items before anything appears here."
: "Items added here will appear in this folder.";
const emptyState = (
<Empty
className={cn(
"border border-dashed bg-muted/20",
canUpload && "transition-colors hover:bg-muted/30",
)}
>
<EmptyHeader>
<EmptyMedia variant="icon">
<Eye />
<Icon />
</EmptyMedia>
<EmptyTitle>This workspace is empty</EmptyTitle>
<EmptyDescription>
An editor needs to add the first items before anything appears here.
</EmptyDescription>
<EmptyTitle>{title}</EmptyTitle>
<EmptyDescription>{description}</EmptyDescription>
</EmptyHeader>
</Empty>
);

if (canUpload) {
return (
<WorkspaceUploadClickTarget
className="flex flex-1"
aria-label={uploadLabel}
onUploadFiles={onUploadFiles}
>
{emptyState}
</WorkspaceUploadClickTarget>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
);
}

return emptyState;
}

function WorkspaceItemGrid({
Expand Down Expand Up @@ -445,6 +483,8 @@ function WorkspaceItemView({
onRenameItem: (item: WorkspaceItem) => void;
onDeleteItem: (item: WorkspaceItem) => void;
}) {
const viewCapabilities = useWorkspaceViewCapabilities();

if (item.type === "document") {
return (
<DocumentEditorSurface item={item} toolbarSlotId={viewInstanceId} workspaceId={workspaceId} />
Expand All @@ -465,31 +505,33 @@ function WorkspaceItemView({
}

const { Icon: ItemIcon, iconClassName, surfaceClassName } = getWorkspaceItemDisplay(item);
const itemViewContent = (
<div className="flex flex-col items-center gap-3 text-center">
<ItemIcon className={cn("size-12", iconClassName)} strokeWidth={1.75} aria-hidden="true" />
<div className="space-y-1">
<h2 className="font-medium text-foreground text-sm">{item.name}</h2>
</div>
</div>
);
const itemViewSurface = (
<section
className={cn(
"flex h-full min-h-0 items-center justify-center bg-background",
surfaceClassName,
)}
>
{itemViewContent}
</section>
);

if (!viewCapabilities.contextMenus) {
return <div className="h-full min-h-0">{itemViewSurface}</div>;
}

return (
<div className="h-full min-h-0">
<ContextMenu>
<ContextMenuTrigger
render={
<section
className={cn(
"flex h-full min-h-0 items-center justify-center bg-background",
surfaceClassName,
)}
/>
}
>
<div className="flex flex-col items-center gap-3 text-center">
<ItemIcon
className={cn("size-12", iconClassName)}
strokeWidth={1.75}
aria-hidden="true"
/>
<div className="space-y-1">
<h2 className="font-medium text-foreground text-sm">{item.name}</h2>
</div>
</div>
</ContextMenuTrigger>
<ContextMenuTrigger render={itemViewSurface} />
<WorkspaceItemActionsContextMenuContent
item={item}
onMoveItem={onMoveItem}
Expand Down
28 changes: 15 additions & 13 deletions src/features/workspaces/components/WorkspaceFileToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export function WorkspaceFileToolbar({
fileName,
fileUrl,
}: {
capture: {
capture?: {
isActive: boolean;
onToggle: () => void;
};
Expand All @@ -36,18 +36,20 @@ export function WorkspaceFileToolbar({

return (
<WorkspaceToolbarGroup scrollable>
<WorkspaceToolbarTextButton
className={cn(
capture.isActive
? "bg-blue-500/10 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
: undefined,
)}
aria-pressed={capture.isActive}
onClick={capture.onToggle}
>
<Camera />
Capture
</WorkspaceToolbarTextButton>
{capture ? (
<WorkspaceToolbarTextButton
className={cn(
capture.isActive
? "bg-blue-500/10 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
: undefined,
)}
aria-pressed={capture.isActive}
onClick={capture.onToggle}
>
<Camera />
Capture
</WorkspaceToolbarTextButton>
) : null}
<DropdownMenu>
<DropdownMenuTrigger render={<WorkspaceToolbarIconButton aria-label="More file actions" />}>
<EllipsisVertical />
Expand Down
25 changes: 16 additions & 9 deletions src/features/workspaces/components/WorkspaceFileViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { type ComponentType, type LazyExoticComponent, lazy, Suspense } from "re
import { ContextMenu, ContextMenuTrigger } from "#/components/ui/context-menu";
import { Spinner } from "#/components/ui/spinner";
import { WorkspaceItemActionsContextMenuContent } from "#/features/workspaces/components/WorkspaceItemActionsMenu";
import { useWorkspaceViewCapabilities } from "#/features/workspaces/components/workspace-view-policy";
import { getWorkspaceItemDisplay } from "#/features/workspaces/model/item-display";
import type { WorkspaceItem } from "#/features/workspaces/model/types";
import {
Expand Down Expand Up @@ -44,20 +45,26 @@ export default function WorkspaceFileViewer({
}: WorkspaceFileViewerProps) {
const descriptor = resolveWorkspaceFileTypeFromItem(item);
const Viewer = descriptor ? workspaceFileViewers[descriptor.assetKind] : null;
const viewCapabilities = useWorkspaceViewCapabilities();
const viewerContent = Viewer ? (
<Suspense fallback={<WorkspaceFileViewerSkeleton />}>
<Viewer item={item} toolbarSlotId={toolbarSlotId} workspaceId={workspaceId} />
</Suspense>
) : (
<div className="flex h-full items-center justify-center bg-background">
<WorkspaceUnsupportedFilePlaceholder item={item} />
</div>
);

if (!viewCapabilities.contextMenus) {
return <div className="h-full min-h-0 overflow-hidden">{viewerContent}</div>;
}
Comment on lines +59 to +61

@greptile-apps greptile-apps Bot Jun 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 The desktop path wraps viewerContent inside a ContextMenuTrigger rendered as section.overflow-hidden, which clamps any viewer overflow. The new mobile path wraps the same content in a plain div without overflow-hidden, so a misbehaving or oversized viewer (e.g. a PDF page wider than the viewport) could bleed out of its container on mobile.

Suggested change
if (!viewCapabilities.contextMenus) {
return <div className="h-full min-h-0">{viewerContent}</div>;
}
if (!viewCapabilities.contextMenus) {
return <div className="h-full min-h-0 overflow-hidden">{viewerContent}</div>;
}

Fix in Cursor


return (
<div className="h-full min-h-0">
<ContextMenu>
<ContextMenuTrigger render={<section className="h-full min-h-0 overflow-hidden" />}>
{Viewer ? (
<Suspense fallback={<WorkspaceFileViewerSkeleton />}>
<Viewer item={item} toolbarSlotId={toolbarSlotId} workspaceId={workspaceId} />
</Suspense>
) : (
<div className="flex h-full items-center justify-center bg-background">
<WorkspaceUnsupportedFilePlaceholder item={item} />
</div>
)}
{viewerContent}
Comment thread
coderabbitai[bot] marked this conversation as resolved.
</ContextMenuTrigger>
<WorkspaceItemActionsContextMenuContent
item={item}
Expand Down
Loading