Merge pull request #17 from codebridger/CU-86exfjner_Implement-single-translate-on-popup-page_Navid-Shad

Enhance Popup Translation UI with Loading State, Input, and Help View Refresh #86exfjner

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:
@@ -216,7 +237,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
@@ -228,6 +250,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

@@ -192,7 +192,16 @@ import { useRoute } from "vue-router";
 import { sendMessage } from "../../../common/helper/massage";
 import { OpenLoginWindowMessage } from "../../../common/types/messaging";
 import { analytic } from "../../../plugins/mixpanel";
-import { decodeRouteParams } from "../../stores/console-crane";
+import { decodeRouteParams } from "../../route-params";
+
+const props = defineProps<{
+  word?: string;
+  context?: string;
+}>();
+
+const emit = defineEmits<{
+  loading: [boolean];
+}>();
 
 const route = useRoute();
 
@@ -201,10 +210,15 @@ onMounted(() => {
 });
 
 /**
- * Extracts word data from the route parameter
- * The data is base64 encoded in the URL
+ * Resolve word + context inputs. Prefers explicit props (used by the popup
+ * bundle, which mounts this module without a route param). Falls back to
+ * the base64-encoded `:data` route param used by the console-crane router.
  */
 function getProps() {
+  if (props.word) {
+    return { word: props.word, context: props.context ?? "" };
+  }
+
   const data = decodeRouteParams<{ word: string; context?: string }>(
     route.params.data as string
   );
@@ -222,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/console-crane/route-params.ts

@@ -0,0 +1,21 @@
+// Unicode-safe base64 helpers for vue-router params. Lives in its own module
+// (no router/store imports) so consumers like the popup's WordDetailModule
+// can pull only what they need without dragging in the console-crane router
+// — that import path causes a circular ESM init in non-console-crane bundles.
+//
+// `btoa` only accepts Latin1 — any non-Latin1 character (e.g. accented Latin,
+// Persian, Chinese, emoji) throws InvalidCharacterError. We encode via
+// TextEncoder so route params can carry any text.
+export function encodeRouteParams(params: any): string {
+  const bytes = new TextEncoder().encode(JSON.stringify(params));
+  let binary = "";
+  for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
+  return btoa(binary);
+}
+
+export function decodeRouteParams<T = any>(data: string): T {
+  const binary = atob(data);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+  return JSON.parse(new TextDecoder().decode(bytes));
+}

src/console-crane/stores/console-crane.ts

@@ -3,29 +3,13 @@ import { ref, computed } from "vue";
 import { ConsolePage } from "../types";
 
 import { router } from "../router";
+import { encodeRouteParams } from "../route-params";
 
 interface PageEntry {
   name: ConsolePage;
   params?: Record<string, any>;
 }
 
-// Unicode-safe base64. `btoa` only accepts Latin1 — any non-Latin1 character
-// (e.g. accented Latin, Persian, Chinese, emoji) throws InvalidCharacterError.
-// We encode via TextEncoder so route params can carry any text.
-export function encodeRouteParams(params: any): string {
-  const bytes = new TextEncoder().encode(JSON.stringify(params));
-  let binary = "";
-  for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
-  return btoa(binary);
-}
-
-export function decodeRouteParams<T = any>(data: string): T {
-  const binary = atob(data);
-  const bytes = new Uint8Array(binary.length);
-  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
-  return JSON.parse(new TextDecoder().decode(bytes));
-}
-
 export const useConsoleCraneStore = defineStore("console-crane", () => {
   const isActive = ref(false);
   const history = ref<PageEntry[]>([]);

src/popup/components/TranslateCard.vue

@@ -0,0 +1,87 @@
+<template>
+  <section class="space-y-4">
+    <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"
+    >
+      <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-1">
+        Translate any text
+      </h3>
+      <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">
+        Type or paste any phrase to see its detailed translation. Save it to your
+        bundles when logged in.
+      </p>
+
+      <form class="flex gap-2" @submit.prevent="submit">
+        <input
+          ref="inputEl"
+          v-model="inputText"
+          type="text"
+          :placeholder="placeholder"
+          autocomplete="off"
+          spellcheck="false"
+          class="flex-1 px-3 py-2 rounded-md bg-white dark:bg-white/[0.04] border border-gray-200 dark:border-white/[0.08] text-sm text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-400/40 focus:border-purple-400/40"
+        />
+        <button
+          type="submit"
+          :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]"
+        >
+          <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" @loading="loading = $event" />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick } from "vue";
+import WordDetailModule from "../../console-crane/modules/word-detail/index.vue";
+
+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();
+  inputEl.value?.focus();
+});
+
+function submit() {
+  const text = inputText.value.trim();
+  // 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/router.ts

@@ -37,22 +37,19 @@ export const router = createRouter({
   routes: routes,
 });
 
-router.beforeEach(async (to, from) => {
-  // Allow access to intro and login pages regardless of login status
+router.beforeEach(async (to) => {
+  // Intro and login pages bypass the silent re-auth attempt entirely.
   if (to.name === "intro" || to.name === "login") {
     return true;
   }
 
-  // Try to login with last session if not already logged in
+  // Best-effort silent re-auth so logged-in users hit a populated state on
+  // first paint. We deliberately do NOT redirect on failure — the home view
+  // (and the new translation card on it) is reachable for logged-out users;
+  // auth-gated UI inside HomeView is hidden via `v-if="isLogin"`.
   if (!isLogin.value) {
     await loginWithLastSession();
-
-    // After trying to login, check again if successful
-    if (!isLogin.value) {
-      return { name: "intro" };
-    }
   }
 
-  // If we got here, user is logged in, allow navigation
   return true;
 });