Production deployment

app/next.config.mjs

@@ -75,14 +75,6 @@ const config = {
       fullUrl: true,
     },
   },
-
-  redirects: async () => [
-    {
-      source: "/app/fleet/settings",
-      destination: "/app/fleet/settings/manufacturer",
-      permanent: false,
-    },
-  ],
 };
 
 export default withVercelToolbar()(config);

app/src/app/_components/CmdK/CmdK.tsx

@@ -185,7 +185,7 @@ export const CmdK = ({ open, setOpen, disableAlgolia }: Props) => {
                   <Command.Item
                     keywords={["Admin", "Ships"]}
                     onSelect={() => {
-                      router.push("/app/fleet/settings");
+                      router.push("/app/fleet/settings/manufacturer");
                       setOpen(false);
                       setSearch("");
                     }}

app/src/app/_components/Account.tsx → app/src/app/_components/Sidebar/Account.tsx

@@ -1,8 +1,8 @@
-import { requireAuthentication } from "../../lib/auth/server";
-import Avatar from "./Avatar";
-import LogoutButton from "./LogoutButton";
+import { requireAuthentication } from "../../../lib/auth/server";
+import Avatar from "../Avatar";
+import LogoutButton from "../LogoutButton";
 
-const Account = async () => {
+export const Account = async () => {
   const authentication = await requireAuthentication();
 
   const name =
@@ -26,5 +26,3 @@ const Account = async () => {
     </div>
   );
 };
-
-export default Account;

app/src/app/_components/Sidebar/RedBar.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import clsx from "clsx";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+
+export const RedBar = () => {
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const pathname = usePathname();
+  const [style, setStyle] = useState({});
+
+  useEffect(() => {
+    const container = document.querySelector("[data-red-bar-container]");
+    if (!container) return;
+
+    const links = container.querySelectorAll(`a`);
+    const link = findMatchingLink(links, pathname);
+    if (!link) return;
+
+    const containerRect = container.getBoundingClientRect();
+    const linkRect = link.getBoundingClientRect();
+
+    setStyle({
+      transform: `translateY(${linkRect.top - containerRect.top}px)`,
+    });
+
+    setIsInitialized(true);
+
+    setTimeout(() => {
+      setIsVisible(true);
+    }, 100);
+  }, [pathname]);
+
+  return (
+    <div
+      className={clsx(
+        "w-[2px] h-[2em] bg-sinister-red-500 absolute left-4 before:rounded pointer-events-none top-3",
+        {
+          "opacity-100": isVisible,
+          "opacity-0": !isVisible,
+          "transition-all": isInitialized,
+        },
+      )}
+      style={style}
+    />
+  );
+};
+
+const findMatchingLink = (
+  links: NodeListOf<HTMLAnchorElement>,
+  pathname: string,
+) => {
+  let bestMatch: HTMLAnchorElement | null = null;
+  let bestMatchHref = "";
+
+  for (let i = 0; i < links.length; i++) {
+    const link = links[i];
+    if (!link) continue;
+
+    const href = link.getAttribute("href");
+    if (!href) continue;
+
+    if (pathname.startsWith(href) && href.length > bestMatchHref.length) {
+      bestMatch = link;
+      bestMatchHref = href;
+    }
+  }
+
+  return bestMatch;
+};

app/src/app/_components/Sidebar.tsx → app/src/app/_components/Sidebar/Sidebar.tsx

@@ -1,13 +1,15 @@
+import clsx from "clsx";
 import Link from "next/link";
 import { FaCog, FaHome, FaLock, FaTable, FaUsers } from "react-icons/fa";
 import { MdWorkspaces } from "react-icons/md";
 import { RiSpyFill, RiSwordFill } from "react-icons/ri";
-import { requireAuthentication } from "../../lib/auth/server";
-import { getUnleashFlag } from "../../lib/getUnleashFlag";
-import Account from "./Account";
-import { Chip } from "./Chip";
-import { CmdKLoader } from "./CmdK/CmdKLoader";
-import { Footer } from "./Footer";
+import { requireAuthentication } from "../../../lib/auth/server";
+import { getUnleashFlag } from "../../../lib/getUnleashFlag";
+import { Chip } from "../Chip";
+import { CmdKLoader } from "../CmdK/CmdKLoader";
+import { Footer } from "../Footer";
+import { Account } from "./Account";
+import { RedBar } from "./RedBar";
 
 export const Sidebar = async () => {
   const authentication = await requireAuthentication();
@@ -35,7 +37,10 @@ export const Sidebar = async () => {
             className="hidden lg:block mt-4 mx-auto"
           />
 
-          <nav className="p-4 border-neutral-800">
+          <nav
+            className="p-4 border-neutral-800 relative"
+            data-red-bar-container
+          >
             <ul>
               <li>
                 <Link
@@ -111,7 +116,13 @@ export const Sidebar = async () => {
                       <li>
                         <Link
                           href="/app/spynet/citizen"
-                          className="flex gap-2 items-center p-4 hover:bg-neutral-800 rounded"
+                          className={clsx(
+                            "flex gap-2 items-center p-4 hover:bg-neutral-800 rounded",
+                            // {
+                            //   "before:w-[2px] before:h-[2em] before:bg-sinister-red-500 before:absolute before:left-0 relative before:rounded bg-neutral-800":
+                            //     true,
+                            // },
+                          )}
                           prefetch={false}
                         >
                           <FaTable />
@@ -193,7 +204,7 @@ export const Sidebar = async () => {
                   ) && (
                     <li>
                       <Link
-                        href="/app/fleet/settings"
+                        href="/app/fleet/settings/manufacturer"
                         className="flex gap-2 items-center p-4 hover:bg-neutral-800 rounded"
                         prefetch={false}
                       >
@@ -217,6 +228,8 @@ export const Sidebar = async () => {
                 </ul>
               </div>
             )}
+
+            <RedBar />
           </nav>
         </div>
 

app/src/app/_components/SidebarContainer.tsx → app/src/app/_components/Sidebar/SidebarContainer.tsx

@@ -4,7 +4,7 @@ import clsx from "clsx";
 import { usePathname } from "next/navigation";
 import { useEffect, useState, type ReactNode } from "react";
 import { FaBars, FaTimes } from "react-icons/fa";
-import Button from "./Button";
+import Button from "../Button";
 
 interface Props {
   children?: ReactNode;

app/src/app/_components/SidebarSkeleton.tsx → app/src/app/_components/Sidebar/SidebarSkeleton.tsx

@@ -1,4 +1,4 @@
-const SidebarSkeleton = () => {
+export const SidebarSkeleton = () => {
   return (
     <div className="flex h-full flex-col justify-between">
       <div />
@@ -9,5 +9,3 @@ const SidebarSkeleton = () => {
     </div>
   );
 };
-
-export default SidebarSkeleton;

app/src/app/app/layout.tsx

@@ -7,9 +7,9 @@ import ImpersonationBannerContainer from "../_components/ImpersonationBannerCont
 import { PreviewComments } from "../_components/PreviewComments";
 import QueryClientProviderContainer from "../_components/QueryClientProviderContainer";
 import SessionProviderContainer from "../_components/SessionProviderContainer";
-import { Sidebar } from "../_components/Sidebar";
-import SidebarContainer from "../_components/SidebarContainer";
-import SidebarSkeleton from "../_components/SidebarSkeleton";
+import { Sidebar } from "../_components/Sidebar/Sidebar";
+import SidebarContainer from "../_components/Sidebar/SidebarContainer";
+import { SidebarSkeleton } from "../_components/Sidebar/SidebarSkeleton";
 
 interface Props {
   children: ReactNode;