diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 9c29fcb..b0947d6 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -30,7 +30,7 @@ import { UserCircle, X, } from "lucide-react"; -import { FormEvent, MouseEvent, useCallback, useEffect, useMemo, useState } from "react"; +import { FormEvent, MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useShallow } from "zustand/react/shallow"; import { toast } from "sonner"; @@ -781,6 +781,7 @@ export function App() { const [ticketReturnPaths, setTicketReturnPaths] = useState>({}); const [draggedOpenTicketKey, setDraggedOpenTicketKey] = useState(null); const [sidebarTodos, setSidebarTodos] = useState([]); + const openTicketsListRef = useRef(null); const navigate = useCallback( (to: string) => { @@ -875,6 +876,11 @@ export function App() { ); }, [currentUser, openTickets]); + useEffect(() => { + const activeTicket = openTicketsListRef.current?.querySelector("[data-open-ticket-active='true']"); + activeTicket?.scrollIntoView({ block: "nearest" }); + }, [path, openTickets]); + useEffect(() => { if (!currentUser || currentUser.role === "admin" || !timersLoaded || timerOwnerId !== currentUser.id) { return; @@ -1301,62 +1307,65 @@ export function App() { )} - + - {!isAdmin ? : null} + {!isAdmin ? : null} - {!isAdmin && openTickets.length > 0 ? ( - + {!isAdmin && openTickets.length > 0 ? ( + Geöffnete Tickets - - - {openTickets.map((ticket) => { - const isActive = pathWithoutSearch(path) === pathWithoutSearch(ticket.path); + +
+ + {openTickets.map((ticket) => { + const isActive = pathWithoutSearch(path) === pathWithoutSearch(ticket.path); - return ( - -
startOpenTicketDrag(event, ticket)} - onDragOver={(event) => overOpenTicket(event, ticket)} - onDrop={(event) => dropOpenTicket(event, ticket)} - onDragEnd={() => setDraggedOpenTicketKey(null)} - className={cn( - "mx-2 flex cursor-grab items-center gap-1 rounded-md px-2 py-1.5 active:cursor-grabbing", - isActive ? "bg-primary text-primary-foreground" : "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", - draggedOpenTicketKey === ticket.key && "opacity-60", - )} - > - - + - - ); - })} - + + + + + {ticket.ticketNumber} + + +
+
+ ); + })} +
+
) : null} diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 74325d4..5e1f690 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -53,6 +53,7 @@ --font-heading: var(--font-sans); --font-sans: var(--font-sans); --breakpoint-xxl: 108.125rem; + --breakpoint-details: 85rem; } diff --git a/frontend/src/views/TicketDetailPage.tsx b/frontend/src/views/TicketDetailPage.tsx index cf37ef6..5c37954 100644 --- a/frontend/src/views/TicketDetailPage.tsx +++ b/frontend/src/views/TicketDetailPage.tsx @@ -1242,7 +1242,7 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO ) : null} -
+
{isGlobalTicket ? ( @@ -1300,7 +1300,7 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
-
+
setEditTicketNumber(event.currentTarget.value)} required /> @@ -1338,7 +1338,7 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO required />
-