feat: quick-capture bookmarklet

One-click job capture from any posting, reusing the existing
jobimport/preview parser.

- AddJobModal accepts initialUrl and auto-imports once on open
- App reads a /?add=<encoded url> param, opens Add Job pre-filled, and
  strips the param from the address bar
- QuickCaptureCard in Settings offers a draggable bookmarklet (href set
  via ref since React blocks javascript: URLs) plus copyable code
- EN/NB translations; README feature note
- 2 frontend tests; full suite green (22 suites / 50 tests)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

job-tracker-ui/src/components/AddJobModal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 
@@ -37,6 +37,7 @@ interface Props {
   open: boolean;
   onClose: () => void;
   onCreated: () => void;
+  initialUrl?: string;
 }
 
 type DuplicateCandidate = {
@@ -97,7 +98,7 @@ function normalizeLanguage(value?: string | null) {
   return raw;
 }
 
-export default function AddJobModal({ open, onClose, onCreated }: Props) {
+export default function AddJobModal({ open, onClose, onCreated, initialUrl }: Props) {
   const { toast } = useToast();
   const { t, language } = useI18n();
 
@@ -137,6 +138,21 @@ export default function AddJobModal({ open, onClose, onCreated }: Props) {
     setCompanies(cachedCompanies);
   }, [cachedCompanies]);
 
+  // Quick-capture: when opened with a URL (from the bookmarklet), prefill and auto-import once.
+  const autoImportedUrlRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (!open) {
+      autoImportedUrlRef.current = null;
+      return;
+    }
+    const url = initialUrl?.trim();
+    if (!url || autoImportedUrlRef.current === url) return;
+    autoImportedUrlRef.current = url;
+    setJobUrl(url);
+    void importFromUrl(url);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, initialUrl]);
+
   const resetForm = () => {
     setCompany(null);
     setCompanyInput("");
@@ -223,16 +239,17 @@ export default function AddJobModal({ open, onClose, onCreated }: Props) {
     }
   };
 
-  const importFromUrl = async () => {
+  const importFromUrl = async (urlArg?: string) => {
     if (importing) return;
-    if (!jobUrl.trim()) {
+    const url = (urlArg ?? jobUrl).trim();
+    if (!url) {
       toast(t("addJobModalPasteUrlFirst"), "warning");
       return;
     }
 
     setImporting(true);
     try {
-      const res = await api.post<JobImportResult>("/jobimport/preview", { url: jobUrl.trim() });
+      const res = await api.post<JobImportResult>("/jobimport/preview", { url });
       const r = res.data;
       if (!r?.success) throw new Error(r?.error || t("addJobModalImportFailed"));
 

job-tracker-ui/src/components/QuickCaptureCard.tsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useRef } from "react";
+
+import { Box, Paper, TextField, Typography } from "@mui/material";
+
+import { useI18n } from "../i18n/I18nProvider";
+import { useToast } from "../toast";
+
+/** The bookmarklet opens the app at /?add=<current page url>, which triggers quick-capture. */
+function buildBookmarklet(origin: string): string {
+  // Kept as a single minified expression; opens a small popup so the user's tab is undisturbed.
+  return `javascript:void(window.open('${origin}/?add='+encodeURIComponent(location.href),'jobbjakt','width=520,height=720'))`;
+}
+
+export default function QuickCaptureCard() {
+  const { t } = useI18n();
+  const { toast } = useToast();
+  const linkRef = useRef<HTMLAnchorElement>(null);
+  const origin = typeof window !== "undefined" ? window.location.origin : "";
+  const bookmarklet = buildBookmarklet(origin);
+
+  // React refuses to render javascript: hrefs, so set it directly on the DOM node.
+  useEffect(() => {
+    if (linkRef.current) linkRef.current.setAttribute("href", bookmarklet);
+  }, [bookmarklet]);
+
+  return (
+    <Paper sx={{ p: 2 }}>
+      <Typography sx={{ fontWeight: 950, mb: 0.5 }}>{t("settingsQuickCaptureTitle")}</Typography>
+      <Typography variant="body2" sx={{ color: "text.secondary", mb: 1.5 }}>{t("settingsQuickCaptureSubtitle")}</Typography>
+
+      <Box sx={{ display: "flex", alignItems: "center", gap: 1.5, flexWrap: "wrap", mb: 1.5 }}>
+        <Box
+          component="a"
+          ref={linkRef}
+          onClick={(e: React.MouseEvent) => {
+            // Clicking (vs dragging) shouldn't navigate; the value is meant to be dragged to the bar.
+            e.preventDefault();
+            toast(t("settingsQuickCaptureDragHint"), "info");
+          }}
+          sx={{
+            display: "inline-block",
+            px: 2,
+            py: 1,
+            borderRadius: 2,
+            border: "1px solid",
+            borderColor: "primary.main",
+            color: "primary.main",
+            fontWeight: 800,
+            textDecoration: "none",
+            cursor: "grab",
+            userSelect: "none",
+          }}
+        >
+          {t("settingsQuickCaptureButton")}
+        </Box>
+        <Typography variant="body2" sx={{ color: "text.secondary" }}>{t("settingsQuickCaptureDragHint")}</Typography>
+      </Box>
+
+      <TextField
+        label={t("settingsQuickCaptureManual")}
+        value={bookmarklet}
+        fullWidth
+        size="small"
+        InputProps={{ readOnly: true }}
+        onFocus={(e) => e.target.select()}
+      />
+    </Paper>
+  );
+}

job-tracker-ui/src/components/SettingsView.tsx

@@ -24,6 +24,7 @@ import ImportExportJobs from "./ImportExportJobs";
 import GoogleAuthCard from "./GoogleAuthCard";
 import RulesSettingsCard from "./RulesSettingsCard";
 import BackupCard from "./BackupCard";
+import QuickCaptureCard from "./QuickCaptureCard";
 import AuthStatusCard from "./AuthStatusCard";
 import { ThemeModePref } from "../themePrefs";
 import { useI18n } from "../i18n/I18nProvider";
@@ -297,6 +298,8 @@ export default function SettingsView({
 
             <ImportExportJobs />
           </Paper>
+
+          <QuickCaptureCard />
         </Box>
       </TabPanel>