From 1f2f7b6269c0d00538af4171e85c67dbbee75b5b Mon Sep 17 00:00:00 2001
From: Z8MB1E <jason@onyxsimple.com>
Date: Fri, 28 Aug 2026 01:20:12 -0400
Subject: [PATCH] feat(preferences): add background texture toggle

---
 src/app/(frontend)/account/actions.ts         |  4 +-
 src/app/(frontend)/account/page.tsx           | 37 ++++-----
 src/app/(frontend)/layout.tsx                 | 14 ++--
 src/collections/users/Users.ts                | 76 ++++++++++---------
 .../frontend/account/PreferencesForm.tsx      | 34 +++++++--
 src/components/frontend/blocks/AppSidebar.tsx |  1 +
 ...11500_add_background_texture_preference.ts | 15 ++++
 src/migrations/index.ts                       | 30 +++++---
 src/payload-types.ts                          |  2 +
 tests/int/preferences-form.int.spec.ts        |  2 +
 10 files changed, 137 insertions(+), 78 deletions(-)
 create mode 100644 src/migrations/20260828_011500_add_background_texture_preference.ts

diff --git a/src/app/(frontend)/account/actions.ts b/src/app/(frontend)/account/actions.ts
index 5f9d519..4817b65 100644
--- a/src/app/(frontend)/account/actions.ts
+++ b/src/app/(frontend)/account/actions.ts
@@ -205,6 +205,7 @@ export async function updatePreferences(input: {
   mutedTypes: string[];
   showCallsign: boolean;
   showVersionOverlay: boolean;
+  showBackgroundTexture: boolean;
   leadOrActual: "lead" | "actual";
   discordEnabled: boolean;
   discordMutedTypes: string[];
@@ -221,7 +222,7 @@ export async function updatePreferences(input: {
       (MUTEABLE_NOTIFICATION_VALUES as readonly string[]).includes(t),
     );
 
-     await payload.update({
+    await payload.update({
       collection: "users",
       id: userId,
       data: {
@@ -230,6 +231,7 @@ export async function updatePreferences(input: {
           display: {
             showCallsign: input.showCallsign,
             showVersionOverlay: input.showVersionOverlay,
+            showBackgroundTexture: input.showBackgroundTexture,
             leadOrActual: input.leadOrActual,
             xpDisplayMini: input.xpDisplayMini,
           },
diff --git a/src/app/(frontend)/account/page.tsx b/src/app/(frontend)/account/page.tsx
index 064e0db..75ebb67 100644
--- a/src/app/(frontend)/account/page.tsx
+++ b/src/app/(frontend)/account/page.tsx
@@ -81,24 +81,25 @@ export default async function AccountPage() {
           </CardContent>
         </Card>
 
-         <Card>
-           <CardHeader>
-             <CardTitle>Preferences</CardTitle>
-             <CardDescription>Control in-app notifications and display options.</CardDescription>
-           </CardHeader>
-           <CardContent>
-             <PreferencesForm
-               mutedAll={notifications?.mutedAll ?? false}
-               mutedTypes={notifications?.mutedTypes ?? []}
-               showCallsign={fullUser.preferences?.display?.showCallsign ?? false}
-               showVersionOverlay={fullUser.preferences?.display?.showVersionOverlay ?? true}
-               leadOrActual={fullUser.preferences?.display?.leadOrActual ?? "lead"}
-               discordEnabled={discord?.enabled ?? false}
-               discordMutedTypes={discord?.mutedTypes ?? []}
-               xpDisplayMini={fullUser.preferences?.display?.xpDisplayMini ?? false}
-             />
-           </CardContent>
-         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Preferences</CardTitle>
+            <CardDescription>Control in-app notifications and display options.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <PreferencesForm
+              mutedAll={notifications?.mutedAll ?? false}
+              mutedTypes={notifications?.mutedTypes ?? []}
+              showCallsign={fullUser.preferences?.display?.showCallsign ?? false}
+              showVersionOverlay={fullUser.preferences?.display?.showVersionOverlay ?? true}
+              showBackgroundTexture={fullUser.preferences?.display?.showBackgroundTexture ?? true}
+              leadOrActual={fullUser.preferences?.display?.leadOrActual ?? "lead"}
+              discordEnabled={discord?.enabled ?? false}
+              discordMutedTypes={discord?.mutedTypes ?? []}
+              xpDisplayMini={fullUser.preferences?.display?.xpDisplayMini ?? false}
+            />
+          </CardContent>
+        </Card>
       </div>
     </div>
   );
diff --git a/src/app/(frontend)/layout.tsx b/src/app/(frontend)/layout.tsx
index fde806f..5d63d16 100644
--- a/src/app/(frontend)/layout.tsx
+++ b/src/app/(frontend)/layout.tsx
@@ -133,7 +133,13 @@ export default async function RootLayout(props: { children: React.ReactNode }) {
                   preferences={user.preferences}
                   className="border-r"
                 />
-                <SidebarInset>
+                <SidebarInset
+                  className={
+                    user.preferences?.display?.showBackgroundTexture !== false
+                      ? "app-background-texture"
+                      : undefined
+                  }
+                >
                   <SiteHeader />
                   {impersonating && <ImpersonationBanner />}
                   {children}
@@ -156,11 +162,7 @@ export default async function RootLayout(props: { children: React.ReactNode }) {
         {user && <GameTickRealtime />}
         {isLogistics && <ShipmentToasts />}
         <Toaster />
-        <ShimLoader
-          shims={shimEntries}
-          userId={user?.id ?? null}
-          userRoles={user?.roles ?? []}
-        />
+        <ShimLoader shims={shimEntries} userId={user?.id ?? null} userRoles={user?.roles ?? []} />
       </body>
     </html>
   );
diff --git a/src/collections/users/Users.ts b/src/collections/users/Users.ts
index 2080b50..6028b59 100644
--- a/src/collections/users/Users.ts
+++ b/src/collections/users/Users.ts
@@ -268,41 +268,47 @@ export const Users: CollectionConfig = {
             },
           ],
         },
-         {
-           name: "display",
-           label: "Display",
-           type: "group",
-           fields: [
-             {
-               name: "showCallsign",
-               label: "Show callsign (username) instead of display name in the sidebar",
-               type: "checkbox",
-               defaultValue: false,
-             },
-             {
-               name: "leadOrActual",
-               label: 'Use "Lead" or "Actual" when reviewing the unit roster',
-               type: "select",
-               options: [
-                 { label: "Lead", value: "lead" },
-                 { label: "Actual", value: "actual" },
-               ],
-               defaultValue: "lead",
-             },
-             {
-               name: "showVersionOverlay",
-               label: "Show version overlay at top of page",
-               type: "checkbox",
-               defaultValue: true,
-             },
-             {
-               name: "xpDisplayMini",
-               label: "Use mini mode for XP display",
-               type: "checkbox",
-               defaultValue: false,
-             },
-           ],
-         },
+        {
+          name: "display",
+          label: "Display",
+          type: "group",
+          fields: [
+            {
+              name: "showCallsign",
+              label: "Show callsign (username) instead of display name in the sidebar",
+              type: "checkbox",
+              defaultValue: false,
+            },
+            {
+              name: "leadOrActual",
+              label: 'Use "Lead" or "Actual" when reviewing the unit roster',
+              type: "select",
+              options: [
+                { label: "Lead", value: "lead" },
+                { label: "Actual", value: "actual" },
+              ],
+              defaultValue: "lead",
+            },
+            {
+              name: "showVersionOverlay",
+              label: "Show version overlay at top of page",
+              type: "checkbox",
+              defaultValue: true,
+            },
+            {
+              name: "xpDisplayMini",
+              label: "Use mini mode for XP display",
+              type: "checkbox",
+              defaultValue: false,
+            },
+            {
+              name: "showBackgroundTexture",
+              label: "Show diagonal background texture",
+              type: "checkbox",
+              defaultValue: true,
+            },
+          ],
+        },
         {
           name: "discord",
           label: "Discord",
diff --git a/src/components/frontend/account/PreferencesForm.tsx b/src/components/frontend/account/PreferencesForm.tsx
index 505512e..e5233aa 100644
--- a/src/components/frontend/account/PreferencesForm.tsx
+++ b/src/components/frontend/account/PreferencesForm.tsx
@@ -17,6 +17,7 @@ interface PreferencesFormProps {
   readonly mutedTypes: readonly string[];
   readonly showCallsign: boolean;
   readonly showVersionOverlay: boolean;
+  readonly showBackgroundTexture: boolean;
   readonly leadOrActual: "lead" | "actual";
   readonly discordEnabled: boolean;
   readonly discordMutedTypes: readonly string[];
@@ -28,6 +29,7 @@ export function PreferencesForm({
   mutedTypes: initialMutedTypes,
   showCallsign: initialShowCallsign,
   showVersionOverlay: initialShowVersionOverlay,
+  showBackgroundTexture: initialShowBackgroundTexture,
   leadOrActual: initialLeadOrActual,
   discordEnabled: initialDiscordEnabled,
   discordMutedTypes: initialDiscordMutedTypes,
@@ -38,6 +40,7 @@ export function PreferencesForm({
   const [mutedTypes, setMutedTypes] = useState<string[]>(() => [...initialMutedTypes]);
   const [showCallsign, setShowCallsign] = useState(initialShowCallsign);
   const [showVersionOverlay, setShowVersionOverlay] = useState(initialShowVersionOverlay);
+  const [showBackgroundTexture, setShowBackgroundTexture] = useState(initialShowBackgroundTexture);
   const [leadOrActual, setLeadOrActual] = useState<"lead" | "actual">(initialLeadOrActual);
   const [discordEnabled, setDiscordEnabled] = useState(initialDiscordEnabled);
   const [discordMutedTypes, setDiscordMutedTypes] = useState<string[]>(() => [
@@ -72,6 +75,7 @@ export function PreferencesForm({
         mutedTypes,
         showCallsign,
         showVersionOverlay,
+        showBackgroundTexture,
         leadOrActual,
         discordEnabled,
         discordMutedTypes,
@@ -104,10 +108,7 @@ export function PreferencesForm({
           <CardDescription>Choose what appears in the app shell and roster views.</CardDescription>
         </CardHeader>
         <CardContent className="flex flex-col gap-4">
-          <Label
-            htmlFor="showCallsign"
-            className="flex items-center justify-between gap-4 text-sm"
-          >
+          <Label htmlFor="showCallsign" className="flex items-center justify-between gap-4 text-sm">
             <span className="flex min-w-0 flex-col gap-1">
               <span>Show callsign instead of display name</span>
               <span className="text-sm font-normal text-muted-foreground">
@@ -120,9 +121,12 @@ export function PreferencesForm({
               onCheckedChange={setShowCallsign}
               aria-label="Show callsign instead of display name"
             />
-           </Label>
+          </Label>
 
-          <Label htmlFor="xpDisplayMini" className="flex items-center justify-between gap-4 text-sm">
+          <Label
+            htmlFor="xpDisplayMini"
+            className="flex items-center justify-between gap-4 text-sm"
+          >
             <span className="flex min-w-0 flex-col gap-1">
               <span>Use mini mode for XP display</span>
               <span className="text-sm font-normal text-muted-foreground">
@@ -137,6 +141,24 @@ export function PreferencesForm({
             />
           </Label>
 
+          <Label
+            htmlFor="showBackgroundTexture"
+            className="flex items-center justify-between gap-4 text-sm"
+          >
+            <span className="flex min-w-0 flex-col gap-1">
+              <span>Show diagonal background texture</span>
+              <span className="text-sm font-normal text-muted-foreground">
+                Adds the subtle tactical line pattern behind page content.
+              </span>
+            </span>
+            <Switch
+              id="showBackgroundTexture"
+              checked={showBackgroundTexture}
+              onCheckedChange={setShowBackgroundTexture}
+              aria-label="Show diagonal background texture"
+            />
+          </Label>
+
           <div className="flex flex-col gap-2">
             <div className="flex flex-col gap-1">
               <span className="text-sm font-medium">Roster leader label</span>
diff --git a/src/components/frontend/blocks/AppSidebar.tsx b/src/components/frontend/blocks/AppSidebar.tsx
index 6be0dd0..a4f8ef6 100644
--- a/src/components/frontend/blocks/AppSidebar.tsx
+++ b/src/components/frontend/blocks/AppSidebar.tsx
@@ -194,6 +194,7 @@ export function AppSidebar({
         mutedTypes: preferences?.notifications?.mutedTypes ?? [],
         showCallsign: preferences?.display?.showCallsign ?? false,
         showVersionOverlay: preferences?.display?.showVersionOverlay ?? true,
+        showBackgroundTexture: preferences?.display?.showBackgroundTexture ?? true,
         leadOrActual: preferences?.display?.leadOrActual ?? "lead",
         discordEnabled: preferences?.discord?.enabled ?? false,
         discordMutedTypes: preferences?.discord?.mutedTypes ?? [],
diff --git a/src/migrations/20260828_011500_add_background_texture_preference.ts b/src/migrations/20260828_011500_add_background_texture_preference.ts
new file mode 100644
index 0000000..3bd1c32
--- /dev/null
+++ b/src/migrations/20260828_011500_add_background_texture_preference.ts
@@ -0,0 +1,15 @@
+import { MigrateDownArgs, MigrateUpArgs, sql } from "@payloadcms/db-postgres";
+
+export async function up({ db }: MigrateUpArgs): Promise<void> {
+  await db.execute(sql`
+    ALTER TABLE "users"
+      ADD COLUMN "preferences_display_show_background_texture" boolean DEFAULT true;
+  `);
+}
+
+export async function down({ db }: MigrateDownArgs): Promise<void> {
+  await db.execute(sql`
+    ALTER TABLE "users"
+      DROP COLUMN "preferences_display_show_background_texture";
+  `);
+}
diff --git a/src/migrations/index.ts b/src/migrations/index.ts
index 79fc7d5..294ea3b 100644
--- a/src/migrations/index.ts
+++ b/src/migrations/index.ts
@@ -1,39 +1,45 @@
-import * as migration_20260820_004157 from './20260820_004157';
-import * as migration_20260825_220000 from './20260825_220000';
-import * as migration_20260826_050000_repair_shims_auxiliary_tables from './20260826_050000_repair_shims_auxiliary_tables';
-import * as migration_20260826_060000_add_game_servers_event_target from './20260826_060000_add_game_servers_event_target';
-import * as migration_20260827_005757 from './20260827_005757';
-import * as migration_20260827_022334_add_eod_minesweeper_best_flags from './20260827_022334_add_eod_minesweeper_best_flags';
+import * as migration_20260820_004157 from "./20260820_004157";
+import * as migration_20260825_220000 from "./20260825_220000";
+import * as migration_20260826_050000_repair_shims_auxiliary_tables from "./20260826_050000_repair_shims_auxiliary_tables";
+import * as migration_20260826_060000_add_game_servers_event_target from "./20260826_060000_add_game_servers_event_target";
+import * as migration_20260827_005757 from "./20260827_005757";
+import * as migration_20260827_022334_add_eod_minesweeper_best_flags from "./20260827_022334_add_eod_minesweeper_best_flags";
+import * as migration_20260828_011500_add_background_texture_preference from "./20260828_011500_add_background_texture_preference";
 
 export const migrations = [
   {
     up: migration_20260820_004157.up,
     down: migration_20260820_004157.down,
-    name: '20260820_004157',
+    name: "20260820_004157",
   },
   {
     up: migration_20260825_220000.up,
     down: migration_20260825_220000.down,
-    name: '20260825_220000',
+    name: "20260825_220000",
   },
   {
     up: migration_20260826_050000_repair_shims_auxiliary_tables.up,
     down: migration_20260826_050000_repair_shims_auxiliary_tables.down,
-    name: '20260826_050000_repair_shims_auxiliary_tables',
+    name: "20260826_050000_repair_shims_auxiliary_tables",
   },
   {
     up: migration_20260826_060000_add_game_servers_event_target.up,
     down: migration_20260826_060000_add_game_servers_event_target.down,
-    name: '20260826_060000_add_game_servers_event_target',
+    name: "20260826_060000_add_game_servers_event_target",
   },
   {
     up: migration_20260827_005757.up,
     down: migration_20260827_005757.down,
-    name: '20260827_005757',
+    name: "20260827_005757",
   },
   {
     up: migration_20260827_022334_add_eod_minesweeper_best_flags.up,
     down: migration_20260827_022334_add_eod_minesweeper_best_flags.down,
-    name: '20260827_022334_add_eod_minesweeper_best_flags'
+    name: "20260827_022334_add_eod_minesweeper_best_flags",
+  },
+  {
+    up: migration_20260828_011500_add_background_texture_preference.up,
+    down: migration_20260828_011500_add_background_texture_preference.down,
+    name: "20260828_011500_add_background_texture_preference",
   },
 ];
diff --git a/src/payload-types.ts b/src/payload-types.ts
index 2a87460..63e4de5 100644
--- a/src/payload-types.ts
+++ b/src/payload-types.ts
@@ -1174,6 +1174,7 @@ export interface User {
       leadOrActual?: ('lead' | 'actual') | null;
       showVersionOverlay?: boolean | null;
       xpDisplayMini?: boolean | null;
+      showBackgroundTexture?: boolean | null;
     };
     discord?: {
       enabled?: boolean | null;
@@ -3366,6 +3367,7 @@ export interface UsersSelect<T extends boolean = true> {
               leadOrActual?: T;
               showVersionOverlay?: T;
               xpDisplayMini?: T;
+              showBackgroundTexture?: T;
             };
         discord?:
           | T
diff --git a/tests/int/preferences-form.int.spec.ts b/tests/int/preferences-form.int.spec.ts
index 360a60a..643ceac 100644
--- a/tests/int/preferences-form.int.spec.ts
+++ b/tests/int/preferences-form.int.spec.ts
@@ -37,6 +37,7 @@ describe("PreferencesForm", () => {
         mutedTypes: ["market:offer"],
         showCallsign: false,
         showVersionOverlay: true,
+        showBackgroundTexture: true,
         leadOrActual: "lead",
         discordEnabled: false,
         discordMutedTypes: [],
@@ -62,6 +63,7 @@ describe("PreferencesForm", () => {
         mutedTypes: ["market:offer"],
         showCallsign: true,
         showVersionOverlay: true,
+        showBackgroundTexture: true,
         leadOrActual: "actual",
         discordEnabled: true,
         discordMutedTypes: ["market:offer"],