add support pages and legal stuff, update config settings for pds

local-infra/pds.env

···
 PDS_DID_PLC_URL=http://plc:8080
 PDS_HOSTNAME=pds.dev.grain.social
 PDS_EMAIL_SMTP_URL=smtp://maildev:1025
-PDS_EMAIL_FROM_ADDRESS=[e-mail]
+PDS_EMAIL_FROM_ADDRESS=[e-mail]
 PDS_SERVICE_NAME=Grain Social
 PDS_INVITE_REQUIRED=0
 PDS_OAUTH_PROVIDER_NAME=Grain Social
···
 PDS_PRIMARY_COLOR=#00a6f4
 PDS_PRIMARY_COLOR_CONTRAST=#fff
 PDS_PRIMARY_COLOR_HUE=#fff
+PDS_TERMS_OF_SERVICE_URL = 'http://localhost:8080/support/terms'
+PDS_PRIVACY_POLICY_URL = 'http://localhost:8080/support/privacy'
+PDS_SUPPORT_URL= 'http://localhost:8080/support'
+PDS_CONTACT_EMAIL_ADDRESS = '[e-mail]'

services/pds/.env.example

···
 
 # private: email
 PDS_EMAIL_SMTP_URL=smtps://resend:<secret api key here>@smtp.resend.com:465/
-PDS_EMAIL_FROM_ADDRESS=[e-mail]
+PDS_EMAIL_FROM_ADDRESS=[e-mail]

services/pds/fly.toml

···
   PDS_PRIMARY_COLOR = '#00a6f4'
   PDS_PRIMARY_COLOR_CONTRAST = '#fff'
   PDS_PRIMARY_COLOR_HUE = '#fff'
+  PDS_TERMS_OF_SERVICE_URL = 'https://grain.social/support/terms'
+  PDS_PRIVACY_POLICY_URL = 'https://grain.social/support/privacy'
+  PDS_SUPPORT_URL= 'https://grain.social/support'
+  PDS_CONTACT_EMAIL_ADDRESS = '[e-mail]'
 
 [[mounts]]
   source = 'pdsdata'

src/components/LoginPage.tsx

···
         infoText="e.g., user.bsky.social, user.grain.social, example.com, https://pds.example.com"
         infoClass="text-white text-sm! bg-zinc-950/70 p-4 font-mono"
       />
-      <div class="absolute bottom-2 right-2 text-white text-sm">
-        Photo by{" "}
-        <a
-          href={profileLink("chadtmiller.com")}
-          class="hover:underline font-semibold"
-        >
-          @chadtmiller.com
-        </a>
+      <div class="absolute bottom-2 left-2 right-2 flex flex-col sm:flex-row justify-between items-start sm:items-end text-white text-sm gap-1 sm:gap-0">
+        <div class="flex flex-col sm:flex-row">
+          <span>
+            © 2025 Grain Social. All rights reserved.
+          </span>
+          <span class="flex flex-row items-center flex-wrap">
+            <a
+              href="/support/terms"
+              class="underline hover:no-underline ml-0 sm:ml-2 mt-1 sm:mt-0"
+            >
+              Terms
+            </a>
+            <span class="mx-1">|</span>
+            <a
+              href="/support/privacy"
+              class="underline hover:no-underline ml-0 sm:ml-1 mt-1 sm:mt-0"
+            >
+              Privacy
+            </a>
+            <span class="mx-1">|</span>
+            <a
+              href="/support/copyright"
+              class="underline hover:no-underline ml-0 sm:ml-1 mt-1 sm:mt-0"
+            >
+              Copyright
+            </a>
+          </span>
+        </div>
+        <div>
+          Photo by{" "}
+          <a
+            href={profileLink("chadtmiller.com")}
+            class="underline hover:no-underline"
+          >
+            @chadtmiller.com
+          </a>
+        </div>
       </div>
     </div>
   );

src/legal.tsx

···
+import { ComponentChildren } from "preact";
+
+type SectionProps = {
+  title: string;
+  children: ComponentChildren;
+};
+
+const Section = ({ title, children }: SectionProps) => (
+  <section className="mb-8">
+    <h2 className="text-xl font-bold mb-2 text-zinc-800 dark:text-zinc-100">
+      {title}
+    </h2>
+    <div className="space-y-2 text-zinc-700 dark:text-zinc-300 text-sm">
+      {children}
+    </div>
+  </section>
+);
+
+export function Terms() {
+  return (
+    <div className="px-4 py-4">
+      <nav className="mb-4 text-sm text-zinc-500 dark:text-zinc-300">
+        <a href="/support" className="text-sky-500 hover:underline">
+          support
+        </a>{" "}
+        <span className="mx-1">&gt;</span>{" "}
+        <span className="text-zinc-700 dark:text-zinc-100">terms</span>
+      </nav>
+      <h1 className="text-3xl font-bold mb-6 text-zinc-900 dark:text-white">
+        Terms and Conditions
+      </h1>
+
+      <div className="mb-6 text-sm text-zinc-900 dark:text-white">
+        Last Updated: June 3, 2025
+      </div>
+
+      <Section title="Overview">
+        <p>
+          Grain is a photo sharing app built on the{" "}
+          <a
+            href="https://atproto.com/"
+            className="text-sky-500 hover:underline"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            AT Protocol
+          </a>
+          . All data, including photos, galleries, favorites, and metadata, is
+          public and stored on the AT Protocol network. Users can upload photos,
+          create and favorite galleries, and view non-location EXIF metadata.
+        </p>
+        <p>
+          Grain is an open source project. These Terms apply to your use of the
+          hosted version at{" "}
+          <code>grain.social</code>, not to self-hosted instances or forks of
+          the source code.
+        </p>
+      </Section>
+
+      <Section title="Account and Data Ownership">
+        <p>
+          Grain uses the AT Protocol, so users retain full control over their
+          data. We are an independent project and not affiliated with Bluesky or
+          the AT Protocol.
+        </p>
+        <p>
+          If you use a <code>grain.social</code>{" "}
+          handle, your data may be stored on our own self-hosted{" "}
+          <a
+            href="https://atproto.com/guides/glossary#pds-personal-data-server"
+            className="text-sky-500 hover:underline"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            PDS (Personal Data Server)
+          </a>{" "}
+          in accordance with protocol standards.
+        </p>
+      </Section>
+
+      <Section title="Content">
+        <p>
+          You are responsible for any content you share. Do not upload content
+          you do not have rights to. All uploads are publicly visible and cannot
+          currently be set as private.
+        </p>
+      </Section>
+
+      <Section title="Analytics">
+        <p>
+          We use{" "}
+          <a
+            href="https://www.goatcounter.com/"
+            className="text-sky-500 hover:underline"
+          >
+            Goatcounter
+          </a>{" "}
+          for basic analytics. No personal data is collected, tracked, or sold.
+        </p>
+      </Section>
+
+      <Section title="Prohibited Conduct">
+        <p>
+          Do not upload illegal content, harass users, impersonate others, or
+          attempt to disrupt the network.
+        </p>
+      </Section>
+
+      <Section title="Disclaimers">
+        <p>
+          Grain is provided "as is." We do not guarantee uptime, data retention,
+          or uninterrupted access.
+        </p>
+      </Section>
+
+      <Section title="Termination">
+        <p>
+          We reserve the right to suspend or terminate your access to Grain at
+          any time, without prior notice, for conduct that we believe violates
+          these Terms, our community standards, or is harmful to other users or
+          the AT Protocol network. Terminated accounts may lose access to
+          uploaded content unless retained through the protocol’s data
+          persistence mechanisms.
+        </p>
+      </Section>
+
+      <Section title="Changes">
+        <p>
+          We may update these terms periodically. Continued use means acceptance
+          of any changes.
+        </p>
+      </Section>
+
+      <Section title="Contact">
+        <p>
+          For any questions about these Terms, your account, or issues with the
+          app, you can contact us at{" "}
+          <a
+            href="mailto:[e-mail]"
+            className="text-sky-500 hover:underline"
+          >
+            [e-mail]
+          </a>
+          .
+        </p>
+      </Section>
+    </div>
+  );
+}
+
+export function PrivacyPolicy() {
+  return (
+    <div className="px-4 py-4">
+      <nav className="mb-4 text-sm text-zinc-500 dark:text-zinc-300">
+        <a href="/support" className="text-sky-500 hover:underline">
+          support
+        </a>{" "}
+        <span className="mx-1">&gt;</span>{" "}
+        <span className="text-zinc-700 dark:text-zinc-100">privacy</span>
+      </nav>
+      <h1 className="text-3xl font-bold mb-6 text-zinc-900 dark:text-white">
+        Privacy Policy
+      </h1>
+
+      <div className="mb-6 text-sm text-zinc-900 dark:text-white">
+        Last Updated: June 3, 2025
+      </div>
+
+      <Section title="Data Storage and Access">
+        <p>
+          Your data is stored on the AT Protocol. If you use a{" "}
+          <code>grain.social</code>{" "}
+          handle, it may be stored on our PDS. We do not store or access data
+          beyond the protocol’s standard behavior.
+        </p>
+      </Section>
+
+      <Section title="Public Data">
+        <p>
+          All content on Grain is public. Private uploads are not currently
+          supported.
+        </p>
+      </Section>
+
+      {
+        /* Coming soon */
+        /* <Section title="EXIF Metadata">
+        <p>
+          We optionally collect and display EXIF metadata (excluding location)
+          from your photos. At upload time, you can choose whether to allow this
+          metadata to be collected. The metadata is stored according to standard
+          AT Protocol storage mechanisms and is not retained outside the
+          protocol or used for other purposes.
+        </p>
+        <p>
+          You can learn more about the types of metadata commonly embedded in
+          photos at{" "}
+          <a
+            href="https://exiv2.org/tags.html"
+            className="text-sky-500 hover:underline"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            exiv2.org
+          </a>
+          .
+        </p>
+      </Section> */
+      }
+
+      <Section title="Analytics">
+        <p>
+          We use{" "}
+          <a
+            href="https://www.goatcounter.com/"
+            className="text-sky-500 hover:underline"
+          >
+            Goatcounter
+          </a>{" "}
+          for analytics. It is privacy-focused: no IP addresses, cookies, or
+          personal data is collected.
+        </p>
+      </Section>
+
+      <Section title="No Ads or Tracking">
+        <p>We do not serve ads, use third-party tracking, or sell user data.</p>
+      </Section>
+
+      <Section title="Children’s Privacy">
+        <p>Grain is not intended for users under 13 years of age.</p>
+      </Section>
+
+      <Section title="Changes to Policy">
+        <p>
+          This policy may be updated. Material changes will be communicated via
+          the app or site.
+        </p>
+      </Section>
+
+      <Section title="Contact">
+        <p>
+          For privacy questions, contact us at{" "}
+          <a
+            href="mailto:[e-mail]"
+            className="text-sky-500 hover:underline"
+          >
+            [e-mail]
+          </a>
+          .
+        </p>
+      </Section>
+    </div>
+  );
+}
+
+export function CopyrightPolicy() {
+  return (
+    <div className="px-4 py-4">
+      <nav className="mb-4 text-sm text-zinc-500 dark:text-zinc-300">
+        <a href="/support" className="text-sky-500 hover:underline">
+          support
+        </a>{" "}
+        <span className="mx-1">&gt;</span>{" "}
+        <span className="text-zinc-700 dark:text-zinc-100">copyright</span>
+      </nav>
+      <h1 className="text-3xl font-bold mb-6 text-zinc-900 dark:text-white">
+        Copyright Policy
+      </h1>
+
+      <div className="mb-6 text-sm text-zinc-900 dark:text-white">
+        Last Updated: June 3, 2025
+      </div>
+
+      <Section title="Copyright Infringement">
+        <p>
+          Grain respects the intellectual property rights of others and expects
+          users to do the same. If you believe your copyrighted work has been
+          used in a way that constitutes infringement, please notify us
+          promptly.
+        </p>
+      </Section>
+
+      <Section title="Notice Requirements">
+        <p>
+          Your infringement notice must include: (1) a description of the
+          copyrighted work, (2) the location of the infringing material, (3)
+          your contact information, (4) a statement that you believe in good
+          faith the use is not authorized, and (5) a statement, under penalty of
+          perjury, that the information is accurate.
+        </p>
+      </Section>
+
+      <Section title="DMCA Compliance">
+        <p>
+          Grain complies with the Digital Millennium Copyright Act (DMCA). If
+          you are a copyright holder and believe your rights have been violated,
+          you may file a DMCA notice with the required information to our
+          designated agent. We will promptly respond to all valid DMCA notices
+          and take appropriate action, including removal of the infringing
+          content and disabling access.
+        </p>
+      </Section>
+
+      <Section title="Repeat Infringers">
+        <p>
+          Accounts that repeatedly infringe copyright may be suspended or
+          removed in accordance with AT Protocol and Grain Social’s moderation
+          guidelines.
+        </p>
+      </Section>
+
+      <Section title="Contact">
+        <p>
+          To report infringement or submit a DMCA notice, contact us at{" "}
+          <a
+            href="mailto:[e-mail]"
+            className="text-sky-500 hover:underline"
+          >
+            [e-mail]
+          </a>
+          .
+        </p>
+      </Section>
+    </div>
+  );
+}

src/main.tsx

···
 import * as dialogHandlers from "./routes/dialogs.tsx";
 import { handler as exploreHandler } from "./routes/explore.tsx";
 import { handler as galleryHandler } from "./routes/gallery.tsx";
+import * as legalHandlers from "./routes/legal.tsx";
 import { handler as notificationsHandler } from "./routes/notifications.tsx";
 import { handler as onboardHandler } from "./routes/onboard.tsx";
 import { handler as profileHandler } from "./routes/profile.tsx";
 import { handler as recordHandler } from "./routes/record.ts";
+import { handler as supportHandler } from "./routes/support.tsx";
 import { handler as timelineHandler } from "./routes/timeline.tsx";
 import { handler as uploadHandler } from "./routes/upload.tsx";
 import { appStateMiddleware, type State } from "./state.ts";
···
     route("/profile/:handle/gallery/:rkey", galleryHandler),
     route("/upload", uploadHandler),
     route("/onboard", onboardHandler),
+    route("/support", supportHandler),
+    route("/support/privacy", legalHandlers.privacyHandler),
+    route("/support/terms", legalHandlers.termsHandler),
+    route("/support/copyright", legalHandlers.copyrightHandler),
     route("/dialogs/create-account", dialogHandlers.createAccount),
     route("/dialogs/gallery/new", dialogHandlers.createGallery),
     route("/dialogs/gallery/:rkey", dialogHandlers.editGallery),

src/routes/legal.tsx

···
+import { BffContext, RouteHandler } from "@bigmoves/bff";
+import { CopyrightPolicy, PrivacyPolicy, Terms } from "../legal.tsx";
+import type { State } from "../state.ts";
+
+export const termsHandler: RouteHandler = (
+  _req,
+  _params,
+  ctx: BffContext<State>,
+) => {
+  return ctx.render(
+    <Terms />,
+  );
+};
+
+export const privacyHandler: RouteHandler = (
+  _req,
+  _params,
+  ctx: BffContext<State>,
+) => {
+  return ctx.render(
+    <PrivacyPolicy />,
+  );
+};
+
+export const copyrightHandler: RouteHandler = (
+  _req,
+  _params,
+  ctx: BffContext<State>,
+) => {
+  return ctx.render(
+    <CopyrightPolicy />,
+  );
+};

src/routes/support.tsx

···
+import { RouteHandler } from "@bigmoves/bff";
+
+export const handler: RouteHandler = (_req, _params, ctx) => {
+  ctx.state.meta = [{ title: "Support — Grain" }];
+  return ctx.render(
+    <div className="px-4 py-4">
+      <h1 className="text-3xl font-bold mb-4 text-zinc-900 dark:text-white">
+        Support
+      </h1>
+      <p className="mb-4 text-zinc-700 dark:text-zinc-300">
+        For help, questions, or to report issues, please email us at{" "}
+        <a
+          href="mailto:[e-mail]"
+          className="text-sky-500 hover:underline"
+        >
+          [e-mail]
+        </a>.
+      </p>
+      <p className="mb-2 text-zinc-700 dark:text-zinc-300">
+        You can also review our{" "}
+        <a href="/support/terms" className="text-sky-500 hover:underline">
+          Terms
+        </a>,{" "}
+        <a href="/support/privacy" className="text-sky-500 hover:underline">
+          Privacy Policy
+        </a>, and{" "}
+        <a href="/support/copyright" className="text-sky-500 hover:underline">
+          Copyright Policy
+        </a>.
+      </p>
+    </div>,
+  );
+};

static/styles.css

···
     --color-zinc-50: oklch(98.5% 0 0);
     --color-zinc-100: oklch(96.7% 0.001 286.375);
     --color-zinc-200: oklch(92% 0.004 286.32);
+    --color-zinc-300: oklch(87.1% 0.006 286.286);
     --color-zinc-500: oklch(55.2% 0.016 285.938);
     --color-zinc-600: oklch(44.2% 0.017 285.786);
+    --color-zinc-700: oklch(37% 0.013 285.805);
     --color-zinc-800: oklch(27.4% 0.006 286.033);
     --color-zinc-900: oklch(21% 0.006 285.885);
     --color-zinc-950: oklch(14.1% 0.005 285.823);
···
     --text-xl--line-height: calc(1.75 / 1.25);
     --text-2xl: 1.5rem;
     --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
     --text-4xl: 2.25rem;
     --text-4xl--line-height: calc(2.5 / 2.25);
     --font-weight-semibold: 600;
···
   }
 }
 @layer utilities {
+  .visible {
+    visibility: visible;
+  }
   .sr-only {
     position: absolute;
     width: 1px;
···
       max-width: 96rem;
     }
   }
+  .mx-1 {
+    margin-inline: calc(var(--spacing) * 1);
+  }
   .mx-auto {
     margin-inline: auto;
   }
···
   .my-30 {
     margin-block: calc(var(--spacing) * 30);
   }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
···
   }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
+  }
+  .mb-6 {
+    margin-bottom: calc(var(--spacing) * 6);
+  }
+  .mb-8 {
+    margin-bottom: calc(var(--spacing) * 8);
+  }
+  .ml-0 {
+    margin-left: calc(var(--spacing) * 0);
   }
   .flex {
     display: flex;
···
   .flex-col {
     flex-direction: column;
   }
+  .flex-row {
+    flex-direction: row;
+  }
   .flex-wrap {
     flex-wrap: wrap;
   }
···
   }
   .items-center {
     align-items: center;
+  }
+  .items-start {
+    align-items: flex-start;
   }
   .justify-between {
     justify-content: space-between;
···
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
   }
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
   .text-4xl {
     font-size: var(--text-4xl);
     line-height: var(--tw-leading, var(--text-4xl--line-height));
···
   .text-white {
     color: var(--color-white);
   }
+  .text-zinc-500 {
+    color: var(--color-zinc-500);
+  }
   .text-zinc-600 {
     color: var(--color-zinc-600);
   }
+  .text-zinc-700 {
+    color: var(--color-zinc-700);
+  }
+  .text-zinc-800 {
+    color: var(--color-zinc-800);
+  }
   .text-zinc-900 {
     color: var(--color-zinc-900);
   }
···
   .lowercase {
     text-transform: lowercase;
   }
+  .underline {
+    text-decoration-line: underline;
+  }
   .ring-sky-500 {
     --tw-ring-color: var(--color-sky-500);
   }
   .group-data-\[added\=true\]\:block {
     &:is(:where(.group)[data-added="true"] *) {
       display: block;
+    }
+  }
+  .hover\:no-underline {
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-line: none;
+      }
     }
   }
   .hover\:underline {
···
       left: calc(var(--spacing) * 0);
     }
   }
+  .sm\:mt-0 {
+    @media (width >= 40rem) {
+      margin-top: calc(var(--spacing) * 0);
+    }
+  }
+  .sm\:ml-1 {
+    @media (width >= 40rem) {
+      margin-left: calc(var(--spacing) * 1);
+    }
+  }
+  .sm\:ml-2 {
+    @media (width >= 40rem) {
+      margin-left: calc(var(--spacing) * 2);
+    }
+  }
   .sm\:h-screen {
     @media (width >= 40rem) {
       height: 100vh;
···
       align-items: center;
     }
   }
+  .sm\:items-end {
+    @media (width >= 40rem) {
+      align-items: flex-end;
+    }
+  }
   .sm\:justify-between {
     @media (width >= 40rem) {
       justify-content: space-between;
···
   .sm\:justify-end {
     @media (width >= 40rem) {
       justify-content: flex-end;
+    }
+  }
+  .sm\:gap-0 {
+    @media (width >= 40rem) {
+      gap: calc(var(--spacing) * 0);
     }
   }
   .sm\:space-x-2 {
···
   .dark\:text-zinc-50 {
     @media (prefers-color-scheme: dark) {
       color: var(--color-zinc-50);
+    }
+  }
+  .dark\:text-zinc-100 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-zinc-100);
+    }
+  }
+  .dark\:text-zinc-300 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-zinc-300);
     }
   }
   .dark\:text-zinc-500 {