fix: admin panel fine-tuning (#125)

src/admin/games/views/html/games.page.tsx

@@ -1,8 +1,8 @@
 import type { User } from '../../../../auth/types/user'
 import { configuration } from '../../../../configuration'
-import { IconDeviceFloppy } from '../../../../html/components/icons'
 import { LogsTfUploadMethod } from '../../../../shared/types/logs-tf-upload-method'
 import { Admin } from '../../../views/html/admin'
+import { SaveButton } from '../../../views/html/save-button'
 
 export async function GamesPage(props: { user: User }) {
   const whitelistId = await configuration.get('games.whitelist_id')
@@ -14,7 +14,7 @@ export async function GamesPage(props: { user: User }) {
   return (
     <Admin activePage="games" user={props.user}>
       <form action="" method="post">
-        <div class="bg-abru-dark-25 mt-8 flex flex-col gap-4 rounded-2xl p-6">
+        <div class="admin-panel-set flex flex-col gap-4">
           <dl>
             <dt>
               <label for="whitelistId">Whitelist ID</label>
@@ -45,7 +45,7 @@ export async function GamesPage(props: { user: User }) {
                 />
                 <span class="text-white">seconds</span>
               </div>
-              <span class="text-abru-light-75 text-sm">
+              <span class="text-sm text-abru-light-75">
                 The time a player has to join the gameserver before they are getting subbed
                 automatically. Use 0 to disable.
               </span>
@@ -67,7 +67,7 @@ export async function GamesPage(props: { user: User }) {
                 />
                 <span class="text-white">seconds</span>
               </div>
-              <span class="text-abru-light-75 text-sm">
+              <span class="text-sm text-abru-light-75">
                 The time a player has to come back to the gameserver after they go offline during
                 the match. Use 0 to disable.
               </span>
@@ -82,7 +82,7 @@ export async function GamesPage(props: { user: User }) {
               <textarea rows="3" id="executeExtraCommands" name="executeExtraCommands">
                 {executeExtraCommands.join('\n')}
               </textarea>
-              <span class="text-abru-light-75 text-sm">
+              <span class="text-sm text-abru-light-75">
                 Extra commands to execute on the gameserver before the match starts. One command per
                 line.
               </span>
@@ -113,14 +113,11 @@ export async function GamesPage(props: { user: User }) {
               </select>
             </dd>
           </dl>
-        </div>
 
-        <p>
-          <button type="submit" class="button button--accent mt-6">
-            <IconDeviceFloppy />
-            Save
-          </button>
-        </p>
+          <p class="mt-2">
+            <SaveButton />
+          </p>
+        </div>
       </form>
     </Admin>
   )

src/admin/map-pool/views/html/map-pool.page.tsx

@@ -1,7 +1,8 @@
 import type { User } from '../../../../auth/types/user'
-import { IconDeviceFloppy, IconMinus, IconPlus } from '../../../../html/components/icons'
+import { IconMinus, IconPlus } from '../../../../html/components/icons'
 import { mapPool } from '../../../../queue/map-pool'
 import { Admin } from '../../../views/html/admin'
+import { SaveButton } from '../../../views/html/save-button'
 
 export async function MapPoolPage(props: { user: User }) {
   const maps = await mapPool.get()
@@ -35,14 +36,14 @@ export async function MapPoolPage(props: { user: User }) {
             <IconPlus />
             Add map
           </button>
-        </div>
 
-        <p>
-          <button type="submit" class="button button--accent mt-6">
-            <IconDeviceFloppy />
-            Save
-          </button>
-        </p>
+          <p class="mt-2 text-sm">
+            Making changes to the map pool will scramble the maps automatically.
+          </p>
+          <p>
+            <SaveButton />
+          </p>
+        </div>
       </form>
     </Admin>
   )

src/admin/player-restrictions/views/html/player-restrictions.page.tsx

@@ -2,6 +2,7 @@ import type { User } from '../../../../auth/types/user'
 import { configuration } from '../../../../configuration'
 import { Switch } from '../../../../html/components/switch'
 import { Admin } from '../../../views/html/admin'
+import { SaveButton } from '../../../views/html/save-button'
 
 export async function PlayerRestrictionsPage(props: { user: User }) {
   const etf2lAccountRequired = await configuration.get('players.etf2l_account_required')
@@ -13,16 +14,21 @@ export async function PlayerRestrictionsPage(props: { user: User }) {
   return (
     <Admin activePage="player-restrictions" user={props.user}>
       <form action="" method="post">
-        <div class="bg-abru-dark-25 mt-8 flex flex-col gap-4 rounded-2xl p-6">
-          <div class="flex flex-row items-center justify-between">
+        <div class="admin-panel-set flex flex-col gap-4">
+          <div class="group flex flex-row items-center justify-between">
             <dl>
               <dt>
                 <label class="text-abru-light-75" for="etf2lAccountRequired">
                   Require ETF2L account
                 </label>
               </dt>
               <dd class="text-abru-light-75">
-                Players that do not have an ETF2L profile will not be able to register
+                <span class="hidden group-has-[:checked]:inline-block">
+                  Players that do not have an ETF2L profile will not be able to register
+                </span>
+                <span class="group-has-[:checked]:hidden">
+                  All players will be able to register
+                </span>
               </dd>
             </dl>
 
@@ -47,16 +53,21 @@ export async function PlayerRestrictionsPage(props: { user: User }) {
             </dd>
           </dl>
 
-          <div class="flex flex-row items-center justify-between">
+          <div class="group flex flex-row items-center justify-between">
             <dl>
               <dt>
                 <label class="text-abru-light-75" for="denyPlayersWithNoSkillAssigned">
                   Deny players with no skill assigned
                 </label>
               </dt>
               <dd class="text-abru-light-75">
-                Players that have no skill assigned will be able to join the queue and the default
-                skill will be used for them when launching a game
+                <span class="hidden group-has-[:checked]:inline-block">
+                  Players with no skill assigned won't be allowed to join the queue
+                </span>
+                <span class="group-has-[:checked]:hidden">
+                  Players that have no skill assigned will be able to join the queue and the default
+                  skill will be used for them when launching a game
+                </span>
               </dd>
             </dl>
 
@@ -66,11 +77,11 @@ export async function PlayerRestrictionsPage(props: { user: User }) {
               name="denyPlayersWithNoSkillAssigned"
             />
           </div>
-        </div>
 
-        <button type="submit" class="button button--accent mt-6">
-          Save
-        </button>
+          <p>
+            <SaveButton />
+          </p>
+        </div>
       </form>
     </Admin>
   )

src/admin/view-for-nerds/index.ts

@@ -55,7 +55,7 @@ export default fp(
             authorize: [PlayerRole.admin],
           },
           schema: {
-            body: z.object({
+            querystring: z.object({
               key: z.custom<keyof Configuration>(v =>
                 configurationSchema.options.find(
                   option => option._def.shape().key._def.value === v,
@@ -65,7 +65,7 @@ export default fp(
           },
         },
         async (request, reply) => {
-          const { key } = request.body
+          const { key } = request.query
           const value = await configuration.reset(key)
           const defaultValue = configuration.getDefault(key)
           reply.html(await ConfigurationEntryEdit({ _key: key, value, defaultValue }))

src/admin/view-for-nerds/views/html/view-for-nerds.page.tsx

@@ -51,12 +51,13 @@ export function ConfigurationEntryEdit(props: {
   if (!isDefault) {
     resetButton = (
       <button
-        class="text-abru-light-60 align-middle"
+        class="align-middle text-abru-light-60"
         type="button"
         hx-delete="/admin/view-for-nerds"
         hx-trigger="click"
         hx-target="closest form"
         hx-swap="outerHTML"
+        hx-params="not value"
       >
         <span class="sr-only">Reset default</span>
         <IconArrowBackUp></IconArrowBackUp>
@@ -71,7 +72,7 @@ export function ConfigurationEntryEdit(props: {
       hx-swap="outerHTML"
     >
       <input type="hidden" name="key" value={props._key} />
-      <div class="text-abru-light-75 table-cell">
+      <div class="table-cell text-abru-light-75">
         <label for={`${props._key}-edit`} class={[isDefault && 'font-normal']}>
           {props._key}
         </label>

src/admin/views/html/save-button.tsx

@@ -0,0 +1,10 @@
+import { IconDeviceFloppy } from '../../../html/components/icons'
+
+export function SaveButton() {
+  return (
+    <button type="submit" class="button button--accent button--dense mt-2">
+      <IconDeviceFloppy size={20} />
+      <span>Save</span>
+    </button>
+  )
+}

src/admin/voice-server/views/html/voice-server.page.tsx

@@ -1,8 +1,8 @@
 import type { User } from '../../../../auth/types/user'
 import { configuration } from '../../../../configuration'
-import { IconDeviceFloppy } from '../../../../html/components/icons'
 import { VoiceServerType } from '../../../../shared/types/voice-server-type'
 import { Admin } from '../../../views/html/admin'
+import { SaveButton } from '../../../views/html/save-button'
 
 export async function VoiceServerPage(props: { user: User }) {
   const type = await configuration.get('games.voice_server_type')
@@ -133,14 +133,11 @@ export async function VoiceServerPage(props: { user: User }) {
               </dd>
             </dl>
           </fieldset>
-        </div>
 
-        <p>
-          <button type="submit" class="button button--accent mt-6">
-            <IconDeviceFloppy />
-            Save
-          </button>
-        </p>
+          <p class="mt-8">
+            <SaveButton />
+          </p>
+        </div>
       </form>
     </Admin>
   )

src/html/components/admin-panel.tsx

@@ -25,13 +25,13 @@ export function AdminPanelBody(props?: { children?: Children }) {
 }
 
 export function AdminPanelHeader(props?: { children?: Children }) {
-  return <h1 class="text-[32px] text-abru-light-75 mb-6">{props?.children}</h1>
+  return <h1 class="mb-4 text-[32px] text-abru-light-75">{props?.children}</h1>
 }
 
 export function AdminPanelContent(props?: { children?: Children }) {
-  return <div class="bg-abru-dark-25 rounded-2xl p-8">{props?.children}</div>
+  return <div class="rounded-2xl bg-abru-dark-25 p-8">{props?.children}</div>
 }
 
 export function AdminPanelGroup(props?: { children?: Children }) {
-  return <div class="bg-abru-light-5 rounded-lg">{props?.children}</div>
+  return <div class="rounded-lg bg-abru-light-5">{props?.children}</div>
 }

src/html/components/switch.tsx

@@ -6,7 +6,7 @@ export function Switch(props: JSX.HtmlInputTag) {
       <div class="bg-abru-light-90 absolute left-[10px] top-[6px] z-10 h-[12px] w-[2px] rounded-2xl"></div>
       <div class="absolute left-[29px] top-[6px] z-10 h-[12px] w-[12px] rounded-full border-2"></div>
 
-      <input type="checkbox" class={['size-full']} {...inputProps} />
+      <input type="checkbox" class="size-full" {...inputProps} />
       <span class="slider" />
     </label>
   )