dorfteich/apps/web/src/pages/PondSettingsPage.tsx

import type { PondView } from '@dorfteich/shared';
import { useQuery } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { useParams } from 'react-router-dom';

import { useAuth } from '../auth/auth-context';
import { CommentPolicySetting } from '../comments/CommentPolicySetting';
import { WatchToggle } from '../watches/WatchToggle';
import { FormError } from '../components/forms';
import { AppearanceManager } from '../fonts/AppearanceManager';
import { LabelManager } from '../labels/LabelManager';
import { PhantomPagesView } from '../links/PhantomPagesView';
import { AccessRulesManager } from '../access/AccessRulesManager';
import { EffectivePermissionsInspector } from '../access/EffectivePermissionsInspector';
import { PondFileManager } from '../files/PondFileManager';
import { apiGet } from '../lib/api';
import { MemberManager } from '../members/MemberManager';
import { PondPluginSettings } from '../plugins/PondPluginSettings';

/**
 * Pond settings (issues #44/#54). Hosts the 'Members' and 'Labels' sections;
 * future pond-level configuration (fonts, etc.) joins it here. Member
 * management is Pond-Admin-gated in the api (the MemberManager shows the list
 * to any member and hides the controls otherwise); label management needs
 * modify rights. The sidebar links here for the pond owner (Site Admins and
 * other members can still navigate directly).
 */
export function PondSettingsPage(): React.JSX.Element {
  const { t } = useTranslation('labels');
  const { t: tLinks } = useTranslation('links');
  const { t: tMembers } = useTranslation('members');
  const { t: tErrors } = useTranslation('errors');
  const { t: tFiles } = useTranslation('files');
  const { t: tExport } = useTranslation('export');
  const { t: tComments } = useTranslation('comments');
  const { t: tFont } = useTranslation('font');
  const { pondSlug = '' } = useParams<{ pondSlug: string }>();
  const { user } = useAuth();

  const pond = useQuery({
    queryKey: ['pond', pondSlug],
    queryFn: () => apiGet<PondView>(`/ponds/${pondSlug}`),
  });

  if (pond.error) return <FormError error={pond.error} />;
  if (!pond.data) return <></>;

  const canModify = Boolean(user && (user.isSiteAdmin || user.id === pond.data.ownerId));

  return (
    <div className="pond-settings-page">
      <div className="pond-settings-page__header">
        <h1>{pond.data.name}</h1>
        <WatchToggle targetType="pond" targetId={pond.data.id} variant="icon" />
      </div>
      <section>
        <h2>{tMembers('title')}</h2>
        <MemberManager pondId={pond.data.id} />
      </section>
      <AccessRulesManager pondId={pond.data.id} />
      <EffectivePermissionsInspector pondId={pond.data.id} />
      <section>
        <h2>{t('settings.title')}</h2>
        {canModify ? (
          <LabelManager pondId={pond.data.id} />
        ) : (
          <p className="form-banner form-banner--error" role="alert">
            {tErrors('forbidden')}
          </p>
        )}
      </section>
      {canModify && (
        <section>
          <h2>{tLinks('missing.title')}</h2>
          <PhantomPagesView pondId={pond.data.id} pondSlug={pondSlug} />
        </section>
      )}
      {canModify && (
        <section>
          <h2>{tFiles('manager.title')}</h2>
          <PondFileManager pondId={pond.data.id} />
        </section>
      )}
      {canModify && (
        <section className="appearance-section">
          <h2>{tFont('heading')}</h2>
          <AppearanceManager
            pondId={pond.data.id}
            pondSlug={pondSlug}
            fonts={pond.data.settings.fonts}
          />
        </section>
      )}
      {canModify && <PondPluginSettings pondId={pond.data.id} />}
      {canModify && (
        <section>
          <h2>{tComments('policy.title')}</h2>
          <CommentPolicySetting
            pondId={pond.data.id}
            pondSlug={pondSlug}
            value={pond.data.settings.commentPolicy}
          />
        </section>
      )}
      <section className="pond-export">
        <h2>{tExport('pond.heading')}</h2>
        <p className="pond-export__hint">{tExport('pond.hint')}</p>
        <a
          className="button"
          href={`/api/v1/ponds/${pond.data.id}/export/markdown`}
          download={`${pond.data.slug}.zip`}
        >
          {tExport('pond.zip')}
        </a>
      </section>
    </div>
  );
}