Toolbox 30rem sticky + accordéons collapsibles + renommage libreDecision

- Boîte à outils élargie à 30rem (×1.75) — flottante sticky, zéro scroll visible - ToolboxSection : nouveau composant accordéon générique (chevron, défaut fermé) - ToolboxVignette : titre cliquable, bullets/actions cachés par défaut - 4 pages : ContextMapper/SocioElection/WorkflowMilestones/inertie → ToolboxSection - Suppression doublon SectionLayout (common/) — conflit de nommage résolu - Renommage complet Glibredecision → libreDecision dans configs/docker/CI - README.md + CONTRIBUTING.md ajoutés Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-17 00:48:20 +01:00
parent 290548703d
commit ed9ed11cd4
24 changed files with 295 additions and 522 deletions
--- a/frontend/app/components/SectionLayout.vue
+++ b/frontend/app/components/SectionLayout.vue
@@ -264,7 +264,7 @@ function toggleStatus(statusId: string) {

@media (min-width: 1024px) {
  .section__body {
-    grid-template-columns: 1fr 17rem;
+    grid-template-columns: 1fr 30rem;
  }
 }

@@ -320,10 +320,12 @@ function toggleStatus(statusId: string) {
  display: none;
  position: sticky;
  top: 4.5rem;
+  align-self: start;
  flex-direction: column;
  background: var(--mood-surface);
  border-radius: 16px;
-  overflow: hidden;
+  max-height: calc(100vh - 5.5rem);
+  box-shadow: 0 4px 24px var(--mood-shadow);
 }

@media (min-width: 1024px) {
@@ -340,6 +342,7 @@ function toggleStatus(statusId: string) {
  color: var(--mood-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
+  flex-shrink: 0;
 }

 .section__toolbox-head-icon {
@@ -350,10 +353,8 @@ function toggleStatus(statusId: string) {
  padding: 0 0.75rem 0.875rem;
  display: flex;
  flex-direction: column;
-  gap: 0.625rem;
-  max-height: calc(100vh - 8rem);
-  overflow-y: auto;
-  scrollbar-width: thin;
+  gap: 0.5rem;
+  overflow: hidden;
 }

 .section__toolbox-empty {
--- a/frontend/app/components/common/SectionLayout.vue
+++ b/frontend/app/components/common/SectionLayout.vue
@@ -1,318 +0,0 @@
-<script setup lang="ts">
-/**
- * SectionLayout — Mise en page pour sections.
- *
- * Status pills inside the content block (not header).
- * Toolbox sidebar with condensed content.
- */
-
-export interface StatusFilter {
-  id: string
-  label: string
-  count: number
-  cssClass?: string
-}
-
-export interface ToolboxItem {
-  title: string
-  description: string
-  actions: Array<{
-    label: string
-    to?: string
-    onClick?: () => void
-  }>
-}
-
-const props = withDefaults(
-  defineProps<{
-    title: string
-    subtitle?: string
-    statuses: StatusFilter[]
-    toolboxItems?: ToolboxItem[]
-    activeStatus?: string | null
-  }>(),
-  {
-    subtitle: undefined,
-    toolboxItems: undefined,
-    activeStatus: null,
-  },
-)
-
-const emit = defineEmits<{
-  'update:activeStatus': [status: string | null]
-}>()
-
-const toolboxOpen = ref(false)
-
-const statusCssMap: Record<string, string> = {
-  draft: 'status-prepa',
-  qualification: 'status-prepa',
-  candidacy: 'status-prepa',
-  voting: 'status-vote',
-  review: 'status-vote',
-  active: 'status-vigueur',
-  executed: 'status-vigueur',
-  completed: 'status-vigueur',
-  closed: 'status-clos',
-  archived: 'status-clos',
-  revoked: 'status-clos',
-  reporting: 'status-vote',
-}
-
-function getStatusClass(status: StatusFilter): string {
-  return status.cssClass || statusCssMap[status.id] || 'status-prepa'
-}
-
-function toggleStatus(statusId: string) {
-  if (props.activeStatus === statusId) {
-    emit('update:activeStatus', null)
-  }
-  else {
-    emit('update:activeStatus', statusId)
-  }
-}
-</script>
-
-<template>
-  <div class="section">
-    <!-- Header: just title -->
-    <div class="section__header">
-      <h1 class="section__title">{{ title }}</h1>
-      <p v-if="subtitle" class="section__subtitle">{{ subtitle }}</p>
-    </div>
-
-    <!-- Body: content + toolbox -->
-    <div class="section__body">
-      <div class="section__main">
-        <!-- Status pills INSIDE the list block -->
-        <div v-if="statuses.length > 0" class="section__pills">
-          <button
-            v-for="status in statuses"
-            :key="status.id"
-            type="button"
-            class="status-pill"
-            :class="[getStatusClass(status), { active: activeStatus === status.id }]"
-            @click="toggleStatus(status.id)"
-          >
-            {{ status.label }}
-            <span v-if="status.count > 0" class="section__pill-count">{{ status.count }}</span>
-          </button>
-        </div>
-
-        <div v-if="$slots.search" class="section__search">
-          <slot name="search" />
-        </div>
-        <div class="section__content">
-          <slot />
-        </div>
-      </div>
-
-      <aside class="section__toolbox">
-        <button class="section__toolbox-head" @click="toolboxOpen = !toolboxOpen">
-          <div class="section__toolbox-head-left">
-            <UIcon name="i-lucide-wrench" />
-            <span>Boite a outils</span>
-          </div>
-          <UIcon
-            :name="toolboxOpen ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
-            class="section__toolbox-toggle"
-          />
-        </button>
-        <div class="section__toolbox-content" :class="{ 'section__toolbox-content--open': toolboxOpen }">
-          <div v-if="$slots.toolbox" class="section__toolbox-body">
-            <slot name="toolbox" />
-          </div>
-          <div v-else-if="toolboxItems && toolboxItems.length > 0" class="section__toolbox-body">
-            <ToolboxVignette
-              v-for="(item, idx) in toolboxItems"
-              :key="idx"
-              :title="item.title"
-            />
-          </div>
-          <div v-else class="section__toolbox-empty">
-            Aucun outil disponible
-          </div>
-        </div>
-      </aside>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.section {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.section__header {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.section__title {
-  font-size: 1.375rem;
-  font-weight: 800;
-  color: var(--mood-text);
-  letter-spacing: -0.02em;
-}
-
-@media (min-width: 640px) {
-  .section__title {
-    font-size: 1.75rem;
-  }
-}
-
-.section__subtitle {
-  font-size: 0.875rem;
-  color: var(--mood-text-muted);
-  font-weight: 500;
-}
-
-@media (min-width: 640px) {
-  .section__subtitle {
-    font-size: 1rem;
-  }
-}
-
-.section__body {
-  display: grid;
-  grid-template-columns: 1fr 16rem;
-  gap: 1.5rem;
-  align-items: start;
-}
-
-.section__main {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  min-width: 0;
-}
-
-.section__pills {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-  padding-bottom: 2px;
-}
-
-.section__pills::-webkit-scrollbar {
-  display: none;
-}
-
-@media (min-width: 640px) {
-  .section__pills {
-    flex-wrap: wrap;
-    overflow-x: visible;
-  }
-}
-
-.section__pill-count {
-  margin-left: 0.25rem;
-  font-size: 0.6875rem;
-  font-weight: 800;
-  opacity: 0.7;
-}
-
-.section__search {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  align-items: stretch;
-}
-
-@media (max-width: 639px) {
-  .section__search {
-    flex-direction: column;
-  }
-}
-
-.section__content {
-  min-height: 12rem;
-}
-
-.section__toolbox {
-  position: sticky;
-  top: 4.5rem;
-  display: flex;
-  flex-direction: column;
-  background: var(--mood-surface);
-  border-radius: 16px;
-  overflow: hidden;
-}
-
-.section__toolbox-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 1rem;
-  cursor: pointer;
-  background: none;
-}
-
-.section__toolbox-head-left {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  font-size: 0.875rem;
-  font-weight: 800;
-  color: var(--mood-accent);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.section__toolbox-toggle {
-  color: var(--mood-text-muted);
-  font-size: 0.875rem;
-}
-
-.section__toolbox-content {
-  display: none;
-  padding: 0 1rem 1rem;
-}
-
-.section__toolbox-content--open {
-  display: block;
-}
-
-.section__toolbox-body {
-  display: flex;
-  flex-direction: column;
-  gap: 0.625rem;
-}
-
-.section__toolbox-empty {
-  font-size: 0.875rem;
-  color: var(--mood-text-muted);
-  text-align: center;
-  padding: 1rem 0;
-}
-
-/* Desktop: toolbox always open, no toggle */
-@media (min-width: 1024px) {
-  .section__toolbox-head {
-    cursor: default;
-  }
-  .section__toolbox-toggle {
-    display: none;
-  }
-  .section__toolbox-content {
-    display: block;
-  }
-}
-
-@media (max-width: 1023px) {
-  .section__body {
-    grid-template-columns: 1fr;
-  }
-  .section__toolbox {
-    position: static;
-    order: 2;
-  }
-}
-</style>
--- a/frontend/app/components/common/ToolboxVignette.vue
+++ b/frontend/app/components/common/ToolboxVignette.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /**
- * ToolboxVignette — Carte compacte, bullet points, bouton Demarrer.
+ * ToolboxVignette — Carte compacte, collapsible, bullet points + actions.
 */

 export interface ToolboxAction {
@@ -16,10 +16,12 @@ const props = withDefaults(
    title: string
    bullets?: string[]
    actions?: ToolboxAction[]
+    defaultOpen?: boolean
  }>(),
  {
    bullets: undefined,
    actions: undefined,
+    defaultOpen: false,
  },
 )

@@ -27,6 +29,8 @@ const emit = defineEmits<{
  action: [actionEmit: string]
 }>()

+const open = ref(props.defaultOpen)
+
 const defaultActions: ToolboxAction[] = [
  { label: 'Tutos', icon: 'i-lucide-graduation-cap', emit: 'tutos' },
  { label: 'Formules', icon: 'i-lucide-calculator', emit: 'formules' },
@@ -46,22 +50,27 @@ function handleAction(action: ToolboxAction) {
 </script>

 <template>
-  <div class="vignette">
-    <h4 class="vignette__title">{{ title }}</h4>
-    <ul v-if="bullets && bullets.length > 0" class="vignette__bullets">
-      <li v-for="(b, i) in bullets" :key="i">{{ b }}</li>
-    </ul>
-    <div class="vignette__actions">
-      <button
-        v-for="action in resolvedActions"
-        :key="action.label"
-        class="vignette__btn"
-        :class="{ 'vignette__btn--primary': action.primary }"
-        @click="handleAction(action)"
-      >
-        <UIcon v-if="action.icon" :name="action.icon" />
-        <span>{{ action.label }}</span>
-      </button>
+  <div class="vignette" :class="{ 'vignette--open': open }">
+    <button class="vignette__header" @click="open = !open">
+      <h4 class="vignette__title">{{ title }}</h4>
+      <UIcon name="i-lucide-chevron-down" class="vignette__chevron" />
+    </button>
+    <div v-show="open" class="vignette__content">
+      <ul v-if="bullets && bullets.length > 0" class="vignette__bullets">
+        <li v-for="(b, i) in bullets" :key="i">{{ b }}</li>
+      </ul>
+      <div class="vignette__actions">
+        <button
+          v-for="action in resolvedActions"
+          :key="action.label"
+          class="vignette__btn"
+          :class="{ 'vignette__btn--primary': action.primary }"
+          @click="handleAction(action)"
+        >
+          <UIcon v-if="action.icon" :name="action.icon" />
+          <span>{{ action.label }}</span>
+        </button>
+      </div>
    </div>
  </div>
 </template>
@@ -70,19 +79,53 @@ function handleAction(action: ToolboxAction) {
 .vignette {
  background: var(--mood-accent-soft);
  border-radius: 12px;
-  padding: 0.75rem;
+  overflow: hidden;
+}
+
+.vignette__header {
  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  align-items: center;
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  cursor: pointer;
+  text-align: left;
+  gap: 0.375rem;
+  transition: background 0.12s ease;
+}
+
+.vignette__header:hover {
+  background: color-mix(in srgb, var(--mood-accent) 8%, transparent);
 }

 .vignette__title {
+  flex: 1;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--mood-text);
  margin: 0;
 }

+.vignette__chevron {
+  font-size: 0.875rem;
+  color: var(--mood-text-muted);
+  opacity: 0.5;
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+}
+
+.vignette--open .vignette__chevron {
+  transform: rotate(180deg);
+  opacity: 1;
+  color: var(--mood-accent);
+}
+
+.vignette__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0 0.75rem 0.625rem;
+}
+
 .vignette__bullets {
  margin: 0;
  padding: 0 0 0 1rem;
--- a/frontend/app/components/toolbox/ToolboxSection.vue
+++ b/frontend/app/components/toolbox/ToolboxSection.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+/**
+ * ToolboxSection — Wrapper accordéon pour la boîte à outils.
+ * Toggle le contenu pour économiser la hauteur visible.
+ */
+
+const props = withDefaults(
+  defineProps<{
+    title: string
+    icon?: string
+    defaultOpen?: boolean
+  }>(),
+  {
+    icon: undefined,
+    defaultOpen: false,
+  },
+)
+
+const open = ref(props.defaultOpen)
+</script>
+
+<template>
+  <div class="tsection" :class="{ 'tsection--open': open }">
+    <button class="tsection__header" @click="open = !open">
+      <UIcon v-if="icon" :name="icon" class="tsection__icon" />
+      <span class="tsection__title">{{ title }}</span>
+      <UIcon name="i-lucide-chevron-down" class="tsection__chevron" />
+    </button>
+    <div v-show="open" class="tsection__body">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tsection {
+  background: var(--mood-accent-soft);
+  border-radius: 14px;
+  overflow: hidden;
+}
+
+.tsection__header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.75rem 0.875rem;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.12s ease;
+}
+
+.tsection__header:hover {
+  background: color-mix(in srgb, var(--mood-accent) 10%, transparent);
+}
+
+.tsection__icon {
+  font-size: 0.9375rem;
+  color: var(--mood-accent);
+  flex-shrink: 0;
+}
+
+.tsection__title {
+  flex: 1;
+  font-size: 0.8125rem;
+  font-weight: 800;
+  color: var(--mood-accent);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.tsection__chevron {
+  font-size: 0.875rem;
+  color: var(--mood-accent);
+  opacity: 0.6;
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+}
+
+.tsection--open .tsection__chevron {
+  transform: rotate(180deg);
+}
+
+.tsection__body {
+  padding: 0 0.875rem 0.875rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+</style>
--- a/frontend/app/composables/useApi.ts
+++ b/frontend/app/composables/useApi.ts
@@ -1,5 +1,5 @@
 /**
- * Composable for making authenticated API calls to the Glibredecision backend.
+ * Composable for making authenticated API calls to the libreDecision backend.
 *
 * Uses the runtime config `apiBase` and automatically injects the Bearer token
 * from the auth store when available.
--- a/frontend/app/composables/useMood.ts
+++ b/frontend/app/composables/useMood.ts
@@ -9,7 +9,7 @@ export interface Mood {
  isDark: boolean
 }

-const STORAGE_KEY = 'glibredecision_mood'
+const STORAGE_KEY = 'libredecision_mood'

 const moods: Mood[] = [
  { id: 'peps', label: 'Peps', description: 'Chaud et tonique', icon: 'i-lucide-sun', color: '#d44a10', isDark: false },
--- a/frontend/app/pages/decisions/index.vue
+++ b/frontend/app/pages/decisions/index.vue
@@ -238,13 +238,9 @@ function formatDate(dateStr: string): string {
    <!-- Toolbox sidebar -->
    <template #toolbox>
      <!-- Context mapper -->
-      <div class="toolbox-block">
-        <div class="toolbox-block__head">
-          <UIcon name="i-lucide-compass" />
-          <span>Quelle méthode ?</span>
-        </div>
+      <ToolboxSection title="Quelle méthode ?" icon="i-lucide-compass">
        <ContextMapper @use="handleMethodSelect" />
-      </div>
+      </ToolboxSection>

      <!-- Vote inertiel WoT -->
      <ToolboxVignette
@@ -532,26 +528,6 @@ function formatDate(dateStr: string): string {
  transform: translateY(0);
 }

-.toolbox-block {
-  background: var(--mood-accent-soft);
-  border-radius: 14px;
-  padding: 0.875rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.toolbox-block__head {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  font-size: 0.8125rem;
-  font-weight: 800;
-  color: var(--mood-accent);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
 /* Decision modal */
 .decision-modal {
  padding: 1.25rem;
--- a/frontend/app/pages/documents/index.vue
+++ b/frontend/app/pages/documents/index.vue
@@ -287,11 +287,7 @@ async function createDocument() {
    <!-- Toolbox sidebar -->
    <template #toolbox>
      <!-- Inertia guide -->
-      <div class="toolbox-block">
-        <div class="toolbox-block__head">
-          <UIcon name="i-lucide-sliders-horizontal" />
-          <span>Niveaux d'inertie</span>
-        </div>
+      <ToolboxSection title="Niveaux d'inertie" icon="i-lucide-sliders-horizontal">
        <div class="inertia-guide">
          <div v-for="level in inertiaLevels" :key="level.id" class="inertia-level">
            <div class="inertia-level__header">
@@ -308,7 +304,7 @@ async function createDocument() {
          <UIcon name="i-lucide-calculator" />
          Simuler les formules
        </NuxtLink>
-      </div>
+      </ToolboxSection>

      <!-- Structure document -->
      <ToolboxVignette
@@ -534,27 +530,6 @@ async function createDocument() {
  }
 }

-/* Toolbox blocks */
-.toolbox-block {
-  background: var(--mood-accent-soft);
-  border-radius: 14px;
-  padding: 0.875rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.toolbox-block__head {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  font-size: 0.8125rem;
-  font-weight: 800;
-  color: var(--mood-accent);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
 /* Inertia guide */
 .inertia-guide {
  display: flex;
--- a/frontend/app/pages/mandates/index.vue
+++ b/frontend/app/pages/mandates/index.vue
@@ -273,13 +273,9 @@ async function handleCreate() {
    <!-- Toolbox sidebar -->
    <template #toolbox>
      <!-- Sociocratic election guide -->
-      <div class="toolbox-block">
-        <div class="toolbox-block__head">
-          <UIcon name="i-lucide-users" />
-          <span>Nomination & Élection</span>
-        </div>
+      <ToolboxSection title="Nomination & Élection" icon="i-lucide-users">
        <SocioElection />
-      </div>
+      </ToolboxSection>

      <!-- Mandat cycle -->
      <ToolboxVignette
@@ -558,26 +554,6 @@ async function handleCreate() {
  margin-top: 0.5rem;
 }

-.toolbox-block {
-  background: var(--mood-accent-soft);
-  border-radius: 14px;
-  padding: 0.875rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.toolbox-block__head {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  font-size: 0.8125rem;
-  font-weight: 800;
-  color: var(--mood-accent);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
 .mandate-card__type-badge {
  font-size: 0.6875rem;
  font-weight: 700;
--- a/frontend/app/pages/protocols/index.vue
+++ b/frontend/app/pages/protocols/index.vue
@@ -410,13 +410,9 @@ const n8nWorkflows = [
    <!-- Toolbox sidebar -->
    <template #toolbox>
      <!-- Workflow milestones -->
-      <div class="toolbox-block">
-        <div class="toolbox-block__head">
-          <UIcon name="i-lucide-git-branch" />
-          <span>Jalons de protocole</span>
-        </div>
+      <ToolboxSection title="Jalons de protocole" icon="i-lucide-git-branch">
        <WorkflowMilestones />
-      </div>
+      </ToolboxSection>

      <!-- Simulateur -->
      <ToolboxVignette
@@ -428,11 +424,7 @@ const n8nWorkflows = [
      />

      <!-- n8n Workflows -->
-      <div class="n8n-section">
-        <div class="n8n-section__head">
-          <UIcon name="i-lucide-workflow" class="text-xs" />
-          <span>Automatisations</span>
-        </div>
+      <ToolboxSection title="Automatisations" icon="i-lucide-workflow">
        <div class="n8n-workflows">
          <div
            v-for="wf in n8nWorkflows"
@@ -456,7 +448,7 @@ const n8nWorkflows = [
            </div>
          </div>
        </div>
-      </div>
+      </ToolboxSection>

      <!-- Meta-gouvernance -->
      <ToolboxVignette
@@ -850,52 +842,6 @@ const n8nWorkflows = [
  font-family: inherit !important;
 }

-/* Toolbox blocks */
-.toolbox-block {
-  background: var(--mood-accent-soft);
-  border-radius: 14px;
-  padding: 0.875rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.toolbox-block__head {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  font-size: 0.8125rem;
-  font-weight: 800;
-  color: var(--mood-accent);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-/* --- n8n Section --- */
-.n8n-section {
-  background: var(--mood-accent-soft);
-  border-radius: 12px;
-  padding: 0.75rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.n8n-section__head {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  font-size: 0.8125rem;
-  font-weight: 700;
-  color: var(--mood-tertiary, var(--mood-accent));
-}
-
-.n8n-section__desc {
-  font-size: 0.75rem;
-  color: var(--mood-text-muted);
-  margin: 0;
-}
-
 .n8n-workflows {
  display: flex;
  flex-direction: column;
--- a/frontend/app/stores/auth.ts
+++ b/frontend/app/stores/auth.ts
@@ -153,7 +153,7 @@ export const useAuthStore = defineStore('auth', {
     */
    hydrateFromStorage() {
      if (import.meta.client) {
-        const stored = localStorage.getItem('glibredecision_token')
+        const stored = localStorage.getItem('libredecision_token')
        if (stored) {
          this.token = stored
        }
@@ -163,14 +163,14 @@ export const useAuthStore = defineStore('auth', {
    /** @internal Persist token to localStorage */
    _persistToken() {
      if (import.meta.client && this.token) {
-        localStorage.setItem('glibredecision_token', this.token)
+        localStorage.setItem('libredecision_token', this.token)
      }
    },

    /** @internal Clear token from localStorage */
    _clearToken() {
      if (import.meta.client) {
-        localStorage.removeItem('glibredecision_token')
+        localStorage.removeItem('libredecision_token')
      }
    },
  },