Production deployment

app/.devcontainer/docker-compose.yml

@@ -14,7 +14,7 @@ services:
     command: sleep infinity
 
   db:
-    image: postgres:15.6-alpine3.19
+    image: postgres:18.2-alpine3.23
     restart: no
     environment:
       POSTGRES_PASSWORD: admin

app/src/app/app/changelog/page.tsx

@@ -23,6 +23,7 @@
 import image20250906NewLayout from "@/modules/changelog/assets/2025-09-06-new-layout.png";
 import image20251007sincome from "@/modules/changelog/assets/2025-10-07-sincome.png";
 import image20251013rolesHistory from "@/modules/changelog/assets/2025-10-13-roles-history.png";
+import image20260214RoleTooltip from "@/modules/changelog/assets/2026-02-14-role-tooltip.png";
 import { Link } from "@/modules/common/components/Link";
 import { SmallBadge } from "@/modules/common/components/SmallBadge";
 import { random } from "lodash";
@@ -44,6 +45,30 @@
 
   return (
     <div className="flex flex-col gap-4">
+      <Day heading="14. Februar 2026">
+        <DayItem heading="Tooltip für Rollen" badges={["Neu", "Citizen"]}>
+          <p>
+            Rollen haben nun ein Tooltip in welchem alle Details zu der
+            jeweiligen Rolle angezeigt werden. Auch kann direkt hier die
+            jeweilige Rolle von einem Citizen entfernt werden.
+          </p>
+
+          <p>
+            Zukünftig wird hier das aktuelle Level von levelbaren Rollen
+            gezeigt. Auch kann direkt hier das Level angepasst werden.
+          </p>
+
+          <Link href={image20260214RoleTooltip.src}>
+            <Image
+              quality={100}
+              src={image20260214RoleTooltip}
+              alt=""
+              loading="eager"
+            />
+          </Link>
+        </DayItem>
+      </Day>
+
       <Day heading="6. Februar 2026">
         <DayItem heading="Projekte" badges={["Neu", "Apps"]}>
           <p>
@@ -362,12 +387,12 @@
             Verlauf aller Änderungen an den Rollen dieses Citizen.
           </p>
 
           <Link href={image20251013rolesHistory.src}>
             <Image
               quality={100}
               src={image20251013rolesHistory}
               alt=""
-              loading="eager"
+              loading="lazy"
             />
           </Link>
         </DayItem>

app/src/app/app/layout.tsx

@@ -11,6 +11,8 @@ import { ServiceWorkerLoader } from "@/modules/common/components/ServiceWorkerLo
 import { getUnleashFlag } from "@/modules/common/utils/getUnleashFlag";
 import { UNLEASH_FLAG } from "@/modules/common/utils/UNLEASH_FLAG";
 import { ChannelsProvider } from "@/modules/pusher/components/ChannelsContext";
+import { RolesContextProvider } from "@/modules/roles/components/RolesContext";
+import { getVisibleRoles } from "@/modules/roles/utils/getRoles";
 import { CmdKProvider } from "@/modules/shell/components/CmdK/CmdKContext";
 import { MobileActionBarLoader } from "@/modules/shell/components/Sidebar/MobileActionBarLoader";
 import { TopBar } from "@/modules/shell/components/TopBar";
@@ -21,11 +23,13 @@ import { NuqsAdapter } from "nuqs/adapters/next/app";
 import { Suspense } from "react";
 
 export default async function AppLayout({ children }: LayoutProps<"/app">) {
-  const [authentication, disableAlgolia, apps] = await Promise.all([
-    requireAuthenticationPage(),
-    getUnleashFlag(UNLEASH_FLAG.DisableAlgolia),
-    getAppLinks(),
-  ]);
+  const [authentication, disableAlgolia, apps, visibleRoles] =
+    await Promise.all([
+      requireAuthenticationPage(),
+      getUnleashFlag(UNLEASH_FLAG.DisableAlgolia),
+      getAppLinks(),
+      getVisibleRoles(),
+    ]);
 
   return (
     <>
@@ -35,34 +39,36 @@ export default async function AppLayout({ children }: LayoutProps<"/app">) {
             <TRPCReactProvider>
               <ChannelsProvider userId={authentication.session.user.id}>
                 <NextIntlClientProvider>
-                  <div className="min-h-dvh background-primary">
-                    <AppsContextProvider apps={apps}>
-                      <CreateContextProvider>
-                        <CmdKProvider disableAlgolia={disableAlgolia}>
-                          <TopBar />
-                          <MobileActionBarLoader />
-                        </CmdKProvider>
+                  <RolesContextProvider roles={visibleRoles}>
+                    <div className="min-h-dvh background-primary">
+                      <AppsContextProvider apps={apps}>
+                        <CreateContextProvider>
+                          <CmdKProvider disableAlgolia={disableAlgolia}>
+                            <TopBar />
+                            <MobileActionBarLoader />
+                          </CmdKProvider>
 
-                        <div className="pt-12 lg:pt-[104px] pb-[64px] lg:pb-0 min-h-dvh">
-                          {children}
-                        </div>
-                      </CreateContextProvider>
-                    </AppsContextProvider>
-                  </div>
+                          <div className="pt-12 lg:pt-[104px] pb-[64px] lg:pb-0 min-h-dvh">
+                            {children}
+                          </div>
+                        </CreateContextProvider>
+                      </AppsContextProvider>
+                    </div>
 
-                  <Suspense>
-                    <ImpersonationBannerContainer />
-                  </Suspense>
+                    <Suspense>
+                      <ImpersonationBannerContainer />
+                    </Suspense>
 
-                  {authentication.session.user.role === "admin" && (
-                    <AdminEnabler
-                      enabled={
-                        (await cookies()).get("enable_admin")?.value === "1"
-                      }
-                    />
-                  )}
+                    {authentication.session.user.role === "admin" && (
+                      <AdminEnabler
+                        enabled={
+                          (await cookies()).get("enable_admin")?.value === "1"
+                        }
+                      />
+                    )}
 
-                  <NewReleaseToast />
+                    <NewReleaseToast />
+                  </RolesContextProvider>
                 </NextIntlClientProvider>
               </ChannelsProvider>
             </TRPCReactProvider>

app/src/app/app/leaderboards/page.tsx

@@ -46,11 +46,11 @@ export default async function Page() {
                   {citizen.rank}
                 </td>
 
-                <td className="h-14 flex items-center px-2 overflow-hidden text-ellipsis whitespace-nowrap">
+                <td className="h-14 flex items-center px-2 truncate">
                   {/* <Link
                     href={`/app/spynet/citizen/${}`}
                     prefetch={false}
-                    className="flex items-center gap-2 text-brand-red-500 hover:bg-neutral-800 px-2 rounded-secondary h-full overflow-hidden text-ellipsis whitespace-nowrap"
+                    className="flex items-center gap-2 text-brand-red-500 hover:bg-neutral-800 px-2 rounded-secondary h-full truncate"
                   > */}
                   {citizen.displayname}
                   {/* </Link> */}

app/src/app/app/roles/[id]/inheritance/page.tsx

@@ -1,6 +1,6 @@
 import { requireAuthenticationPage } from "@/modules/auth/server";
 import { InheritanceForm } from "@/modules/roles/components/InheritanceForm";
-import { SingleRole } from "@/modules/roles/components/SingleRole";
+import { SingleRoleBadge } from "@/modules/roles/components/SingleRoleBadge";
 import { getRoleById, getRoles } from "@/modules/roles/queries";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
@@ -30,7 +30,8 @@ export default async function Page({
     <section className="rounded-primary bg-neutral-800/50 p-4">
       <h2 className="text-xl font-bold mb-2">Vererbungen</h2>
       <p className="max-w-prose">
-        Die Rolle <SingleRole role={role} className="inline-flex align-sub" />{" "}
+        Die Rolle{" "}
+        <SingleRoleBadge roleId={roleId} className="inline-flex align-sub" />{" "}
         erhält alle Berechtigungen von den folgenden ausgewählten Rollen. Im
         Karrieresystem gelten die folgenden Rollen ebenfalls als freigeschaltet.
         Verschachtelte Vererbungen werden nicht berücksichtigt.

app/src/app/app/spynet/citizen/[id]/layout.tsx

@@ -35,9 +35,7 @@ export default async function Layout({
 
         <span className="text-neutral-500">/</span>
 
-        <h1 className="overflow-hidden text-ellipsis whitespace-nowrap">
-          {citizen.handle || citizen.id}
-        </h1>
+        <h1 className="truncate">{citizen.handle || citizen.id}</h1>
       </div>
 
       <CitizenNavigation citizenId={citizen.id} className="mt-2 mb-4" />

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

@@ -71,9 +71,7 @@ export default async function Page(props: Props) {
 
         <span className="text-neutral-500">/</span>
 
-        <h1 className="overflow-hidden text-ellipsis whitespace-nowrap">
-          {organization.name}
-        </h1>
+        <h1 className="truncate">{organization.name}</h1>
 
         {/* {authentication.authorize("organization", "delete") && <DeleteEntity entity={organization} />} */}
       </div>

app/src/modules/career/nodes/RoleCitizens/client/Node.tsx

@@ -2,7 +2,7 @@
 
 import { Handles } from "@/modules/career/components/Handles";
 import { CitizenLink } from "@/modules/common/components/CitizenLink";
-import { SingleRole } from "@/modules/roles/components/SingleRole";
+import { SingleRoleBadge } from "@/modules/roles/components/SingleRoleBadge";
 import {
   FlowNodeRoleCitizensAlignment,
   FlowNodeType,
@@ -231,8 +231,8 @@ export const Node: ComponentType<NodeProps<RoleNode>> = (props) => {
             })}
           >
             {!props.data.roleCitizensHideRole && (
-              <SingleRole
-                role={props.data.role}
+              <SingleRoleBadge
+                roleId={props.data.role.id}
                 className="text-white flex-none"
               />
             )}

app/src/modules/citizen/actions/deleteRoleAssignment.ts

@@ -0,0 +1,68 @@
+"use server";
+
+import { prisma } from "@/db";
+import { createAuthenticatedAction } from "@/modules/actions/utils/createAction";
+import { RoleAssignmentChangeType } from "@prisma/client";
+import { refresh } from "next/cache";
+import { z } from "zod";
+
+const schema = z.object({
+  citizenId: z.string(),
+  roleId: z.string(),
+});
+
+export const deleteRoleAssignment = createAuthenticatedAction(
+  "deleteRoleAssignment",
+  schema,
+  async (formData, authentication, data, t) => {
+    /**
+     * Authorize the request
+     */
+    if (!authentication.session.entity)
+      return {
+        error: t("Common.forbidden"),
+        requestPayload: formData,
+      };
+    if (
+      !(await authentication.authorize("otherRole", "dismiss", [
+        {
+          key: "roleId",
+          value: data.roleId,
+        },
+      ]))
+    )
+      return {
+        error: t("Common.forbidden"),
+        requestPayload: formData,
+      };
+
+    /**
+     *
+     */
+    await prisma.$transaction([
+      prisma.roleAssignment.delete({
+        where: {
+          citizenId_roleId: {
+            citizenId: data.citizenId,
+            roleId: data.roleId,
+          },
+        },
+      }),
+
+      prisma.roleAssignmentChange.create({
+        data: {
+          citizenId: data.citizenId,
+          roleId: data.roleId,
+          type: RoleAssignmentChangeType.REMOVE,
+          createdById: authentication.session.entity.id,
+        },
+      }),
+    ]);
+
+    refresh();
+
+    return {
+      success: t("Common.successfullySaved"),
+    };
+  },
+);

app/src/modules/citizen/actions/updateRoleAssignment.ts

@@ -5,7 +5,6 @@ import { createAuthenticatedAction } from "@/modules/actions/utils/createAction"
 import { triggerNotifications } from "@/modules/notifications/utils/triggerNotification";
 import { getRoles } from "@/modules/roles/queries";
 import { RoleAssignmentChangeType } from "@prisma/client";
-import { revalidatePath } from "next/cache";
 import { z } from "zod";
 
 export interface Change {
@@ -155,11 +154,6 @@ export const updateRoleAssignments = createAuthenticatedAction(
         })),
     );
 
-    /**
-     * Revalidate cache(s)
-     */
-    revalidatePath("/app/account/notifications");
-
     return {
       success: t("Common.successfullySaved"),
     };

app/src/modules/citizen/components/CitizenInput.tsx

@@ -3,7 +3,7 @@
 import Button from "@/modules/common/components/Button";
 import { CitizenLink } from "@/modules/common/components/CitizenLink";
 import { underlineCharacters } from "@/modules/common/utils/underlineCharacters";
-import { SingleRole } from "@/modules/roles/components/SingleRole";
+import { SingleRoleBadge } from "@/modules/roles/components/SingleRoleBadge";
 import { api } from "@/trpc/react";
 import {
   Combobox,
@@ -283,8 +283,8 @@ const Multiple = ({
                           onClick={() => handleSelectRole(role.id)}
                           className="group"
                         >
-                          <SingleRole
-                            role={role}
+                          <SingleRoleBadge
+                            roleId={role.id}
                             showPlaceholder
                             className="bg-transparent group-hover:bg-neutral-700/50 group-focus-visible:bg-neutral-700/50"
                           />

app/src/modules/citizen/components/NotesTable.tsx

@@ -126,7 +126,7 @@ export const NotesTable = ({ rows, searchParams }: Props) => {
               </td>
 
               <td
-                className="overflow-hidden text-ellipsis whitespace-nowrap"
+                className="truncate"
                 title={row.entityLog.content || undefined}
               >
                 {row.entityLog.content}

app/src/modules/citizen/components/OtherTable.tsx

@@ -120,14 +120,14 @@ export const OtherTable = ({ rows, searchParams }: Props) => {
               </td>
 
               <td
-                className="overflow-hidden text-ellipsis whitespace-nowrap"
+                className="truncate"
                 title={entityLogTypeTranslations[row.entityLog.type]}
               >
                 {entityLogTypeTranslations[row.entityLog.type]}
               </td>
 
               <td
-                className="overflow-hidden text-ellipsis whitespace-nowrap"
+                className="truncate"
                 title={row.entityLog.content || undefined}
               >
                 {row.entityLog.content}

app/src/modules/citizen/components/ProfileTile.tsx

@@ -2,7 +2,7 @@ import { requireAuthentication } from "@/modules/auth/server";
 import Avatar from "@/modules/common/components/Avatar";
 import { Link } from "@/modules/common/components/Link";
 import { getPenaltyEntriesOfCurrentUser } from "@/modules/penalty-points/queries";
-import { SingleRole } from "@/modules/roles/components/SingleRole";
+import { SingleRoleBadge } from "@/modules/roles/components/SingleRoleBadge";
 import { getMyAssignedRoles } from "@/modules/roles/utils/getRoles";
 import {
   getMonthlySalaryOfCurrentCitizen,
@@ -61,7 +61,11 @@ export const ProfileTile = async ({ className }: Props) => {
         {roles.length > 0 && (
           <div className="flex gap-1 flex-wrap justify-center">
             {roles.map((role) => (
-              <SingleRole key={role.id} role={role} />
+              <SingleRoleBadge
+                key={role.id}
+                roleId={role.id}
+                citizenId={authentication.session.entity?.id}
+              />
             ))}
           </div>
         )}

app/src/modules/citizen/components/RolesCell.tsx

@@ -1,6 +1,6 @@
 import { requireAuthentication } from "@/modules/auth/server";
 import { AddRoles } from "@/modules/citizen/components/roles/AddRoles";
-import { SingleRole } from "@/modules/roles/components/SingleRole";
+import { SingleRoleBadge } from "@/modules/roles/components/SingleRoleBadge";
 import { getAssignedRoles } from "@/modules/roles/utils/getRoles";
 import {
   type Entity,
@@ -48,7 +48,11 @@ export const RolesCell = async ({
       {roles.length > 0 ? (
         <div className={clsx("flex gap-1", className)}>
           {roles.map((role) => (
-            <SingleRole key={role.id} role={role} />
+            <SingleRoleBadge
+              key={role.id}
+              roleId={role.id}
+              citizenId={entity.id}
+            />
           ))}
         </div>
       ) : (