improve i18n and fix tooltip focus behavior

src/components/InstanceActionBar.vue

@@ -73,7 +73,6 @@
                             <Button
                                 class="mt-1"
                                 size="xs"
-                                variant="outline"
                                 :disabled="!!instance?.closedAt"
                                 @click="closeInstance(resolvedInstanceLocation)">
                                 {{ t('dialog.user.info.close_instance') }}

src/components/NavMenu.vue

@@ -217,7 +217,7 @@
                                                     <span
                                                         class="h-3 w-3 shrink-0 rounded-sm"
                                                         :style="{ backgroundColor: theme.swatch }" />
-                                                    <span class="truncate">{{ theme.label }}</span>
+                                                    <span class="truncate">{{ themeColorDisplayName(theme) }}</span>
                                                 </span>
                                             </DropdownMenuCheckboxItem>
                                         </DropdownMenuSubContent>
@@ -235,7 +235,7 @@
                                         indicator-position="right"
                                         @select="handleTableDensitySelect('standard')">
                                         <span>{{
-                                            t('view.settings.appearance.appearance.table_density_standard')
+                                            t('view.settings.appearance.appearance.table_density_comfortable')
                                         }}</span>
                                     </DropdownMenuCheckboxItem>
                                     <DropdownMenuCheckboxItem
@@ -243,7 +243,7 @@
                                         indicator-position="right"
                                         @select="handleTableDensitySelect('comfortable')">
                                         <span>{{
-                                            t('view.settings.appearance.appearance.table_density_comfortable')
+                                            t('view.settings.appearance.appearance.table_density_standard')
                                         }}</span>
                                     </DropdownMenuCheckboxItem>
                                     <DropdownMenuCheckboxItem
@@ -567,6 +567,18 @@
         return THEME_CONFIG[themeKey]?.name ?? themeKey;
     };
 
+    const themeColorDisplayName = (theme) => {
+        if (!theme) {
+            return '';
+        }
+        const i18nKey = `view.settings.appearance.theme_color.${theme.key}`;
+        const translated = t(i18nKey);
+        if (translated !== i18nKey) {
+            return translated;
+        }
+        return theme.label || theme.key;
+    };
+
     const handleSettingsClick = () => {
         router.push({ name: 'settings' });
     };

src/components/dialogs/AvatarDialog/AvatarDialog.vue

@@ -197,17 +197,12 @@
                         <TooltipWrapper
                             v-if="avatarDialog.isFavorite"
                             side="top"
-                            :ignore-non-keyboard-focus="true"
                             :content="t('dialog.avatar.actions.favorite_tooltip')">
                             <Button class="rounded-full" size="icon-lg" @click="avatarDialogCommand('Add Favorite')"
                                 ><Star
                             /></Button>
                         </TooltipWrapper>
-                        <TooltipWrapper
+                        <TooltipWrapper v-else side="top" :content="t('dialog.avatar.actions.favorite_tooltip')">
-                            v-else
-                            side="top"
-                            :ignore-non-keyboard-focus="true"
-                            :content="t('dialog.avatar.actions.favorite_tooltip')">
                             <Button
                                 class="rounded-full"
                                 size="icon-lg"

src/components/dialogs/UserDialog/UserActionDropdown.vue

@@ -4,15 +4,10 @@
             <TooltipWrapper
                 v-if="userDialog.isFavorite"
                 side="top"
-                :ignore-non-keyboard-focus="true"
                 :content="t('dialog.user.actions.unfavorite_tooltip')">
                 <Button class="rounded-full" size="icon-lg" @click="userDialogCommand('Add Favorite')"><Star /></Button>
             </TooltipWrapper>
-            <TooltipWrapper
+            <TooltipWrapper v-else side="top" :content="t('dialog.user.actions.favorite_tooltip')">
-                v-else
-                side="top"
-                :ignore-non-keyboard-focus="true"
-                :content="t('dialog.user.actions.favorite_tooltip')">
                 <Button class="rounded-full" size="icon-lg" variant="outline" @click="userDialogCommand('Add Favorite')"
                     ><Star
                 /></Button>

src/components/dialogs/WorldDialog/WorldDialog.vue

@@ -172,17 +172,12 @@
                         <TooltipWrapper
                             v-if="worldDialog.isFavorite"
                             side="top"
-                            :ignore-non-keyboard-focus="true"
                             :content="t('dialog.world.actions.favorites_tooltip')">
                             <Button class="rounded-full" size="icon-lg" @click="worldDialogCommand('Add Favorite')"
                                 ><Star
                             /></Button>
                         </TooltipWrapper>
-                        <TooltipWrapper
+                        <TooltipWrapper v-else side="top" :content="t('dialog.world.actions.favorites_tooltip')">
-                            v-else
-                            side="top"
-                            :ignore-non-keyboard-focus="true"
-                            :content="t('dialog.world.actions.favorites_tooltip')">
                             <Button
                                 class="rounded-full"
                                 size="icon-lg"

src/components/ui/tooltip/TooltipProvider.vue

@@ -7,7 +7,7 @@ const props = defineProps({
         disableHoverableContent: { type: Boolean, required: false },
         disableClosingTrigger: { type: Boolean, required: false },
         disabled: { type: Boolean, required: false },
-    ignoreNonKeyboardFocus: { type: Boolean, required: false }
+        ignoreNonKeyboardFocus: { type: Boolean, required: false, default: true }
     });
 </script>
 

src/components/ui/tooltip/TooltipWrapper.vue

@@ -16,7 +16,7 @@
         sideOffset: { type: Number, required: false },
         delayDuration: { type: Number, required: false },
         disableHoverableContent: { type: Boolean, required: false },
-        ignoreNonKeyboardFocus: { type: Boolean, required: false },
+        ignoreNonKeyboardFocus: { type: Boolean, required: false, default: true },
         disabled: { type: Boolean, required: false },
         triggerAsChild: { type: Boolean, required: false, default: true },
         contentClass: { type: null, required: false }

src/localization/en.json

@@ -614,7 +614,15 @@
                     "force_iso_date_format": "Force ISO Date Format"
                 },
                 "theme_color": {
-                    "header": "Theme Color"
+                    "header": "Theme Color",
+                    "default": "Zinc",
+                    "blue": "Blue",
+                    "green": "Green",
+                    "orange": "Orange",
+                    "red": "Red",
+                    "rose": "Rose",
+                    "violet": "Violet",
+                    "yellow": "Yellow"
                 },
                 "side_panel": {
                     "header": "Side Panel",

src/shared/constants/themes.js

@@ -21,7 +21,7 @@ export const THEME_CONFIG = {
 export const THEME_COLORS = [
     {
         key: 'default',
-        label: 'Default',
+        label: 'Zinc',
         swatch: 'oklch(0.205 0 0)',
         file: null
     },