d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-06-25 20:25:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: new settings page design and new pill component

Browse Source
This commit is contained in:
simosmik
2026-03-10 21:02:32 +00:00
parent f4777c139f
commit 8ddeeb0ce8
30 changed files with 781 additions and 587 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/main-content/view/subcomponents/MainContentHeader.tsx
View File

@@ -1,3 +1,4 @@
import { useCallback, useRef, useState, useEffect } from 'react';
import type { MainContentHeaderProps } from '../../types/types';
import MobileMenuButton from './MobileMenuButton';
import MainContentTabSwitcher from './MainContentTabSwitcher';
@@ -12,6 +13,26 @@ export default function MainContentHeader({
isMobile,
onMenuClick,
}: MainContentHeaderProps) {
const scrollRef = useRef<HTMLDivElement>(null);
const [canScrollLeft, setCanScrollLeft] = useState(false);
const [canScrollRight, setCanScrollRight] = useState(false);
const updateScrollState = useCallback(() => {
const el = scrollRef.current;
if (!el) return;
setCanScrollLeft(el.scrollLeft > 2);
setCanScrollRight(el.scrollLeft < el.scrollWidth - el.clientWidth - 2);
}, []);
useEffect(() => {
const el = scrollRef.current;
if (!el) return;
updateScrollState();
const observer = new ResizeObserver(updateScrollState);
observer.observe(el);
return () => observer.disconnect();
}, [updateScrollState]);
return (
<div className="pwa-header-safe flex-shrink-0 border-b border-border/60 bg-background px-3 py-1.5 sm:px-4 sm:py-2">
<div className="flex items-center justify-between gap-3">
@@ -25,12 +46,24 @@ export default function MainContentHeader({
/>
</div>
<div className="hidden flex-shrink-0 sm:block">
<MainContentTabSwitcher
activeTab={activeTab}
setActiveTab={setActiveTab}
shouldShowTasksTab={shouldShowTasksTab}
/>
<div className="relative min-w-0 flex-shrink overflow-hidden sm:flex-shrink-0">
{canScrollLeft && (
<div className="pointer-events-none absolute inset-y-0 left-0 z-10 w-6 bg-gradient-to-r from-background to-transparent" />
)}
<div
ref={scrollRef}
onScroll={updateScrollState}
className="scrollbar-hide overflow-x-auto"
>
<MainContentTabSwitcher
activeTab={activeTab}
setActiveTab={setActiveTab}
shouldShowTasksTab={shouldShowTasksTab}
/>
</div>
{canScrollRight && (
<div className="pointer-events-none absolute inset-y-0 right-0 z-10 w-6 bg-gradient-to-l from-background to-transparent" />
)}
</div>
</div>
</div>