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

feat: apply rounded corners to mobile session status bar (#412)

Browse Source
This commit is contained in:
Nelson Pires
2026-02-13 05:32:20 +02:00
committed by GitHub
parent 252d4bd5ab
commit d54f0b92e6
2 changed files with 25 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/ChatInput.tsx
+1 -1
View File
@@ -2119,7 +2119,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
</div> </div>
{/* Mobile Session Status Bar - 在输入框上方 */} {/* Mobile Session Status Bar - 在输入框上方 */}
{isMobile && <MobileSessionStatusBar />} {isMobile && <MobileSessionStatusBar cornerRadius={cornerRadius} />}
</div> </div>
</div> </div>
</form> </form>
packages/ui/src/components/chat/MobileSessionStatusBar.tsx
+24 -4
View File
@@ -9,6 +9,7 @@ import { RiLoader4Line } from '@remixicon/react';
interface MobileSessionStatusBarProps { interface MobileSessionStatusBarProps {
onSessionSwitch?: (sessionId: string) => void; onSessionSwitch?: (sessionId: string) => void;
cornerRadius?: number;
} }
interface SessionWithStatus extends Session { interface SessionWithStatus extends Session {
@@ -302,16 +303,24 @@ function CollapsedView({
unreadCount, unreadCount,
currentSessionTitle, currentSessionTitle,
onToggle, onToggle,
onNewSession onNewSession,
cornerRadius,
}: { }: {
runningCount: number; runningCount: number;
unreadCount: number; unreadCount: number;
currentSessionTitle: string; currentSessionTitle: string;
onToggle: () => void; onToggle: () => void;
onNewSession: () => void; onNewSession: () => void;
cornerRadius?: number;
}) { }) {
return ( return (
<div className="w-full flex items-center justify-between px-2 border-b border-[var(--interactive-border)] bg-[var(--surface-muted)] order-first text-left"> <div
className="w-full flex items-center justify-between px-2 border-b border-[var(--interactive-border)] bg-[var(--surface-muted)] order-first text-left overflow-hidden"
style={{
borderTopLeftRadius: cornerRadius,
borderTopRightRadius: cornerRadius,
}}
>
<div className="flex-1 min-w-0 mr-2"> <div className="flex-1 min-w-0 mr-2">
<SessionStatusHeader <SessionStatusHeader
currentSessionTitle={currentSessionTitle} currentSessionTitle={currentSessionTitle}
@@ -348,7 +357,8 @@ function ExpandedView({
onSessionDoubleClick, onSessionDoubleClick,
getSessionAgentName, getSessionAgentName,
getSessionTitle, getSessionTitle,
needsAttention needsAttention,
cornerRadius,
}: { }: {
sessions: SessionWithStatus[]; sessions: SessionWithStatus[];
currentSessionId: string; currentSessionId: string;
@@ -364,6 +374,7 @@ function ExpandedView({
getSessionAgentName: (s: Session) => string; getSessionAgentName: (s: Session) => string;
getSessionTitle: (s: Session) => string; getSessionTitle: (s: Session) => string;
needsAttention: (sessionId: string) => boolean; needsAttention: (sessionId: string) => boolean;
cornerRadius?: number;
}) { }) {
const containerRef = React.useRef<HTMLDivElement>(null); const containerRef = React.useRef<HTMLDivElement>(null);
const [collapsedHeight, setCollapsedHeight] = React.useState<number | null>(null); const [collapsedHeight, setCollapsedHeight] = React.useState<number | null>(null);
@@ -380,7 +391,13 @@ function ExpandedView({
const displaySessions = hasMeasured || isExpanded ? sessions : sessions.slice(0, 3); const displaySessions = hasMeasured || isExpanded ? sessions : sessions.slice(0, 3);
return ( return (
<div className="w-full border-b border-[var(--interactive-border)] bg-[var(--surface-muted)] order-first"> <div
className="w-full border-b border-[var(--interactive-border)] bg-[var(--surface-muted)] order-first overflow-hidden"
style={{
borderTopLeftRadius: cornerRadius,
borderTopRightRadius: cornerRadius,
}}
>
<div className="flex items-center justify-between px-2 py-0"> <div className="flex items-center justify-between px-2 py-0">
<div className="flex-1 min-w-0 mr-2"> <div className="flex-1 min-w-0 mr-2">
<SessionStatusHeader <SessionStatusHeader
@@ -438,6 +455,7 @@ function ExpandedView({
export const MobileSessionStatusBar: React.FC<MobileSessionStatusBarProps> = ({ export const MobileSessionStatusBar: React.FC<MobileSessionStatusBarProps> = ({
onSessionSwitch, onSessionSwitch,
cornerRadius,
}) => { }) => {
const sessions = useSessionStore((state) => state.sessions); const sessions = useSessionStore((state) => state.sessions);
const currentSessionId = useSessionStore((state) => state.currentSessionId); const currentSessionId = useSessionStore((state) => state.currentSessionId);
@@ -487,6 +505,7 @@ export const MobileSessionStatusBar: React.FC<MobileSessionStatusBarProps> = ({
currentSessionTitle={currentSessionTitle} currentSessionTitle={currentSessionTitle}
onToggle={() => setIsMobileSessionStatusBarCollapsed(false)} onToggle={() => setIsMobileSessionStatusBarCollapsed(false)}
onNewSession={handleCreateSession} onNewSession={handleCreateSession}
cornerRadius={cornerRadius}
/> />
); );
} }
@@ -510,6 +529,7 @@ export const MobileSessionStatusBar: React.FC<MobileSessionStatusBarProps> = ({
getSessionAgentName={getSessionAgentName} getSessionAgentName={getSessionAgentName}
getSessionTitle={getSessionTitle} getSessionTitle={getSessionTitle}
needsAttention={needsAttention} needsAttention={needsAttention}
cornerRadius={cornerRadius}
/> />
); );
}; };