v3 : interface Svelte — accueil, groupes, lecteur du texte en vigueur, panneau contextuel, éditeur à assistant, trustinWallet
- 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>
This commit is contained in:
@@ -0,0 +1,118 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { api } from '$lib/api';
|
||||
import Guard from '$lib/components/Guard.svelte';
|
||||
import { t, type Key } from '$lib/i18n/index.svelte';
|
||||
import { Remote } from '$lib/load.svelte';
|
||||
import type { GroupView } from '$lib/group';
|
||||
|
||||
const slug = $derived(page.params.group ?? '');
|
||||
const data = new Remote(() => api.get<GroupView>(`/groups/${slug}`));
|
||||
$effect(() => {
|
||||
void slug;
|
||||
void data.load();
|
||||
});
|
||||
const labels: Record<string, Key> = { decisions: 'nav.decisions', docs: 'nav.docs', mandats: 'nav.mandates', protocoles: 'nav.protocols' };
|
||||
const texts: Record<string, Key> = { decisions: 'home.decisions', docs: 'home.docs', mandats: 'home.mandates', protocoles: 'home.protocols' };
|
||||
</script>
|
||||
|
||||
{#if data.error}
|
||||
<Guard code={data.error} onretry={() => data.load()} />
|
||||
{:else if data.value}
|
||||
{@const g = data.value.group}
|
||||
<div class="page">
|
||||
<a class="eyebrow back" href="/groupes">{t('nav.groups')}</a>
|
||||
<h1>{g.name}</h1>
|
||||
{#if !g.open}
|
||||
<p class="muted">{t('groups.locked.long')}</p>
|
||||
{:else}
|
||||
<h2 class="eyebrow sub">{t('group.tools')}</h2>
|
||||
<ul class="tools">
|
||||
{#each data.value.tools as tool (tool.key)}
|
||||
<li>
|
||||
{#if tool.active}
|
||||
<a class="tool card" href="/g/{g.slug}/docs">
|
||||
<span class="name">{t(labels[tool.key] ?? 'nav.docs')}</span>
|
||||
<span class="text">{t(texts[tool.key] ?? 'home.docs')}</span>
|
||||
</a>
|
||||
{:else}
|
||||
<div class="tool off" aria-disabled="true">
|
||||
<span class="name">{t(labels[tool.key] ?? 'nav.docs')}<span class="tag">{t('home.soon')}</span></span>
|
||||
<span class="text">{t(texts[tool.key] ?? 'home.docs')}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.page {
|
||||
max-width: 46rem;
|
||||
margin: 0 auto;
|
||||
padding: clamp(2.5rem, 8vh, 5rem) 1.4rem 5rem;
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
.back {
|
||||
text-decoration: none;
|
||||
}
|
||||
h1 {
|
||||
font-family: var(--font-text);
|
||||
font-weight: 500;
|
||||
font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem);
|
||||
}
|
||||
.sub {
|
||||
margin-top: 1.6rem;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
.tools {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.8rem;
|
||||
}
|
||||
.tool {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
padding: 1.3rem 1.4rem;
|
||||
height: 100%;
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
}
|
||||
a.tool {
|
||||
transition: transform 0.12s ease;
|
||||
}
|
||||
a.tool:hover {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
.tool.off {
|
||||
border-radius: var(--r-card);
|
||||
box-shadow: inset 0 0 0 1px var(--surface-2);
|
||||
color: var(--ink-faint);
|
||||
}
|
||||
.name {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
font-weight: 800;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
.text {
|
||||
font-size: 0.93rem;
|
||||
line-height: 1.5;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
.off .text {
|
||||
color: var(--ink-faint);
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.tools {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user