YvvandClaude Fable 5
d886302b59
- stores/collective.ts (état local-first, gabarits, import/export, seeds) + stores/decisions.ts (cycle de vie complet : capture→chemin→fenêtres→ sessions→cristallisation→épreuve du réel→révocation) - data/templates.ts : 7 gabarits (Page blanche observatoire-d'abord, 5 points de départ, Institution symétrique) - composables useFeed (13 sections du Fil en sélecteurs purs) + useSearch (index unique Cmd+K/Q0) - shell : layouts default/bare, app.vue mince, useMood v2 (Source/Margelle/ Nappe/Minuit), sceau 井 = logo, LdWorkspaceSelector avec finalité A1, LdAvatarStack (premier/second lieu), LdCountdown (suspension striée) - 338 tests vitest verts, npm run build zéro erreur Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
53 lines
1.4 KiB
Vue
53 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
// <!-- ld-v2 --> Window countdown chip. Suspended (boundary objection) shows the
|
|
// pause state — the most important state to make visible.
|
|
import { BOUNDARY_SUSPENDED } from '~/lexicon'
|
|
|
|
const props = defineProps<{
|
|
endsAt?: string
|
|
suspendedAt?: string
|
|
}>()
|
|
|
|
const label = computed(() => {
|
|
if (props.suspendedAt) return BOUNDARY_SUSPENDED
|
|
if (!props.endsAt) return ''
|
|
const ms = new Date(props.endsAt).getTime() - Date.now()
|
|
if (ms <= 0) return 'échéance passée'
|
|
const h = Math.floor(ms / 3_600_000)
|
|
if (h < 1) return `${Math.max(1, Math.floor(ms / 60_000))} min restantes`
|
|
if (h < 48) return `${h} h restantes`
|
|
return `${Math.floor(h / 24)} jours restants`
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<!-- ld-v2 -->
|
|
<span class="ld-countdown" :class="{ 'ld-countdown--paused': suspendedAt }">
|
|
<UIcon :name="suspendedAt ? 'i-lucide-pause' : 'i-lucide-timer'" />
|
|
<span>{{ label }}</span>
|
|
</span>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.ld-countdown {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
color: var(--mood-status-fenetre);
|
|
background: var(--mood-status-fenetre-bg);
|
|
padding: 3px 10px;
|
|
border-radius: var(--r-pill);
|
|
}
|
|
.ld-countdown--paused {
|
|
background: repeating-linear-gradient(
|
|
-45deg,
|
|
var(--mood-status-fenetre-bg),
|
|
var(--mood-status-fenetre-bg) 6px,
|
|
transparent 6px,
|
|
transparent 10px
|
|
);
|
|
}
|
|
</style>
|