Restructure/frontend editor (#6404)

## Move editor under `frontend/editor/`

Pure restructure: `frontend/` becomes the workspace, `frontend/editor/`
holds
  the PDF editor. 1775 file renames + 40 wiring edits. No logic changes.

  ### Why

`frontend/` is currently the editor — its `src/`, `public/`,
`src-tauri/`,
  config files all sit at the root. Promoting `frontend/` to a
workspace and putting the editor in a sibling folder leaves room for
future
apps to drop in alongside it, sharing one `package.json` /
`node_modules` /
  lint config / Storybook.

  ### What moves

  frontend/
  ├── editor/                ← NEW: everything editor-specific
  │   ├── src/               ← was frontend/src/
  │   ├── public/            ← was frontend/public/
  │   ├── src-tauri/         ← was frontend/src-tauri/
│ ├── index.html, vite.config.ts, vitest.config.ts, playwright.config.ts
  │   ├── tsconfig*.json, tailwind.config.js, postcss.config.js
  │   ├── scripts/
  │   ├── .env, .env.desktop, .env.saas
  │   └── DeveloperGuide.md
├── package.json, package-lock.json, node_modules/ ← workspace install
  ├── eslint.config.mjs, .prettierrc, .prettierignore ← shared tooling
  ├── .gitignore
  └── README.md

  ### Wiring edits (40 files)

  - `.taskfiles/frontend.yml`, `desktop.yml`, `e2e.yml`
  - `build.gradle`, `app/core/build.gradle`
- `eslint.config.mjs`, `frontend/package.json`, `.gitignore`,
`.prettierignore`
  - `docker/frontend/Dockerfile`
  - 8 `.github/workflows/*.yml`, plus `.github/dependabot.yml`,
    `.github/config/.files.yaml`, `.github/labeler-config-srvaroa.yml`
  - `scripts/translations/**`
- Docs: `AGENTS.md`, `CLAUDE.md`, `ADDING_TOOLS.md`,
`DeveloperGuide.md`,
`WINDOWS_SIGNING.md`, `devGuide/HowToAddNewLanguage.md`,
`frontend/README.md`,
    `frontend/editor/DeveloperGuide.md`

Plus 3 renamed + edited: `editor/vite.config.ts` (env path +
node_modules
  walk-up), `editor/scripts/setup-env.mts` (renamed from `.ts` for
`import.meta.url`), `editor/scripts/build-provisioner.mjs` (resolve
src-tauri
  relative to script).

  ### Verification

  | Check | Result |
  |---|---|
  | `task frontend:typecheck:all` (6 variants) | exit 0 |
  | `task frontend:lint` (eslint + dpdm) | exit 0 |
  | `task frontend:format:check` | exit 0 |
  | `task frontend:test` | 657 tests pass, 50 files |
| `task frontend:build:{core,proprietary,saas,desktop,prototypes}` | all
green |
| `task desktop:build` | full Tauri pipeline →
`Stirling-PDF_2.11.0_x64_en-US.msi` |
  | `playwright test --list --project=stubbed` | 172 tests discovered |

`task desktop:build` exercises the heaviest path — Rust + WiX + MSI
bundle
against the moved `editor/src-tauri/`. If anything in the restructure
was
  wrong it wouldn't have built.

  ### Test plan

  - [ ] `frontend-validation.yml` green
  - [ ] `e2e-stubbed.yml` green
  - [ ] `tauri-build.yml` green on at least one platform
  - [ ] `check_toml.yml` runs on a translation-touching PR

---------

Co-authored-by: Claude Opus 4.7 (1M context) <[email protected]>

frontend/editor/src/saas/components/shared/AppConfigModal.tsx

@@ -0,0 +1,284 @@
+import React, { useCallback, useMemo, useState, useEffect } from "react";
+import { Modal, Button, Text, ActionIcon } from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+import { useAuth } from "@app/auth/UseSession";
+import { isUserAnonymous } from "@app/auth/supabase";
+import { useTranslation } from "react-i18next";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import Overview from "@app/components/shared/config/configSections/Overview";
+import { createSaasConfigNavSections } from "@app/components/shared/config/saasConfigNavSections";
+import { NavKey } from "@app/components/shared/config/types";
+import { withBasePath } from "@app/constants/app";
+import "@app/components/shared/AppConfigModal.css";
+import {
+  Z_INDEX_OVER_FULLSCREEN_SURFACE,
+  Z_INDEX_OVER_SETTINGS_MODAL,
+} from "@app/styles/zIndex";
+
+interface AppConfigModalProps {
+  opened: boolean;
+  onClose: () => void;
+}
+
+const AppConfigModal: React.FC<AppConfigModalProps> = ({ opened, onClose }) => {
+  const isMobile = useMediaQuery("(max-width: 1024px)");
+
+  const { signOut, user, creditBalance, refreshCredits } = useAuth();
+  const { t } = useTranslation();
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [active, setActive] = useState<NavKey>("overview");
+  const [notice, setNotice] = useState<string | null>(null);
+
+  // Check if user can access billing features (non-anonymous users only)
+  const isAnonymous = user ? isUserAnonymous(user) : false;
+  useEffect(() => {
+    const handler = (ev: Event) => {
+      const detail = (ev as CustomEvent).detail as { key?: NavKey } | undefined;
+      if (detail?.key) {
+        setActive(detail.key);
+      }
+    };
+    window.addEventListener("appConfig:navigate", handler as EventListener);
+    return () =>
+      window.removeEventListener(
+        "appConfig:navigate",
+        handler as EventListener,
+      );
+  }, []);
+
+  // Listen for notice updates (e.g., "Not enough credits..." next to Plan title)
+  useEffect(() => {
+    const handler = (ev: Event) => {
+      const detail = (ev as CustomEvent).detail as
+        | { key?: NavKey; notice?: string }
+        | undefined;
+      if (detail?.notice && (detail?.key ? detail.key === "plan" : true)) {
+        setNotice(detail.notice);
+      }
+    };
+    window.addEventListener("appConfig:notice", handler as EventListener);
+    return () =>
+      window.removeEventListener("appConfig:notice", handler as EventListener);
+  }, []);
+
+  // When the modal opens to Plan, proactively refresh credits and log values
+  useEffect(() => {
+    if (!opened) return;
+    if (active !== "plan") return;
+    console.log(
+      "[AppConfigModal] Opening Plan section. Current creditBalance:",
+      creditBalance,
+    );
+    (async () => {
+      try {
+        await refreshCredits();
+      } catch (e) {
+        console.warn(
+          "[AppConfigModal] Failed to refresh credits on Plan open:",
+          e,
+        );
+      }
+    })();
+  }, [opened, active]);
+
+  useEffect(() => {
+    if (!opened) return;
+    if (active !== "plan") return;
+    console.log(
+      "[AppConfigModal] Credit balance updated while viewing Plan:",
+      creditBalance,
+    );
+  }, [opened, active, creditBalance]);
+
+  const colors = useMemo(
+    () => ({
+      navBg: "var(--modal-nav-bg)",
+      sectionTitle: "var(--modal-nav-section-title)",
+      navItem: "var(--modal-nav-item)",
+      navItemActive: "var(--modal-nav-item-active)",
+      navItemActiveBg: "var(--modal-nav-item-active-bg)",
+      contentBg: "var(--modal-content-bg)",
+      headerBorder: "var(--modal-header-border)",
+    }),
+    [],
+  );
+  const isDev = process.env.NODE_ENV === "development";
+
+  const openLogoutConfirm = useCallback(() => setConfirmOpen(true), []);
+
+  // Left navigation structure and icons
+  const configNavSections = useMemo(
+    () =>
+      createSaasConfigNavSections(Overview, openLogoutConfirm, {
+        isDev,
+        isAnonymous,
+        t,
+      }),
+    [openLogoutConfirm, isDev, isAnonymous, t],
+  );
+
+  const activeLabel = useMemo(() => {
+    for (const section of configNavSections) {
+      const found = section.items.find((i) => i.key === active);
+      if (found) return found.label;
+    }
+    return "";
+  }, [configNavSections, active]);
+
+  const activeComponent = useMemo(() => {
+    for (const section of configNavSections) {
+      const found = section.items.find((i) => i.key === active);
+      if (found) return found.component;
+    }
+    return null;
+  }, [configNavSections, active]);
+
+  return (
+    <>
+      <Modal
+        opened={opened}
+        onClose={onClose}
+        title={null}
+        size={isMobile ? "100%" : 980}
+        centered
+        radius="lg"
+        withCloseButton={false}
+        zIndex={Z_INDEX_OVER_FULLSCREEN_SURFACE}
+        overlayProps={{ opacity: 0.35, blur: 2 }}
+        padding={0}
+        fullScreen={isMobile}
+      >
+        <div className="modal-container">
+          {/* Left navigation */}
+          <div
+            className={`modal-nav ${isMobile ? "mobile" : ""}`}
+            style={{
+              background: colors.navBg,
+              borderRight: `1px solid ${colors.headerBorder}`,
+            }}
+          >
+            <div className="modal-nav-scroll">
+              {configNavSections.map((section) => (
+                <div key={section.title} className="modal-nav-section">
+                  {!isMobile && (
+                    <Text
+                      size="xs"
+                      fw={600}
+                      c={colors.sectionTitle}
+                      style={{ textTransform: "uppercase", letterSpacing: 0.4 }}
+                    >
+                      {section.title}
+                    </Text>
+                  )}
+                  <div className="modal-nav-section-items">
+                    {section.items.map((item) => {
+                      const isActive = active === item.key;
+                      const color = isActive
+                        ? colors.navItemActive
+                        : colors.navItem;
+                      const iconSize = isMobile ? 28 : 18;
+                      return (
+                        <div
+                          key={item.key}
+                          onClick={() => setActive(item.key)}
+                          className={`modal-nav-item ${isMobile ? "mobile" : ""}`}
+                          style={{
+                            background: isActive
+                              ? colors.navItemActiveBg
+                              : "transparent",
+                          }}
+                        >
+                          <LocalIcon
+                            icon={item.icon}
+                            width={iconSize}
+                            height={iconSize}
+                            style={{ color }}
+                          />
+                          {!isMobile && (
+                            <Text size="sm" fw={500} style={{ color }}>
+                              {item.label}
+                            </Text>
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Right content */}
+          <div className="modal-content">
+            <div className="modal-content-scroll">
+              {/* Sticky header with section title and small close button */}
+              <div
+                className="modal-header"
+                style={{
+                  background: colors.contentBg,
+                  borderBottom: `1px solid ${colors.headerBorder}`,
+                }}
+              >
+                <Text fw={700} size="lg">
+                  {activeLabel}
+                  {active === "plan" && notice ? (
+                    <span
+                      style={{
+                        marginLeft: 8,
+                        fontWeight: 600,
+                        color: "var(--mantine-color-yellow-7)",
+                      }}
+                    >
+                      – {notice}
+                    </span>
+                  ) : null}
+                </Text>
+                <ActionIcon
+                  variant="subtle"
+                  onClick={onClose}
+                  aria-label="Close"
+                >
+                  <LocalIcon icon="close-rounded" width={18} height={18} />
+                </ActionIcon>
+              </div>
+              <div className="modal-body">{activeComponent}</div>
+            </div>
+          </div>
+        </div>
+      </Modal>
+      {/* Confirm logout modal */}
+      <Modal
+        opened={confirmOpen}
+        onClose={() => setConfirmOpen(false)}
+        title="Sign out"
+        centered
+        zIndex={Z_INDEX_OVER_SETTINGS_MODAL}
+      >
+        <div className="confirm-modal-content">
+          <Text>Are you sure you want to sign out?</Text>
+          <div className="confirm-modal-buttons">
+            <Button variant="default" onClick={() => setConfirmOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              color="red"
+              onClick={async () => {
+                try {
+                  await signOut();
+                } finally {
+                  setConfirmOpen(false);
+                  onClose();
+                  window.location.href = withBasePath("/login");
+                }
+              }}
+            >
+              Sign out
+            </Button>
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default AppConfigModal;