forked from yvv/decision
YvvandClaude Opus 5.5
7a022dd35e
- Accueil sobre, menu complet à gauche (Décisions, Docs de référence, Mandats, Protocoles), intro demandée, quatre sections, connexion Ğ1. - Lecteur : texte en vigueur en Literata, actions contextuelles par article (le vote, propositions, proposer), propositions en cours sous la « surface » avec leur niveau d'eau, aperçus « si les bien cotées passent » / « si tout passe », langue du texte fr/en/es (traductions éditoriales). - Panneau : vote pour/contre, seuil et formule (MathML), inertie et son changement (voté en inertie +), coquille sans vote, traduction, signalement de contradiction, historique des corrections. - trustinWallet (/acces) : groupes et membres, invitations à usage unique, administrateurs, retours d'usage. - Contrôles : vitest (markdown, catalogues, anti-lexique), Playwright C1–C10 + M1. - Sections du seed portées jusqu'à l'écran. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
122 lines
3.1 KiB
Svelte
122 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import type { Shown } from '$lib/doc.svelte';
|
|
import { i18n, t } from '$lib/i18n/index.svelte';
|
|
import Prose from './Prose.svelte';
|
|
|
|
let {
|
|
text,
|
|
mark = 'unchanged',
|
|
seedMinimal = false,
|
|
enteredAt = null,
|
|
rivals = 0,
|
|
selected = false,
|
|
actions = true,
|
|
onaction,
|
|
}: {
|
|
text: Shown;
|
|
mark?: 'unchanged' | 'added' | 'replaced' | 'removed';
|
|
seedMinimal?: boolean;
|
|
enteredAt?: string | null;
|
|
rivals?: number;
|
|
selected?: boolean;
|
|
actions?: boolean;
|
|
onaction: (tab: 'vote' | 'proposals' | 'propose') => void;
|
|
} = $props();
|
|
</script>
|
|
|
|
<article class="unit {mark}" class:selected>
|
|
<header>
|
|
<h2 class="eyebrow">{text.title}</h2>
|
|
{#if mark !== 'unchanged'}<span class="tag {mark === 'removed' ? 'ochre' : 'moss'}">{t(`doc.mark.${mark}`)}</span>{/if}
|
|
{#if text.stale}<span class="tag ochre">{t('doc.lang.stale')}</span>{:else if text.missing}<span class="tag">{t('doc.lang.missing')}</span>{/if}
|
|
</header>
|
|
<Prose text={text.body} />
|
|
{#if actions}
|
|
<footer class="actions">
|
|
<span class="status faint">
|
|
{#if seedMinimal}<span title={t('doc.seed.long')}>{t('doc.seed')} · 0 vote</span>
|
|
{:else if enteredAt}{t('doc.adopted', { date: i18n.date(enteredAt) })}{/if}
|
|
</span>
|
|
<span class="links">
|
|
<button type="button" onclick={() => onaction('vote')}>{t('doc.action.vote')}</button>
|
|
<button type="button" onclick={() => onaction('proposals')}>{t('doc.action.proposals')}{#if rivals > 0} · {rivals}{/if}</button>
|
|
<button type="button" onclick={() => onaction('propose')}>{t('doc.action.propose')}</button>
|
|
</span>
|
|
</footer>
|
|
{/if}
|
|
</article>
|
|
|
|
<style>
|
|
.unit {
|
|
position: relative;
|
|
padding: 1.1rem 1.3rem 0.9rem;
|
|
margin: 0 -1.3rem;
|
|
border-radius: var(--r-card);
|
|
transition: background-color 0.18s ease;
|
|
}
|
|
.unit + :global(.unit) {
|
|
margin-top: 0.5rem;
|
|
}
|
|
.unit:hover,
|
|
.unit:focus-within,
|
|
.unit.selected {
|
|
background: var(--surface);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.55rem;
|
|
}
|
|
.removed :global(.prose) {
|
|
text-decoration: line-through;
|
|
text-decoration-thickness: 1px;
|
|
color: var(--ink-faint);
|
|
}
|
|
.added,
|
|
.replaced {
|
|
background: var(--moss-wash);
|
|
}
|
|
.actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.4rem 1rem;
|
|
margin-top: 0.7rem;
|
|
min-height: 2.25rem;
|
|
font-size: 0.84rem;
|
|
}
|
|
.links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.2rem;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
.unit:hover .links,
|
|
.unit:focus-within .links,
|
|
.unit.selected .links {
|
|
opacity: 1;
|
|
}
|
|
.links button {
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--water);
|
|
font-weight: 750;
|
|
padding: 0.35rem 0.6rem;
|
|
min-height: 2.25rem;
|
|
border-radius: var(--r-pill);
|
|
}
|
|
.links button:hover {
|
|
background: var(--water-wash);
|
|
}
|
|
@media (hover: none) {
|
|
.links {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|