// Campaign Detail — all tabs.
// `feature` ties a tab to a realm/campaign feature flag. Tabs without a `feature`
// always show. The 'org' bucket covers Guild OR Tribe depending on realm.orgKind.
// 'shops' bucket covers shops/materials/homebrew/forge as a single toggle (per
// the design Q: "Shops + Forge + Homebrew" group).
const TABS = [
{ id: 'overview', label: 'Overview' },
{ id: 'sessions', label: 'Sessions' },
{ id: 'lore', label: 'Lore & Notes' },
{ id: 'quests', label: 'Requests', feature: 'association' },
{ id: 'npcs', label: 'NPCs' },
{ id: 'inventory', label: 'Party Inventory' },
{ id: 'spellbooks', label: 'Spellbooks' },
{ id: 'guild', label: 'Guild', feature: 'org', orgKinds: ['guild'] },
{ id: 'tribe', label: 'Tribe', feature: 'org', orgKinds: ['tribe'] },
{ id: 'shops', label: 'Shops', feature: 'shops' },
{ id: 'materials', label: 'Materials', feature: 'shops' },
{ id: 'homebrew', label: 'Homebrew', feature: 'shops' },
{ id: 'forge', label: 'Forge', feature: 'shops' },
{ id: 'map', label: 'World Map', feature: 'worldMap' },
];
const statusColor = (s) => s === 'active' ? '#22c55e' : s === 'completed' ? '#6b6966' : '#b45309';
const priorityColor = (p) => p === 'critical' ? '#991b1b' : p === 'high' ? '#c53030' : p === 'medium' ? '#b45309' : '#1e6b3c';
// Augment API CampaignDetailDto with derived fields the tab components rely on.
// `members` now carries per-campaign roles ({userId, name, avatar, role}).
// We derive a list of DM ids and player ids for legacy callers, plus expose
// a `players` array so old code that did `campaign.players.map(...)` still works.
const augmentCampaign = (c) => {
if (!c) return c;
const members = c.members || [];
const dms = members.filter(m => m.role === 'DM' || m.role === 'Co-DM');
const players = members.filter(m => m.role === 'Player');
return {
...c,
members,
dmIds: dms.map(m => m.userId),
playerIds: players.map(m => m.userId),
// Legacy: many UIs read `.players` as a list of player objects (name, avatar, role, id).
// Map members → player-shape (id field aliased from userId for back-compat).
players: players.map(m => ({ id: m.userId, userId: m.userId, name: m.name, avatar: m.avatar, role: m.role })),
};
};
const CampaignView = ({ campaignId, user, tab, setTab, setNav }) => {
const [campaign, setCampaign] = React.useState(null);
const [realm, setRealm] = React.useState(null);
const [loadError, setLoadError] = React.useState(null);
const [loading, setLoading] = React.useState(true);
// Edit-meta modal state lives up here (not below the early returns) so the
// hook count stays stable across "loading" vs "loaded" renders.
const [editingMeta, setEditingMeta] = React.useState(false);
// Stable reload helper — passed down to children that mutate roster /
// invites / campaign meta so they can refresh without going through window
// events or re-rendering the whole tree.
const reloadCampaign = React.useCallback(async () => {
try {
const fresh = await api.campaigns.get(campaignId);
setCampaign(augmentCampaign(fresh));
return fresh;
} catch (err) {
console.error('[CampaignView] reload failed:', err);
}
}, [campaignId]);
React.useEffect(() => {
let cancelled = false;
setLoading(true);
setLoadError(null);
setRealm(null);
api.campaigns.get(campaignId)
.then(c => {
if (cancelled) return;
setCampaign(augmentCampaign(c));
setLoading(false);
// Best-effort realm load — campaign still renders if realm fetch fails (treats as defaults).
if (c && c.realmId) {
api.realms.get(c.realmId)
.then(r => { if (!cancelled) setRealm(r); })
.catch(err => console.error('[CampaignView] realm load failed:', err));
}
})
.catch(err => {
if (cancelled) return;
setLoadError(err.status === 404 ? 'Campaign not found.' : (err.message || 'Failed to load campaign.'));
setLoading(false);
});
return () => { cancelled = true; };
}, [campaignId]);
// Effective feature flags = realm defaults overridden by per-campaign flags.
// Computed unconditionally (campaign/realm may be null pre-load) so the hook
// count stays stable across renders — required by rules of hooks.
const features = api.effectiveFeatures(campaign, realm);
const orgKind = api.orgKindFor(realm);
const visibleTabs = TABS.filter(t => {
if (t.feature && features[t.feature] === false) return false;
if (t.orgKinds && !t.orgKinds.includes(orgKind)) return false;
return true;
});
const visibleTabKey = visibleTabs.map(t => t.id).join(',');
// If the active tab got hidden (e.g. realm was changed and 'shops' is now off),
// bounce to overview so we don't render a now-disabled tab. Must run BEFORE
// the early returns below so the hook order stays consistent.
React.useEffect(() => {
if (campaign && !visibleTabs.find(t => t.id === tab)) setTab('overview');
}, [campaign, visibleTabKey, tab]);
if (loading) return
Loading campaign…
;
if (loadError) return
{loadError}
;
if (!campaign) return
Campaign not found.
;
const players = campaign.players || [];
// isDM is true for the campaign's DM/Co-DM or for system Admins. Last-DM
// checks etc. still happen server-side; this just gates UI affordances.
const isDM = user.isAdmin || isDmOf(campaign);
// Old code referenced `dm` as the single DM object; with multi-DM we expose
// the list and let consumers pick the first for compact display.
const dms = dmsOf(campaign);
const dm = dms[0] || null;
const isArchived = campaign.status === 'archived';
// Deactivate / reactivate this campaign. DMs and Admins can do it from here.
// After deactivating, drop back to the dashboard since the campaign view will
// re-render with a banner indicating the archived state.
const toggleCampaignActive = async () => {
const goingInactive = !isArchived;
if (goingInactive) {
const ok = await window.dialog.confirm({
title: 'Deactivate campaign?',
message: `Mark "${campaign.name}" as deactivated? It stays in the database (sessions, characters, all data preserved) and can be reactivated later. This is reversible.`,
confirmLabel: 'Deactivate',
danger: false,
});
if (!ok) return;
}
try {
await api.campaigns.update(campaign.id, { status: goingInactive ? 'archived' : 'active' });
await reloadCampaign();
} catch (err) {
console.error('[CampaignView] toggle active failed:', err);
window.dialog.alert((err.body && err.body.message) || err.message || 'Failed to update', { title:'Error' });
}
};
return (