feat(v11-a): hashtags 4 categories capsules monospace + selecteur Politique

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/astro/ColJournal.astro

@@ -1,56 +1,101 @@
 ---
-// ColJournal - colonne gauche : CTA Manifeste + Hashtags accordeon + Journal (PC6)
-// 7 hashtags = 7 plateformes (cf delta 15 du PILOTE-PC.md)
 import JournalList from '../vue/JournalList.vue';
 
-const hashtags = [
+const categories = [
-  { tag: '#manifeste',       plateforme: 'Blog trans-former.fr',   canal: 'ecriture longue' },
+  {
-  { tag: '#building-public', plateforme: 'LinkedIn',               canal: 'journal pro' },
+    id: 'politique',
-  { tag: '#politique',       plateforme: 'Substack',               canal: 'pensee AEP' },
+    label: 'Politique',
-  { tag: '#aep-politique',   plateforme: 'Insta @aep.politique',   canal: 'carrousels manifeste' },
+    color: '#1d4ed8',
-  { tag: '#peinture',        plateforme: 'Insta @julesneny',       canal: 'art / poesie / Corse' },
+    hashtags: ['#politique', '#aep-politique'],
-  { tag: '#podcast',         plateforme: 'Castopod',               canal: 'podcast.trans-former.fr' },
+    plateformes: [
-  { tag: '#stack',           plateforme: 'GitHub',                 canal: 'open source' },
+      { id: 'instagram', label: '@aep.politique', url: 'https://www.instagram.com/aep.politique/' },
+      { id: 'castopod', label: 'Podcast', url: 'https://podcast.trans-former.fr' },
+    ],
+    hasSelector: true,
+  },
+  {
+    id: 'art',
+    label: 'Art',
+    color: '#dc2626',
+    hashtags: ['#peinture', '#art'],
+    plateformes: [
+      { id: 'instagram', label: '@julesneny', url: 'https://www.instagram.com/julesneny/' },
+    ],
+    hasSelector: false,
+  },
+  {
+    id: 'outils',
+    label: 'Outils',
+    color: '#16a34a',
+    hashtags: ['#stack', '#building-public'],
+    plateformes: [
+      { id: 'gitea', label: 'Gitea', url: 'https://git.trans-former.fr/jules' },
+    ],
+    hasSelector: false,
+  },
 ];
 ---
 <div class="h-full flex flex-col p-4 pt-20 md:pt-6 gap-5">
-  <!-- CTA Manifeste -->
-  <a
-    href="/manifeste"
-    class="block px-4 py-3 bg-neutral-900 text-white rounded-lg font-medium text-center hover:bg-neutral-700 transition-colors shadow-sm"
-  >
-    Lire le manifeste &rarr;
-  </a>
 
   <!-- Hashtags accordeon -->
   <details id="hashtags-accordion" class="border-t border-neutral-200 pt-4">
     <summary class="font-semibold cursor-pointer select-none flex items-center justify-between">
       <span>Hashtags</span>
-      <span class="text-xs text-neutral-400 font-normal">7 plateformes</span>
+      <span class="text-xs text-neutral-400 font-normal">3 categories</span>
     </summary>
-    <ul class="mt-3 space-y-2 text-sm">
+
-      {hashtags.map(({ tag, plateforme, canal }) => (
+    <div class="mt-3 flex flex-wrap gap-2" id="category-badges">
-        <li>
+      {categories.map((cat) => (
-          <label class="flex items-start gap-2 cursor-pointer hover:bg-neutral-50 rounded p-1 -m-1 transition-colors">
+        <button
-            <input
+          type="button"
-              type="checkbox"
+          data-category-id={cat.id}
-              data-hashtag={tag}
+          data-hashtags={cat.hashtags.join(',')}
-              class="mt-1 accent-neutral-900"
+          data-color={cat.color}
-              checked
+          data-has-selector={cat.hasSelector ? 'true' : 'false'}
-            />
+          class="category-badge"
-            <span class="flex-1">
+          style={`background:${cat.color};color:#fff;font-family:'Courier New',Courier,monospace;font-size:13px;padding:3px 10px;border-radius:4px;cursor:pointer;border:1px solid ${cat.color};`}
-              <span class="font-mono text-neutral-700 text-[13px]">{tag}</span>
+        >
-              <span class="block text-xs text-neutral-500 leading-snug">
+          {cat.label}
-                {plateforme} ; {canal}
+        </button>
-              </span>
-            </span>
-          </label>
-        </li>
       ))}
-    </ul>
+    </div>
+
+    <!-- Selecteur plateforme Politique -->
+    <div id="politique-selector" class="mt-2 hidden flex gap-2">
+      {categories[0].plateformes.map((p) => (
+        <button
+          type="button"
+          data-platform-id={p.id}
+          class="platform-pill"
+          style="font-family:'Courier New',Courier,monospace;font-size:12px;padding:2px 8px;border-radius:12px;cursor:pointer;border:1px solid #1d4ed8;background:transparent;color:#1d4ed8;"
+        >
+          {p.label}
+        </button>
+      ))}
+    </div>
+
+    <!-- Bouton Replier -->
+    <div class="mt-3 flex justify-end">
+      <button
+        type="button"
+        id="accordion-close"
+        class="text-xs text-neutral-400 underline cursor-pointer bg-transparent border-0 p-0"
+      >
+        replier
+      </button>
+    </div>
+
+    <!-- Bouton Manifeste -->
+    <a
+      href="/manifeste"
+      class="block mt-3 px-4 py-2 bg-neutral-900 text-white font-bold text-sm text-center rounded-lg hover:bg-neutral-700 transition-colors"
+      style="font-family:'Courier New',Courier,monospace;"
+    >
+      Manifeste - Lire
+    </a>
   </details>
 
-  <!-- Journal chrono (skeleton, slot rempli par PC6) -->
+  <!-- Journal chrono -->
   <section class="border-t border-neutral-200 pt-4 flex-1 overflow-y-auto">
     <h2 class="font-semibold mb-3 flex items-center justify-between">
       <span>Journal</span>
@@ -63,41 +108,170 @@ const hashtags = [
 </div>
 
 <script>
-  // Hashtags accordeon : ferme par defaut mobile, ouvert desktop (>= 768px)
   const accordion = document.getElementById('hashtags-accordion') as HTMLDetailsElement | null;
   if (accordion) {
     const mql = window.matchMedia('(min-width: 768px)');
-    const apply = () => {
+    const apply = () => { accordion.open = mql.matches; };
-      accordion.open = mql.matches;
-    };
     apply();
     mql.addEventListener('change', apply);
   }
 
-  // Persistence filtres hashtags (localStorage)
+  const closeBtn = document.getElementById('accordion-close');
-  const checkboxes = document.querySelectorAll<HTMLInputElement>('[data-hashtag]');
+  if (closeBtn && accordion) {
-  const STORAGE_KEY = 'tf-hashtag-filters';
+    closeBtn.addEventListener('click', () => { accordion.open = false; });
-  let stored: Record<string, boolean> = {};
-  try {
-    stored = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
-  } catch {
-    stored = {};
   }
 
-  checkboxes.forEach((cb) => {
+  const STORAGE_KEY = 'tf-hashtag-filters';
-    const tag = cb.dataset.hashtag;
+  const PLATFORM_KEY = 'tf-platform-filter';
-    if (!tag) return;
+
-    if (tag in stored) cb.checked = stored[tag];
+  // Active state : map categoryId -> boolean
-    cb.addEventListener('change', () => {
+  const activeCategories: Record<string, boolean> = { politique: true, art: true, outils: true };
-      stored[tag] = cb.checked;
+
+  // Platform filter : map categoryId -> platformId | null
+  const platformFilters: Record<string, string | null> = { politique: null };
+
+  // Load persisted state
   try {
-        localStorage.setItem(STORAGE_KEY, JSON.stringify(stored));
+    const storedHashtags = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}') as Record<string, boolean>;
-      } catch {
+    // Derive category active state from hashtag values
-        // mode prive : on continue silencieusement
+    const politiqueHashtags = ['#politique', '#aep-politique'];
+    const artHashtags = ['#peinture', '#art'];
+    const outilsHashtags = ['#stack', '#building-public'];
+
+    const allPolitique = politiqueHashtags.every(h => storedHashtags[h] !== false);
+    const allArt = artHashtags.every(h => storedHashtags[h] !== false);
+    const allOutils = outilsHashtags.every(h => storedHashtags[h] !== false);
+
+    if (Object.keys(storedHashtags).length > 0) {
+      activeCategories['politique'] = allPolitique;
+      activeCategories['art'] = allArt;
+      activeCategories['outils'] = allOutils;
     }
-      window.dispatchEvent(
+  } catch { /* mode prive */ }
-        new CustomEvent('hashtag-filter-change', { detail: { ...stored } })
+
-      );
+  try {
+    const storedPlatform = JSON.parse(localStorage.getItem(PLATFORM_KEY) || '{}') as Record<string, string | null>;
+    if (storedPlatform.politique !== undefined) {
+      platformFilters['politique'] = storedPlatform.politique;
+    }
+  } catch { /* mode prive */ }
+
+  const buildHashtagPayload = () => {
+    const hashtags: Record<string, boolean> = {};
+    const catHashtags: Record<string, string[]> = {
+      politique: ['#politique', '#aep-politique'],
+      art: ['#peinture', '#art'],
+      outils: ['#stack', '#building-public'],
+    };
+    for (const [catId, tags] of Object.entries(catHashtags)) {
+      const active = activeCategories[catId] ?? true;
+      for (const tag of tags) {
+        hashtags[tag] = active;
+      }
+    }
+    return hashtags;
+  };
+
+  const persist = () => {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(buildHashtagPayload()));
+      localStorage.setItem(PLATFORM_KEY, JSON.stringify(platformFilters));
+    } catch { /* mode prive */ }
+  };
+
+  const dispatchHashtag = () => {
+    window.dispatchEvent(new CustomEvent('hashtag-filter-change', { detail: buildHashtagPayload() }));
+  };
+
+  const dispatchPlatform = (platform: string | null) => {
+    window.dispatchEvent(new CustomEvent('platform-filter-change', { detail: { platform } }));
+  };
+
+  const updateBadgeStyle = (btn: HTMLElement, active: boolean) => {
+    const color = btn.dataset.color || '#000';
+    if (active) {
+      btn.style.background = color;
+      btn.style.color = '#fff';
+      btn.style.border = `1px solid ${color}`;
+    } else {
+      btn.style.background = 'transparent';
+      btn.style.color = color;
+      btn.style.border = `1px solid ${color}`;
+    }
+  };
+
+  const updatePolitiqueSelector = () => {
+    const selector = document.getElementById('politique-selector');
+    if (!selector) return;
+    if (activeCategories['politique']) {
+      selector.classList.remove('hidden');
+      selector.style.display = 'flex';
+    } else {
+      selector.classList.add('hidden');
+      selector.style.display = 'none';
+    }
+  };
+
+  const updatePillStyles = () => {
+    const pills = document.querySelectorAll<HTMLElement>('.platform-pill');
+    const active = platformFilters['politique'];
+    pills.forEach((pill) => {
+      const pid = pill.dataset.platformId;
+      if (!active || pid === active) {
+        pill.style.background = '#1d4ed8';
+        pill.style.color = '#fff';
+      } else {
+        pill.style.background = 'transparent';
+        pill.style.color = '#1d4ed8';
+      }
+    });
+  };
+
+  // Init badge styles
+  const badges = document.querySelectorAll<HTMLElement>('.category-badge');
+  badges.forEach((btn) => {
+    const catId = btn.dataset.categoryId || '';
+    updateBadgeStyle(btn, activeCategories[catId] ?? true);
+
+    btn.addEventListener('click', () => {
+      activeCategories[catId] = !(activeCategories[catId] ?? true);
+      updateBadgeStyle(btn, activeCategories[catId]);
+      updatePolitiqueSelector();
+      if (!activeCategories['politique']) {
+        platformFilters['politique'] = null;
+        updatePillStyles();
+        dispatchPlatform(null);
+      }
+      persist();
+      dispatchHashtag();
     });
   });
+
+  // Init selector
+  updatePolitiqueSelector();
+  updatePillStyles();
+
+  // Platform pills
+  const pills = document.querySelectorAll<HTMLElement>('.platform-pill');
+  pills.forEach((pill) => {
+    pill.addEventListener('click', () => {
+      const pid = pill.dataset.platformId || null;
+      // Toggle : click on active pill deselects it
+      if (platformFilters['politique'] === pid) {
+        platformFilters['politique'] = null;
+      } else {
+        platformFilters['politique'] = pid;
+      }
+      updatePillStyles();
+      persist();
+      dispatchPlatform(platformFilters['politique']);
+    });
+  });
+
+  // Apply persisted filters on init
+  persist();
+  dispatchHashtag();
+  if (platformFilters['politique']) {
+    dispatchPlatform(platformFilters['politique']);
+  }
 </script>

src/components/vue/JournalList.vue

@@ -20,6 +20,7 @@ interface JournalPayload {
 
 const items = ref<JournalItem[]>([])
 const filters = ref<Record<string, boolean>>({})
+const platformFilter = ref<string | null>(null)
 const loading = ref(true)
 const errored = ref(false)
 const empty = ref(false)
@@ -45,9 +46,15 @@ const onFilterChange = (e: Event) => {
   }
 }
 
+const onPlatformChange = (e: Event) => {
+  const ce = e as CustomEvent
+  platformFilter.value = ce.detail?.platform ?? null
+}
+
 onMounted(async () => {
   loadFilters()
   window.addEventListener('hashtag-filter-change', onFilterChange as EventListener)
+  window.addEventListener('platform-filter-change', onPlatformChange as EventListener)
   try {
     const res = await fetch(JOURNAL_URL, { cache: 'no-store' })
     if (!res.ok) {
@@ -67,17 +74,28 @@ onMounted(async () => {
 
 onUnmounted(() => {
   window.removeEventListener('hashtag-filter-change', onFilterChange as EventListener)
+  window.removeEventListener('platform-filter-change', onPlatformChange as EventListener)
 })
 
 const visibleItems = computed(() => {
-  // Tous les filtres faux = aucun affiche ; tous true ou aucune cle = tout afficher
   const keys = Object.keys(filters.value)
-  if (keys.length === 0) return items.value
+  let filtered: JournalItem[]
+  if (keys.length === 0) {
+    filtered = items.value
+  } else {
     const activeKeys = keys.filter((k) => filters.value[k])
-  // Si l'utilisateur a explicitement décoché tous les hashtags, on n'affiche rien
+    if (activeKeys.length === 0 && keys.some((k) => filters.value[k] === false)) {
-  if (activeKeys.length === 0 && keys.some((k) => filters.value[k] === false)) return []
+      filtered = []
-  if (activeKeys.length === 0) return items.value
+    } else if (activeKeys.length === 0) {
-  return items.value.filter((it) => activeKeys.includes(it.hashtag))
+      filtered = items.value
+    } else {
+      filtered = items.value.filter((it) => activeKeys.includes(it.hashtag))
+    }
+  }
+  if (platformFilter.value) {
+    filtered = filtered.filter((it) => it.platform === platformFilter.value)
+  }
+  return filtered
 })
 
 const formatDate = (iso: string) => {