idolpx/meatloaf-config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(SearchPane): update initialTab handling and persist last active tab in localStorage

Browse Source
This commit is contained in:
Jaime Idolpx 2026-06-14 04:20:51 -04:00
parent 23e9cf418f
commit 9a902d6b4f
2 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/App.tsx
View File

@ -55,7 +55,7 @@ export default function App() {
const [currentPage, setCurrentPage] = useState<Page>('status'); const [currentPage, setCurrentPage] = useState<Page>('status');
const { config, setConfig, saveStatus, pendingCount, flushNow, reload } = useSettings(); const { config, setConfig, saveStatus, pendingCount, flushNow, reload } = useSettings();
const [showSearch, setShowSearch] = useState(false); const [showSearch, setShowSearch] = useState(false);
const [searchInitialTab, setSearchInitialTab] = useState<0 | 1>(0); const [searchInitialTab, setSearchInitialTab] = useState<0 | 1 | undefined>(undefined);
const [devicesOpenId, setDevicesOpenId] = useState<string | null>(null); const [devicesOpenId, setDevicesOpenId] = useState<string | null>(null);
const [isFullscreen, setIsFullscreen] = useState(false); const [isFullscreen, setIsFullscreen] = useState(false);
const [fileManagerInitialPath, setFileManagerInitialPath] = useState<string | undefined>(undefined); const [fileManagerInitialPath, setFileManagerInitialPath] = useState<string | undefined>(undefined);
@ -260,7 +260,7 @@ function AppPage({ title, onBack }: { title: string; onBack: () => void }) {
{isFullscreen ? <Minimize2 className="w-5 h-5 text-white" /> : <Maximize2 className="w-5 h-5 text-white" />} {isFullscreen ? <Minimize2 className="w-5 h-5 text-white" /> : <Maximize2 className="w-5 h-5 text-white" />}
</button> </button>
<button <button
onClick={() => { setSearchInitialTab(0); setShowSearch(true); }} onClick={() => { setSearchInitialTab(undefined); setShowSearch(true); }}
className="p-2 hover:bg-[#5e5e5e] rounded-lg" className="p-2 hover:bg-[#5e5e5e] rounded-lg"
> >
<Search className="w-5 h-5 text-white" /> <Search className="w-5 h-5 text-white" />

17
src/app/components/SearchPane.tsx
View File

@ -14,15 +14,18 @@ interface SearchPaneProps {
const TABS = ['Local', 'Assembly64'] as const; const TABS = ['Local', 'Assembly64'] as const;
export default function SearchPane({ config, setConfig, initialTab = 0, onClose, onOpenFolder }: SearchPaneProps) { let _lastTab: 0 | 1 = (localStorage.getItem('search.tab') === '1' ? 1 : 0);
const panelRef = useRef<HTMLDivElement>(null);
const [activeTab, setActiveTab] = useState<0 | 1>(initialTab);
// Jump to initialTab without animation on first render export default function SearchPane({ config, setConfig, initialTab, onClose, onOpenFolder }: SearchPaneProps) {
const panelRef = useRef<HTMLDivElement>(null);
const [activeTab, setActiveTab] = useState<0 | 1>(initialTab ?? _lastTab);
// Jump to starting tab without animation on first render
useEffect(() => { useEffect(() => {
const el = panelRef.current; const el = panelRef.current;
if (!el || initialTab === 0) return; const tab = initialTab ?? _lastTab;
el.scrollLeft = initialTab * el.clientWidth; if (!el || tab === 0) return;
el.scrollLeft = tab * el.clientWidth;
}, []); // eslint-disable-line react-hooks/exhaustive-deps }, []); // eslint-disable-line react-hooks/exhaustive-deps
const scrollToTab = (idx: 0 | 1) => { const scrollToTab = (idx: 0 | 1) => {
@ -36,6 +39,8 @@ export default function SearchPane({ config, setConfig, initialTab = 0, onClose,
if (!el) return; if (!el) return;
const idx = Math.round(el.scrollLeft / el.clientWidth) as 0 | 1; const idx = Math.round(el.scrollLeft / el.clientWidth) as 0 | 1;
setActiveTab(idx); setActiveTab(idx);
_lastTab = idx;
localStorage.setItem('search.tab', String(idx));
}; };
return ( return (