salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tighten phone app bar and compact palette control

Browse Source
This commit is contained in:
Shantur Rathore
2025-12-14 01:43:04 +00:00
parent 0110052758
commit b8f93bf768
1 changed files with 42 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
packages/ui/src/components/instance/instance-shell2.tsx
View File

@@ -485,14 +485,16 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
</div> </div>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<IconButton <Show when={!isPhoneLayout()}>
size="small" <IconButton
color="inherit" size="small"
aria-label={leftPinned() ? "Unpin left drawer" : "Pin left drawer"} color="inherit"
onClick={() => (leftPinned() ? unpinLeftDrawer() : pinLeftDrawer())} aria-label={leftPinned() ? "Unpin left drawer" : "Pin left drawer"}
> onClick={() => (leftPinned() ? unpinLeftDrawer() : pinLeftDrawer())}
{leftPinned() ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />} >
</IconButton> {leftPinned() ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
</IconButton>
</Show>
</div> </div>
</div> </div>
@@ -563,14 +565,16 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
Side Panel Side Panel
</Typography> </Typography>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<IconButton <Show when={!isPhoneLayout()}>
size="small" <IconButton
color="inherit" size="small"
aria-label={rightPinned() ? "Unpin right drawer" : "Pin right drawer"} color="inherit"
onClick={() => (rightPinned() ? unpinRightDrawer() : pinRightDrawer())} aria-label={rightPinned() ? "Unpin right drawer" : "Pin right drawer"}
> onClick={() => (rightPinned() ? unpinRightDrawer() : pinRightDrawer())}
{rightPinned() ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />} >
</IconButton> {rightPinned() ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
</IconButton>
</Show>
</div> </div>
</div> </div>
<div class="flex-1" /> <div class="flex-1" />
@@ -606,9 +610,9 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
ModalProps={modalProps} ModalProps={modalProps}
sx={{ sx={{
"& .MuiDrawer-paper": { "& .MuiDrawer-paper": {
width: `${sessionSidebarWidth()}px`, width: isPhoneLayout() ? "100vw" : `${sessionSidebarWidth()}px`,
boxSizing: "border-box", boxSizing: "border-box",
borderRight: "1px solid var(--border-base)", borderRight: isPhoneLayout() ? "none" : "1px solid var(--border-base)",
backgroundColor: "var(--surface-secondary)", backgroundColor: "var(--surface-secondary)",
backgroundImage: "none", backgroundImage: "none",
color: "var(--text-primary)", color: "var(--text-primary)",
@@ -658,9 +662,9 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
ModalProps={modalProps} ModalProps={modalProps}
sx={{ sx={{
"& .MuiDrawer-paper": { "& .MuiDrawer-paper": {
width: `${RIGHT_DRAWER_WIDTH}px`, width: isPhoneLayout() ? "100vw" : `${RIGHT_DRAWER_WIDTH}px`,
boxSizing: "border-box", boxSizing: "border-box",
borderLeft: "1px solid var(--border-base)", borderLeft: isPhoneLayout() ? "none" : "1px solid var(--border-base)",
backgroundColor: "var(--surface-secondary)", backgroundColor: "var(--surface-secondary)",
backgroundImage: "none", backgroundImage: "none",
color: "var(--text-primary)", color: "var(--text-primary)",
@@ -693,11 +697,11 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
}} }}
> >
<AppBar position="sticky" color="default" elevation={0} class="border-b border-base"> <AppBar position="sticky" color="default" elevation={0} class="border-b border-base">
<Toolbar class="session-toolbar flex flex-wrap items-center gap-4"> <Toolbar variant="dense" class="session-toolbar flex flex-wrap items-center gap-2 py-0">
<Show <Show
when={!isPhoneLayout()} when={!isPhoneLayout()}
fallback={ fallback={
<div class="flex flex-col w-full gap-2"> <div class="flex flex-col w-full gap-1.5">
<div class="flex items-center justify-between gap-2"> <div class="flex items-center justify-between gap-2">
<IconButton <IconButton
ref={setLeftToggleButtonEl} ref={setLeftToggleButtonEl}
@@ -714,7 +718,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
<div class="flex items-center gap-2 justify-center"> <div class="flex items-center gap-2 justify-center">
<button <button
type="button" type="button"
class="connection-status-button px-3 py-1 text-sm" class="connection-status-button px-2 py-0.5 text-xs"
onClick={handleCommandPaletteClick} onClick={handleCommandPaletteClick}
aria-label="Open command palette" aria-label="Open command palette"
style={{ flex: "0 0 auto", width: "auto" }} style={{ flex: "0 0 auto", width: "auto" }}
@@ -781,19 +785,21 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
</div> </div>
</div> </div>
<div class="session-toolbar-center flex-1 flex items-center justify-center gap-2 min-w-[200px]"> <div class="session-toolbar-center flex-1 flex items-center justify-center gap-2 min-w-[160px]">
<button <button
type="button" type="button"
class="connection-status-button" class="connection-status-button px-2 py-0.5 text-xs"
onClick={handleCommandPaletteClick} onClick={handleCommandPaletteClick}
aria-label="Open command palette" aria-label="Open command palette"
> style={{ flex: "0 0 auto", width: "auto" }}
Command Palette >
</button> Command Palette
<span class="connection-status-shortcut-hint"> </button>
<Kbd shortcut="cmd+shift+p" /> <span class="connection-status-shortcut-hint">
</span> <Kbd shortcut="cmd+shift+p" />
</div> </span>
</div>
<div class="session-toolbar-right flex items-center gap-3"> <div class="session-toolbar-right flex items-center gap-3">
<div class="connection-status-meta flex items-center gap-3"> <div class="connection-status-meta flex items-center gap-3">