feat: add community publishing and news syndication

src/lib/components/DatabaseItemCard.svelte

@@ -5,15 +5,20 @@
 	import DatabaseFacts from './DatabaseFacts.svelte';
 	import type { GameIconName } from '$lib/game-icons';
 	import type { DatabaseItem } from '$lib/database/items';
+	import MarkdownContent from './MarkdownContent.svelte';
 
 	let {
-		item
+		item,
+		hideDiscussionUtility = false,
+		anchor = true
 	}: {
-		item: DatabaseItem & { gameIcon?: GameIconName }
+		item: DatabaseItem & { gameIcon?: GameIconName };
+		hideDiscussionUtility?: boolean;
+		anchor?: boolean;
 	} = $props();
 </script>
 
-<article class="database-item-card" class:talent-card={item.variant === 'talent'}>
+<article id={anchor ? `database-item-${item.id}` : undefined} class="database-item-card" class:talent-card={item.variant === 'talent'}>
 	<header>
 		{#if item.renderUrl}<img class="database-item-render" src={item.renderUrl} alt="" loading="lazy"/>{/if}
 		<div class="database-item-icon">
@@ -55,7 +60,30 @@
 	{#if item.afterLines?.length}
 		<div class="database-item-lines after-description">{#each item.afterLines as line}<div><span>{line.label}</span><b>{line.value}</b></div>{/each}</div>
 	{/if}
-	{#if item.actions?.length}
-		<footer class="database-item-actions">{#each item.actions as action}<a href={action.href}>{action.label} →</a>{/each}</footer>
+	{#if item.pinnedCommunityNoteHtml}<aside class="database-community-note"><strong>COMMUNITY NOTE</strong><MarkdownContent html={item.pinnedCommunityNoteHtml} compact/></aside>{/if}
+	{#if item.actions?.length || item.correctionHref || (!hideDiscussionUtility && item.discussionHref)}
+		<footer class="database-item-footer">
+			{#if item.actions?.length}<div class="database-item-actions">{#each item.actions as action}<a href={action.href}>{action.label} →</a>{/each}</div>{/if}
+			<div class="database-item-utilities" aria-label="Community actions">
+				{#if item.correctionHref}
+					<a class="database-utility-button correction" href={item.correctionHref} aria-label={`Report an inaccuracy in ${item.name}`} title="Report an inaccuracy">
+						<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 21V4M6 5h11l-2.75 3L17 11H6"/></svg>
+					</a>
+				{/if}
+				{#if !hideDiscussionUtility && item.discussionHref}
+					<a class="database-utility-button discussion" href={item.discussionHref} aria-label={`Open discussion for ${item.name}${item.discussionCount ? `, ${item.discussionCount} messages` : ', no messages yet'}`} title="Open discussion" aria-haspopup="dialog">
+						<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 5.75h14v9.5H9.25L5 18.75v-13Z"/><path d="M8.25 9h7.5M8.25 12h5"/></svg>
+						{#if item.discussionCount}<span>{item.discussionCount}</span>{/if}
+					</a>
+				{/if}
+			</div>
+		</footer>
 	{/if}
 </article>
+
+<style>
+	.database-community-note{display:grid;gap:5px;margin:12px 0 0;padding:10px;border:1px solid var(--shd-border);border-left:2px solid var(--shd-armor-border);background:linear-gradient(90deg,var(--shd-armor-surface),var(--shd-surface-raised))}.database-community-note>strong{color:var(--shd-armor-label);font-size:var(--shd-type-telemetry);letter-spacing:.7px}.database-community-note :global(.markdown-content){color:var(--shd-text-muted);font-size:var(--shd-type-supporting)}.database-community-note :global(.markdown-content a){color:var(--shd-armor-text)}
+	.database-item-footer{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin:10px 12px 12px;padding-top:9px;border-top:1px solid var(--shd-border)}.database-item-footer .database-item-actions{min-width:0;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;border:0}.database-item-utilities{display:flex;align-items:center;gap:4px;margin-left:auto}.database-utility-button{height:32px;min-width:32px;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 7px;border:1px solid var(--shd-border);background:var(--shd-surface);color:var(--shd-text-dim)}.database-utility-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}.database-utility-button span{min-width:10px;color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:800;line-height:1;text-align:center}.database-utility-button:hover,.database-utility-button:focus-visible{border-color:var(--shd-border-strong);background:var(--shd-surface-active);color:var(--shd-text)}.database-utility-button:focus-visible{outline:2px solid var(--shd-orange);outline-offset:2px}.database-utility-button:active{transform:translateY(1px);filter:brightness(.84)}
+	@media(max-width:650px){.database-item-footer{align-items:stretch}.database-item-utilities{align-self:end}.database-utility-button{width:44px;height:44px;padding:0}.database-utility-button.discussion:has(span){width:auto;min-width:44px;padding:0 10px}}
+	@media(prefers-reduced-motion:reduce){.database-utility-button{transition:none}}
+</style>