{
+ const currentValues = selectedValues;
+ const newValues = currentValues.includes(value)
+ ? currentValues.filter((v) => v !== value)
+ : [...currentValues, value];
+
+ updateFilters({
+ filters: {
+ ...filters.filters,
+ [filterKey]: newValues,
+ page: 1,
+ },
+ });
+ };
+
+ const isActive = selectedValues.length > 0;
+
+ return (
+
+ );
+}
+
+function ActiveFilterChips() {
+ const { filters, updateFilters } = useFilterContext();
+ const { jobTypes, locations, workingRights, industryFields } =
+ filters.filters;
+
+ const allActive: { key: string; value: string; label: string }[] = [
+ ...jobTypes.map((v) => ({
+ key: "jobTypes",
+ value: v,
+ label: formatCapString(v),
+ })),
+ ...locations.map((v) => ({
+ key: "locations",
+ value: v,
+ label: formatCapString(v),
+ })),
+ ...workingRights.map((v) => ({
+ key: "workingRights",
+ value: v,
+ label: formatCapString(v),
+ })),
+ ...industryFields.map((v) => ({
+ key: "industryFields",
+ value: v,
+ label: formatCapString(v),
+ })),
+ ];
+
+ if (allActive.length === 0) return null;
+
+ const removeFilter = (key: string, value: string) => {
+ const currentValues = filters.filters[
+ key as keyof typeof filters.filters
+ ] as string[];
+ updateFilters({
+ filters: {
+ ...filters.filters,
+ [key]: currentValues.filter((v) => v !== value),
+ page: 1,
+ },
+ });
+ };
+
+ return (
+
+ {allActive.map((chip) => (
+
+ ))}
+
+ );
+}
+
+const viewModeIcons: { mode: ViewMode; icon: typeof IconLayoutColumns; label: string }[] = [
+ { mode: "split", icon: IconLayoutColumns, label: "Split view" },
+ { mode: "grid", icon: IconLayoutGrid, label: "Grid view" },
+ { mode: "dense", icon: IconLayoutList, label: "List view" },
+];
+
export default function FilterSection({ _totalJobs }: FilterSectionProps) {
- const { totalJobs, setTotalJobs, isLoading } = useFilterContext();
+ const { totalJobs, setTotalJobs, isLoading, filters, clearFilters, viewMode, setViewMode } =
+ useFilterContext();
useEffect(() => {
setTotalJobs(_totalJobs);
}, [_totalJobs, setTotalJobs]);
+ const hasActiveFilters = () => {
+ const { search, industryFields, jobTypes, locations, workingRights } =
+ filters.filters;
+ return (
+ search !== "" ||
+ industryFields.length > 0 ||
+ jobTypes.length > 0 ||
+ locations.length > 0 ||
+ workingRights.length > 0
+ );
+ };
+
return (
-
-
- {isLoading ? "" : totalJobs + " Results"}
-
-
-
-
-
+
+ {/* Top row: result count + filter dropdowns + view switcher */}
+
+
+ {`${totalJobs.toLocaleString()} jobs`}
+
+
+
+
+
+
+
+
+ {hasActiveFilters() && (
+
+ )}
+
+
+ {/* View mode switcher */}
+
+ {viewModeIcons.map(({ mode, icon: Icon, label }) => (
+
+ setViewMode(mode)}
+ radius="md"
+ className="transition-all duration-150"
+ >
+
+
+
+ ))}
+
+
+ {/* Active filter chips */}
+
);
}
diff --git a/frontend/src/components/jobs/job-card-dense.tsx b/frontend/src/components/jobs/job-card-dense.tsx
new file mode 100644
index 0000000..89bb688
--- /dev/null
+++ b/frontend/src/components/jobs/job-card-dense.tsx
@@ -0,0 +1,65 @@
+// frontend/src/components/jobs/job-card-dense.tsx
+import { Job } from "@/types/job";
+import { formatCapString, getTimeAgo } from "@/lib/utils";
+import CompanyLogo from "@/components/jobs/company-logo";
+import { IconChevronRight } from "@tabler/icons-react";
+
+interface JobCardDenseProps {
+ job: Job;
+ isSelected?: boolean;
+}
+
+export default function JobCardDense({ job, isSelected }: JobCardDenseProps) {
+ return (
+
+ {/* Yellow accent stripe */}
+
+
+
+
+
+
+ {job.title}
+
+
+ {job.company.name}
+ {job.locations && job.locations.length > 0 && (
+
+ {" "}
+ ·{" "}
+ {job.locations
+ .slice(0, 2)
+ .map((loc) => formatCapString(loc))
+ .join(", ")}
+
+ )}
+ {job.type && · {formatCapString(job.type)}}
+
+
+
+
+
+ {getTimeAgo(job.created_at)}
+
+
+
+
+ );
+}
diff --git a/frontend/src/components/jobs/job-card-grid.tsx b/frontend/src/components/jobs/job-card-grid.tsx
new file mode 100644
index 0000000..8a24276
--- /dev/null
+++ b/frontend/src/components/jobs/job-card-grid.tsx
@@ -0,0 +1,60 @@
+// frontend/src/components/jobs/job-card-grid.tsx
+import { Job } from "@/types/job";
+import { formatCapString, getTimeAgo } from "@/lib/utils";
+import Badge from "@/components/ui/badge";
+import CompanyLogo from "@/components/jobs/company-logo";
+
+interface JobCardGridProps {
+ job: Job;
+ isSponsor?: boolean;
+}
+
+export default function JobCardGrid({ job, isSponsor }: JobCardGridProps) {
+ return (
+
+
+
+
+
+
+ {job.title}
+
+
+ {job.company.name}
+
+
+
+
+ {job.locations
+ ?.slice(0, 2)
+ .map((loc) => formatCapString(loc))
+ .join(", ")}{" "}
+ · {getTimeAgo(job.created_at)}
+
+
+
+
+ {isSponsor && }
+ {job.type && }
+ {job.working_rights?.[0] && (
+
+ )}
+
+
+ );
+}
diff --git a/frontend/src/components/jobs/job-card.tsx b/frontend/src/components/jobs/job-card.tsx
index 5490f90..33f4d52 100644
--- a/frontend/src/components/jobs/job-card.tsx
+++ b/frontend/src/components/jobs/job-card.tsx
@@ -1,5 +1,4 @@
-// frontend/src/components/jobs/details/job-card.tsx
-import { Box } from "@mantine/core";
+// frontend/src/components/jobs/job-card.tsx
import { Job } from "@/types/job";
import { formatCapString, getTimeAgo } from "@/lib/utils";
import Badge from "@/components/ui/badge";
@@ -11,6 +10,7 @@ interface JobCardProps {
isSelected?: boolean;
isSponsor?: boolean;
}
+
const removeImageTags = (content: string): string => {
return content.replace(/
]*>/g, "");
};
@@ -18,50 +18,59 @@ const removeImageTags = (content: string): string => {
export default function JobCard({ job, isSelected, isSponsor }: JobCardProps) {
const washedDescription = job.one_liner ? removeImageTags(job.one_liner) : "";
return (
-
+ {/* Yellow accent stripe on selected */}
+
+
{/* Top section - company info */}
-
-
+
+
-
-
+
+
{job.title}
-
+
{job.company.name}
-
+
{getTimeAgo(job.created_at)}
-
+
+ {washedDescription && (
+
+ )}
{/* Bottom section - badges */}
-
- {/* Show a yellow "Sponsored" badge if this is a sponsor card */}
- {isSponsor &&
}
+
+ {isSponsor && }
{job.type && }
{job.working_rights?.[0] && (
0 && (
formatCapString(loc))
@@ -85,6 +94,6 @@ export default function JobCard({ job, isSelected, isSponsor }: JobCardProps) {
/>
)}
-
+
);
}
diff --git a/frontend/src/components/jobs/job-description.tsx b/frontend/src/components/jobs/job-description.tsx
index b30c38d..6cb0f32 100644
--- a/frontend/src/components/jobs/job-description.tsx
+++ b/frontend/src/components/jobs/job-description.tsx
@@ -1,5 +1,4 @@
-// frontend/src/components/jobs/details/sections/job-description.tsx
-import SectionHeading from "@/components/ui/section-heading";
+// frontend/src/components/jobs/job-description.tsx
import { TypographyStylesProvider } from "@mantine/core";
import DOMPurify from "isomorphic-dompurify";
import { IconBook } from "@tabler/icons-react";
@@ -10,17 +9,23 @@ interface JobDescriptionProps {
export default function JobDescription({ description }: JobDescriptionProps) {
return (
-
-
}
- />
+
+
+
+
+ Job Description
+
+
diff --git a/frontend/src/components/jobs/job-details.tsx b/frontend/src/components/jobs/job-details.tsx
index 55aaa78..0522a6e 100644
--- a/frontend/src/components/jobs/job-details.tsx
+++ b/frontend/src/components/jobs/job-details.tsx
@@ -1,7 +1,7 @@
// frontend/src/components/jobs/job-details.tsx
"use client";
import { useEffect, useRef, useState } from "react";
-import { ActionIcon, Button, Card, ScrollArea } from "@mantine/core";
+import { Button, ScrollArea } from "@mantine/core";
import { IconCheck, IconCopy, IconExternalLink } from "@tabler/icons-react";
import { useFilterContext } from "@/context/filter/filter-context";
import JobDescription from "@/components/jobs/job-description";
@@ -18,7 +18,7 @@ export default function JobDetails() {
// Scroll to top whenever a new job is selected
useEffect(() => {
if (scrollRef.current) {
- scrollRef.current.scrollTo({ top: 0 });
+ scrollRef.current.scrollTo({ top: 0, behavior: "smooth" });
}
}, [selectedJob]);
@@ -30,7 +30,7 @@ export default function JobDetails() {
};
}, []);
- if (!selectedJob || isLoading) {
+ if (!selectedJob) {
return
;
}
@@ -46,64 +46,72 @@ export default function JobDetails() {
setIsCopied(true);
- // Reset copied state after 2 seconds
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
timeoutRef.current = setTimeout(() => {
setIsCopied(false);
- }, 500);
+ }, 1500);
};
return (
-
+
-
- {selectedJob && selectedJob.one_liner && (
-
- )}
- {selectedJob && selectedJob.description && (
-
- )}
+
+
+ {selectedJob.one_liner && (
+
+ )}
+ {selectedJob.description && (
+
+ )}
+
-
+ {/* Sticky footer */}
+
}
className="flex-grow"
+ radius="md"
+ size="md"
>
Apply Now
-
- {isCopied ? : }
-
:
}
- style={{ transition: "background-color 0.3s ease" }}
+ radius="md"
+ size="md"
>
{isCopied ? "Copied!" : "Copy Link"}
+
-
+
);
}
diff --git a/frontend/src/components/jobs/job-header.tsx b/frontend/src/components/jobs/job-header.tsx
index 1ca1449..985fa14 100644
--- a/frontend/src/components/jobs/job-header.tsx
+++ b/frontend/src/components/jobs/job-header.tsx
@@ -10,78 +10,85 @@ import { Job } from "@/types/job";
import { formatCapString, formatWorkingRights, getTimeAgo } from "@/lib/utils";
import Link from "next/link";
import CompanyLogo from "@/components/jobs/company-logo";
-import { InfoTag } from "@/components/jobs/info-tag";
interface JobHeaderProps {
job: Job;
}
+function DetailTag({
+ icon,
+ text,
+}: {
+ icon: React.ReactNode;
+ text: string;
+}) {
+ return (
+
+ {icon}
+ {text}
+
+ );
+}
+
export default function JobHeader({ job }: JobHeaderProps) {
return (
-
-
- {/* Title with responsive sizing and padding */}
-
+
+
+
{job.title}
-
+
- {/* Company name link */}
{job.company.name}
- {/* Info tags flexbox container */}
-
- {/* Location */}
-
}
- text={job.locations
- ?.map((location) => formatCapString(location))
- .join(", ")}
- />
+
+ {job.locations && job.locations.length > 0 && (
+ }
+ text={job.locations
+ .map((location) => formatCapString(location))
+ .join(", ")}
+ />
+ )}
- {/* Date found */}
- }
+ }
text={`Found ${getTimeAgo(job.created_at)}`}
/>
- {/* Role type */}
{job.type && (
- }
- text={`${formatCapString(job.type)} Role`}
+ }
+ text={`${formatCapString(job.type)}`}
/>
)}
- {/* Industry field */}
{job.industry_field && (
- }
+ }
text={formatCapString(job.industry_field)}
/>
)}
- {/* Working Rights */}
- {job.working_rights && (
- }
+ {job.working_rights && job.working_rights.length > 0 && (
+ }
text={formatWorkingRights(job.working_rights)}
/>
)}
- {/* Company logo with responsive sizing */}
);
diff --git a/frontend/src/components/jobs/job-list.tsx b/frontend/src/components/jobs/job-list.tsx
index 3871b56..c689389 100644
--- a/frontend/src/components/jobs/job-list.tsx
+++ b/frontend/src/components/jobs/job-list.tsx
@@ -2,6 +2,8 @@
"use client";
import JobCard from "@/components/jobs/job-card";
+import JobCardGrid from "@/components/jobs/job-card-grid";
+import JobCardDense from "@/components/jobs/job-card-dense";
import { useFilterContext } from "@/context/filter/filter-context";
import { Job } from "@/types/job";
import { useEffect, useState } from "react";
@@ -12,12 +14,12 @@ import JobPagination from "@/components/jobs/job-pagination";
import { useMediaQuery } from "@mantine/hooks";
interface JobListProps {
- jobs: Job[]; // Regular jobs
+ jobs: Job[];
}
export default function JobList({ jobs }: JobListProps) {
- //export default function JobList({ jobs, sponsoredJobs }: JobListProps) {
- const { selectedJob, setSelectedJob, isLoading } = useFilterContext();
+ const { selectedJob, setSelectedJob, isLoading, viewMode } =
+ useFilterContext();
const [isModalOpen, setIsModalOpen] = useState(false);
const isDesktop = useMediaQuery("(min-width: 1024px)");
@@ -27,13 +29,77 @@ export default function JobList({ jobs }: JobListProps) {
}
}, [jobs, selectedJob, setSelectedJob]);
- if (isLoading) return
;
+ const handleJobClick = (job: Job) => {
+ setSelectedJob(job);
+ // Open modal on mobile, or in grid mode on desktop
+ if (!isDesktop || viewMode === "grid") {
+ setIsModalOpen(true);
+ }
+ };
+
+ const renderSplitView = () => (
+
+ {jobs.map((job) => (
+
handleJobClick(job)}
+ className="cursor-pointer"
+ >
+
+
+ ))}
+
+ );
+
+ const renderGridView = () => (
+
+ {jobs.map((job) => (
+
handleJobClick(job)}
+ >
+
+
+ ))}
+
+ );
+
+ const renderDenseView = () => (
+
+ {jobs.map((job) => (
+
handleJobClick(job)}
+ className="cursor-pointer"
+ >
+
+
+ ))}
+
+ );
+
+ const renderView = () => {
+ switch (viewMode) {
+ case "grid":
+ return renderGridView();
+ case "dense":
+ return renderDenseView();
+ default:
+ return renderSplitView();
+ }
+ };
return (
<>
- {/* This is a workaround to ensure mobile job cards are unaffected by the scrollbar. */}
-
- {jobs.map((job) => (
-
{
- setSelectedJob(job);
- // Only open modal on mobile
- if (window.innerWidth < 1024) {
- setIsModalOpen(true);
- }
- }}
- className="cursor-pointer"
- >
-
-
- ))}
+
+ {renderView()}
@@ -72,13 +124,19 @@ export default function JobList({ jobs }: JobListProps) {
setIsModalOpen(false)}
- size="lg"
+ size="xl"
scrollAreaComponent={ScrollArea}
- className="lg:hidden"
- fullScreen
+ fullScreen={!isDesktop}
+ radius={isDesktop ? "lg" : undefined}
styles={{
body: {
- height: "calc(100svh - 100px)",
+ height: isDesktop ? "80vh" : "calc(100svh - 100px)",
+ },
+ content: {
+ background: "#2e2e2e",
+ },
+ header: {
+ background: "#2e2e2e",
},
}}
>
diff --git a/frontend/src/components/jobs/job-summary.tsx b/frontend/src/components/jobs/job-summary.tsx
index 6a51318..03ec27c 100644
--- a/frontend/src/components/jobs/job-summary.tsx
+++ b/frontend/src/components/jobs/job-summary.tsx
@@ -1,5 +1,4 @@
-// frontend/src/components/jobs/details/sections/job-description.tsx
-import SectionHeading from "@/components/ui/section-heading";
+// frontend/src/components/jobs/job-summary.tsx
import { IconRobot } from "@tabler/icons-react";
interface JobSummaryProps {
@@ -8,12 +7,14 @@ interface JobSummaryProps {
export default function JobSummary({ one_liner }: JobSummaryProps) {
return (
-
-
}
- title="Summary"
- />
-
+
+
+
+
+ AI Summary
+
+
+
{one_liner}
+
+ }>
+
+
+
+
+ }>
+
+
+
+
+
+ }>
+
+
+
+
+ }>
+
+
+
+
- {/* Header skeleton */}
-
-
-
-
+
+
+ {/* Header skeleton */}
+
- {/* Description section skeleton */}
-
-
-
- {[...Array(8)].map((_, i) => (
-
- ))}
-
+ {/* Summary skeleton */}
+
-
- {/* Action buttons skeleton */}
-
-
-
-
+ {/* Description skeleton */}
+
+
+ {[...Array(8)].map((_, i) => (
+
+ ))}
+
+
+
+ {/* Footer skeleton */}
+
-
+
);
}
diff --git a/frontend/src/components/layout/job-list-loading.tsx b/frontend/src/components/layout/job-list-loading.tsx
index 310abf2..db1ef07 100644
--- a/frontend/src/components/layout/job-list-loading.tsx
+++ b/frontend/src/components/layout/job-list-loading.tsx
@@ -3,16 +3,31 @@ import { ScrollArea } from "@mantine/core";
export default function JobListLoading() {
return (
-
- {[...Array(10)].map((_, i) => (
+
+ {[...Array(8)].map((_, i) => (
+ className="rounded-xl border border-[rgba(255,255,255,0.06)] bg-secondary p-4 animate-pulse"
+ >
+
+
+
+
+
))}
diff --git a/frontend/src/components/layout/main-content-loading.tsx b/frontend/src/components/layout/main-content-loading.tsx
index 37e1ec8..5a227c8 100644
--- a/frontend/src/components/layout/main-content-loading.tsx
+++ b/frontend/src/components/layout/main-content-loading.tsx
@@ -1,17 +1,14 @@
-// frontend/src/app/jobs/loading.tsx
+// frontend/src/components/layout/main-content-loading.tsx
import JobListLoading from "@/components/layout/job-list-loading";
import JobDetailsLoading from "@/components/layout/job-details-loading";
export default function MainContentLoading() {
- {
- /* Main content area */
- }
return (
-
+
-
diff --git a/frontend/src/components/layout/nav-bar-mobile.tsx b/frontend/src/components/layout/nav-bar-mobile.tsx
index ae0fcbc..4aacf39 100644
--- a/frontend/src/components/layout/nav-bar-mobile.tsx
+++ b/frontend/src/components/layout/nav-bar-mobile.tsx
@@ -14,6 +14,7 @@ export const NavBarMobile = () => {
const menuItems = [
{ href: "/", label: "Home" },
{ href: "/jobs", label: "Jobs" },
+ { href: "https://monashcoding.com", label: "MAC ↗", external: true },
];
return (
@@ -54,6 +55,7 @@ export const NavBarMobile = () => {
key={item.href}
component={Link}
href={item.href}
+ target={"external" in item ? "_blank" : undefined}
className={pathname === item.href ? "font-bold" : ""}
>
{item.label}
diff --git a/frontend/src/components/layout/nav-links.tsx b/frontend/src/components/layout/nav-links.tsx
index e3b11c0..1feb6d8 100644
--- a/frontend/src/components/layout/nav-links.tsx
+++ b/frontend/src/components/layout/nav-links.tsx
@@ -1,6 +1,7 @@
"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
+import { IconExternalLink } from "@tabler/icons-react";
export default function NavLinks() {
const pathname = usePathname();
@@ -19,6 +20,14 @@ export default function NavLinks() {
>
Jobs
+
+ MAC
+
+
);
}
diff --git a/frontend/src/components/layout/navigation-transition.tsx b/frontend/src/components/layout/navigation-transition.tsx
new file mode 100644
index 0000000..f877104
--- /dev/null
+++ b/frontend/src/components/layout/navigation-transition.tsx
@@ -0,0 +1,122 @@
+// frontend/src/components/layout/navigation-transition.tsx
+"use client";
+
+import { motion } from "framer-motion";
+import { IconArrowRight, IconArrowLeft } from "@tabler/icons-react";
+
+interface Props {
+ direction: 1 | -1;
+}
+
+const LINE_COUNT = 14;
+const ARROW_SIZE = 240;
+const EASE = [0.19, 1, 0.22, 1] as const;
+
+function pseudoRandom(index: number, salt: number): number {
+ const x = Math.sin((index + 1) * 12.9898 + salt * 78.233) * 43758.5453;
+ return x - Math.floor(x);
+}
+
+export function NavigationTransition({ direction }: Props) {
+ const Arrow = direction === 1 ? IconArrowRight : IconArrowLeft;
+ const startLeft = direction === 1 ? "-20vw" : "100vw";
+ const endLeft = direction === 1 ? "100vw" : "-20vw";
+ const animationName =
+ direction === 1 ? "mploy-rush-right" : "mploy-rush-left";
+
+ return (
+
+ {Array.from({ length: LINE_COUNT }).map((_, i) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function SpeedLine({
+ index,
+ direction,
+}: {
+ index: number;
+ direction: 1 | -1;
+}) {
+ const top = index * (100 / LINE_COUNT) + pseudoRandom(index, 1) * 1.5;
+ const width = 36 + pseudoRandom(index, 2) * 44;
+ const height = 2 + Math.floor(pseudoRandom(index, 3) * 2);
+ const duration = 0.45 + pseudoRandom(index, 4) * 0.2;
+ // Max delay 0.15s so all lines appear almost immediately — no late stragglers
+ const delay = pseudoRandom(index, 5) * 0.15;
+ const opacity = 0.25 + pseudoRandom(index, 6) * 0.35;
+
+ return (
+
+ );
+}
diff --git a/frontend/src/components/layout/page-transition.tsx b/frontend/src/components/layout/page-transition.tsx
new file mode 100644
index 0000000..a2ec753
--- /dev/null
+++ b/frontend/src/components/layout/page-transition.tsx
@@ -0,0 +1,81 @@
+// frontend/src/components/layout/page-transition.tsx
+"use client";
+
+import { usePathname } from "next/navigation";
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { NavigationTransition } from "./navigation-transition";
+
+const EASE = [0.19, 1, 0.22, 1] as [number, number, number, number];
+const MIN_OVERLAY_MS = 620;
+const SLIDE_VW = 40;
+
+const PAGE_ORDER: Record
= {
+ "/": 0,
+ "/jobs": 1,
+};
+
+function orderOf(path: string): number {
+ if (PAGE_ORDER[path] !== undefined) return PAGE_ORDER[path];
+ if (path.startsWith("/jobs")) return 1;
+ return 0;
+}
+
+export function PageTransition({ children }: { children: ReactNode }) {
+ const pathname = usePathname();
+ const prev = useRef(pathname);
+ const [direction, setDirection] = useState<1 | -1>(1);
+ const [overlayActive, setOverlayActive] = useState(false);
+ const [hidden, setHidden] = useState(false);
+ const [slideKey, setSlideKey] = useState(0);
+
+ useEffect(() => {
+ if (pathname === prev.current) return;
+ const dir: 1 | -1 =
+ orderOf(pathname) >= orderOf(prev.current) ? 1 : -1;
+ prev.current = pathname;
+ setDirection(dir);
+
+ // Immediately hide content and show overlay
+ setHidden(true);
+ setOverlayActive(true);
+
+ // After overlay duration, hide overlay and slide content in
+ const t = window.setTimeout(() => {
+ setOverlayActive(false);
+ setHidden(false);
+ setSlideKey((k) => k + 1);
+ }, MIN_OVERLAY_MS);
+
+ return () => window.clearTimeout(t);
+ }, [pathname]);
+
+ const enterX = `${direction * SLIDE_VW}vw`;
+
+ return (
+
+ {hidden ? (
+ // Content exists in DOM (so Next.js is happy) but invisible
+
+ {children}
+
+ ) : (
+
0 ? { x: enterX, opacity: 0 } : false}
+ animate={{ x: 0, opacity: 1 }}
+ transition={{
+ x: { duration: 0.5, ease: EASE },
+ opacity: { duration: 0.3, ease: EASE },
+ }}
+ >
+ {children}
+
+ )}
+
+
+ {overlayActive && }
+
+
diff --git a/frontend/src/context/filter/filter-context.tsx b/frontend/src/context/filter/filter-context.tsx
index e7d981f..35c695d 100644
--- a/frontend/src/context/filter/filter-context.tsx
+++ b/frontend/src/context/filter/filter-context.tsx
@@ -2,7 +2,7 @@
// frontend/src/context/jobs/filter-context.tsx
import { createContext, useContext } from "react";
-import { FilterState } from "@/types/filters";
+import { FilterState, ViewMode } from "@/types/filters";
import { Job } from "@/types/job";
interface FilterContextType {
@@ -14,6 +14,8 @@ interface FilterContextType {
setTotalJobs: (totalJobs: number) => void;
isLoading: boolean;
clearFilters: () => void;
+ viewMode: ViewMode;
+ setViewMode: (mode: ViewMode) => void;
}
export const FilterContext = createContext(
diff --git a/frontend/src/context/filter/filter-provider.tsx b/frontend/src/context/filter/filter-provider.tsx
index e51cdc7..8602e28 100644
--- a/frontend/src/context/filter/filter-provider.tsx
+++ b/frontend/src/context/filter/filter-provider.tsx
@@ -1,11 +1,12 @@
// frontend/src/context/jobs/jobs-provider.tsx
"use client";
-import { ReactNode, useEffect, useState } from "react";
+import { ReactNode, useEffect, useState, useTransition } from "react";
import { FilterContext } from "./filter-context";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { CreateQueryString } from "@/lib/utils";
-import { FilterState } from "@/types/filters";
+import { FilterState, ViewMode } from "@/types/filters";
+import { transitionState } from "@/lib/transition-state";
import {
Job,
IndustryField,
@@ -71,20 +72,32 @@ export function FilterProvider({ children }: { children: ReactNode }) {
const [filters, setFilters] = useState(initialFilterState);
const [selectedJob, setSelectedJobInternal] = useState(null);
- const [isLoading, setIsLoading] = useState(false);
+ const [isPending, startTransition] = useTransition();
+ const [isNavigating, setIsNavigating] = useState(false);
const [totalJobs, setTotalJobs] = useState(0);
+ const [viewMode, setViewMode] = useState("split");
+
+ const isLoading = isPending || isNavigating;
const updateFilters = (newFilters: Partial) => {
- setIsLoading(true);
+ setIsNavigating(true);
setFilters((curr) => ({ ...curr, ...newFilters }));
setSelectedJob(null);
+
+ // Trigger dot background wave while loading
+ transitionState.active = true;
+ transitionState.direction = 1;
+ transitionState.startTime = performance.now();
+
const params = CreateQueryString(newFilters);
- router.push(`/jobs?${params}`);
+ startTransition(() => {
+ router.push(`/jobs?${params}`);
+ });
};
useEffect(() => {
if (pathname === "/jobs") {
- setIsLoading(false);
+ setIsNavigating(false);
setSelectedJob(null);
}
}, [pathname, searchParams]);
@@ -106,10 +119,17 @@ export function FilterProvider({ children }: { children: ReactNode }) {
};
const clearFilters = () => {
- setIsLoading(true);
+ setIsNavigating(true);
setFilters(emptyFilterState);
setSelectedJob(null);
- router.push("/jobs");
+
+ transitionState.active = true;
+ transitionState.direction = -1;
+ transitionState.startTime = performance.now();
+
+ startTransition(() => {
+ router.push("/jobs");
+ });
};
return (
@@ -123,6 +143,8 @@ export function FilterProvider({ children }: { children: ReactNode }) {
updateFilters,
setSelectedJob,
clearFilters,
+ viewMode,
+ setViewMode,
}}
>
{children}
diff --git a/frontend/src/lib/transition-state.ts b/frontend/src/lib/transition-state.ts
new file mode 100644
index 0000000..c12f76d
--- /dev/null
+++ b/frontend/src/lib/transition-state.ts
@@ -0,0 +1,10 @@
+// Shared mutable state that DotBackground reads every frame
+// and PageTransition writes to when navigation happens.
+// Using a plain object (not React state) so the canvas animation
+// loop can read it without re-renders.
+
+export const transitionState = {
+ active: false,
+ direction: 1 as 1 | -1,
+ startTime: 0,
+};
diff --git a/frontend/src/types/filters.ts b/frontend/src/types/filters.ts
index 9bdefcd..31b9b85 100644
--- a/frontend/src/types/filters.ts
+++ b/frontend/src/types/filters.ts
@@ -1,6 +1,8 @@
// frontend/src/types/filters.ts
import { JobType, LocationType, WorkingRight, IndustryField } from "./job";
+export type ViewMode = "split" | "grid" | "dense";
+
/**
* JobFilters is a type that represents the filters that can be applied to the job search
*/