@pylonsync/create-pylon 0.9.1 → 0.9.2

package/templates/backend/mobile/apps/api/app/(site)/terms/page.tsx

@@ -0,0 +1,144 @@
+import React from "react";
+import { type Metadata } from "@pylonsync/react";
+import { Company, LegalPage } from "@/components/legal";
+import { site } from "@/lib/site";
+
+export const metadata: Metadata = {
+  title: `Terms of Service — ${site.name}`,
+  description: `The agreement between you and ${site.name}.`,
+};
+
+/**
+ * The terms the app links to from the paywall and from Settings. Apple
+ * requires subscription terms to be visible next to the purchase, and this
+ * page is where the detail lives. Keep the billing section true to what your
+ * products actually do.
+ */
+export default function TermsPage() {
+  return (
+    <LegalPage title="Terms of Service">
+      <p>
+        These terms are the agreement between you and <Company /> for the use
+        of {site.name}. Using the app means you accept them.
+      </p>
+
+      <h2>Who may use it</h2>
+      <p>
+        You need to be at least 13 years old. If you use {site.name} for an
+        organization, you confirm you may accept these terms for it.
+      </p>
+
+      <h2>Your account</h2>
+      <p>
+        You are responsible for what happens under your account, so keep
+        access to your email and devices secure. Tell us if you think someone
+        else has your account.
+      </p>
+
+      <h2>Free and paid</h2>
+      <p>
+        The free tier holds up to {site.pricing.freeLimit} notes. A
+        subscription lifts that limit and includes what we add later. We may
+        change what each tier includes, and we will not reduce what you have
+        already paid for during a period you have paid.
+      </p>
+
+      <h2>Billing</h2>
+      <ul>
+        <li>
+          Apple and Google sell and bill the subscription, not us. The price
+          you see in the app is the price they charge in your country.
+        </li>
+        <li>
+          A subscription renews automatically until you cancel it. Cancel at
+          least 24 hours before the period ends, in your App Store or Play
+          Store account settings.
+        </li>
+        <li>
+          Refunds follow the store&apos;s policy. We cannot issue a refund for
+          a purchase we did not process, so ask Apple or Google.
+        </li>
+        <li>
+          Deleting the app does not cancel a subscription. Cancel it in the
+          store.
+        </li>
+      </ul>
+
+      <h2>Your content</h2>
+      <p>
+        Your notes are yours. You give us only the permission we need to run
+        the service, which is to store your content, back it up, and send it to
+        the devices you sign in on. We claim no ownership of it and we do not
+        use it to train anything.
+      </p>
+      <p>
+        You are responsible for what you put in the app, and for having the
+        right to put it there.
+      </p>
+
+      <h2>Acceptable use</h2>
+      <p>Do not use {site.name} to:</p>
+      <ul>
+        <li>break the law, or store material that is illegal to hold;</li>
+        <li>
+          attack the service, work around its limits, or get at other
+          people&apos;s data;
+        </li>
+        <li>resell it as your own product.</li>
+      </ul>
+
+      <h2>Availability</h2>
+      <p>
+        We work to keep {site.name} running, but we do not promise it will be
+        available without interruption. We may change or stop features. If we
+        shut the service down, we will give reasonable notice and a way to
+        export your notes.
+      </p>
+
+      <h2>Ending it</h2>
+      <p>
+        You can stop at any time by deleting your account in Settings. We may
+        suspend or close an account that breaks these terms or puts the service
+        or other people at risk.
+      </p>
+
+      <h2>Disclaimer and liability</h2>
+      <p>
+        {site.name} is provided as it is, without warranties beyond those the
+        law requires. To the extent the law allows, <Company /> is not liable
+        for indirect or consequential loss, and our total liability is limited
+        to what you paid us in the 12 months before the claim.
+      </p>
+      <p>
+        Nothing here removes rights you have as a consumer that cannot be
+        removed by agreement.
+      </p>
+
+      <h2>Changes</h2>
+      <p>
+        We may update these terms. The date at the top shows the current
+        version, and we will tell you in the app about a significant change.
+        Continuing to use {site.name} after that means you accept the new
+        terms.
+      </p>
+
+      <h2>Governing law</h2>
+      <p>
+        These terms are governed by the laws of{" "}
+        {site.governingLaw || "[your jurisdiction]"}, without regard to
+        conflict of law rules.
+      </p>
+
+      <h2>Contact</h2>
+      <p>
+        <Company />
+        {site.address ? <>, {site.address}</> : null}
+        {site.supportEmail ? (
+          <>
+            . Email <a href={`mailto:${site.supportEmail}`}>{site.supportEmail}</a>.
+          </>
+        ) : null}
+      </p>
+    </LegalPage>
+  );
+}

package/templates/backend/mobile/apps/api/app/error.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { type ErrorBoundaryProps } from "@pylonsync/react";
+
+// The error boundary sits at the root, outside the route group, so it still
+// renders if a layout itself throws. It is hydrated, so `reset()` works.
+export default function ErrorBoundary({ error, reset }: ErrorBoundaryProps) {
+  return (
+    <div className="mx-auto max-w-3xl px-6 py-24 text-center">
+      <h1 className="text-3xl font-semibold tracking-[-0.02em]">
+        Something went wrong
+      </h1>
+      <p className="mt-3 text-[15px] text-ink-muted">{error.message}</p>
+      {error.digest ? (
+        <p className="mt-1 text-[12px] text-ink-muted">
+          Reference: <code className="font-mono">{error.digest}</code>
+        </p>
+      ) : null}
+      <button
+        type="button"
+        onClick={reset}
+        className="mt-8 rounded-xl bg-ink px-5 py-3 text-[14px] font-medium text-surface transition-opacity hover:opacity-90"
+      >
+        Try again
+      </button>
+    </div>
+  );
+}

package/templates/backend/mobile/apps/api/app/globals.css

@@ -0,0 +1,87 @@
+@import "tailwindcss";
+
+/* Tailwind v4 scans these globs for class names. Add a line if you put
+   markup somewhere else. */
+@source "../app/**/*.{tsx,ts,jsx,js}";
+@source "../components/**/*.{tsx,ts,jsx,js}";
+@source "../lib/**/*.{tsx,ts,jsx,js}";
+
+/* The whole site re-themes from these. `--brand` is the accent on buttons
+   and links; the ink/surface pair carries everything else. */
+:root {
+  --brand: #4f46e5;
+  --brand-ink: #ffffff;
+  --brand-soft: #eef2ff;
+  --ink: #18181b;
+  --ink-muted: #52525b;
+  --surface: #ffffff;
+  --surface-soft: #fafafa;
+  --line: #e4e4e7;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --brand: #818cf8;
+    --brand-ink: #1e1b4b;
+    --brand-soft: #1e1b4b;
+    --ink: #fafafa;
+    --ink-muted: #a1a1aa;
+    --surface: #09090b;
+    --surface-soft: #131316;
+    --line: #27272a;
+  }
+}
+
+@theme inline {
+  --color-brand: var(--brand);
+  --color-brand-ink: var(--brand-ink);
+  --color-brand-soft: var(--brand-soft);
+  --color-ink: var(--ink);
+  --color-ink-muted: var(--ink-muted);
+  --color-surface: var(--surface);
+  --color-surface-soft: var(--surface-soft);
+  --color-line: var(--line);
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+/* Long-form legal copy. The legal pages are plain prose, so style the
+   elements once here instead of putting a class on every paragraph. */
+.prose-legal > * + * {
+  margin-top: 1rem;
+}
+.prose-legal h2 {
+  margin-top: 2.5rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--ink);
+}
+.prose-legal p,
+.prose-legal li {
+  color: var(--ink-muted);
+  line-height: 1.7;
+}
+.prose-legal ul {
+  margin-left: 1.125rem;
+  list-style: disc;
+}
+.prose-legal li + li {
+  margin-top: 0.375rem;
+}
+.prose-legal a {
+  color: var(--brand);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}

package/templates/backend/mobile/apps/api/app/layout.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+/**
+ * The document shell. Chrome lives in the section layout
+ * (`app/(site)/layout.tsx`), which is what wraps the pages with the header
+ * and footer. Tailwind's compiled stylesheet is injected into <head> by the
+ * runtime.
+ *
+ * No <title> here on purpose: each page exports its own `metadata`, and a
+ * title in the layout would render first and win.
+ */
+export default function RootLayout({ children }: LayoutProps) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="color-scheme" content="light dark" />
+      </head>
+      <body className="min-h-screen bg-surface text-ink">{children}</body>
+    </html>
+  );
+}

package/templates/backend/mobile/apps/api/app/robots.ts

@@ -0,0 +1,13 @@
+import type { Robots } from "@pylonsync/react";
+import { site } from "@/lib/site";
+
+// app/robots.ts → served at /robots.txt.
+const SITE = site.url || process.env.SITE_URL || "http://localhost:4321";
+
+export default function robots(): Robots {
+  return {
+    // The API is not for crawlers; the marketing and legal pages are.
+    rules: { userAgent: "*", allow: "/", disallow: ["/api/"] },
+    sitemap: `${SITE}/sitemap.xml`,
+  };
+}

package/templates/backend/mobile/apps/api/app/sitemap.ts

@@ -0,0 +1,16 @@
+import type { Sitemap } from "@pylonsync/react";
+import { site } from "@/lib/site";
+
+// app/sitemap.ts → served at /sitemap.xml. This is a server-only route
+// module, never bundled for the browser, so reading process.env here is
+// safe (page components cannot).
+const SITE = site.url || process.env.SITE_URL || "http://localhost:4321";
+
+export default function sitemap(): Sitemap {
+  return [
+    { url: `${SITE}/`, changeFrequency: "weekly", priority: 1 },
+    { url: `${SITE}/support`, changeFrequency: "monthly", priority: 0.5 },
+    { url: `${SITE}/privacy`, changeFrequency: "yearly", priority: 0.3 },
+    { url: `${SITE}/terms`, changeFrequency: "yearly", priority: 0.3 },
+  ];
+}

package/templates/backend/mobile/apps/api/app.ts

@@ -1,6 +1,7 @@
 import {
   auth,
   buildManifest,
+  discoverAppRoutes,
   discoverFunctions,
   entity,
   field,
@@ -73,8 +74,11 @@ const manifest = buildManifest({
   // register each twice.
   actions: fns.actions,
   policies: [userPolicy, notePolicy, ...purchases.manifest.policies],
-  // API only: the Expo app is the frontend.
-  routes: [],
+  // The public website: landing page, support, privacy policy, and terms,
+  // under `app/`. One Pylon server answers the Expo app's API calls AND
+  // serves these pages, so the legal URLs both stores demand are live on the
+  // same host as soon as you deploy. Content lives in `lib/site.ts`.
+  routes: await discoverAppRoutes(),
   // Email/password + magic codes are on by default. Native sign-in needs
   // the app's ids on the server: PYLON_APPLE_NATIVE_CLIENT_IDS (the iOS
   // bundle id) and PYLON_GOOGLE_NATIVE_CLIENT_IDS (the iOS + Android OAuth

package/templates/backend/mobile/apps/api/components/legal.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { site } from "@/lib/site";
+
+/**
+ * The frame both legal pages share: title, effective date, and the notice
+ * that this text is a starting point rather than reviewed legal advice.
+ *
+ * The notice is shown until `lib/site.ts` has your company details, on the
+ * same principle as the banner in the site layout: unfinished legal text
+ * should say so.
+ */
+export function LegalPage({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  const unfinished = !site.company || !site.supportEmail || !site.address;
+  return (
+    <article className="mx-auto max-w-3xl px-6 py-16 sm:py-20">
+      <h1 className="text-3xl font-semibold tracking-[-0.02em]">{title}</h1>
+      <p className="mt-3 text-[13px] text-ink-muted">
+        Effective {formatDate(site.legalEffective)}
+        {site.company ? ` · ${site.company}` : ""}
+      </p>
+      {unfinished ? (
+        <p className="mt-8 rounded-xl border border-amber-300 bg-amber-50 px-4 py-3 text-[13px] leading-relaxed text-amber-900">
+          Draft. This text describes what the app in this template actually
+          does, which makes it a useful starting point, but it has not been
+          reviewed by a lawyer and it does not know your business. Fill in
+          <code className="mx-1 font-mono">lib/site.ts</code>, read every
+          section, and have counsel check it before you submit to a store.
+        </p>
+      ) : null}
+      <div className="prose-legal mt-10">{children}</div>
+      <p className="mt-12 border-t border-line pt-6 text-[13px] text-ink-muted">
+        Questions about this page?{" "}
+        {site.supportEmail ? (
+          <a href={`mailto:${site.supportEmail}`}>{site.supportEmail}</a>
+        ) : (
+          "Add a support address in lib/site.ts."
+        )}
+      </p>
+    </article>
+  );
+}
+
+/** The legal entity, or a visible placeholder while the config is blank. */
+export function Company() {
+  return <>{site.company || "[your company]"}</>;
+}
+
+function formatDate(iso: string): string {
+  // Build from the parts. `new Date("2026-01-01")` parses as UTC midnight and
+  // renders as the day before in any negative-UTC timezone.
+  const [y, m, d] = iso.split("-").map(Number);
+  if (!y || !m || !d) return iso;
+  return new Date(y, m - 1, d).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}

package/templates/backend/mobile/apps/api/lib/site.ts

@@ -0,0 +1,94 @@
+/**
+ * Everything the marketing and legal pages read. This is the one file to
+ * edit when you rename the app, add store links, or fill in your company
+ * details.
+ *
+ * It is a plain module, not env vars, on purpose: SSR pages are bundled for
+ * hydration and the bundler rewrites `process.env.*`, so page code cannot
+ * read arbitrary env at render time. Server-only route modules
+ * (app/sitemap.ts, app/robots.ts) can, and do.
+ */
+
+export const site = {
+  /** Shown in the header, the page titles, and the legal pages. */
+  name: "__APP_NAME__",
+  /** The hero headline. One sentence, what the app does for the person. */
+  tagline: "Your notes, on every device, the moment you write them",
+  /** The line under the headline, and the meta description. */
+  description:
+    "__APP_NAME__ keeps your notes in sync across your phone, tablet, and anything else you sign in on. It works offline and catches up when you are back.",
+
+  /**
+   * The public URL of this site once deployed, with no trailing slash.
+   * `pylon deploy` prints the host. Used for canonical links and the
+   * sitemap, and by the mobile app when it opens the legal pages.
+   */
+  url: "",
+
+  /** The legal entity that publishes the app. Appears on both legal pages. */
+  company: "",
+  /** Where support email and legal notices go. */
+  supportEmail: "",
+  /** Postal address. Apple asks for one on the privacy policy. */
+  address: "",
+  /** The law that governs the terms, e.g. "the State of Texas, USA". */
+  governingLaw: "",
+  /** Date the current legal text took effect, as YYYY-MM-DD. */
+  legalEffective: "2026-01-01",
+
+  /** Store links. Empty renders a "coming soon" state instead of a dead link. */
+  appStoreUrl: "",
+  playStoreUrl: "",
+
+  /** The three or four things worth saying on the landing page. */
+  features: [
+    {
+      title: "Write now, sync later",
+      body: "Notes save on your device first, so the app never waits on a network. They reach your other devices as soon as there is one.",
+    },
+    {
+      title: "Start without an account",
+      body: "Open the app and use it. Sign in when you want your notes on a second device, and everything you already wrote comes with you.",
+    },
+    {
+      title: "Yours to delete",
+      body: "Delete your account in Settings and your notes go with it. No support ticket, no waiting.",
+    },
+  ],
+
+  /** Free tier and subscription, kept honest with what the app enforces. */
+  pricing: {
+    freeLimit: 10,
+    proBlurb: "Unlimited notes and everything shipped next.",
+  },
+
+  faq: [
+    {
+      q: "Do I need an account?",
+      a: "No. The app works straight away. Signing in keeps your notes if you switch phones.",
+    },
+    {
+      q: "How do I cancel a subscription?",
+      a: "Subscriptions are billed by Apple or Google, so cancel from your App Store or Play Store account. Access lasts until the end of the period you paid for.",
+    },
+    {
+      q: "What happens to my notes if I delete my account?",
+      a: "They are deleted with it. Settings has the button, and it takes effect immediately.",
+    },
+  ],
+} as const;
+
+/**
+ * Config the site cannot honestly render without. The header shows a notice
+ * while any of these are blank, so an unfinished site cannot quietly go live
+ * with placeholder legal text.
+ */
+export function missingSiteConfig(): string[] {
+  const missing: string[] = [];
+  if (!site.url) missing.push("url");
+  if (!site.company) missing.push("company");
+  if (!site.supportEmail) missing.push("supportEmail");
+  if (!site.address) missing.push("address");
+  if (!site.governingLaw) missing.push("governingLaw");
+  return missing;
+}

package/templates/backend/mobile/apps/api/package.json

@@ -13,11 +13,18 @@
   "dependencies": {
     "@pylonsync/sdk": "^__PYLON_VERSION__",
     "@pylonsync/functions": "^__PYLON_VERSION__",
-    "@pylonsync/revenuecat": "^__PYLON_VERSION__"
+    "@pylonsync/react": "^__PYLON_VERSION__",
+    "@pylonsync/revenuecat": "^__PYLON_VERSION__",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.3.0",
+    "@tailwindcss/cli": "^4.3.0"
   },
   "devDependencies": {
     "@pylonsync/cli": "^__PYLON_VERSION__",
     "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "typescript": "^5.6.0"
   }
 }

package/templates/backend/mobile/apps/api/tsconfig.json

@@ -3,11 +3,15 @@
     "target": "ES2022",
     "module": "ESNext",
     "moduleResolution": "bundler",
+    "jsx": "react",
     "strict": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
     "noEmit": true,
-    "types": ["node"]
+    "lib": ["ES2022", "DOM"],
+    "types": ["react", "react-dom", "node"],
+    "baseUrl": ".",
+    "paths": { "@/*": ["./*"] }
   },
-  "include": ["app.ts", "functions", "lib"]
+  "include": ["app.ts", "app/**/*", "components/**/*", "functions/**/*", "lib/**/*"]
 }

package/templates/expo/mobile/apps/expo/.env.example

@@ -13,7 +13,16 @@ EXPO_PUBLIC_REVENUECAT_ANDROID_KEY=
 EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID=
 EXPO_PUBLIC_GOOGLE_IOS_CLIENT_ID=
 
-# Shown in Settings and required by both stores.
-EXPO_PUBLIC_PRIVACY_URL=https://example.com/privacy
-EXPO_PUBLIC_TERMS_URL=https://example.com/terms
-EXPO_PUBLIC_SUPPORT_EMAIL=support@example.com
+# The privacy policy, terms, and help pages are served by the backend in
+# apps/api, so they default to EXPO_PUBLIC_PYLON_BASE_URL + /privacy, /terms,
+# and /support. Both stores require a reachable privacy policy URL.
+#
+# Set these only if the marketing site lives somewhere else, e.g. your own
+# domain. EXPO_PUBLIC_SITE_URL moves all three at once.
+# EXPO_PUBLIC_SITE_URL=https://yourapp.com
+# EXPO_PUBLIC_PRIVACY_URL=
+# EXPO_PUBLIC_TERMS_URL=
+# EXPO_PUBLIC_SUPPORT_URL=
+
+# Optional. Adds a "Contact support" row in Settings.
+EXPO_PUBLIC_SUPPORT_EMAIL=

package/templates/expo/mobile/apps/expo/README.md

@@ -15,9 +15,16 @@ src/session.tsx            boot + state machine
 src/purchases.ts           RevenueCat wrapper, safe in Expo Go
 src/entitlements.ts        usePro() from the synced RcEntitlement rows
 src/analytics.ts           funnel events; wire to your SDK in one place
+src/links.ts               privacy / terms / support URLs, served by apps/api
 STORE.md                   the submission checklist
 ```
 
+The public website (landing page, `/privacy`, `/terms`, `/support`) is served
+by the backend in `apps/api`, on the same host as the API. The links in
+Settings and under the paywall point there with no configuration, which is
+what makes the store requirement satisfiable from a fresh scaffold. Edit its
+copy in `apps/api/lib/site.ts`.
+
 ## Run
 
 ```bash
@@ -49,6 +56,8 @@ also carry Notes-specific copy or logic:
 - `app/(tabs)/settings.tsx`: the delete-account confirmation.
 - `app/(tabs)/index.tsx`: the list, `FREE_LIMIT`, and the sign-in nudge.
 - `app.config.ts`: `name`, `slug`, `scheme`, and the icons in `assets/`.
+- `apps/api/lib/site.ts`: the website copy, store links, and the company
+  details the privacy policy and terms need.
 - `apps/api/functions/deleteMyData.ts`: delete every entity that stores
   user data, or account deletion leaves rows behind.
 - `apps/api/functions/createNote.ts`: the free-tier cap.

package/templates/expo/mobile/apps/expo/STORE.md

@@ -3,7 +3,7 @@
 The order below is the shortest path that App Review and Google Play accept
 on the first try. Each step is one command or one dashboard page.
 
-## 1. Backend live
+## 1. Backend and website live
 
 ```bash
 cd apps/api && pylon deploy
@@ -52,8 +52,12 @@ Test the purchase on TestFlight with a sandbox Apple ID before submitting.
 
 Both stores require, and reviewers check:
 
-- Privacy policy URL and terms URL (`EXPO_PUBLIC_PRIVACY_URL`, `EXPO_PUBLIC_TERMS_URL`).
-  The app shows them in Settings and under the paywall.
+- Privacy policy URL and terms URL. The backend serves them at
+  `<your-backend>/privacy` and `<your-backend>/terms`, and the app links to
+  them from Settings and under the paywall with no configuration. Fill in
+  `apps/api/lib/site.ts` first: the text ships as a draft and a banner stays
+  on the page until you do.
+- A support URL for App Store Connect: `<your-backend>/support`.
 - Account deletion inside the app (Settings → Delete account). Present.
 - Sign in with Apple when any other third-party sign-in is offered. Present.
 - Subscription terms next to the purchase button (price, period, renewal). Present.
@@ -87,8 +91,8 @@ Without it `eas submit` asks for the app interactively.
   RevenueCat, and the iOS and Android public keys are in `apps/expo/.env`.
 - Sign-in: `PYLON_APPLE_NATIVE_CLIENT_IDS` (the bundle id) and
   `PYLON_GOOGLE_NATIVE_CLIENT_IDS` are set on the backend.
-- Legal: `EXPO_PUBLIC_PRIVACY_URL`, `EXPO_PUBLIC_TERMS_URL`, and
-  `EXPO_PUBLIC_SUPPORT_EMAIL` point at real pages and a monitored inbox.
+- Legal: `apps/api/lib/site.ts` is filled in, the draft banner is gone from
+  `/privacy` and `/terms`, and a lawyer has read both.
 - Deletion: `apps/api/functions/deleteMyData.ts` removes every entity that
   stores user data. Test it with a throwaway account.
 - Copy: the "Replace the demo" list in `README.md` is done.

package/templates/expo/mobile/apps/expo/app/(tabs)/settings.tsx

@@ -4,6 +4,7 @@ import { useRouter } from "expo-router";
 import Constants from "expo-constants";
 import { deleteAccount } from "@pylonsync/react-native";
 import { track } from "@/analytics";
+import { PRIVACY_URL, SUPPORT_EMAIL, SUPPORT_URL, TERMS_URL } from "@/links";
 import { usePro } from "@/entitlements";
 import { resetFlags } from "@/flags";
 import { manageSubscriptionUrl, restore } from "@/purchases";
@@ -27,9 +28,8 @@ export default function Settings() {
   const { pro } = usePro();
   const [busy, setBusy] = useState<string | null>(null);
 
-  const privacy = process.env.EXPO_PUBLIC_PRIVACY_URL;
-  const terms = process.env.EXPO_PUBLIC_TERMS_URL;
-  const support = process.env.EXPO_PUBLIC_SUPPORT_EMAIL;
+  // These resolve to the site the backend serves (apps/api), so the rows
+  // always render and always lead somewhere real. See src/links.ts.
   const version = Constants.expoConfig?.version ?? "dev";
 
   async function restorePurchases() {
@@ -99,9 +99,12 @@ export default function Settings() {
         <Spacer />
 
         <Caption>About</Caption>
-        {privacy ? <Row label="Privacy policy" onPress={() => void Linking.openURL(privacy)} /> : null}
-        {terms ? <Row label="Terms of service" onPress={() => void Linking.openURL(terms)} /> : null}
-        {support ? <Row label="Contact support" onPress={() => void Linking.openURL(`mailto:${support}`)} /> : null}
+        <Row label="Help" onPress={() => void Linking.openURL(SUPPORT_URL)} />
+        <Row label="Privacy policy" onPress={() => void Linking.openURL(PRIVACY_URL)} />
+        <Row label="Terms of service" onPress={() => void Linking.openURL(TERMS_URL)} />
+        {SUPPORT_EMAIL ? (
+          <Row label="Contact support" onPress={() => void Linking.openURL(`mailto:${SUPPORT_EMAIL}`)} />
+        ) : null}
         <Row label="Version" value={version} />
         <Spacer />