Production deployment

.github/workflows/renovate.yml

@@ -2,7 +2,7 @@ name: Renovate
 
 on:
   schedule:
-    - cron: "0,15,30,45 3,4 * * *" # Every day eight chances for Renovate to create or rebase branches and create, rebase or merge PRs
+    - cron: "0,30 2,3,4 * * *" # Every day six chances for Renovate to create or rebase branches and create, rebase or merge PRs
   workflow_dispatch: # Manually run the workflow
   push: # Run the workflow on changes to the configuration
     branches:

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

@@ -19,13 +19,13 @@ export const CmdKLoader = ({ className, disableAlgolia }: Props) => {
       <button
         className={clsx(
           className,
-          "hidden lg:block text-neutral-600 text-center text-sm hover:text-neutral-400 group",
+          "hidden lg:block text-neutral-600 text-center text-sm hover:text-neutral-400 active:text-neutral-300 group",
         )}
         type="button"
         onClick={() => setOpen(true)}
       >
         Hotkey{" "}
-        <span className="px-2 py-1 rounded border border-neutral-800 group-hover:border-neutral-600">
+        <span className="px-2 py-1 rounded border border-neutral-800 group-hover:border-neutral-600 group-active:border-neutral-500">
           Strg + K
         </span>
       </button>

app/src/app/_components/Modal.tsx

@@ -30,7 +30,7 @@ export default function Modal({
 
   return createPortal(
     <div
-      className="fixed inset-0 z-30 flex cursor-pointer items-center justify-center bg-neutral-800/50 p-2 backdrop-blur"
+      className="fixed inset-0 z-30 flex cursor-pointer items-start lg:items-center justify-center bg-neutral-800/50 p-4 backdrop-blur"
       onClick={onRequestClose || (() => router.back())}
     >
       <div

app/src/app/_components/Sidebar/DesktopSidebar.tsx

@@ -33,10 +33,11 @@ export const DesktopSidebar = async () => {
         <div>
           <Account />
 
-          <CmdKLoader
-            disableAlgolia={disableAlgolia}
-            className="block mt-4 mx-auto"
-          />
+          <div className="flex justify-evenly items-center mt-4">
+            <CmdKLoader disableAlgolia={disableAlgolia} />
+
+            {/* <InstallPWA /> */}
+          </div>
 
           <nav
             className="p-4 border-neutral-800 relative"

app/src/app/_components/Sidebar/InstallPWA.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import clsx from "clsx";
+import { useEffect, useRef } from "react";
+import {
+  MdOutlineInstallDesktop,
+  MdOutlineInstallMobile,
+} from "react-icons/md";
+
+type Props = Readonly<{
+  className?: string;
+}>;
+
+export const InstallPWA = ({ className }: Props) => {
+  const installPrompt = useRef(null);
+
+  useEffect(() => {
+    window.addEventListener("beforeinstallprompt", (e) => {
+      installPrompt.current = e;
+    });
+  }, []);
+
+  const handleClick = async () => {
+    if (!installPrompt.current) return;
+    await installPrompt.current.prompt();
+  };
+
+  return (
+    <button
+      className={clsx(
+        className,
+        "text-neutral-600 text-center text-sm hover:text-neutral-400 active:text-neutral-300 inline-flex gap-2 items-center group",
+      )}
+      type="button"
+      onClick={handleClick}
+    >
+      App installieren
+      <span className="p-1 rounded border border-neutral-800 group-hover:border-neutral-600 group-active:border-neutral-500">
+        <MdOutlineInstallMobile className="lg:hidden" />
+        <MdOutlineInstallDesktop className="hidden lg:block" />
+      </span>
+    </button>
+  );
+};

app/src/app/_components/Sidebar/MobileActionBar.tsx

@@ -87,6 +87,10 @@ export const MobileActionBar = async ({ className }: Props) => {
             <MobileActionBarFlyout>
               <Account />
 
+              {/* <div className="flex justify-evenly items-center mt-4">
+                <InstallPWA />
+              </div> */}
+
               <div className="p-4 relative" data-red-bar-container>
                 <ul>
                   <li>

app/src/app/app/_components/Event.tsx

@@ -80,13 +80,16 @@ export const Event = async ({ className, event, index }: Props) => {
           </p>
         </div>
 
-        <div className="flex-initial flex flex-col gap-2 p-4 pt-0 lg:pl-8 lg:pr-8 lg:pb-8 3xl:pt-8">
-          <DiscordButton path={`events/${event.guild_id}/${event.id}`} />
+        <div className="flex-initial flex 3xl:flex-col gap-2 p-4 pt-0 lg:pl-8 lg:pr-8 lg:pb-8 3xl:pt-8">
+          <DiscordButton
+            path={`events/${event.guild_id}/${event.id}`}
+            className="flex-1"
+          />
 
           {authentication.authorize("eventFleet", "read") && (
             <Link
               href={`/app/events/${event.id}`}
-              className="flex items-center justify-center gap-4 rounded uppercase h-11 border text-base border-sinister-red-500 text-sinister-red-500 hover:border-sinister-red-300 active:border-sinister-red-300 hover:text-sinister-red-300 active:text-sinister-red-300 px-6 whitespace-nowrap"
+              className="flex-1 flex items-center justify-center gap-4 rounded uppercase h-11 border text-base border-sinister-red-500 text-sinister-red-500 hover:border-sinister-red-300 active:border-sinister-red-300 hover:text-sinister-red-300 active:text-sinister-red-300 px-6 whitespace-nowrap"
             >
               Details
             </Link>

app/src/app/app/events/[id]/_components/ParticipantsTile.tsx

@@ -33,7 +33,7 @@ export const ParticipantsTile = async ({ className, event }: Props) => {
         discord: user,
       };
     })
-    .sort((a, b) => {
+    .toSorted((a, b) => {
       return (
         a.entity?.handle ||
         a.discord.member.nick ||

app/src/app/app/events/[id]/page.tsx

@@ -49,7 +49,7 @@ export default async function Page({ params }: Props) {
   const { date, data: event } = await getEvent(params.id);
 
   return (
-    <main className="p-2 pb-20 lg:p-8 max-w-[1920px] mx-auto">
+    <main className="p-4 pb-20 lg:p-8 max-w-[1920px] mx-auto">
       <div className="flex gap-2 font-bold text-xl mb-4">
         <span className="text-neutral-500">Event /</span>
         <h1>{event.name}</h1>

app/src/app/app/events/error.tsx

@@ -9,7 +9,7 @@ interface Props {
 
 export default function Error({ error }: Readonly<Props>) {
   return (
-    <main className="p-2 pb-20 lg:p-8">
+    <main className="p-4 pb-20 lg:p-8">
       <Note
         message="Beim Laden der Events ist ein Fehler aufgetreten."
         error={error}

app/src/app/app/fleet/page.tsx

@@ -18,7 +18,7 @@ export default async function Page() {
   const showMyFleetTile = authentication.authorize("ship", "manage");
 
   return (
-    <main className="p-2 pb-20 lg:p-8 max-w-[1920px] mx-auto">
+    <main className="p-4 pb-20 lg:p-8 max-w-[1920px] mx-auto">
       <div className="flex justify-center">
         <Hero text="Flotte" />
       </div>

app/src/app/app/fleet/settings/manufacturer/layout.tsx

@@ -7,7 +7,7 @@ type Props = Readonly<{
 
 export default function Layout({ children, breadcrumbs }: Props) {
   return (
-    <div className="p-2 pb-20 lg:p-8">
+    <div className="p-4 pb-20 lg:p-8">
       <div className="mb-4">{breadcrumbs}</div>
 
       {children}

app/src/app/app/operations/[id]/_components/SquadronFlightPositionEmpty.tsx

@@ -100,7 +100,7 @@ const SquadronFlightPositionEmpty = ({ type, unit }: Readonly<Props>) => {
 
   const users = allOperationMembers
     ?.filter((member) => member.status === "confirmed")
-    .sort((a, b) => a.user.name!.localeCompare(b.user.name!));
+    .toSorted((a, b) => a.user.name!.localeCompare(b.user.name!));
 
   const memberShips = allOperationMembers?.filter(
     (member) => member.status === "confirmed",
@@ -177,7 +177,7 @@ const SquadronFlightPositionEmpty = ({ type, unit }: Readonly<Props>) => {
             {memberShips?.map((member) => (
               <optgroup key={member.userId} label={member.user.name!}>
                 {member.user.ships
-                  .sort((a, b) =>
+                  .toSorted((a, b) =>
                     (a.name || a.variant.name).localeCompare(
                       b.name || b.variant.name,
                     ),

app/src/app/app/operations/[id]/_components/SquadronTile.tsx

@@ -41,7 +41,7 @@ const SquadronTile = ({ className, unit }: Readonly<Props>) => {
 
       <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mt-4">
         {unit.childUnits
-          .sort((a, b) => a.title.localeCompare(b.title))
+          .toSorted((a, b) => a.title.localeCompare(b.title))
           .map((childUnit) => (
             <SquadronFlightTile key={childUnit.id} unit={childUnit} />
           ))}

app/src/app/app/operations/[id]/page.tsx

@@ -110,7 +110,7 @@ export default async function Page({ params }: Readonly<Props>) {
   );
 
   return (
-    <main className="p-2 pb-20 lg:p-8">
+    <main className="p-4 pb-20 lg:p-8">
       <div className="flex gap-2 font-bold text-xl">
         <Link
           href="/app/operations"
@@ -135,7 +135,7 @@ export default async function Page({ params }: Readonly<Props>) {
         <div>
           {operation.units
             .filter((unit) => unit.type === "squadron")
-            .sort((a, b) => a.title.localeCompare(b.title))
+            .toSorted((a, b) => a.title.localeCompare(b.title))
             .map((unit) => (
               <SquadronTile key={unit.id} unit={unit} className="mt-4" />
             ))}
@@ -162,7 +162,9 @@ export default async function Page({ params }: Readonly<Props>) {
 
                   <ul className="mt-2 flex flex-col gap-1">
                     {confirmedMembers
-                      .sort((a, b) => a.user.name!.localeCompare(b.user.name!))
+                      .toSorted((a, b) =>
+                        a.user.name!.localeCompare(b.user.name!),
+                      )
                       .map((member) => (
                         <li
                           className="flex gap-2 items-center"
@@ -193,7 +195,9 @@ export default async function Page({ params }: Readonly<Props>) {
 
                   <ul className="mt-2 flex flex-col gap-1">
                     {unconfirmedMembers
-                      .sort((a, b) => a.user.name!.localeCompare(b.user.name!))
+                      .toSorted((a, b) =>
+                        a.user.name!.localeCompare(b.user.name!),
+                      )
                       .map((member) => (
                         <li
                           className="flex gap-2 items-center"

app/src/app/app/operations/page.tsx

@@ -24,7 +24,7 @@ export default async function Page() {
   });
 
   return (
-    <main className="p-2 pb-20 lg:p-8">
+    <main className="p-4 pb-20 lg:p-8">
       <h1 className="text-xl font-bold">Operationen</h1>
 
       <Note

app/src/app/app/page.tsx

@@ -31,7 +31,7 @@ export default async function Page({ searchParams }: Props) {
   const showUwuHero = Object.hasOwn(searchParams, "uwu");
 
   return (
-    <main className="p-2 pb-20 lg:p-8 max-w-[1920px] mx-auto">
+    <main className="p-4 pb-20 lg:p-8 max-w-[1920px] mx-auto">
       <div className="flex justify-center">
         {showUwuHero ? <UwuHero /> : <Hero text="S.A.M." />}
       </div>

app/src/app/app/roles/_components/RolesTile.tsx

@@ -30,7 +30,7 @@ export const RolesTile = async ({ className }: Props) => {
     prisma.classificationLevel.findMany(),
   ]);
 
-  const sortedRoles = roles.sort((a, b) => a.name.localeCompare(b.name));
+  const sortedRoles = roles.toSorted((a, b) => a.name.localeCompare(b.name));
 
   const enableOperations = await dedupedGetUnleashFlag("EnableOperations");
 

app/src/app/app/roles/page.tsx

@@ -13,7 +13,7 @@ export default async function Page() {
   authentication.authorizePage("role", "manage");
 
   return (
-    <main className="p-2 pb-20 lg:p-8">
+    <main className="p-4 pb-20 lg:p-8">
       <h1 className="text-xl font-bold">Rollen</h1>
 
       <Suspense fallback={<RolesTileSkeleton className="mt-4" />}>

app/src/app/app/settings/_components/classification-level/ClassificationLevelsTile.tsx

@@ -12,7 +12,7 @@ interface Props {
 const ClassificationLevelsTile = async ({ className }: Readonly<Props>) => {
   const classificationLevels = await prisma.classificationLevel.findMany();
 
-  const sortedClassificationLevels = classificationLevels.sort((a, b) =>
+  const sortedClassificationLevels = classificationLevels.toSorted((a, b) =>
     a.name.localeCompare(b.name),
   );
 

app/src/app/app/settings/_components/note-type/NoteTypesTile.tsx

@@ -12,7 +12,7 @@ interface Props {
 const NoteTypesTile = async ({ className }: Readonly<Props>) => {
   const noteTypes = await prisma.noteType.findMany();
 
-  const sortedNoteTypes = noteTypes.sort((a, b) =>
+  const sortedNoteTypes = noteTypes.toSorted((a, b) =>
     a.name.localeCompare(b.name),
   );
 

app/src/app/app/settings/page.tsx

@@ -37,7 +37,7 @@ export default async function Page() {
   }
 
   return (
-    <main className="p-2 pb-20 lg:p-8">
+    <main className="p-4 pb-20 lg:p-8">
       <h1 className="text-xl font-bold">Einstellungen</h1>
 
       {showNoteTypes && <NoteTypesTile className="mt-4" />}

app/src/app/app/spynet/_components/ActivityTile/ActivityTile.tsx

@@ -94,7 +94,7 @@ export const ActivityTile = async ({ className }: Props) => {
     ...(await mapOrganizationMembershipHistoryEntries(result[2])),
   ];
 
-  const sortedEntries = entries.sort(
+  const sortedEntries = entries.toSorted(
     (a, b) => b.date.getTime() - a.date.getTime(),
   );
 

app/src/app/app/spynet/citizen/_components/Tile.tsx

@@ -78,7 +78,7 @@ export const Tile = async ({ searchParams }: Props) => {
     return unknown && role;
   });
 
-  const sortedRows = filteredRows.sort((a, b) => {
+  const sortedRows = filteredRows.toSorted((a, b) => {
     switch (searchParams.get("sort")) {
       case "handle-asc":
         return sortAscWithAndNullLast(a.entity.handle, b.entity.handle);

app/src/app/app/spynet/citizen/page.tsx

@@ -23,7 +23,7 @@ export default async function Page({ searchParams: _searchParams }: Props) {
   const searchParams = nextjsSearchParamsToNativeSearchParams(_searchParams);
 
   return (
-    <main className="p-2 pb-20 lg:p-8">
+    <main className="p-4 pb-20 lg:p-8">
       <div className="flex gap-2 font-bold text-xl">
         <Link
           href="/app/spynet/search"

app/src/app/app/spynet/entity/[id]/_components/handle/Handles.tsx

@@ -32,15 +32,15 @@ const Handles = ({ entity }: Readonly<Props>) => {
     .filter((log) => log.type === "handle")
     .filter((log) => {
       const confirmed = log.attributes
-        .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
+        .toSorted((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
         .find((attribute) => attribute.key === "confirmed");
 
       if (confirmed && confirmed.value === "confirmed") return true;
       if (!authentication) return false;
 
       return authentication.authorize("handle", "confirm");
     })
-    .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
+    .toSorted((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
 
   return (
     <>

app/src/app/app/spynet/entity/[id]/_components/notes/Notes.tsx

@@ -43,7 +43,7 @@ export const Notes = async ({ className, entity }: Props) => {
     prisma.noteType.findMany(),
   ]);
 
-  const sortedNotes = notes.sort(
+  const sortedNotes = notes.toSorted(
     (a, b) => b.createdAt.getTime() - a.createdAt.getTime(),
   );
 

app/src/app/app/spynet/entity/[id]/page.tsx

@@ -71,7 +71,7 @@ export default async function Page({ params }: Props) {
   );
 
   return (
-    <main className="p-2 pb-20 lg:p-8 max-w-[1920px] mx-auto">
+    <main className="p-4 pb-20 lg:p-8 max-w-[1920px] mx-auto">
       <div className="flex gap-2 font-bold text-xl">
         <Link
           href="/app/spynet"

app/src/app/app/spynet/notes/_components/Tile.tsx

@@ -147,7 +147,7 @@ const Tile = async ({ searchParams }: Readonly<Props>) => {
     return confirmation && noteType && classificationLevel;
   });
 
-  const sortedRows = filteredRows.sort((a, b) => {
+  const sortedRows = filteredRows.toSorted((a, b) => {
     switch (searchParams.get("sort")) {
       case "confirmed-at-asc":
         return sortAscWithAndNullLast(

app/src/app/app/spynet/notes/page.tsx

@@ -23,7 +23,7 @@ export default async function Page({ searchParams: _searchParams }: Props) {
   const searchParams = nextjsSearchParamsToNativeSearchParams(_searchParams);
 
   return (
-    <main className="p-2 pb-20 lg:p-8">
+    <main className="p-4 pb-20 lg:p-8">
       <div className="flex gap-2 font-bold text-xl">
         <Link
           href="/app/spynet/search"

app/src/app/app/spynet/organization/[id]/page.tsx

@@ -66,7 +66,7 @@ export default async function Page({ params }: Props) {
   if (!organization) notFound();
 
   return (
-    <main className="p-2 pb-20 lg:p-8 max-w-[1920px] mx-auto">
+    <main className="p-4 pb-20 lg:p-8 max-w-[1920px] mx-auto">
       <div className="flex gap-2 font-bold text-xl">
         <Link
           href="/app/spynet"

app/src/app/app/spynet/other/_components/EntityLogTypeFilter.tsx

@@ -62,7 +62,7 @@ const EntityLogTypeFilter = ({ entityLogTypes }: Readonly<Props>) => {
       onSubmit={handleSubmit(onSubmit)}
     >
       {Array.from(entityLogTypes)
-        .sort((a, b) => a[1].localeCompare(b[1]))
+        .toSorted((a, b) => a[1].localeCompare(b[1]))
         .map(([type, translation]) => (
           <div
             key={type}