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

feat: add input bar offset setting for curved screen devices (#89)

Browse Source 
Co-authored-by: auroraflux <auroraflux@users.noreply.github.com>
This commit is contained in:
auroraflux
2026-01-01 11:01:46 +02:00
committed by GitHub
co-authored by auroraflux
parent 919eeea53b
commit 39b9f985ce
5 changed files with 70 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/ChatInput.tsx
+2 -2
View File
@@ -82,7 +82,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
const { currentProviderId, currentModelId, currentAgentName, setAgent, getVisibleAgents } = useConfigStore();
const agents = getVisibleAgents();
const { isMobile } = useUIStore();
const { isMobile, inputBarOffset, isKeyboardOpen } = useUIStore();
const { working } = useAssistantStatus();
const [showAbortStatus, setShowAbortStatus] = React.useState(false);
const abortTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -1166,7 +1166,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
return (
<form onSubmit={handleSubmit} className="pt-0 pb-2 md:pb-4 bottom-safe-area">
<form onSubmit={handleSubmit} className="pt-0 pb-2 md:pb-4 bottom-safe-area" style={isMobile && inputBarOffset > 0 && !isKeyboardOpen ? { marginBottom: `${inputBarOffset}px` } : undefined}>
<StatusRow
isWorking={working.isWorking}
statusText={workingStatusText}
packages/ui/src/components/layout/MainLayout.tsx
+7 -1
View File
@@ -98,10 +98,13 @@ export const MainLayout: React.FC = () => {
let ignoreOpenUntilZero = false;
let previousHeight = 0;
const setKeyboardOpen = useUIStore.getState().setKeyboardOpen;
const forceKeyboardClosed = () => {
stickyKeyboardInset = 0;
ignoreOpenUntilZero = true;
root.style.setProperty('--oc-keyboard-inset', '0px');
setKeyboardOpen(false);
};
const updateVisualViewport = () => {
@@ -147,16 +150,19 @@ export const MainLayout: React.FC = () => {
// (prevents false positives during Android keyboard animation)
const closingByHeight = !isTextTarget && height > previousHeight + 6;
if (measuredInset === 0) {
if (measuredInset === 0) {
stickyKeyboardInset = 0;
setKeyboardOpen(false);
} else if (closingByHeight) {
forceKeyboardClosed();
} else if (measuredInset > 0 && isTextTarget) {
// When focus is on text input, track actual inset (allows settling
// to correct value after Android animation fluctuations)
stickyKeyboardInset = measuredInset;
setKeyboardOpen(true);
} else if (measuredInset > stickyKeyboardInset) {
stickyKeyboardInset = measuredInset;
setKeyboardOpen(true);
}
}
packages/ui/src/components/sections/openchamber/OpenChamberPage.tsx
+2 -2
View File
@@ -64,9 +64,9 @@ export const OpenChamberPage: React.FC<OpenChamberPageProps> = ({ section }) =>
);
};
// Visual section: Theme Mode, Font Size, Spacing
// Visual section: Theme Mode, Font Size, Spacing, Input Bar Offset (mobile)
const VisualSectionContent: React.FC = () => {
return <OpenChamberVisualSettings visibleSettings={['theme', 'fontSize', 'spacing']} />;
return <OpenChamberVisualSettings visibleSettings={['theme', 'fontSize', 'spacing', 'inputBarOffset']} />;
};
// Chat section: Default Tool Output, Diff layout, Show reasoning traces, Queue mode
packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx
+45 -1
View File
@@ -56,7 +56,7 @@ const DIFF_LAYOUT_OPTIONS: Option<'dynamic' | 'inline' | 'side-by-side'>[] = [
},
];
export type VisibleSetting = 'theme' | 'fontSize' | 'spacing' | 'toolOutput' | 'diffLayout' | 'reasoning' | 'queueMode';
export type VisibleSetting = 'theme' | 'fontSize' | 'spacing' | 'inputBarOffset' | 'toolOutput' | 'diffLayout' | 'reasoning' | 'queueMode';
interface OpenChamberVisualSettingsProps {
/** Which settings to show. If undefined, shows all. */
@@ -73,6 +73,8 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
const setFontSize = useUIStore(state => state.setFontSize);
const padding = useUIStore(state => state.padding);
const setPadding = useUIStore(state => state.setPadding);
const inputBarOffset = useUIStore(state => state.inputBarOffset);
const setInputBarOffset = useUIStore(state => state.setInputBarOffset);
const diffLayoutPreference = useUIStore(state => state.diffLayoutPreference);
const setDiffLayoutPreference = useUIStore(state => state.setDiffLayoutPreference);
const queueModeEnabled = useMessageQueueStore(state => state.queueModeEnabled);
@@ -226,6 +228,48 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
</div>
)}
{shouldShow('inputBarOffset') && isMobile && (
<div className="space-y-4">
<div className="space-y-1">
<h3 className="typography-ui-header font-semibold text-foreground">
Input Bar Offset
</h3>
<p className="typography-meta text-muted-foreground">
Raise the input bar for phones with curved screen edges.
</p>
</div>
<div className="flex items-center gap-2 w-full">
<input
type="range"
min="0"
max="100"
step="5"
value={inputBarOffset}
onChange={(e) => setInputBarOffset(Number(e.target.value))}
className="flex-1 min-w-0 h-3 bg-muted rounded-full appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:border-0"
aria-label="Input bar offset in pixels"
/>
<span className="typography-ui-label font-medium text-foreground tabular-nums rounded-md border border-border bg-background px-2 py-1.5 min-w-[3.75rem] text-center">
{inputBarOffset}px
</span>
<ButtonSmall
type="button"
variant="ghost"
onClick={() => setInputBarOffset(0)}
disabled={inputBarOffset === 0}
className="h-8 w-8 px-0 border border-border bg-background hover:bg-accent disabled:opacity-100 disabled:bg-background"
aria-label="Reset input bar offset"
title="Reset"
>
<RiRestartLine className="h-3.5 w-3.5" />
</ButtonSmall>
</div>
</div>
)}
{shouldShow('toolOutput') && (
<div className="space-y-4">
<div className="space-y-1">
packages/ui/src/stores/useUIStore.ts
+14
View File
@@ -24,6 +24,7 @@ interface UIStore {
activeMainTab: MainTab;
pendingDiffFile: string | null;
isMobile: boolean;
isKeyboardOpen: boolean;
isCommandPaletteOpen: boolean;
isHelpDialogOpen: boolean;
isAboutDialogOpen: boolean;
@@ -40,6 +41,7 @@ interface UIStore {
toolCallExpansion: 'collapsed' | 'activity' | 'detailed';
fontSize: number;
padding: number;
inputBarOffset: number;
favoriteModels: Array<{ providerID: string; modelID: string }>;
recentModels: Array<{ providerID: string; modelID: string }>;
@@ -75,6 +77,8 @@ interface UIStore {
setToolCallExpansion: (value: 'collapsed' | 'activity' | 'detailed') => void;
setFontSize: (size: number) => void;
setPadding: (size: number) => void;
setInputBarOffset: (offset: number) => void;
setKeyboardOpen: (open: boolean) => void;
applyTypography: () => void;
applyPadding: () => void;
updateProportionalSidebarWidths: () => void;
@@ -99,6 +103,7 @@ export const useUIStore = create<UIStore>()(
activeMainTab: 'chat',
pendingDiffFile: null,
isMobile: false,
isKeyboardOpen: false,
isCommandPaletteOpen: false,
isHelpDialogOpen: false,
isAboutDialogOpen: false,
@@ -114,6 +119,7 @@ export const useUIStore = create<UIStore>()(
toolCallExpansion: 'collapsed',
fontSize: 100,
padding: 100,
inputBarOffset: 0,
favoriteModels: [],
recentModels: [],
diffLayoutPreference: 'dynamic',
@@ -336,6 +342,14 @@ export const useUIStore = create<UIStore>()(
set({ diffWrapLines: wrap });
},
setInputBarOffset: (offset) => {
set({ inputBarOffset: offset });
},
setKeyboardOpen: (open) => {
set({ isKeyboardOpen: open });
},
toggleFavoriteModel: (providerID, modelID) => {
set((state) => {
const exists = state.favoriteModels.some(