Branding

apps/gnome-extension/jarvis@qvac.local/settings-window.js

@@ -2,17 +2,61 @@ import Adw from 'gi://Adw';
 import Gio from 'gi://Gio';
 import GLib from 'gi://GLib';
 import Gtk from 'gi://Gtk';
+import Gdk from 'gi://Gdk';
 import { SettingsEditor } from './settings-editor.js';
+import { BRAND, normalizeAccent } from './brand.js';
 
 const BUS = 'io.qvac.Jarvis';
 const PATH = '/io/qvac/Jarvis';
 const IFACE = 'io.qvac.Jarvis.Session';
 const OVERLAY_STYLES = ['tray', 'expanded'];
 
-function entryRow(settings, title, key) {
-  const row = new Adw.EntryRow({ title });
-  row.set_text(settings.get_string(key));
-  row.connect('changed', () => settings.set_string(key, row.get_text()));
+function applyBrandCss(directory) {
+  try {
+    const css = new Gtk.CssProvider();
+    css.load_from_path(`${directory}/brand/gtk.css`);
+    Gtk.StyleContext.add_provider_for_display(Gdk.Display.get_default(), css, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+  } catch {}
+}
+
+function brandBanner(directory) {
+  const row = new Adw.ActionRow({ title: BRAND.product, subtitle: BRAND.tagline });
+  try {
+    const image = Gtk.Image.new_from_file(`${directory}/brand/icons/jarvis-mark.svg`);
+    image.set_pixel_size(36);
+    row.add_prefix(image);
+  } catch {}
+  row.activatable = false;
+  return row;
+}
+
+function accentRow(settings) {
+  const current = normalizeAccent(settings.get_string('accent-color'));
+  const row = new Adw.ActionRow({
+    title: 'Accent color',
+    subtitle: 'Gold is the Jarvis default. This tints the HUD immediately.',
+  });
+  const box = new Gtk.Box({ spacing: 6, valign: Gtk.Align.CENTER });
+  for (const accent of BRAND.accents) {
+    const button = new Gtk.Button({ tooltip_text: accent.label, valign: Gtk.Align.CENTER });
+    button.add_css_class('circular');
+    button.add_css_class('jarvis-swatch');
+    button.add_css_class(`jarvis-swatch-${accent.id}`);
+    button.set_size_request(24, 24);
+    button.connect('clicked', () => settings.set_string('accent-color', accent.value));
+    box.append(button);
+  }
+  const entry = new Gtk.Entry({ text: current, width_chars: 8, maxlength: 7, valign: Gtk.Align.CENTER });
+  entry.connect('changed', () => {
+    const value = normalizeAccent(entry.get_text(), '');
+    if (value) settings.set_string('accent-color', value);
+  });
+  settings.connect('changed::accent-color', () => {
+    const value = normalizeAccent(settings.get_string('accent-color'));
+    if (entry.get_text() !== value) entry.set_text(value);
+  });
+  row.add_suffix(box);
+  row.add_suffix(entry);
   return row;
 }
 
@@ -107,11 +151,14 @@ function grantRow() {
 }
 
 export function fillSettingsWindow(window, settings, directory) {
-    window.set_title('Jarvis QVAC');
+    window.set_title(BRAND.product);
     window.set_default_size(840, 780);
     window.search_enabled = true;
+    applyBrandCss(directory);
     const editor = new SettingsEditor(directory, settings);
-    const voice = editor.page(window, 'Voice', ['Speech', 'Voice design'], 'audio-speakers-symbolic', true);
+    const intro = new Adw.PreferencesGroup();
+    intro.add(brandBanner(directory));
+    const voice = editor.page(window, 'Voice', ['Speech', 'Voice design'], 'audio-speakers-symbolic', true, intro);
     window.add(voice);
     const listening = editor.page(window, 'Listening', ['Listening', 'Wake and privacy', 'Detection tuning', 'Audio routing'], 'audio-input-microphone-symbolic');
     window.add(listening);
@@ -119,7 +166,7 @@ export function fillSettingsWindow(window, settings, directory) {
     const desktop = editor.page(window, 'Desktop', ['Desktop access', 'Desktop images'], 'preferences-desktop-display-symbolic');
     const desktopGroup = new Adw.PreferencesGroup({ title: 'Overlay and shortcuts', description: 'These appearance settings take effect immediately.' });
     desktopGroup.add(strvRow(settings, 'Hotkey', 'hotkey'));
-    desktopGroup.add(entryRow(settings, 'Accent color', 'accent-color'));
+    desktopGroup.add(accentRow(settings));
     desktopGroup.add(comboRow(settings, 'Desktop layout', 'Tray keeps Jarvis in the top bar; expanded opens a conversation panel', 'overlay-style', OVERLAY_STYLES));
     desktop.add(desktopGroup);
     const grantGroup = new Adw.PreferencesGroup({ title: 'Temporary desktop access' });