chore: nest routes and v3 future flags

.eslintrc.cjs

@@ -7,9 +7,8 @@ module.exports = {
     "prettier",
   ],
   env: {
-    "cypress/globals": true,
   },
-  plugins: ["cypress", "unicorn"],
+  plugins: ["unicorn"],
   // We're using vitest which has a very similar API to jest
   // (so the linting plugins work nicely), but we have to
   // set the jest version explicitly.

.github/workflows/deploy.yml

@@ -76,8 +76,8 @@ jobs:
       - name: ⚡ Run vitest
         run: npm run test -- --coverage
 
-  cypress:
-    name: ⚫️ Cypress
+  playwright:
+    name: 🎭 Playwright
     runs-on: ubuntu-latest
     steps:
       - name: ⬇️ Checkout repo
@@ -114,13 +114,18 @@ jobs:
       - name: ⚙️ Build
         run: npm run build
 
-      - name: 🌳 Cypress run
-        uses: cypress-io/github-action@v6
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: npx playwright test
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
         with:
-          start: npm run start:mocks
-          wait-on: http://localhost:8811
-        env:
-          PORT: 8811
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
 
   build:
     name: 🐳 Build

.gitignore

@@ -10,10 +10,12 @@ node_modules
 .env
 .cache
 
-/cypress/screenshots
-/cypress/videos
 /postgres-data
 /pgdata
 
 /db/imports/*.csv
 measurements.csv
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.prettierignore

@@ -4,8 +4,6 @@ node_modules
 /public/build
 .env
 
-/cypress/screenshots
-/cypress/videos
 /postgres-data
 
 /app/styles/**/*.css

app/components/daterange-filter.tsx

@@ -14,7 +14,7 @@ import {
 import { useEffect, useState } from "react";
 import { Calendar } from "./ui/calendar";
 import { useLoaderData, useSearchParams, useSubmit } from "@remix-run/react";
-import type { loader } from "~/routes/explore.$deviceId";
+import type { loader } from "~/routes/explore+/$deviceId+/_$deviceId";
 import type { DateRange } from "react-day-picker";
 import { PopoverClose } from "@radix-ui/react-popover";
 import dateTimeRanges from "~/lib/date-ranges";

app/components/device-detail/device-detail-box.tsx

@@ -13,7 +13,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "../ui/accordion";
-import type { loader } from "~/routes/explore.$deviceId";
+import type { loader } from "~/routes/explore+/$deviceId+/_$deviceId";
 import {
   ChevronUp,
   Minus,

app/components/header/menu/index.tsx

@@ -1,4 +1,10 @@
-import { Form, Link, useNavigation, useSearchParams } from "@remix-run/react";
+import {
+  Form,
+  Link,
+  useMatches,
+  useNavigation,
+  useSearchParams,
+} from "@remix-run/react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -35,6 +41,7 @@ export default function Menu() {
   const navigation = useNavigation();
   const isLoggingOut = Boolean(navigation.state === "submitting");
   const user = useOptionalUser();
+  const matches = useMatches();
 
   const { t } = useTranslation("menu");
 
@@ -92,26 +99,32 @@ export default function Menu() {
                   <Spinner />
                 </div>
               )}
-              <Link to="/explore">
-                <DropdownMenuItem className="cursor-pointer">
-                  <Compass className="mr-2 h-5 w-5" />
-                  <span>{"Explore"}</span>
-                </DropdownMenuItem>
-              </Link>
-              <Link to="/profile/me">
-                <DropdownMenuItem className="cursor-pointer">
-                  <User2 className="mr-2 h-5 w-5" />
-                  Profile
-                </DropdownMenuItem>
-              </Link>
+              {!(matches[1].pathname === "/explore") && (
+                <Link to="/explore">
+                  <DropdownMenuItem className="cursor-pointer">
+                    <Compass className="mr-2 h-5 w-5" />
+                    <span>{"Explore"}</span>
+                  </DropdownMenuItem>
+                </Link>
+              )}
+              {!(matches[1].pathname === "/profile") && (
+                <Link to="/profile/me">
+                  <DropdownMenuItem className="cursor-pointer">
+                    <User2 className="mr-2 h-5 w-5" />
+                    Profile
+                  </DropdownMenuItem>
+                </Link>
+              )}
 
-              <Link to="/settings">
-                <DropdownMenuItem className=" cursor-pointer">
-                  <Settings className="mr-2 h-5 w-5" />
-                  <span>{"Settings"}</span>
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-              </Link>
+              {!(matches[1].pathname === "/settings") && (
+                <Link to="/settings/profile">
+                  <DropdownMenuItem className=" cursor-pointer">
+                    <Settings className="mr-2 h-5 w-5" />
+                    <span>{"Settings"}</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                </Link>
+              )}
             </DropdownMenuGroup>
           )}
           <DropdownMenuGroup>

app/components/header/nav-bar/phenomenon-select/phenomenon-select.tsx

@@ -15,7 +15,7 @@ import { X } from "lucide-react";
 import { Checkbox } from "~/components/ui/checkbox";
 import { ScrollArea } from "~/components/ui/scroll-area";
 import { Button } from "~/components/ui/button";
-import type { loader } from "~/routes/explore";
+import type { loader } from "~/routes/explore+/_explore";
 
 export function PhenomenonSelect() {
   const data = useLoaderData<typeof loader>();

app/components/landing/connect.tsx

@@ -3,7 +3,7 @@ import { BookA, Wrench } from "lucide-react";
 export default function Connect() {
   return (
     <section
-      id="connect"
+      id="connect-section"
       className="flex justify-between mx-32 gap-20 border-t border-gray-200 py-20"
     >
       <div id="left" className="w-1/2 flex flex-col gap-10">

app/components/landing/features.tsx

@@ -11,7 +11,7 @@ import {
 export default function Features() {
   return (
     <section
-      id="features"
+      id="features-section"
       className="flex justify-between mx-32 gap-10 border-t border-gray-200 py-20"
     >
       <div id="left" className="w-1/2 flex flex-col gap-10">

app/components/landing/integrations.tsx

@@ -3,7 +3,7 @@ import { ArrowUpDown, RadioTower, Unplug } from "lucide-react";
 export default function Integrations() {
   return (
     <section
-      id="integrations"
+      id="integrations-section"
       className="flex justify-between mx-32 gap-10 border-t border-gray-200 py-20"
     >
       <div id="left" className="w-1/2 flex flex-col gap-10">

app/components/landing/partners.tsx

@@ -8,7 +8,7 @@ type PartnersProps = {
 export default function Partners({ data }: PartnersProps) {
   return (
     <div
-      id="partners"
+      id="partners-section"
       className="flex h-full min-h-full items-center justify-center text-xl text-gray-300 dark:text-gray-100"
     >
       <div className="flex h-full w-5/6 flex-col justify-evenly">

app/components/landing/pricing-plans.tsx

@@ -3,7 +3,7 @@ import { Gift, Star } from "lucide-react";
 export default function PricingPlans() {
   return (
     <>
-      <section id="pricing" className="border-t border-gray-200 py-20">
+      <section id="pricing-section" className="border-t border-gray-200 py-20">
         <div className="mx-auto max-w-7xl px-4">
           <div className="mx-auto max-w-2xl text-center">
             <h2 className="text-2xl font-semibold">Pricing</h2>

app/components/landing/stats.tsx

@@ -27,10 +27,10 @@ export default function Stats(stats: number[]) {
   ];
 
   return (
-    <div className="mx-auto px-4 py-16 sm:max-w-xl md:max-w-full md:px-24 lg:max-w-screen-xl lg:px-8 lg:py-24">
+    <div className="mx-auto px-4 py-16 sm:max-w-xl md:max-w-full md:px-24 lg:max-w-screen-xl lg:px-8 lg:py-24" id="stats-section">
       <div className="row-gap-8 grid gap-10 lg:grid-cols-3">
         {osemStats.map((stat) => (
-          <div key={stat.id}>
+          <div key={stat.id} id={stat.name}>
             <motion.div
               initial="hidden"
               whileInView="visible"

app/components/map/filter-visualization.tsx

@@ -1,6 +1,6 @@
 import { X } from "lucide-react";
 import { useLoaderData, useNavigate } from "@remix-run/react";
-import type { loader } from "~/routes/explore";
+import type { loader } from "~/routes/explore+/_explore";
 import { Fragment, useEffect } from "react";
 import { DeviceExposureZodEnum, DeviceStatusZodEnum } from "~/schema/enum";
 

app/components/map/layers/cluster/cluster-layer.tsx

@@ -9,7 +9,7 @@ import { useMemo, useCallback, useState, useEffect } from "react";
 import { Marker, useMap } from "react-map-gl";
 import type { PointFeature } from "supercluster";
 import useSupercluster from "use-supercluster";
-import type { DeviceClusterProperties } from "~/routes/explore";
+import type { DeviceClusterProperties } from "~/routes/explore+/_explore";
 import DonutChartCluster from "./donut-chart-cluster";
 import BoxMarker from "./box-marker";
 import debounce from "lodash.debounce";

app/components/map/layers/cluster/donut-chart-cluster.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from "remix-themes";
-import type { DeviceClusterProperties } from "~/routes/explore";
+import type { DeviceClusterProperties } from "~/routes/explore+/_explore";
 
 type DonutChartClusterType = {
   cluster: any;
@@ -21,9 +21,9 @@
   const [theme,] = useTheme();
   const { categories, point_count: pointCount } = cluster.properties;
   const {
     active: active = 0,
     inactive: inactive = 0,
     old: old = 0,
   } = categories;
   const counts: number[] = [active, inactive, old];
   const offsets: number[] = [];

app/components/mode-toggle.tsx

@@ -4,6 +4,7 @@ import { Button } from "./ui/button";
 
 export function ModeToggle() {
   const [theme, setTheme] = useTheme();
+  if (!theme) return null; 
   const isDark = theme === Theme.DARK;
 
   const toggleTheme = () => {

app/components/mydevices/dt/columns.tsx

@@ -116,7 +116,7 @@ export const columns: ColumnDef<SenseBox>[] = [
               <a href={`/explore/${senseBox.id}`}>Show on map</a>
             </DropdownMenuItem>
             <DropdownMenuItem>
-              <a href={`/device/${senseBox.id}/edit`}>Edit</a>
+              <a href={`/device/${senseBox.id}/edit/general`}>Edit</a>
             </DropdownMenuItem>
             <DropdownMenuItem>
               <a href={`/device/${senseBox.id}/dataupload`}>Data upload</a>

app/entry.server.tsx

@@ -12,7 +12,8 @@ import I18NexFsBackend from "i18next-fs-backend";
 import i18nextOptions from "./i18next-options"; // our i18n configuration file
 import { resolve } from "node:path";
 
-const ABORT_DELAY = 5000;
+// Reject/cancel all pending promises after 5 seconds
+export const streamTimeout = 5000;
 
 init();
 global.ENV = getEnv();
@@ -86,6 +87,8 @@ export default async function handleRequest(
       },
     );
 
-    setTimeout(abort, ABORT_DELAY);
+    // Automatically timeout the React renderer after 6 seconds, which ensures
+    // React has enough time to flush down the rejected boundary contents
+    setTimeout(abort, streamTimeout + 1000);
   });
 }

app/root.tsx

@@ -1,5 +1,5 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
-import { json } from "@remix-run/node";
+import { data } from "@remix-run/node";
 import {
   Links,
   Meta,
@@ -71,7 +71,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
   const user = await getUser(request);
   // const themeSession = await getThemeSession(request);
   const { getTheme } = await themeSessionResolver(request);
-  return json(
+  return data(
     {
       user: user,
       locale: locale,

app/routes.ts

@@ -0,0 +1,7 @@
+import { type RouteConfig } from "@remix-run/route-config";
+import { remixRoutesOptionAdapter } from "@remix-run/routes-option-adapter";
+import { flatRoutes } from "remix-flat-routes";
+
+export const routes: RouteConfig = remixRoutesOptionAdapter((defineRoutes) =>
+  flatRoutes("routes", defineRoutes),
+);

app/routes/_index.tsx

@@ -1,5 +1,5 @@
 import type { LoaderFunctionArgs } from "@remix-run/node";
-import { json } from "@remix-run/node";
+import { data } from "@remix-run/node";
 import { Link, useLoaderData } from "@remix-run/react";
 import { motion } from "framer-motion";
 import Features from "~/components/landing/features";
@@ -48,7 +48,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
     },
   );
 
-  return json({
+  return data({
     useCases: useCasesResponse.data,
     features: featuresResponse.data,
     partners: partnersResponse.data,
@@ -71,7 +71,7 @@ export default function Index() {
       <header>
         <Header />
       </header>
-      <main>
+      <main id="main">
         <div className="overflow-hidden pt-8 sm:py-20">
           <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
             <div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
@@ -188,9 +188,7 @@ export default function Index() {
           <Partners data={partners} />
         </div>
       </section>
-      <footer className="">
-        <Footer />
-      </footer>
+      <Footer />
     </div>
   );
 }