BLD - Bump sky_phone version to 0.3.4

* 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>

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'")

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;

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>

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'),

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`,
+      )
+    }
+  })
+})

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',

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(

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,

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);

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 = {

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,

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",

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",

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",

sky_phone/fxmanifest.lua

@@ -6,7 +6,7 @@ use_experimental_fxv2_oal 'yes'
 
 author 'Sky-Systems'
 description 'Sky Phone'
-version '0.3.3'
+version '0.3.4'
 
 provide 'lb-phone'
 provide '17mov_Phone'

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",

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

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,