Conversation
…ine and todo page
…er responsiveness
…ture/dashboard-overview-func
There was a problem hiding this comment.
Pull request overview
This PR updates the dashboard overview to include a due-date (“Deadliny”) overview and improves dashboard responsiveness/styling, while removing some redundant UI elements from other pages.
Changes:
- Added a deadlines list to the dashboard overview, sorted by due date, with deep-links into the todo page.
- Added URL-search driven behaviors on the todo page to open an assignment or start creating a new one.
- Removed the snowfall/seasonal UI and trimmed redundant UI from the classes page; added global scrollbar styling.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/routes/RegisterPage.tsx | Disables Snowfall effect on register page |
| frontend/src/routes/LoginPage.tsx | Disables Snowfall effect on login page |
| frontend/src/routes/DashboardPage.tsx | Passes classId into DashboardOverview |
| frontend/src/routes/DashboardAssignmentsPage.tsx | Adds query-param driven open/create behaviors for deadlines |
| frontend/src/routes/ClassesPage.tsx | Removes header link/buttons from classes page |
| frontend/src/components/DashboardOverview.tsx | Adds deadlines table + responsive layout updates |
| frontend/src/assets/css/index.css | Adds global scrollbar styling |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| return ( | ||
| <div className="flex min-h-screen items-center justify-center bg-[#1c1c1c]"> | ||
| <Snowfall snowflakeCount={100} /> | ||
| {/* <Snowfall snowflakeCount={100} /> */} | ||
| <div className="w-full max-w-md space-y-8 rounded-lg bg-[#272727] p-8 shadow-lg"> |
There was a problem hiding this comment.
Snowfall is now commented out in JSX, but the import Snowfall from "react-snowfall"; remains. With noUnusedLocals: true this will fail TypeScript compilation. Remove the unused import (or conditionally render Snowfall without commenting it out).
| return ( | ||
| <div className="flex min-h-screen items-center justify-center bg-[#1c1c1c]"> | ||
| <Snowfall snowflakeCount={100} /> | ||
| {/* <Snowfall snowflakeCount={100} /> */} | ||
| <div className="w-full max-w-md space-y-8 rounded-lg bg-[#272727] p-8 shadow-lg"> |
There was a problem hiding this comment.
Snowfall is now commented out in JSX, but the import Snowfall from "react-snowfall"; remains. With noUnusedLocals: true this will fail TypeScript compilation. Remove the unused import (or conditionally render Snowfall without commenting it out).
| useEffect(() => { | ||
| const requestedId = search?.open; | ||
| if (!requestedId) { | ||
| return; | ||
| } | ||
|
|
||
| if (isLoading || assignments.length === 0) { | ||
| return; | ||
| } | ||
|
|
||
| if (isEditorOpen) { | ||
| return; | ||
| } | ||
|
|
||
| const match = assignments.find( | ||
| (assignment) => String(assignment.id) === String(requestedId), | ||
| ); | ||
|
|
||
| if (match) { | ||
| openAssignmentEditor(match); | ||
| navigate({ to: "/dashboard/todo", search: {}, replace: true }); | ||
| } | ||
| }, [assignments, isEditorOpen, isLoading, search?.open]); | ||
|
|
||
| useEffect(() => { | ||
| if (search?.open) { | ||
| return; | ||
| } | ||
|
|
||
| const shouldCreate = search?.create; | ||
| if (!shouldCreate) { | ||
| return; | ||
| } | ||
|
|
||
| if (isLoading || isEditorOpen) { | ||
| return; | ||
| } | ||
|
|
||
| newDeadlineButtonRef.current?.scrollIntoView({ | ||
| behavior: "smooth", | ||
| block: "center", | ||
| }); | ||
| newDeadlineButtonRef.current?.focus(); | ||
|
|
||
| openNewAssignmentEditor(); | ||
| navigate({ to: "/dashboard/todo", search: {}, replace: true }); | ||
| }, [isEditorOpen, isLoading, search?.create, search?.open]); |
There was a problem hiding this comment.
These new effects reference openAssignmentEditor, openNewAssignmentEditor, and navigate but they are not included in the dependency arrays. With eslint-plugin-react-hooks enabled, this will trigger exhaustive-deps warnings (and can cause stale closures). Wrap the editor openers in useCallback (or move the logic inside the effect) and include the missing dependencies.
| <header className="flex items-start justify-between gap-4"> | ||
| <h2 className="font-bold text-3xl">Deadliny</h2> | ||
| <button | ||
| type="button" | ||
| onClick={() => navigate({ to: "/dashboard/todo", search: { create: "1" } })} | ||
| className="flex items-center gap-2 rounded-lg px-3 py-2 text-[#18b4a6] hover:bg-black/5 transition-colors" | ||
| > | ||
| <FontAwesomeIcon | ||
| icon={faSquarePlus} | ||
| className="text-[#18b4a6] scale-200 hover:scale-190 cursor-pointer transition-transform duration-100" | ||
| /> | ||
|
|
||
| </button> |
There was a problem hiding this comment.
The "add deadline" control is an icon-only <button> without an accessible label. Screen readers will announce it poorly, and it’s hard to discover. Add an aria-label (and optionally a visible tooltip/title) describing the action, e.g. "Vytvořit deadline".
| <div | ||
| key={i} | ||
| className={` flex items-center justify-center rounded ${ | ||
| className={`aspect-square w-full flex items-center justify-center rounded-md cursor-pointer ${ | ||
| isToday | ||
| ? "bg-[#18b4a6] text-white hover:scale-95 transition-colors duration-50 cursor-pointer" | ||
| ? "bg-[#18b4a6] text-white transition-colors duration-150 " | ||
| : cell.inMonth | ||
| ? "hover:bg-black/5 transition-colors duration-50 cursor-pointer text-[#e6e6e6] hover:scale-95" | ||
| ? "hover:bg-black/3 transition-colors duration-150 text-[#e6e6e6]" | ||
| : "text-gray-400" | ||
| }`} | ||
| > |
There was a problem hiding this comment.
Calendar day cells are rendered as <div>s styled with cursor-pointer, which implies interactivity, but they have no click handler and no keyboard semantics. Either remove the pointer styling or switch to a semantic interactive element (button/role="button" + tabIndex + keyboard handlers) if days are intended to be clickable.
| <header className="flex items-center justify-between p-6 pt-4"> | ||
| <h1 className="text-4xl font-semibold text-text">Třídy</h1> | ||
|
|
||
| <Link to={dashboardLink} className="text-white"> | ||
| provizorní odkaz na dashboard zde | ||
| </Link> | ||
|
|
||
| <div className="flex gap-2"> | ||
| <button | ||
| type="button" | ||
| onClick={() => setShowJoinModal(true)} | ||
| className="px-4 py-2 bg-[#18b4a6] text-white rounded-md shadow-lg hover:scale-95" | ||
| > | ||
| <FontAwesomeIcon icon={faLink} /> | ||
| </button> | ||
| <button | ||
| type="button" | ||
| onClick={() => setShowCreateModal(true)} | ||
| className="inline-flex items-center justify-center w-12 h-12 rounded-md bg-[var(--color-primary)] text-white shadow-lg hover:scale-95" | ||
| > | ||
| <span className="text-2xl font-bold">+</span> | ||
| </button> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
|
|
||
| </header> |
There was a problem hiding this comment.
This header cleanup removed the dashboard link/buttons, but Link, FontAwesomeIcon, faLink, and the dashboardLink variable are still declared at the top of the file and are now unused. With noUnusedLocals: true this will break the build—please remove the unused imports/variable or reintroduce their usage.
| import { faDna } from "@fortawesome/free-solid-svg-icons"; | ||
|
|
||
| library.add(faGreaterThan, faLessThan, faSquarePlus, faDna); | ||
|
|
||
| import { isWoman, vocative } from "czech-vocative"; | ||
|
|
There was a problem hiding this comment.
There is an import { isWoman, vocative } from "czech-vocative"; after the runtime statement library.add(...). Static import declarations must not appear after non-import statements in an ES module (this will fail parsing/build in many toolchains). Move the czech-vocative import up with the other imports (and keep library.add(...) after all imports).
Summary
Removed redundant featuzrs from calasses page and added deadline overview on db overview page.
Implementation Details