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

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

@@ -485,6 +485,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
</div> </div>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Show when={!isPhoneLayout()}>
<IconButton <IconButton
size="small" size="small"
color="inherit" color="inherit"
@@ -493,6 +494,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
> >
{leftPinned() ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />} {leftPinned() ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
</IconButton> </IconButton>
</Show>
</div> </div>
</div> </div>
@@ -563,6 +565,7 @@ 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">
<Show when={!isPhoneLayout()}>
<IconButton <IconButton
size="small" size="small"
color="inherit" color="inherit"
@@ -571,6 +574,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
> >
{rightPinned() ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />} {rightPinned() ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
</IconButton> </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,12 +785,13 @@ 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 Command Palette
</button> </button>
@@ -795,6 +800,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
</span> </span>
</div> </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">
<Show when={connectionStatus() === "connected"}> <Show when={connectionStatus() === "connected"}>