scroll positions remembered
Deploy / deploy (push) Successful in 2m30s

This commit is contained in:
twotalesanimation
2026-06-19 12:58:47 +02:00
parent ef6e41f8e0
commit 1a77a82566
2 changed files with 30 additions and 2 deletions
+18 -2
View File
@@ -1,6 +1,6 @@
"use client"; "use client";
import { useState } from "react"; import { useState, useEffect } from "react";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
@@ -35,6 +35,20 @@ export default function ProjectsPage() {
const projects = data?.projects ?? []; const projects = data?.projects ?? [];
const clients = clientsData?.clients ?? []; const clients = clientsData?.clients ?? [];
const SCROLL_KEY = 'projects-scroll';
useEffect(() => {
if (!isLoading) {
const saved = sessionStorage.getItem(SCROLL_KEY);
if (saved) {
sessionStorage.removeItem(SCROLL_KEY);
requestAnimationFrame(() => window.scrollTo(0, parseInt(saved, 10)));
}
}
}, [isLoading]);
const saveScroll = () => sessionStorage.setItem(SCROLL_KEY, String(window.scrollY));
return ( return (
<div className="p-8 space-y-6 max-w-[1600px] mx-auto"> <div className="p-8 space-y-6 max-w-[1600px] mx-auto">
<div className="flex items-center justify-between gap-4 mb-8"> <div className="flex items-center justify-between gap-4 mb-8">
@@ -81,7 +95,9 @@ export default function ProjectsPage() {
) : ( ) : (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{projects.map((project) => ( {projects.map((project) => (
<ProjectCard key={project.id} project={project} /> <div key={project.id} onClick={saveScroll}>
<ProjectCard project={project} />
</div>
))} ))}
</div> </div>
)} )}
@@ -71,6 +71,8 @@ interface ShotStatusClientProps {
canManage: boolean; canManage: boolean;
} }
const SCROLL_KEY = 'shot-status-scroll';
const STATUS_CONFIG: Record<string, { label: string; color: string; icon: React.ElementType }> = { const STATUS_CONFIG: Record<string, { label: string; color: string; icon: React.ElementType }> = {
WAITING: { label: "Waiting", color: "bg-zinc-500/10 text-zinc-400 border-zinc-500/20", icon: Clock }, WAITING: { label: "Waiting", color: "bg-zinc-500/10 text-zinc-400 border-zinc-500/20", icon: Clock },
IN_PROGRESS: { label: "In Progress", color: "bg-blue-500/10 text-blue-400 border-blue-500/20", icon: Film }, IN_PROGRESS: { label: "In Progress", color: "bg-blue-500/10 text-blue-400 border-blue-500/20", icon: Film },
@@ -341,6 +343,7 @@ function ShotTable({
<Link <Link
href={`/projects/${projectId}/shots/${shot.id}`} href={`/projects/${projectId}/shots/${shot.id}`}
className="font-mono text-sm text-white hover:text-blue-400 transition-colors" className="font-mono text-sm text-white hover:text-blue-400 transition-colors"
onClick={() => sessionStorage.setItem(SCROLL_KEY, String(window.scrollY))}
> >
{shot.shotCode} {shot.shotCode}
</Link> </Link>
@@ -399,6 +402,15 @@ export function ShotStatusClient({
const router = useRouter(); const router = useRouter();
const { toast } = useToast(); const { toast } = useToast();
// Restore scroll position when shots load
useEffect(() => {
const saved = sessionStorage.getItem(SCROLL_KEY);
if (saved) {
sessionStorage.removeItem(SCROLL_KEY);
requestAnimationFrame(() => window.scrollTo(0, parseInt(saved, 10)));
}
}, [shots]);
// Restore last selected project if no project is currently selected // Restore last selected project if no project is currently selected
useEffect(() => { useEffect(() => {
if (!selectedProjectId) { if (!selectedProjectId) {