fix: show folder roles, filter origins and app modes as outline badges

src/components/settings/FilterSettings.tsx

@@ -21,6 +21,7 @@ import { FilterRuleModal } from '../filters/FilterRuleModal';
 import { SieveEditorSheet } from '../filters/SieveEditorSheet';
 import type { FilterRule } from '../../lib/sieve/types';
 import { formatConditionValue, summarizeRule } from '../../lib/sieve/condition-value';
+import Badge from '../Badge';
 
 type Translate = (key: string, fallback?: string) => string;
 
@@ -366,7 +367,7 @@ export function FilterSettings({ onOpenVacation }: FilterSettingsProps = {}) {
                     <View style={{ flex: 1, minWidth: 0 }}>
                       <View style={styles.ruleNameRow}>
                         <Text style={styles.ruleName} numberOfLines={1}>{rule.name}</Text>
-                        <View style={styles.originBadge}><Text style={styles.originBadgeText}>{label}</Text></View>
+                        <Badge>{label}</Badge>
                       </View>
                       {hasStructured ? (
                         expandedView ? (
@@ -571,8 +572,6 @@ function makeStyles(c: ThemePalette) {
       backgroundColor: c.muted,
       borderRadius: radius.xs,
     },
-    originBadge: { paddingHorizontal: 6, paddingVertical: 2, borderRadius: radius.full, backgroundColor: c.muted },
-    originBadgeText: { fontSize: 10, fontWeight: '500', color: c.mutedForeground },
 
     reorderCol: { alignItems: 'center' },
     reorderBtn: { padding: 2 },

src/components/settings/FolderSettings.tsx

@@ -27,6 +27,7 @@ import { jmapClient } from '../../api/jmap-client';
 import type { Mailbox } from '../../api/types';
 import { MODAL_ORIENTATIONS } from '../../lib/modal-orientations';
 import { useSheetInsets } from '../../lib/use-layout';
+import Badge from '../Badge';
 
 const ROLE_ICON: Record<string, any> = {
   inbox: Inbox, drafts: FileText, sent: Send, trash: Trash,
@@ -275,11 +276,7 @@ export function FolderSettings() {
                   <View style={styles.folderLeft}>
                     <Icon size={16} color={mb.role ? c.primary : c.mutedForeground} />
                     <Text style={styles.folderName} numberOfLines={1}>{localizeMailboxName(mb.role, mb.name, t)}</Text>
-                    {mb.role && (
-                      <View style={styles.rolePill}>
-                        <Text style={styles.rolePillText}>{mb.role}</Text>
-                      </View>
-                    )}
+                    {mb.role && <Badge>{mb.role}</Badge>}
                   </View>
                   <View style={styles.folderRight}>
                     {mb.unreadEmails > 0 && (
@@ -416,11 +413,6 @@ function makeStyles(c: ThemePalette) {
     folderRowPressed: { backgroundColor: c.muted },
     folderLeft: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm, flex: 1 },
     folderName: { ...typography.body, color: c.text, flexShrink: 1 },
-    rolePill: {
-      paddingHorizontal: 6, paddingVertical: 2, borderRadius: radius.full,
-      backgroundColor: c.primaryBg,
-    },
-    rolePillText: { fontSize: 10, fontWeight: '500', color: c.primary },
     folderRight: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
     unreadBadge: {
       paddingHorizontal: 6, paddingVertical: 2, borderRadius: radius.full,

src/components/settings/IdentitySettings.tsx

@@ -29,6 +29,7 @@ import { sanitizeDisplayName } from '../../lib/rfc5322-mailbox';
 import { sanitizeSignatureHtml } from '../../lib/signature-utils';
 import { MODAL_ORIENTATIONS } from '../../lib/modal-orientations';
 import { useSheetInsets } from '../../lib/use-layout';
+import Badge from '../Badge';
 
 type DraftIdentity = {
   id: string;
@@ -280,9 +281,7 @@ export function IdentitySettings() {
             </Pressable>
           )}
           {!identity.mayDelete ? (
-            <View style={styles.badge}>
-              <Text style={styles.badgeText}>{t('settings.identities.primary', "primary")}</Text>
-            </View>
+            <Badge>{t('settings.identities.primary', "primary")}</Badge>
           ) : (
             <Pressable
               onPress={() => confirmDelete(identity)}
@@ -423,11 +422,6 @@ function makeStyles(c: ThemePalette) {
     identityName: { ...typography.bodyMedium, color: c.text },
     identityEmail: { ...typography.caption, color: c.mutedForeground, marginTop: 2 },
     identityDelete: { padding: 6 },
-    badge: {
-      paddingHorizontal: 6, paddingVertical: 2, borderRadius: radius.full,
-      backgroundColor: c.primaryBg,
-    },
-    badgeText: { fontSize: 10, fontWeight: '500', color: c.primary },
 
     modalOverlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'flex-end' },
     modalSheet: {

src/components/settings/SidebarAppsSettings.tsx

@@ -9,6 +9,7 @@ import { spacing, radius, typography, type ThemePalette } from '../../theme/toke
 import { useColors } from '../../theme/colors';
 import { useSettingsStore, type SidebarApp } from '../../stores/settings-store';
 import { useLocaleStore } from '../../stores/locale-store';
+import Badge from '../Badge';
 
 export function SidebarAppsSettings() {
   const c = useColors();
@@ -79,17 +80,9 @@ export function SidebarAppsSettings() {
                   <Text style={styles.appName} numberOfLines={1}>{app.name}</Text>
                   <Text style={styles.appUrl} numberOfLines={1}>{app.url}</Text>
                 </View>
-                <View style={[
-                  styles.modeBadge,
-                  app.openMode === 'inline' ? styles.modeBadgeInline : styles.modeBadgeTab,
-                ]}>
-                  <Text style={[
-                    styles.modeBadgeText,
-                    { color: app.openMode === 'inline' ? c.primary : c.mutedForeground },
-                  ]}>
-                    {app.openMode === 'inline' ? t('settings.sidebar_apps.open_mode.inline', "Inline") : t('settings.sidebar_apps.open_mode.tab', "Tab")}
-                  </Text>
-                </View>
+                <Badge variant={app.openMode === 'inline' ? 'primary' : 'default'}>
+                  {app.openMode === 'inline' ? t('settings.sidebar_apps.open_mode.inline', "Inline") : t('settings.sidebar_apps.open_mode.tab', "Tab")}
+                </Badge>
                 <Pressable style={styles.iconBtn} onPress={() => setEditingId(app.id)} accessibilityRole="button" accessibilityLabel={t('common.edit', "Edit")}>
                   <Pencil size={14} color={c.mutedForeground} />
                 </Pressable>
@@ -237,14 +230,6 @@ function makeStyles(c: ThemePalette) {
   },
   appName: { ...typography.bodyMedium, color: c.text },
   appUrl: { ...typography.caption, color: c.mutedForeground, marginTop: 2 },
-  modeBadge: {
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderRadius: radius.full,
-  },
-  modeBadgeInline: { backgroundColor: 'rgba(59, 130, 246, 0.1)' },
-  modeBadgeTab: { backgroundColor: c.muted },
-  modeBadgeText: { fontSize: 10, fontWeight: '500' },
   iconBtn: {
     width: 28,
     height: 28,

src/components/settings/VacationSettings.tsx

@@ -417,7 +417,7 @@ function makeStyles(c: ThemePalette) {
   },
   pillActive: { backgroundColor: c.successBg },
   pillInactive: { backgroundColor: c.muted },
-  pillText: { fontSize: 11, fontWeight: '500' },
+  pillText: { fontSize: 12 },
   pillTextActive: { color: c.success },
   pillTextInactive: { color: c.mutedForeground },
   dateInput: {

src/screens/UnifiedInboxScreen.tsx

@@ -637,7 +637,7 @@ function makeStyles(c: ThemePalette) {
       backgroundColor: c.muted,
       maxWidth: 140,
     },
-    sharedBadgeText: { fontSize: 10, fontWeight: '500', color: c.mutedForeground },
+    sharedBadgeText: { fontSize: 12, color: c.mutedForeground },
     preview: { ...typography.caption, color: c.textMuted },
   });
 }