feat: add loading state and section divider to popup translate

- Translate button shows a spinner + "Translating…" while the fetch
  is in flight; disabled while loading. WordDetailModule emits a
  `loading: boolean` event mirroring its internal pending ref so any
  caller can reflect the state, and TranslateCard skips no-op
  resubmits (same word) that wouldn't trigger the prop watcher and
  would otherwise leave the spinner stuck.
- HomeView gets a subtle horizontal gradient divider between the
  translate card and the settings cards below so the result detail
  doesn't visually bleed into the rest of the popup.
- CLAUDE.md: document the new WordDetailModule prop-driven mounting
  mode, the cross-bundle reuse carve-out (WordDetailModule etc. are
  reusable from non-content-script bundles like the popup), the new
  route-params.ts helper file location, and the popup translate
  verification flow.
- Ignore /.claude config dir in .gitignore.

#86exfjner

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: navidshad

.gitignore

@@ -6,3 +6,4 @@ dist
 static/key-file.json
 *.zip
 .npmrc
+/.claude

CLAUDE.md

@@ -19,7 +19,7 @@ Load `dist/` as an unpacked extension at `chrome://extensions`. There is no sepa
 | `main.js` | [src/main.ts](src/main.ts) | YouTube `/watch`, Netflix | Subtitle phrase collector — wraps caption words in `<Word>` spans, hover/anchor selection. |
 | `nibble.js` | [src/nibble.ts](src/nibble.ts) | `<all_urls>` | Web text phrase collector — native `Selection` → floating Subturtle icon → translation card. **Does not mutate page DOM.** |
 | `console-crane.js` | [src/console-crane.ts](src/console-crane.ts) | `<all_urls>` | The modal app (word-detail, settings, save flow). Owns its own Vue app + Pinia store + router. Feature bundles drive it via the [bridge](src/common/services/console-crane-bridge.ts). |
-| `popup.js` | [src/popup.ts](src/popup.ts) | Toolbar popup | Settings, language, dashboard link, per-site Nibble toggle. |
+| `popup.js` | [src/popup.ts](src/popup.ts) | Toolbar popup | Ad-hoc text translation (input + detailed result), settings, language, dashboard link, per-site Nibble toggle. Reuses console-crane's `WordDetailModule` for the result panel — see [Shared APIs § WordDetailModule](#worddetailmodule-detailed-translation-panel) for the cross-bundle reuse rules. |
 | `background.js` | [src/background.ts](src/background.ts) | Service worker | OAuth, token storage, settings persistence to `chrome.storage.local`, broadcast `SYNC_SETTINGS` to tabs. |
 
 Manifest content_scripts split is in [static/manifest.json](static/manifest.json). On a YouTube `/watch` page all three content scripts run side-by-side in the same isolated world — `main.js`, `nibble.js`, and `console-crane.js` — so they coordinate through shared `chrome.storage` (settings) and `window` CustomEvents (the ConsoleCrane bridge).
@@ -77,7 +77,9 @@ The console-crane content script listens (`onOpen` in [src/console-crane.ts](src
 
 **Inside the console-crane bundle itself**, code can keep using `useConsoleCraneStore()` directly — it's the same Vue app. Bridge events are only the cross-bundle path.
 
-Params are encoded into the route via `encodeRouteParams` in [src/console-crane/stores/console-crane.ts](src/console-crane/stores/console-crane.ts) — Unicode-safe (uses TextEncoder). Decode with `decodeRouteParams`. **Never use `window.btoa(JSON.stringify(...))` directly** — it throws `InvalidCharacterError` on non-Latin1 input (Persian, CJK, emoji, accented Latin).
+Params are encoded into the route via `encodeRouteParams` from [src/console-crane/route-params.ts](src/console-crane/route-params.ts) — Unicode-safe (uses TextEncoder). Decode with `decodeRouteParams`. **Never use `window.btoa(JSON.stringify(...))` directly** — it throws `InvalidCharacterError` on non-Latin1 input (Persian, CJK, emoji, accented Latin).
+
+These helpers live in their own module (separate from the store) so consumers can import them without dragging in the console-crane router. Importing them from the store would close a circular ESM init when the importer isn't `console-crane.ts` itself (popup → WordDetailModule → store → router → WordDetailModule). Keep them in `route-params.ts`.
 
 ### Translation
 
@@ -88,6 +90,25 @@ const text = await TranslateService.instance.fetchSimpleTranslation(phrase, cont
 
 24-hour in-memory cache keyed on `(translationType, targetLanguage, phrase, context)`. `fetchDetailedTranslation` for the rich `LanguageLearningData` shape used by ConsoleCrane.
 
+### WordDetailModule (detailed translation panel)
+
+[src/console-crane/modules/word-detail/index.vue](src/console-crane/modules/word-detail/index.vue) is the rich result panel — definition, phonetic, examples, related expressions, plus the bundle save UI from [SaveWordSectionV2](src/console-crane/components/SaveWordSectionV2.vue). It runs its own `fetchDetailedTranslation` call internally, so the caller just supplies inputs.
+
+It supports two mounting modes:
+
+- **Route-driven** (console-crane): mounted by the console-crane router; reads `{ word, context }` from the base64-encoded `:data` route param. This is what `emitOpen({ page: "word-detail", params })` ultimately drives.
+- **Prop-driven** (popup, anywhere outside the console-crane router): pass `:word` and optional `:context` directly. When `word` is present it's preferred over the route param.
+
+Also emits `loading: boolean` mirroring its internal pending state — bind it on the parent (e.g. the popup's [TranslateCard](src/popup/components/TranslateCard.vue)) to reflect a button spinner.
+
+**Cross-bundle reuse caveat.** The "feature bundles never import the ConsoleCrane component or its store" rule is about the modal wrapper and `useConsoleCraneStore` — they're for opening the modal on a page that already has the ConsoleCrane content script. Reusing presentational sub-modules like `WordDetailModule` (and the things it transitively pulls in: `SaveWordSectionV2`, `SelectPhraseBundleV2`, `FreemiumLimitCounter`) **is fine** as long as:
+
+1. You're in a bundle that does NOT also load `console-crane.js` (today: only the popup qualifies — it's its own Chrome extension page, not a content script).
+2. You drive the module via props, not by trying to inject route params it doesn't have.
+3. The host app installs Pinia + the modular-rest auth plugin before mount (`addPlugins(app)` from [src/plugins/install.ts](src/plugins/install.ts)).
+
+If you ever need this from a content-script bundle that runs alongside ConsoleCrane, use the [bridge](#consolecrane-bridge) instead — don't double-mount the same component on the same page.
+
 ### Settings store
 
 [src/common/store/settings.ts](src/common/store/settings.ts) — Pinia store, syncs through background via `SYNC_SETTINGS`. Holds:
@@ -207,7 +228,8 @@ When changes touch the bundle layout, content scripts, or shared CSS:
 - On YouTube `/watch`: subtitle popup works; Nibble selection popup also works (all three content scripts run there). Exactly one `#subturtle-console-crane-root` in the DOM.
 - On Wikipedia: only `nibble.js` and `console-crane.js` run; selection → icon → translation card → save flow opens ConsoleCrane.
 - In the popup: per-site toggle reads/writes `nibbleDisabledDomains` and survives a popup re-open. Toggling Nibble OFF for a host **while ConsoleCrane is open** must NOT close the modal or lock page scroll — the modal lifecycle is decoupled from the Nibble per-host gate via the bridge.
-- In ConsoleCrane on a non-Latin page (e.g. Persian / Chinese article): no `InvalidCharacterError` from `btoa`.
+- In the popup translate input: input is auto-focused on open; submitting renders the detailed result inline; logged-out users see "Login to save this phrase"; logged-in users get the bundle picker. Re-translating a different word resets the result. The button shows a spinner while pending.
+- In ConsoleCrane on a non-Latin page (e.g. Persian / Chinese article): no `InvalidCharacterError` from `btoa`. Same check applies to the popup translate input — paste a Persian / CJK phrase and confirm no encoding error.
 - Visual scale is consistent on a default-html-font-size site (YouTube) and a large-html-font-size site (typical WordPress blog).
 
 ## Useful pointers
@@ -219,6 +241,9 @@ When changes touch the bundle layout, content scripts, or shared CSS:
 - Background message types: [src/common/types/messaging.ts](src/common/types/messaging.ts)
 - ConsoleCrane store: [src/console-crane/stores/console-crane.ts](src/console-crane/stores/console-crane.ts)
 - ConsoleCrane bridge: [src/common/services/console-crane-bridge.ts](src/common/services/console-crane-bridge.ts)
+- Route-param helpers (Unicode-safe base64): [src/console-crane/route-params.ts](src/console-crane/route-params.ts)
+- WordDetailModule (detailed result panel, prop- or route-driven): [src/console-crane/modules/word-detail/index.vue](src/console-crane/modules/word-detail/index.vue)
+- Popup translate card: [src/popup/components/TranslateCard.vue](src/popup/components/TranslateCard.vue)
 - Settings store: [src/common/store/settings.ts](src/common/store/settings.ts)
 - Marker store: [src/stores/marker.ts](src/stores/marker.ts)
 - Translate service: [src/common/services/translate.service.ts](src/common/services/translate.service.ts)

src/console-crane/modules/word-detail/index.vue

@@ -199,6 +199,10 @@ const props = defineProps<{
   context?: string;
 }>();
 
+const emit = defineEmits<{
+  loading: [boolean];
+}>();
+
 const route = useRoute();
 
 onMounted(() => {
@@ -232,6 +236,9 @@ const pending = ref(false); // Loading state
 const error = ref<string | null>(null); // Translation error message, null when ok
 const key = ref(new Date().getTime()); // Key for forcing component refresh
 
+// Mirror loading state to parent so popup callers can show a button spinner.
+watch(pending, (val) => emit("loading", val));
+
 // Gets the title of the target language (e.g., "Spanish", "French")
 const targetLanguageTitle = computed(
   () => TranslateService.instance.languageTitle

src/popup/components/TranslateCard.vue

@@ -23,16 +23,37 @@
         />
         <button
           type="submit"
-          :disabled="!inputText.trim()"
-          class="px-5 py-2 rounded-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600 text-white text-sm font-medium shadow-lg hover:shadow-purple-500/25 transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:hover:shadow-none whitespace-nowrap"
+          :disabled="!inputText.trim() || loading"
+          class="px-5 py-2 rounded-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600 text-white text-sm font-medium shadow-lg hover:shadow-purple-500/25 transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:hover:shadow-none whitespace-nowrap inline-flex items-center justify-center gap-2 min-w-[7rem]"
         >
-          Translate
+          <svg
+            v-if="loading"
+            class="animate-spin h-4 w-4 text-white"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle
+              class="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              stroke-width="4"
+            />
+            <path
+              class="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+          </svg>
+          {{ loading ? "Translating…" : "Translate" }}
         </button>
       </form>
     </div>
 
     <div v-if="submittedWord" class="rounded-xl overflow-hidden">
-      <WordDetailModule :word="submittedWord" />
+      <WordDetailModule :word="submittedWord" @loading="loading = $event" />
     </div>
   </section>
 </template>
@@ -46,6 +67,7 @@ const placeholder = "Type or paste any text to translate…";
 const inputEl = ref<HTMLInputElement | null>(null);
 const inputText = ref("");
 const submittedWord = ref("");
+const loading = ref(false);
 
 onMounted(async () => {
   await nextTick();
@@ -54,7 +76,12 @@ onMounted(async () => {
 
 function submit() {
   const text = inputText.value.trim();
-  if (!text) return;
+  // Skip if empty or unchanged — re-submitting the same word wouldn't trigger
+  // WordDetailModule's prop watcher, so the loading flag would never clear.
+  if (!text || text === submittedWord.value) return;
+  // Set immediately for snappy feedback; WordDetailModule's emit will
+  // turn it off when the fetch settles (or hand it back to true on retry).
+  loading.value = true;
   submittedWord.value = text;
 }
 </script>

src/popup/views/HomeView.vue

@@ -8,6 +8,13 @@
         <!-- Translate any text -->
         <TranslateCard />
 
+        <!-- Section divider between the translation surface and the rest of
+             the popup so the result detail doesn't visually bleed into the
+             settings cards below. -->
+        <div
+          class="h-px bg-gradient-to-r from-transparent via-gray-300/70 to-transparent dark:via-white/[0.12]"
+        ></div>
+
         <!-- Control Panel -->
         <div
           class="bg-gray-50 dark:bg-white/[0.03] backdrop-blur-xl rounded-xl p-4 border border-gray-200 dark:border-white/[0.08] shadow-xl hover:border-gray-300 dark:hover:border-white/[0.12] transition-all duration-300"