ob/ob248.com
1
0
Fork 0
mirror of https://github.com/hex248/ob248.com.git synced 2026-02-09 11:13:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

activeProject is saved across tabs

Browse Source
This commit is contained in:
Oliver Bryan
2026-02-08 07:27:05 +00:00
parent a7f642cd3b
commit 2295add9e4
1 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/App.tsx
View File

@@ -52,10 +52,10 @@ function Home() {
const navigate = useNavigate(); const navigate = useNavigate();
const [asciiArt, setAsciiArt] = useState(""); const [asciiArt, setAsciiArt] = useState("");
const [activeTab, setActiveTab] = useState<HomeTab>("work"); const [activeTab, setActiveTab] = useState<HomeTab>("work");
const [activeIndex, setActiveIndex] = useState<number | null>(null); const [activeProject, setActiveProject] = useState<number | null>(null);
const [activeLocation, setActiveLocation] = useState<number | null>(null); const [activeLocation, setActiveLocation] = useState<number | null>(null);
const [activePhoto, setActivePhoto] = useState<string | null>(null); const [activePhoto, setActivePhoto] = useState<string | null>(null);
const [hasPointerInteraction, setHasPointerInteraction] = useState(false); const [projectHasPointer, setProjectHasPointer] = useState(false);
const [asciiFile] = useState( const [asciiFile] = useState(
() => asciiFiles[Math.floor(Math.random() * asciiFiles.length)], () => asciiFiles[Math.floor(Math.random() * asciiFiles.length)],
); );
@@ -81,8 +81,8 @@ function Home() {
}, [asciiFile]); }, [asciiFile]);
useEffect(() => { useEffect(() => {
setActiveIndex((prev) => { setActiveProject((prev) => {
if (visibleProjects.length === 0) return null; if (visibleProjects.length === 0) return prev;
if (prev === null) return null; if (prev === null) return null;
return Math.min(prev, visibleProjects.length - 1); return Math.min(prev, visibleProjects.length - 1);
}); });
@@ -120,7 +120,7 @@ function Home() {
if (delta !== 0) { if (delta !== 0) {
event.preventDefault(); event.preventDefault();
setActiveIndex((prev) => { setActiveProject((prev) => {
if (prev === null) return 0; if (prev === null) return 0;
const next = Math.max( const next = Math.max(
0, 0,
@@ -132,9 +132,9 @@ function Home() {
} }
if (key === "Enter") { if (key === "Enter") {
if (activeIndex === null) return; if (activeProject === null) return;
event.preventDefault(); event.preventDefault();
const target = visibleProjects[activeIndex]; const target = visibleProjects[activeProject];
if (!target) return; if (!target) return;
navigate(`/projects/${target.metadata.slug}`); navigate(`/projects/${target.metadata.slug}`);
} }
@@ -144,11 +144,11 @@ function Home() {
return () => { return () => {
window.removeEventListener("keydown", handleKeyDown); window.removeEventListener("keydown", handleKeyDown);
}; };
}, [activeIndex, navigate, visibleProjects]); }, [activeProject, navigate, visibleProjects]);
useEffect(() => { useEffect(() => {
const enablePointerInteraction = () => { const enablePointerInteraction = () => {
setHasPointerInteraction(true); setProjectHasPointer(true);
}; };
window.addEventListener("pointermove", enablePointerInteraction, { window.addEventListener("pointermove", enablePointerInteraction, {
@@ -235,8 +235,8 @@ function Home() {
key={project.metadata.slug} key={project.metadata.slug}
metadata={project.metadata} metadata={project.metadata}
isDevMode={isDevMode} isDevMode={isDevMode}
isActive={activeIndex !== null && index === activeIndex} isActive={activeProject !== null && index === activeProject}
enableHover={hasPointerInteraction} enableHover={projectHasPointer}
/> />
))} ))}
</div> </div>
@@ -329,8 +329,8 @@ function Home() {
key={project.metadata.slug} key={project.metadata.slug}
metadata={project.metadata} metadata={project.metadata}
isDevMode={isDevMode} isDevMode={isDevMode}
isActive={activeIndex !== null && index === activeIndex} isActive={activeProject !== null && index === activeProject}
enableHover={hasPointerInteraction} enableHover={projectHasPointer}
/> />
))} ))}
</div> </div>