Fix root cause: extra </div> closed #app before API key panel

The Advanced Settings panel (containing the OpenRouter API key input)
was outside the Vue app scope due to an extra </div> on line 122 that
prematurely closed the #app div. This meant:
- The API key input's Vue bindings (:value, @input) were inert
- The Save Key button's @click="saveApiKey" never fired
- The key never reached localStorage or Vue data
- Translation/PromptCraft always saw an empty key

Fix: Remove the duplicate closing </div> (labeled "End of .tabs div"
but .tabs already closed earlier at line 77). Also switch API key input
from manual :value/@input to v-model for reliable two-way binding.

https://claude.ai/code/session_01DjqbQB8WcZoGVe78sjvh72
This commit is contained in:
Claude
2026-03-21 02:53:35 +00:00
parent afe00b3534
commit 7655f31b1c
+2 -5
View File
@@ -119,9 +119,7 @@
</div>
</div>
</div>
</div>
<!-- End of .tabs div -->
<!-- Advanced Settings Panel (inside app so Vue bindings work) -->
<div id="unicode-options-panel" class="unicode-options-panel">
<div class="unicode-panel-header">
@@ -136,8 +134,7 @@
<div class="api-key-input-row">
<input
:type="showApiKey ? 'text' : 'password'"
:value="openrouterApiKey"
@input="openrouterApiKey = $event.target.value"
v-model="openrouterApiKey"
placeholder="sk-or-..."
class="api-key-input"
autocomplete="off"