From 4efe306b3acb5ae7b8defb45945c690266c9389c Mon Sep 17 00:00:00 2001
From: Bossiara13 <236771060+DmitryBykov-ISPO@users.noreply.github.com>
Date: Sat, 16 May 2026 00:48:23 +0300
Subject: [PATCH] feat(gui): profile switcher chip in header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Visible visual indicator of the active profile + click-to-swap dropdown.
Closes the last small UX gap pointed out in earlier sessions.

Tauri (crates/jarvis-gui/src/tauri_commands/profile.rs)
  - profile_list()   → Vec<String> of available profile names
  - profile_active() → {name, description, icon, greeting}
  - profile_set(name) → swaps active profile, returns new active

Frontend (frontend/src/components/Header.svelte)
  - Polls profile_active every 5 seconds.
  - Shows a coloured chip with icon+name when profile != "default"
    (orange tint, attention-grabbing). For "default" — muted star chip.
  - Click opens a dropdown listing all profile names; click one → swap.
  - Dropdown closes on outside-click (shared handler with lang dropdown).
  - SCSS styled to match existing aesthetic.

Build: cargo build --release -p jarvis-gui green (2m).

Now the user can see at a glance which profile is active (e.g. "💼 work")
without having to ask voice or open Settings.
---
 crates/jarvis-gui/src/main.rs                 |   5 +
 crates/jarvis-gui/src/tauri_commands.rs       |   6 +-
 .../jarvis-gui/src/tauri_commands/profile.rs  |  38 ++++
 frontend/src/components/Header.svelte         | 182 +++++++++++++++++-
 4 files changed, 225 insertions(+), 6 deletions(-)
 create mode 100644 crates/jarvis-gui/src/tauri_commands/profile.rs

diff --git a/crates/jarvis-gui/src/main.rs b/crates/jarvis-gui/src/main.rs
index 312a19a..ed7fec8 100644
--- a/crates/jarvis-gui/src/main.rs
+++ b/crates/jarvis-gui/src/main.rs
@@ -128,6 +128,11 @@ fn main() {
             tauri_commands::memory_remember,
             tauri_commands::memory_forget,
             tauri_commands::memory_search,
+
+            // Profile switching
+            tauri_commands::profile_list,
+            tauri_commands::profile_active,
+            tauri_commands::profile_set,
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
diff --git a/crates/jarvis-gui/src/tauri_commands.rs b/crates/jarvis-gui/src/tauri_commands.rs
index c507333..776a448 100644
--- a/crates/jarvis-gui/src/tauri_commands.rs
+++ b/crates/jarvis-gui/src/tauri_commands.rs
@@ -53,4 +53,8 @@ pub use scheduler::*;
 
 // Long-term memory facts
 mod memory;
-pub use memory::*;
\ No newline at end of file
+pub use memory::*;
+
+// Profile switching
+mod profile;
+pub use profile::*;
\ No newline at end of file
diff --git a/crates/jarvis-gui/src/tauri_commands/profile.rs b/crates/jarvis-gui/src/tauri_commands/profile.rs
new file mode 100644
index 0000000..659e0c6
--- /dev/null
+++ b/crates/jarvis-gui/src/tauri_commands/profile.rs
@@ -0,0 +1,38 @@
+//! Tauri commands for profile switching.
+
+use serde::Serialize;
+
+#[derive(Serialize)]
+pub struct ProfileInfo {
+    pub name: String,
+    pub description: String,
+    pub icon: String,
+    pub greeting: String,
+}
+
+#[tauri::command]
+pub fn profile_list() -> Vec<String> {
+    jarvis_core::profiles::list()
+}
+
+#[tauri::command]
+pub fn profile_active() -> ProfileInfo {
+    let p = jarvis_core::profiles::active();
+    ProfileInfo {
+        name: p.name,
+        description: p.description,
+        icon: p.icon,
+        greeting: p.greeting,
+    }
+}
+
+#[tauri::command]
+pub fn profile_set(name: String) -> Result<ProfileInfo, String> {
+    let p = jarvis_core::profiles::set_active(&name)?;
+    Ok(ProfileInfo {
+        name: p.name,
+        description: p.description,
+        icon: p.icon,
+        greeting: p.greeting,
+    })
+}
diff --git a/frontend/src/components/Header.svelte b/frontend/src/components/Header.svelte
index c6a8161..fe42496 100644
--- a/frontend/src/components/Header.svelte
+++ b/frontend/src/components/Header.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { goto } from "@roxi/routify"
     import { invoke } from "@tauri-apps/api/core"
-    import { onMount } from "svelte"
+    import { onMount, onDestroy } from "svelte"
     import { currentLanguage, setLanguage, translations, translate } from "@/stores"
-    
+
     let appVersion = ""
     let commandsCount = 0
 
@@ -16,12 +16,52 @@
         { code: "ua", label: "UA", flag: "🇺🇦", name: "Українська" },
     ]
 
+    // Profile chip — shows the active profile icon + name, click to swap.
+    interface ProfileInfo {
+        name: string
+        description: string
+        icon: string
+        greeting: string
+    }
+    let activeProfile: ProfileInfo | null = null
+    let profileNames: string[] = []
+    let profileDropdownOpen = false
+    let profilePoll: ReturnType<typeof setInterval> | null = null
+
+    async function refreshProfile() {
+        try {
+            activeProfile = await invoke<ProfileInfo>("profile_active")
+        } catch { /* ignore */ }
+    }
+
+    async function loadProfileNames() {
+        try {
+            profileNames = await invoke<string[]>("profile_list")
+        } catch { /* ignore */ }
+    }
+
+    async function selectProfile(name: string) {
+        try {
+            activeProfile = await invoke<ProfileInfo>("profile_set", { name })
+        } catch (err) {
+            console.error("profile set failed:", err)
+        }
+        profileDropdownOpen = false
+    }
+
+    function toggleProfileDropdown(e: MouseEvent) {
+        e.stopPropagation()
+        if (!profileDropdownOpen) {
+            loadProfileNames()
+        }
+        profileDropdownOpen = !profileDropdownOpen
+    }
+
     onMount(async () => {
         try {
             appVersion = await invoke<string>("get_app_version")
             commandsCount = await invoke<number>("get_commands_count")
 
-            // load saved language
             const savedLang = await invoke<string>("db_read", { key: "language" })
             if (savedLang) {
                 selectedLang = savedLang
@@ -29,6 +69,13 @@
         } catch {
             commandsCount = 0
         }
+        refreshProfile()
+        loadProfileNames()
+        profilePoll = setInterval(refreshProfile, 5000)
+    })
+
+    onDestroy(() => {
+        if (profilePoll !== null) clearInterval(profilePoll)
     })
 
     async function selectLanguage(code: string) {
@@ -40,18 +87,21 @@
         langDropdownOpen = !langDropdownOpen
     }
 
-    function closeLangDropdown(e: MouseEvent) {
+    function closeDropdowns(e: MouseEvent) {
         const target = e.target as HTMLElement
         if (!target.closest('.lang-selector')) {
             langDropdownOpen = false
         }
+        if (!target.closest('.profile-selector')) {
+            profileDropdownOpen = false
+        }
     }
 
     $: currentLang = languages.find(l => l.code === $currentLanguage) || languages[0]
     $: t = (key: string) => translate($translations, key)
 </script>
 
-<svelte:window on:click={closeLangDropdown} />
+<svelte:window on:click={closeDropdowns} />
 
 <header id="header" class="header">
     <div class="header-left">
@@ -67,6 +117,55 @@
     </div>
     
     <div class="header-right">
+        {#if activeProfile && activeProfile.name !== 'default'}
+            <div class="profile-selector">
+                <button
+                    class="profile-chip"
+                    title="{activeProfile.name} — {activeProfile.description}. Кликни чтобы сменить."
+                    on:click|stopPropagation={toggleProfileDropdown}
+                >
+                    <span class="profile-icon">{activeProfile.icon || '★'}</span>
+                    <span class="profile-name">{activeProfile.name}</span>
+                </button>
+                {#if profileDropdownOpen}
+                    <div class="profile-dropdown">
+                        {#each profileNames as pname}
+                            <button
+                                class="profile-option"
+                                class:active={pname === activeProfile.name}
+                                on:click|stopPropagation={() => selectProfile(pname)}
+                            >
+                                {pname}
+                            </button>
+                        {/each}
+                    </div>
+                {/if}
+            </div>
+        {:else if activeProfile}
+            <div class="profile-selector">
+                <button
+                    class="profile-chip default"
+                    title="Текущий профиль — обычный. Кликни чтобы сменить."
+                    on:click|stopPropagation={toggleProfileDropdown}
+                >
+                    <span class="profile-icon">★</span>
+                </button>
+                {#if profileDropdownOpen}
+                    <div class="profile-dropdown">
+                        {#each profileNames as pname}
+                            <button
+                                class="profile-option"
+                                class:active={pname === activeProfile.name}
+                                on:click|stopPropagation={() => selectProfile(pname)}
+                            >
+                                {pname}
+                            </button>
+                        {/each}
+                    </div>
+                {/if}
+            </div>
+        {/if}
+
         <button class="header-btn" on:click={() => $goto('/commands')}>
             <span class="btn-text">{t('header-commands')}</span>
             <span class="btn-badge purple">{commandsCount}+</span>
@@ -112,6 +211,79 @@
 </header>
 
 <style lang="scss">
+    .profile-selector {
+        position: relative;
+        margin-right: 6px;
+    }
+
+    .profile-chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        padding: 4px 9px;
+        background: rgba(255, 168, 60, 0.12);
+        border: 1px solid rgba(255, 168, 60, 0.35);
+        border-radius: 14px;
+        color: #ffa83c;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.15s ease;
+
+        &.default {
+            background: rgba(255, 255, 255, 0.04);
+            border-color: rgba(255, 255, 255, 0.12);
+            color: rgba(255, 255, 255, 0.55);
+        }
+
+        &:hover {
+            background: rgba(255, 168, 60, 0.22);
+            border-color: rgba(255, 168, 60, 0.55);
+        }
+    }
+
+    .profile-icon {
+        font-size: 14px;
+        line-height: 1;
+    }
+
+    .profile-dropdown {
+        position: absolute;
+        top: calc(100% + 6px);
+        right: 0;
+        background: rgba(20, 30, 35, 0.98);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: 6px;
+        overflow: hidden;
+        z-index: 100;
+        min-width: 130px;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+    }
+
+    .profile-option {
+        display: block;
+        width: 100%;
+        padding: 0.55rem 0.85rem;
+        background: transparent;
+        border: none;
+        color: rgba(255, 255, 255, 0.75);
+        font-size: 0.78rem;
+        cursor: pointer;
+        text-align: left;
+        transition: all 0.15s ease;
+
+        &:hover {
+            background: rgba(255, 168, 60, 0.12);
+            color: #fff;
+        }
+
+        &.active {
+            background: rgba(255, 168, 60, 0.18);
+            color: #ffa83c;
+            font-weight: 600;
+        }
+    }
+
     .lang-selector {
         position: relative;
     }