feat(extension): refine support and build output

DEPLOYMENT.md

@@ -9,14 +9,14 @@ pnpm install --frozen-lockfile
 pnpm check
 ```
 
-The Chrome build is written to `apps/extension/.output/chrome-mv3/`.
+The Chrome build is written directly to `apps/extension/.output/`.
 
 To test it locally:
 
 1. Open `chrome://extensions`.
 2. Enable **Developer mode**.
 3. Select **Load unpacked**.
-4. Choose `apps/extension/.output/chrome-mv3/`.
+4. Choose `apps/extension/.output/`.
 5. Open the popup, connect Gemini, then test the Side Panel on watch, Shorts, and live-video routes.
 
 ## Create the distributable archive
@@ -55,7 +55,7 @@ The archive is validated before publication to ensure `manifest.json` is at its
 
 - Confirm `apps/extension/package.json` contains the intended extension version.
 - Run `pnpm check` from a clean checkout with the committed pnpm lockfile.
-- Load `apps/extension/.output/chrome-mv3/` into the minimum supported Chrome version.
+- Load `apps/extension/.output/` into the minimum supported Chrome version.
 - Verify first-time consent, validated and unvalidated key saves, key removal, and legacy-key migration.
 - Verify watch, Shorts, live, unsupported-page, transcript-available, and transcript-unavailable states.
 - Verify question submission, Markdown rendering, edit, retry, quota, invalid-key, and offline errors.

README.md

@@ -63,7 +63,7 @@ pnpm build:extension
 1. Open `chrome://extensions`.
 2. Enable **Developer mode**.
 3. Select **Load unpacked**.
-4. Choose `apps/extension/.output/chrome-mv3/` from this repository.
+4. Choose `apps/extension/.output/` from this repository.
 5. Pin VidQuery to the browser toolbar if desired.
 
 For an installable archive, run `pnpm release:zip`; WXT writes the packaged extension under `apps/extension/.output/`.

apps/extension/src/ui/components/support-link.tsx

@@ -19,13 +19,13 @@ export function SupportLink({ compact = false }: { compact?: boolean }) {
                 href={SUPPORT_URL}
                 target="_blank"
                 rel="noreferrer"
-                aria-label="Support this project"
+                aria-label="Support"
             >
                 <Heart
                     className="h-4 w-4"
                     fill={compact ? 'currentColor' : 'none'}
                 />
-                {compact ? null : 'Support on SupportKori'}
+                {compact ? null : 'Support'}
             </a>
         </Button>
     );

apps/extension/src/ui/popup/popup-app.tsx

@@ -105,7 +105,10 @@ export function PopupApp() {
     return (
         <main className="w-[380px] bg-paper text-graphite">
             <header className="border-b border-line px-6 pb-5 pt-6">
-                <Brand />
+                <div className="flex items-center justify-between gap-4">
+                    <Brand />
+                    <SupportLink />
+                </div>
                 <p className="mt-4 text-[12px] leading-relaxed text-smoke">
                     Connect your own Gemini key, then ask questions grounded in
                     the video you are watching.
@@ -276,15 +279,14 @@ export function PopupApp() {
                     {message.text}
                 </div>
             ) : null}
-            <footer className="flex items-center gap-4 border-t border-line bg-porcelain px-6 py-4">
-                <p className="min-w-0 flex-1 text-[10px] leading-relaxed text-smoke">
+            <footer className="border-t border-line bg-porcelain px-6 py-4">
+                <p className="text-[10px] leading-relaxed text-smoke">
                     <strong className="text-graphite">
                         Private by design.
                     </strong>{' '}
                     No intermediary server, account, or saved conversation
                     history.
                 </p>
-                <SupportLink />
             </footer>
         </main>
     );

apps/extension/tests/unit/popup-app.test.tsx

@@ -51,11 +51,11 @@ describe('popup connection workflow', () => {
         expect(await screen.findByText('Gemini is connected')).toBeVisible();
     });
 
-    it('shows the SupportKori action in the popup footer', async () => {
+    it('shows the Support action in the popup header', async () => {
         render(<PopupApp />);
 
         expect(
-            await screen.findByRole('link', { name: 'Support this project' })
+            await screen.findByRole('link', { name: 'Support' })
         ).toHaveAttribute('href', 'https://www.supportkori.com/montasim');
     });
 });

apps/extension/tests/unit/sidepanel-app.test.tsx

@@ -91,9 +91,10 @@ describe('Side Panel entry states', () => {
     it('offers the external SupportKori action without embedding it', () => {
         render(<SidePanelApp />);
 
-        expect(
-            screen.getByRole('link', { name: 'Support this project' })
-        ).toHaveAttribute('href', 'https://www.supportkori.com/montasim');
+        expect(screen.getByRole('link', { name: 'Support' })).toHaveAttribute(
+            'href',
+            'https://www.supportkori.com/montasim'
+        );
     });
 
     it('right-aligns message actions and supports copy and answer retry', async () => {

apps/extension/wxt.config.ts

@@ -6,6 +6,7 @@ const youtubeOrigins = ['https://www.youtube.com/*', 'https://youtube.com/*'];
 export default defineConfig({
     modules: ['@wxt-dev/module-react'],
     publicDir: 'icons',
+    outDirTemplate: '.',
     vite: () => ({ plugins: [tailwindcss()] }),
     manifest: {
         name: 'VidQuery',

docs/adr/0005-offer-voluntary-support-through-an-external-link.md

@@ -4,7 +4,7 @@ status: accepted
 
 # Offer voluntary project support through an external SupportKori link
 
-Expose an optional **Support this project** action in the Side Panel header and a labeled **Support on SupportKori** action in the popup footer. Both actions open Montasim’s SupportKori page in a new browser tab.
+Expose an optional **Support** action in the Side Panel and popup headers. Both actions open Montasim’s SupportKori page in a new browser tab.
 
 ## Considered options