From 6a74e8e739c3d2db2db737b1ecb0117eb88a4129 Mon Sep 17 00:00:00 2001
From: Ariver <shanghai3168@gmail.com>
Date: Mon, 18 May 2026 16:07:07 +0800
Subject: [PATCH] feat: show background activity status

---
 VoiceSnapGo/frontend/src/components/settings/PermissionsPage.svelte |   25 ++++++++++++++++++++++---
 1 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/VoiceSnapGo/frontend/src/components/settings/PermissionsPage.svelte b/VoiceSnapGo/frontend/src/components/settings/PermissionsPage.svelte
index 821bcf9..57f3850 100644
--- a/VoiceSnapGo/frontend/src/components/settings/PermissionsPage.svelte
+++ b/VoiceSnapGo/frontend/src/components/settings/PermissionsPage.svelte
@@ -10,7 +10,7 @@
     required: boolean
   }
 
-  const permissionOrder = ['microphone', 'accessibility', 'inputMonitoring']
+  const permissionOrder = ['microphone', 'accessibility', 'inputMonitoring', 'backgroundActivity']
 
   let statuses = $state<PermissionStatus[]>([])
   let loading = $state(true)
@@ -56,13 +56,15 @@
   }
 
   function stateText(item: PermissionStatus) {
+    if (!item.required) return item.granted ? t('permissions.enabled') : t('permissions.disabled')
     if (item.granted) return t('permissions.granted')
     if (loading) return t('permissions.checking')
     return t('permissions.missing')
   }
 
   function allGranted() {
-    return statuses.length > 0 && statuses.every(item => item.granted)
+    const required = statuses.filter(item => item.required)
+    return required.length > 0 && required.every(item => item.granted)
   }
 </script>
 
@@ -95,7 +97,12 @@
         </div>
         <div class="permission-info">
           <div class="permission-heading">
-            <span class="permission-title">{titleFor(item.id)}</span>
+            <span class="permission-title">
+              {titleFor(item.id)}
+              {#if !item.required}
+                <span class="optional-badge">{t('permissions.optional')}</span>
+              {/if}
+            </span>
             <span class="permission-state" class:granted={item.granted}>{stateText(item)}</span>
           </div>
           <p class="permission-desc">{descFor(item.id)}</p>
@@ -250,10 +257,22 @@
   }
 
   .permission-title {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
     font-size: var(--font-size-lg);
     font-weight: 650;
   }
 
+  .optional-badge {
+    border-radius: 999px;
+    background: var(--color-bg-secondary);
+    color: var(--color-secondary-label);
+    font-size: var(--font-size-xs);
+    font-weight: 600;
+    padding: 2px 7px;
+  }
+
   .permission-state {
     color: var(--color-red);
     font-size: var(--font-size-sm);

--
Gitblit v1.9.3