From bbc2cbe00049b35c96476945d74295d10f100d35 Mon Sep 17 00:00:00 2001
From: Dominik9906 <dominik.hammer0906@gmail.com>
Date: Mon, 31 Aug 2026 15:46:31 +0200
Subject: [PATCH] FIX - repair phone UI clipping and app lifecycle (#48)

* FIX - UI and Bug Fix

* FIX - remove hardware button focus box

* ENH - configure radio job permissions

* FIX - keep native dropdown options readable

---------

Co-authored-by: DerEchteAlec <alec.schitzkat@luwan.io>
---
 .../AppDevelopmentPreview.contract.test.ts    | 12 +++
 frontend/src/assets/main.css                  | 24 +++++-
 .../src/components/AdminConfigValueEditor.vue | 32 ++++++-
 frontend/src/components/AdminPanel.vue        |  2 +
 .../src/radioConfigurator.contract.test.ts    | 85 +++++++++++++++++++
 frontend/src/stores/phone.ts                  |  2 +
 frontend/src/ui/controls.css                  |  5 +-
 frontend/src/ui/controls/SkyField.test.ts     | 17 ++++
 frontend/src/ui/tokens.css                    |  2 +
 .../utils/adminConfiguratorDefaults.test.ts   | 32 +++++++
 sky_phone/config/config.lua                   |  3 +-
 sky_phone/config/locales/de.lua               |  2 +
 sky_phone/config/locales/en.lua               |  2 +
 sky_phone/config/locales/es.lua               |  2 +
 .../source/server/phone_configurator.lua      | 32 ++++++-
 sky_phone/source/server/radio.lua             |  6 ++
 sky_phone/source/shared/config_default.lua    |  3 +-
 17 files changed, 251 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/radioConfigurator.contract.test.ts

diff --git a/frontend/src/AppDevelopmentPreview.contract.test.ts b/frontend/src/AppDevelopmentPreview.contract.test.ts
index 26e599a..7e8fa4b 100644
--- a/frontend/src/AppDevelopmentPreview.contract.test.ts
+++ b/frontend/src/AppDevelopmentPreview.contract.test.ts
@@ -84,6 +84,18 @@ describe('browser development preview contract', () => {
       /\.phone-home-indicator:focus-visible span\s*\{[^}]*0 0 0 2px #0a84ff,/s,
     )
   })
+  
+   it('replaces rectangular CEF focus outlines on the side hardware controls', () => {
+    expect(mainCss).toMatch(
+      /\.phone-hardware-button:focus\s*\{[^}]*outline:\s*none;/s,
+    )
+    expect(mainCss).toMatch(
+      /\.phone-hardware-button:focus-visible::after\s*\{[^}]*width:\s*3px;[^}]*height:\s*24px;[^}]*border-radius:\s*999px;[^}]*background:\s*#0a84ff;/s,
+    )
+    expect(mainCss).not.toMatch(
+      /\.phone-hardware-button:focus-visible\s*\{[^}]*outline:/s,
+    )
+  })
 
   it('consumes Escape synchronously before FiveM can open the pause menu', () => {
     expect(source).toContain("import { consumeEscape } from '@/utils/keyboard'")
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 69214a3..a9dbbbb 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -380,9 +380,27 @@ button {
 .phone-hardware-button:disabled {
   cursor: default;
 }
-.phone-hardware-button:focus-visible {
-  outline: 2px solid #fff;
-  outline-offset: -6px;
+.phone-hardware-button:focus {
+  outline: none;
+}
+.phone-hardware-button:focus-visible::after {
+  position: absolute;
+  top: 50%;
+  width: 3px;
+  height: 24px;
+  border-radius: 999px;
+  background: #0a84ff;
+  box-shadow: 0 0 0 1px rgb(255 255 255 / 90%);
+  content: '';
+  transform: translateY(-50%);
+}
+.phone-hardware-button--action:focus-visible::after,
+.phone-hardware-button--volume-up:focus-visible::after,
+.phone-hardware-button--volume-down:focus-visible::after {
+  right: 7px;
+}
+.phone-hardware-button--power:focus-visible::after {
+  left: 7px;
 }
 .phone-hardware-button--action {
   top: 176px;
diff --git a/frontend/src/components/AdminConfigValueEditor.vue b/frontend/src/components/AdminConfigValueEditor.vue
index 4c5e2a0..d07875b 100644
--- a/frontend/src/components/AdminConfigValueEditor.vue
+++ b/frontend/src/components/AdminConfigValueEditor.vue
@@ -18,6 +18,7 @@ import type { AdminConfiguratorDescribe } from '@/utils/adminConfiguratorDescrip
 
 export type AdminConfigEditorLabels = {
   addField: string
+  addJob: string
   addRow: string
   configuredSecret: string
   convertToList: string
@@ -27,6 +28,7 @@ export type AdminConfigEditorLabels = {
   emptyTable: string
   entry: string
   general: string
+  jobPlaceholder: string
   keyPlaceholder: string
   list: string
   remove: string
@@ -149,6 +151,11 @@ const canExtendTable = computed(
     !vectorType.value &&
     (!tableStructure.value || tableStructure.value.mutableKeys === true),
 )
+const isJobTable = computed(
+  () =>
+    props.path === 'Radio.DisplayName.AllowedJobs' ||
+    /^Radio\.LockedChannels\[\d+\]\.jobs$/.test(props.path),
+)
 const usesFixedTableLayout = computed(
   () =>
     Boolean(tableStructure.value) && tableStructure.value?.mutableKeys !== true,
@@ -371,6 +378,19 @@ function updateOptionalString(event: Event): void {
   }
 }
 
+function updateNewObjectKey(event: Event): void {
+  const target = event.target
+  if (!(target instanceof HTMLInputElement)) return
+  const value = isJobTable.value
+    ? target.value
+        .toLowerCase()
+        .replace(/[^a-z0-9_-]/g, '')
+        .slice(0, 64)
+    : target.value
+  newObjectKey.value = value
+  target.value = value
+}
+
 function toggleOptionalString(event: Event): void {
   const target = event.target
   if (!(target instanceof HTMLInputElement)) return
@@ -1015,11 +1035,15 @@ function mapEntryStructure(
       @submit.prevent="addTableField"
     >
       <input
-        v-model="newObjectKey"
+        :value="newObjectKey"
         type="text"
         :disabled="disabled"
-        :placeholder="labels.keyPlaceholder"
-        :aria-label="labels.keyPlaceholder"
+        :placeholder="
+          isJobTable ? labels.jobPlaceholder : labels.keyPlaceholder
+        "
+        :aria-label="isJobTable ? labels.jobPlaceholder : labels.keyPlaceholder"
+        autocomplete="off"
+        @input="updateNewObjectKey"
       />
       <select
         v-if="!tableStructure"
@@ -1039,7 +1063,7 @@ function mapEntryStructure(
         {{ structureTypeLabel(tableStructure.template) }}
       </span>
       <button type="submit" :disabled="disabled || !canAddTableField">
-        <Plus :size="13" />{{ labels.addField }}
+        <Plus :size="13" />{{ isJobTable ? labels.addJob : labels.addField }}
       </button>
     </form>
   </div>
diff --git a/frontend/src/components/AdminPanel.vue b/frontend/src/components/AdminPanel.vue
index df1d70f..47628d7 100644
--- a/frontend/src/components/AdminPanel.vue
+++ b/frontend/src/components/AdminPanel.vue
@@ -403,6 +403,7 @@ function configuratorDescription(
 
 const configuratorEditorLabels = computed<AdminConfigEditorLabels>(() => ({
   addField: t('configurator.table.addField'),
+  addJob: t('configurator.table.addJob'),
   addRow: t('configurator.table.addRow'),
   configuredSecret: t('configurator.secretConfigured'),
   convertToList: t('configurator.table.convertToList'),
@@ -412,6 +413,7 @@ const configuratorEditorLabels = computed<AdminConfigEditorLabels>(() => ({
   emptyTable: t('configurator.table.emptyTable'),
   entry: t('configurator.table.entry'),
   general: configuratorLocaleText('configurator.table.general', 'General'),
+  jobPlaceholder: t('configurator.table.jobPlaceholder'),
   keyPlaceholder: t('configurator.table.keyPlaceholder'),
   list: t('configurator.table.list'),
   remove: t('configurator.table.remove'),
diff --git a/frontend/src/radioConfigurator.contract.test.ts b/frontend/src/radioConfigurator.contract.test.ts
new file mode 100644
index 0000000..741acf8
--- /dev/null
+++ b/frontend/src/radioConfigurator.contract.test.ts
@@ -0,0 +1,85 @@
+import { readFileSync } from 'node:fs'
+
+import { describe, expect, it } from 'vitest'
+
+const resourceSource = (path: string): string =>
+  readFileSync(new URL(`../../sky_phone/${path}`, import.meta.url), 'utf8')
+
+const configSource = resourceSource('config/config.lua')
+const configuratorSource = resourceSource(
+  'source/server/phone_configurator.lua',
+)
+const radioSource = resourceSource('source/server/radio.lua')
+const editorSource = readFileSync(
+  new URL('./components/AdminConfigValueEditor.vue', import.meta.url),
+  'utf8',
+)
+
+describe('radio configurator access contract', () => {
+  it('lets the server allow everyone or enforce configured job grades', () => {
+    expect(configSource).toMatch(
+      /DisplayName\s*=\s*\{[\s\S]*?AllowEveryone\s*=\s*false,[\s\S]*?AllowedJobs\s*=\s*\{/,
+    )
+
+    const start = radioSource.indexOf(
+      'local function can_set_display_name(source)',
+    )
+    const end = radioSource.indexOf(
+      '\nlocal function normalize_display_name',
+      start,
+    )
+    const permissionSource = radioSource.slice(start, end)
+
+    expect(permissionSource).toContain('if config.AllowEveryone == true then')
+    expect(permissionSource.indexOf('config.AllowEveryone')).toBeLessThan(
+      permissionSource.indexOf('Bridge.Framework.GetJob(source)'),
+    )
+    expect(permissionSource).toContain('config.AllowedJobs[job.name]')
+    expect(permissionSource).toContain('(tonumber(job.grade) or 0)')
+  })
+
+  it('keeps both radio job tables mutable and validates their value types', () => {
+    expect(configuratorSource).toContain(
+      'path == "Radio.DisplayName.AllowedJobs"',
+    )
+    expect(configuratorSource).toContain(
+      'path:match("^Radio%.LockedChannels%.%d+%.jobs$")',
+    )
+    expect(configuratorSource).toContain(
+      'path == "Companies.Definitions" or radio_job_entry_default(path) ~= nil',
+    )
+    expect(configuratorSource).toMatch(
+      /entryDefault = radio_job_default,[\s\S]*?mutableKeys = true,[\s\S]*?valueType = type\(radio_job_default\)/,
+    )
+    expect(configuratorSource).toContain('not key:match("^[a-z0-9_-]+$")')
+  })
+
+  it('shows a compact job-name input for both radio job tables', () => {
+    expect(editorSource).toContain(
+      "props.path === 'Radio.DisplayName.AllowedJobs'",
+    )
+    expect(editorSource).toContain(
+      String.raw`/^Radio\.LockedChannels\[\d+\]\.jobs$/`,
+    )
+    expect(editorSource).toContain(
+      'isJobTable ? labels.jobPlaceholder : labels.keyPlaceholder',
+    )
+    expect(editorSource).toContain(
+      'isJobTable ? labels.addJob : labels.addField',
+    )
+    expect(editorSource).toContain('function updateNewObjectKey(event: Event)')
+    expect(editorSource).toContain('.toLowerCase()')
+    expect(editorSource).toContain(".replace(/[^a-z0-9_-]/g, '')")
+    expect(editorSource).toContain('.slice(0, 64)')
+
+    for (const locale of ['en', 'de', 'es']) {
+      const localeSource = resourceSource(`config/locales/${locale}.lua`)
+      expect(localeSource).toContain(
+        `Locales["${locale}"].Nui.AdminPanel.configurator.table.addJob`,
+      )
+      expect(localeSource).toContain(
+        `Locales["${locale}"].Nui.AdminPanel.configurator.table.jobPlaceholder`,
+      )
+    }
+  })
+})
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index ad097ea..fa440ee 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -1009,10 +1009,12 @@ const adminPanelFallbackLocales = {
       },
       addRow: 'Add row',
       addField: 'Add field',
+      addJob: 'Add job',
       remove: 'Remove',
       emptyList: 'No rows yet. Add the first row with plus.',
       emptyTable: 'No fields yet. Add the first key below.',
       keyPlaceholder: 'New key',
+      jobPlaceholder: 'Job name',
       convertToList: 'Use list',
       convertToMap: 'Use typed key table',
       convertToTable: 'Use key table',
diff --git a/frontend/src/ui/controls.css b/frontend/src/ui/controls.css
index f0743fd..295e738 100644
--- a/frontend/src/ui/controls.css
+++ b/frontend/src/ui/controls.css
@@ -1265,8 +1265,9 @@ label.sky-list-item__row {
   opacity: 0;
 }
 
-.sky-field--floating-label .sky-field__select option {
-  color: var(--sky-text, #000000);
+.sky-field__select option {
+  background: var(--sky-native-select-option-background, #ffffff);
+  color: var(--sky-native-select-option-text, #000000);
 }
 
 .sky-field--floating-label.sky-field--outline:not(
diff --git a/frontend/src/ui/controls/SkyField.test.ts b/frontend/src/ui/controls/SkyField.test.ts
index 1c534ff..a474c04 100644
--- a/frontend/src/ui/controls/SkyField.test.ts
+++ b/frontend/src/ui/controls/SkyField.test.ts
@@ -164,6 +164,23 @@ describe('SkyField', () => {
     )
   })
 
+  it('keeps native select options readable on the CEF popup surface', () => {
+    const controls = readFileSync(
+      new URL('../controls.css', import.meta.url),
+      'utf8',
+    )
+    const tokens = readFileSync(
+      new URL('../tokens.css', import.meta.url),
+      'utf8',
+    )
+
+    expect(controls).toMatch(
+      /\.sky-field__select option\s*\{[^}]*background:\s*var\(--sky-native-select-option-background, #ffffff\);[^}]*color:\s*var\(--sky-native-select-option-text, #000000\);/s,
+    )
+    expect(tokens).toContain('--sky-native-select-option-background: #ffffff;')
+    expect(tokens).toContain('--sky-native-select-option-text: #000000;')
+  })
+
   it('raises floating labels only after the field has a value', async () => {
     const emptyApp = createSSRApp(SkyField, {
       floatingLabel: true,
diff --git a/frontend/src/ui/tokens.css b/frontend/src/ui/tokens.css
index 8653366..efd060c 100644
--- a/frontend/src/ui/tokens.css
+++ b/frontend/src/ui/tokens.css
@@ -188,6 +188,8 @@
   --sky-hairline: rgba(0, 0, 0, 0.2);
   --sky-field-outline: rgba(0, 0, 0, 0.3);
   --sky-field-placeholder: rgba(0, 0, 0, 0.3);
+  --sky-native-select-option-background: #ffffff;
+  --sky-native-select-option-text: #000000;
   --sky-pressed: rgba(0, 0, 0, 0.1);
   --sky-tabbar-highlight-background: rgba(0, 0, 0, 0.1);
   --sky-tabbar-thumb-background: rgba(0, 0, 0, 0.05);
diff --git a/frontend/src/utils/adminConfiguratorDefaults.test.ts b/frontend/src/utils/adminConfiguratorDefaults.test.ts
index c2824be..9fe54f8 100644
--- a/frontend/src/utils/adminConfiguratorDefaults.test.ts
+++ b/frontend/src/utils/adminConfiguratorDefaults.test.ts
@@ -114,6 +114,38 @@ describe('admin configurator defaults', () => {
       false,
     )
   })
+  
+  it('uses the configured access value when adding radio jobs', () => {
+    const channelJobs: AdminConfiguratorStructure = {
+      entryDefault: true,
+      fields: {},
+      kind: 'table',
+      mutableKeys: true,
+      template: { kind: 'value', valueType: 'boolean' },
+    }
+    const displayNameJobs: AdminConfiguratorStructure = {
+      entryDefault: 0,
+      fields: {},
+      kind: 'table',
+      mutableKeys: true,
+      template: { kind: 'value', valueType: 'number' },
+    }
+
+    expect(
+      createMutableTableEntry(
+        channelJobs,
+        'Radio.LockedChannels[1].jobs',
+        'mechanic',
+      ),
+    ).toBe(true)
+    expect(
+      createMutableTableEntry(
+        displayNameJobs,
+        'Radio.DisplayName.AllowedJobs',
+        'mechanic',
+      ),
+    ).toBe(0)
+  })
 
   it('preserves required nested list fields in schema-derived rows', () => {
     const structure: AdminConfiguratorStructure = {
diff --git a/sky_phone/config/config.lua b/sky_phone/config/config.lua
index 3a3156b..bfdc9a5 100644
--- a/sky_phone/config/config.lua
+++ b/sky_phone/config/config.lua
@@ -243,8 +243,9 @@ Config.Radio = {
     AutoRejoin = false,
     DisplayName = {
         Enabled = true,
+        AllowEveryone = false, -- true allows every job; false uses AllowedJobs and its minimum grades
         MaxLength = 32,
-        AllowedJobs = { -- Job name = minimum grade. Unlisted jobs cannot set a radio display name.
+        AllowedJobs = { -- Job name = minimum grade. Used when AllowEveryone is false.
             police = 0,
             sheriff = 0,
             fib = 0,
diff --git a/sky_phone/config/locales/de.lua b/sky_phone/config/locales/de.lua
index f0eb1f0..73e35f2 100644
--- a/sky_phone/config/locales/de.lua
+++ b/sky_phone/config/locales/de.lua
@@ -2141,6 +2141,8 @@ Locales["de"] = {
     },
 }
 
+Locales["de"].Nui.AdminPanel.configurator.table.addJob = "Job hinzufügen"
+Locales["de"].Nui.AdminPanel.configurator.table.jobPlaceholder = "Jobname"
 Locales["de"].Nui.AdminPanel.configurator.table.subtabs = {
     Dictionaries = "Animationsdateien",
     Clips = "Clips",
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index c2a138e..b18481a 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -2141,6 +2141,8 @@ Locales["en"] = {
     },
 }
 
+Locales["en"].Nui.AdminPanel.configurator.table.addJob = "Add job"
+Locales["en"].Nui.AdminPanel.configurator.table.jobPlaceholder = "Job name"
 Locales["en"].Nui.AdminPanel.configurator.table.subtabs = {
     Dictionaries = "Dictionaries",
     Clips = "Clips",
diff --git a/sky_phone/config/locales/es.lua b/sky_phone/config/locales/es.lua
index 684e9a4..01ca2fc 100644
--- a/sky_phone/config/locales/es.lua
+++ b/sky_phone/config/locales/es.lua
@@ -2141,6 +2141,8 @@ Locales["es"] = {
     },
 }
 
+Locales["es"].Nui.AdminPanel.configurator.table.addJob = "Añadir trabajo"
+Locales["es"].Nui.AdminPanel.configurator.table.jobPlaceholder = "Nombre del trabajo"
 Locales["es"].Nui.AdminPanel.configurator.table.subtabs = {
     Dictionaries = "Diccionarios",
     Clips = "Los clips",
diff --git a/sky_phone/source/server/phone_configurator.lua b/sky_phone/source/server/phone_configurator.lua
index dcac43e..c17af20 100644
--- a/sky_phone/source/server/phone_configurator.lua
+++ b/sky_phone/source/server/phone_configurator.lua
@@ -275,12 +275,22 @@ local function upgrade_legacy_map(defaults, saved)
     return { __skyType = "map", entries = entries }
 end
 
+local function radio_job_entry_default(path)
+    if path == "Radio.DisplayName.AllowedJobs" then
+        return 0
+    end
+    if type(path) == "string" and path:match("^Radio%.LockedChannels%.%d+%.jobs$") then
+        return true
+    end
+    return nil
+end
+
 local function merge_values(defaults, saved, path, excluded_paths)
     path = path or ""
     if type(defaults) ~= "table" or type(saved) ~= "table" then
         return copy_value(saved)
     end
-    if path == "Companies.Definitions" then
+    if path == "Companies.Definitions" or radio_job_entry_default(path) ~= nil then
         return copy_value(saved)
     end
     if defaults.__skyType == "map" and not saved.__skyType then
@@ -493,6 +503,16 @@ local function empty_structure(scope, path)
     if scope ~= "config" then
         return nil
     end
+    local radio_job_default = radio_job_entry_default(path)
+    if radio_job_default ~= nil then
+        return {
+            entryDefault = radio_job_default,
+            fields = {},
+            kind = "table",
+            mutableKeys = true,
+            template = { kind = "value", valueType = type(radio_job_default) },
+        }
+    end
     if path == "Garage.VehicleImages.ModelNames" then
         return {
             entries = {},
@@ -728,6 +748,16 @@ local function build_structure(value, scope, path)
     for key, child in pairs(value) do
         fields[key] = build_structure(child, scope, path .. "." .. tostring(key))
     end
+    local radio_job_default = scope == "config" and radio_job_entry_default(path) or nil
+    if radio_job_default ~= nil then
+        return {
+            entryDefault = radio_job_default,
+            fields = fields,
+            kind = "table",
+            mutableKeys = true,
+            template = { kind = "value", valueType = type(radio_job_default) },
+        }
+    end
     return {
         fields = fields,
         kind = "table",
diff --git a/sky_phone/source/server/radio.lua b/sky_phone/source/server/radio.lua
index 64d5fd9..678d556 100644
--- a/sky_phone/source/server/radio.lua
+++ b/sky_phone/source/server/radio.lua
@@ -50,8 +50,14 @@ local function can_set_display_name(source)
     if type(config) ~= "table" or not config.Enabled then
         return false
     end
+    if config.AllowEveryone == true then
+        return true
+    end
 
     local job = Bridge.Framework.GetJob(source)
+    if type(job) ~= "table" or type(job.name) ~= "string" then
+        return false
+    end
     local minimum_grade = type(config.AllowedJobs) == "table" and tonumber(config.AllowedJobs[job.name]) or nil
     return minimum_grade ~= nil and (tonumber(job.grade) or 0) >= minimum_grade
 end
diff --git a/sky_phone/source/shared/config_default.lua b/sky_phone/source/shared/config_default.lua
index e8d1c48..cbd5398 100644
--- a/sky_phone/source/shared/config_default.lua
+++ b/sky_phone/source/shared/config_default.lua
@@ -202,8 +202,9 @@ Config.Radio = {
     AutoRejoin = false,
     DisplayName = {
         Enabled = true,
+        AllowEveryone = false, -- true allows every job; false uses AllowedJobs and its minimum grades
         MaxLength = 32,
-        AllowedJobs = { -- Job name = minimum grade. Unlisted jobs cannot set a radio display name.
+        AllowedJobs = { -- Job name = minimum grade. Used when AllowEveryone is false.
             police = 0,
             sheriff = 0,
             fib = 0,