gitfor/platform

import { createFileRoute, Link } from "@tanstack/react-router";
import { changePassword } from "~/fns/account";
import { getSecuritySettings } from "~/fns/account-security";
import { getAccountDataSettings } from "~/fns/account-data";
import { AvatarPanel } from "~/components/settings/AvatarPanel";
import { EmailPanel } from "~/components/settings/EmailPanel";
import { RenamePanel } from "~/components/settings/RenamePanel";
import { AnalyticsPanel } from "~/components/settings/AnalyticsPanel";
import { DeleteAccountPanel } from "~/components/settings/DeleteAccountPanel";
import { ExportDataPanel } from "~/components/settings/ExportDataPanel";
import { useAction } from "~/hooks/use-action";
import { useViewer } from "~/hooks/use-viewer";
import { Button, buttonClass } from "~/ui/Button";
import { TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { Panel } from "~/ui/Panel";
import { TextLink } from "~/ui/TextLink";

export const Route = createFileRoute("/settings/")({
  loader: async () => {
    const [security, data] = await Promise.all([getSecuritySettings(), getAccountDataSettings()]);
    return { security, data };
  },
  component: AccountSettings,
});

function AccountSettings() {
  const viewer = useViewer();
  const { security, data } = Route.useLoaderData();
  const action = useAction(changePassword, { invalidate: false });
  if (!viewer) return null;

  return (
    <div className="space-y-6">
      <Panel title="Profile">
        <div className="flex items-center justify-between p-4 text-sm text-gray-400">
          <span>
            Signed in as <span className="font-medium text-gray-100">{viewer.name}</span> ({viewer.email})
          </span>
          <Link to="/$owner" params={{ owner: viewer.name }} className={buttonClass("secondary", "sm")}>