feat(ui): OS-aware search shortcuts and mobile settings titles

Show ⌘K or Ctrl+K by platform in the sidebar and command palette.
Add mobile-only section headers and descriptions on settings layouts.

resources/css/app.css

@@ -1079,6 +1079,33 @@ body.terminal-is-fullscreen .terminal-fullscreen-shell [data-terminal-mobile-too
     padding: 1rem;
 }
 
+.settings-mobile-header {
+    margin-bottom: 1.25rem;
+}
+
+.settings-mobile-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    line-height: 1.75rem;
+    letter-spacing: -0.025em;
+    color: #000000;
+}
+
+.dark .settings-mobile-title {
+    color: #ffffff;
+}
+
+.settings-mobile-description {
+    margin-top: 0.25rem;
+    font-size: 0.8125rem;
+    line-height: 1.25rem;
+    color: #737373;
+}
+
+.dark .settings-mobile-description {
+    color: var(--coollabs-subtle);
+}
+
 /* All settings sidebars share one alignment rule. Keep the sticky offset equal
    to the desktop main-content top padding so the menu does not jump upward
    when it changes from its natural position to sticky positioning. */

resources/views/components/navbar.blade.php

@@ -15,6 +15,12 @@
     @mouseleave="tooltip.show = false"
     x-data="{
         tooltip: { text: '', x: 0, y: 0, show: false },
+        // macOS/iOS use ⌘; Windows/Linux use Ctrl+
+        modKeyLabel: (() => {
+            const platform = navigator.userAgentData?.platform || navigator.platform || '';
+            const ua = navigator.userAgent || '';
+            return /Mac|iPhone|iPad|iPod/i.test(platform) || /Mac OS X|Macintosh/i.test(ua) ? '⌘' : 'Ctrl+';
+        })(),
         init() {
                 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
                     const userSettings = localStorage.getItem('theme');
@@ -45,7 +51,8 @@
     {{-- Search is only useful when workspace resources are available --}}
     @if (isSubscribed() || ! isCloud())
         <div class="px-1 pb-3" :class="collapsed && 'lg:px-0 lg:flex lg:justify-center'">
-            <button @click="$dispatch('open-global-search')" type="button" title="Search (Press / or ⌘K)"
+            <button @click="$dispatch('open-global-search')" type="button"
+                :title="'Search (Press / or ' + modKeyLabel + 'K)'"
                 class="menu-item justify-between !bg-neutral-100 dark:!bg-white/[0.04] hover:!bg-neutral-200 dark:hover:!bg-white/[0.07] !text-fg-faint"
                 :class="collapsed && 'lg:w-8 lg:justify-center lg:px-0'">
                 <span class="flex items-center gap-2.5 min-w-0">
@@ -53,7 +60,7 @@
                     <span class="menu-item-label" :class="collapsed && 'lg:hidden'">Search</span>
                 </span>
                 <kbd class="px-1.5 py-0.5 text-[11px] font-medium text-fg-faint bg-neutral-200 dark:bg-white/[0.06] rounded-md border border-transparent dark:border-white/5"
-                    :class="collapsed && 'lg:hidden'">⌘K</kbd>
+                    :class="collapsed && 'lg:hidden'" x-text="modKeyLabel + 'K'"></kbd>
             </button>
         </div>
     @endif

resources/views/components/notification/settings-layout.blade.php

@@ -9,7 +9,11 @@
     ];
 @endphp
 
-<section class="application-settings-workspace mt-4 w-full max-w-[1180px] lg:mt-0">
+<section class="application-settings-workspace w-full max-w-[1180px]">
+    <header class="settings-mobile-header xl:hidden">
+        <h1 class="settings-mobile-title">Notifications</h1>
+        <p class="settings-mobile-description">Configure how your team receives deployment and system alerts.</p>
+    </header>
     <div class="grid min-w-0 gap-8 xl:grid-cols-[210px_minmax(0,1fr)] xl:gap-10">
         <aside class="application-settings-navigation min-w-0 xl:self-start">
             <nav aria-label="Notification settings"

resources/views/components/security/settings-layout.blade.php

@@ -27,7 +27,11 @@
     ])->filter();
 @endphp
 
-<section class="application-settings-workspace mt-4 w-full max-w-[1180px] lg:mt-0">
+<section class="application-settings-workspace w-full max-w-[1180px]">
+    <header class="settings-mobile-header xl:hidden">
+        <h1 class="settings-mobile-title">Keys & Tokens</h1>
+        <p class="settings-mobile-description">Manage SSH keys, cloud credentials, and API access tokens.</p>
+    </header>
     <div class="grid min-w-0 gap-8 xl:grid-cols-[210px_minmax(0,1fr)] xl:gap-10">
         <aside class="application-settings-navigation min-w-0 xl:self-start">
             <nav aria-label="Keys and tokens"

resources/views/components/settings/layout.blade.php

@@ -14,7 +14,11 @@
     ];
 @endphp
 
-<section class="application-settings-workspace mt-4 w-full max-w-[1180px] lg:mt-0">
+<section class="application-settings-workspace w-full max-w-[1180px]">
+    <header class="settings-mobile-header xl:hidden">
+        <h1 class="settings-mobile-title">Instance Settings</h1>
+        <p class="settings-mobile-description">Configure global settings for this Coolify instance.</p>
+    </header>
     <div class="grid min-w-0 gap-8 xl:grid-cols-[210px_minmax(0,1fr)] xl:gap-10">
         <aside class="application-settings-navigation min-w-0 xl:self-start">
             <nav aria-label="Instance settings"

resources/views/components/team/settings-layout.blade.php

@@ -28,7 +28,11 @@
     ])->filter();
 @endphp
 
-<section class="application-settings-workspace mt-4 w-full max-w-[1180px] lg:mt-0">
+<section class="application-settings-workspace w-full max-w-[1180px]">
+    <header class="settings-mobile-header xl:hidden">
+        <h1 class="settings-mobile-title">Team</h1>
+        <p class="settings-mobile-description">Manage your team, members, and access settings.</p>
+    </header>
     <div class="grid min-w-0 gap-8 xl:grid-cols-[210px_minmax(0,1fr)] xl:gap-10">
         <aside class="application-settings-navigation min-w-0 xl:self-start">
             <nav aria-label="Team settings"

resources/views/livewire/global-search.blade.php

@@ -8,6 +8,12 @@
     searchQuery: '',
     creatableItems: [],
     isCreateMode: false,
+    // macOS/iOS use ⌘; Windows/Linux use Ctrl+
+    modKeyLabel: (() => {
+        const platform = navigator.userAgentData?.platform || navigator.platform || '';
+        const ua = navigator.userAgent || '';
+        return /Mac|iPhone|iPad|iPod/i.test(platform) || /Mac OS X|Macintosh/i.test(ua) ? '⌘' : 'Ctrl+';
+    })(),
 
     // Client-side search function
     get searchResults() {
@@ -313,7 +319,7 @@
                         class="command-palette-input" autocomplete="off" spellcheck="false" />
                     <div class="command-palette-shortcuts">
                         <span class="command-palette-kbd">/</span>
-                        <span class="command-palette-kbd">⌘K</span>
+                        <span class="command-palette-kbd" x-text="modKeyLabel + 'K'"></span>
                         <button type="button" @click="closeModal()" class="command-palette-kbd" title="Close">
                             ESC
                         </button>