overhaul

apps/web/src/components/startup-vars-card.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useStartupVariables, useUpdateStartupVariable } from '../api/hooks.js';
-import { Button, Card, EmptyState, Spinner } from './ui.js';
+import { STARTUP_MIRROR_HINTS } from './config/mirror-hints.js';
+import { Badge, Button, Card, EmptyState, Spinner, useToast } from './ui.js';
 
 /**
  * Pterodactyl egg startup variables (passwords, launch options, …). Values
@@ -14,15 +15,14 @@ export function StartupVarsCard({ slug }: { slug: string }) {
   const { data, isLoading, error } = useStartupVariables(slug, true);
   const update = useUpdateStartupVariable(slug);
   const [edits, setEdits] = useState<Record<string, string>>({});
-  const [message, setMessage] = useState<string | null>(null);
   const [revealed, setRevealed] = useState<Record<string, boolean>>({});
+  const toast = useToast();
 
   const isSecret = (name: string) => /password|token|secret|key/i.test(name);
 
   const saveVariable = (envVariable: string) => {
     const value = edits[envVariable];
     if (value === undefined) return;
-    setMessage(null);
     update.mutate(
       { key: envVariable, value },
       {
@@ -32,9 +32,9 @@ export function StartupVarsCard({ slug }: { slug: string }) {
             delete next[envVariable];
             return next;
           });
-          setMessage(`${envVariable} saved — applies on the next restart.`);
+          toast(`${envVariable} saved — applies on the next restart.`, 'ok');
         },
-        onError: (updateError) => setMessage(updateError.message),
+        onError: (updateError) => toast(updateError.message, 'danger'),
       },
     );
   };
@@ -58,12 +58,23 @@ export function StartupVarsCard({ slug }: { slug: string }) {
               return (
                 <li
                   key={variable.envVariable}
-                  className="flex flex-wrap items-center justify-between gap-3 rounded-md border border-graphite-800 px-3.5 py-2.5"
+                  className="flex flex-wrap items-center justify-between gap-3 rounded-sm border border-graphite-800 bg-graphite-950/40 px-3 py-2.5"
                 >
                   <div className="min-w-0 flex-1">
-                    <p className="text-sm text-zinc-200">
-                      {variable.name}{' '}
-                      <code className="ml-1 text-xs text-slate-dim">{variable.envVariable}</code>
+                    <p className="flex flex-wrap items-center gap-2 text-sm text-zinc-100">
+                      {variable.name}
+                      <code className="font-mono text-2xs text-slate-dim">
+                        {variable.envVariable}
+                      </code>
+                      {STARTUP_MIRROR_HINTS[variable.envVariable] && (
+                        <Badge
+                          tone="warn"
+                          icon="alert"
+                          title={`Also written into config.json at ${STARTUP_MIRROR_HINTS[variable.envVariable]}`}
+                        >
+                          templates {STARTUP_MIRROR_HINTS[variable.envVariable]}
+                        </Badge>
+                      )}
                     </p>
                     {variable.description && (
                       <p className="mt-0.5 text-xs text-slate-dim">{variable.description}</p>
@@ -82,6 +93,7 @@ export function StartupVarsCard({ slug }: { slug: string }) {
                     />
                     {secret && (
                       <Button
+                        size="sm"
                         onClick={() => setRevealed({ ...revealed, [variable.envVariable]: !shown })}
                       >
                         {shown ? 'Hide' : 'Show'}
@@ -91,15 +103,17 @@ export function StartupVarsCard({ slug }: { slug: string }) {
                       edited !== undefined &&
                       edited !== variable.value && (
                         <Button
+                          size="sm"
                           variant="accent"
-                          disabled={update.isPending}
+                          icon="upload"
+                          loading={update.isPending}
                           onClick={() => saveVariable(variable.envVariable)}
                         >
                           Save
                         </Button>
                       )
                     ) : (
-                      <span className="text-xs text-slate-dim">read-only</span>
+                      <Badge>read-only</Badge>
                     )}
                   </div>
                 </li>
@@ -107,10 +121,11 @@ export function StartupVarsCard({ slug }: { slug: string }) {
             })}
         </ul>
       )}
-      {message && <p className="mt-3 text-xs text-accent-400">{message}</p>}
-      <p className="mt-3 text-xs text-slate-dim">
-        These are the same variables as Pterodactyl's Startup tab (server passwords live here, not
-        in config.json). Changes apply on the next server restart.
+      <p className="mt-3 text-2xs leading-5 text-slate-dim">
+        These are the same variables as Pterodactyl&rsquo;s Startup tab; server passwords live here
+        rather than in config.json. Variables marked as templating a config path are re-applied to
+        config.json when the container boots, so they win over a direct file edit. Changes apply on
+        the next server restart.
       </p>
     </Card>
   );