OS, Docker, Other : categories separees dans sidebar + page d'accueil

index.html

@@ -181,8 +181,8 @@
       <!-- STATS ROW -->
       <div class="grid grid-cols-4 gap-3 mb-6 text-center" id="stats-row"></div>
 
-      <!-- CARD GRID -->
+      <!-- CARD GRID avec catégories -->
-      <div id="card-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3"></div>
+      <div id="card-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3"></div>
     </div>
 
     <div class="mt-4 text-center text-[0.6875rem] text-[#94a3b8]" id="footer-hint">

script.js

@@ -5,8 +5,10 @@ let currentNode = null;
 let currentSection = null;
 
 const TREE = {
-  id: 'root', label: t('OS', 'OS'),
+  id: 'root',
   children: [
+    {
+      id: 'os-cat', label: t('OS', 'OS'), children: [
         { id: 'linux', label: t('Linux', 'Linux'), children: [
           { id: 'ubuntu', label: t('Ubuntu', 'Ubuntu'), children: [
             { id: 'ubuntu-2004', label: t('20.04', '20.04'), osKey: 'ubuntu', sectionIds: ['sys','apt','users'] },
@@ -31,8 +33,32 @@ const TREE = {
         ]},
         { id: 'solaris', label: t('Solaris / illumos', 'Solaris / illumos'), osKey: 'solaris', sectionIds: ['solaris-ips','solaris-smf','solaris-zfs','solaris-zones'] },
         { id: 'macos', label: t('macOS', 'macOS') },
-    { id: 'docker', label: t('Docker', 'Docker') },
+      ]
-    { id: 'other', label: t('Other', 'Other') },
+    },
+    {
+      id: 'docker-cat', label: t('Docker', 'Docker'), children: [
+        { id: 'docker-compose', label: t('Compose', 'Compose') },
+        { id: 'docker-swarm', label: t('Swarm', 'Swarm') },
+        { id: 'dockerfile', label: t('Dockerfile', 'Dockerfile') },
+      ]
+    },
+    {
+      id: 'other-cat', label: t('Other', 'Other'), children: [
+        { id: 'network', label: t('Réseau', 'Network'), children: [
+          { id: 'cisco', label: t('Cisco IOS', 'Cisco IOS') },
+          { id: 'tplink', label: t('TP-Link', 'TP-Link') },
+        ]},
+        { id: 'sql', label: t('SQL', 'SQL'), children: [
+          { id: 'mysql', label: t('MySQL / MariaDB', 'MySQL / MariaDB') },
+          { id: 'postgresql', label: t('PostgreSQL', 'PostgreSQL') },
+        ]},
+        { id: 'tools', label: t('DevOps', 'DevOps'), children: [
+          { id: 'ansible', label: t('Ansible', 'Ansible') },
+          { id: 'terraform', label: t('Terraform', 'Terraform') },
+          { id: 'kubernetes', label: t('Kubernetes', 'Kubernetes') },
+        ]},
+      ]
+    },
   ]
 };
 
@@ -381,24 +407,34 @@ function renderStats() {
 }
 
 var OS_CARDS = [
-  { id: 'debian', label: 'Debian', icon: 'D', color: '#0f172a', desc: t('Distribution stable de référence', 'Stable reference distribution') },
+  // OS category
-  { id: 'ubuntu', label: 'Ubuntu', icon: 'U', color: '#dc2626', desc: t('Basé sur Debian avec versions LTS', 'Debian-based with LTS releases'), isGroup: true },
+  { id: 'debian', label: 'Debian', icon: 'D', color: '#0f172a', desc: t('Distribution stable de référence', 'Stable reference distribution'), cat: 'os' },
-  { id: 'oracle', label: 'Oracle Linux', icon: 'O', color: '#b9141e', desc: t('Linux Oracle avec UEK + SELinux', 'Oracle Linux with UEK + SELinux') },
+  { id: 'ubuntu', label: 'Ubuntu', icon: 'U', color: '#dc2626', desc: t('Basé sur Debian avec versions LTS', 'Debian-based with LTS releases'), cat: 'os', isGroup: true },
-  { id: 'windows', label: 'Windows', icon: 'W', color: '#0078d4', desc: t('CMD + PowerShell client/server', 'CMD + PowerShell client/server'), isGroup: true },
+  { id: 'oracle', label: 'Oracle Linux', icon: 'O', color: '#b9141e', desc: t('Linux Oracle avec UEK + SELinux', 'Oracle Linux with UEK + SELinux'), cat: 'os' },
-  { id: 'solaris', label: 'Solaris', icon: 'S', color: '#b46400', desc: t('Solaris / illumos avec ZFS + DTrace', 'Solaris / illumos with ZFS + DTrace') },
+  { id: 'windows', label: 'Windows', icon: 'W', color: '#0078d4', desc: t('CMD + PowerShell client/server', 'CMD + PowerShell client/server'), cat: 'os', isGroup: true },
-  { id: 'rhel', label: 'RHEL / CentOS', icon: 'R', color: '#94a3b8', desc: t('Enterprise Linux (à venir)', 'Enterprise Linux (pending)'), placeholder: true },
+  { id: 'solaris', label: 'Solaris', icon: 'S', color: '#b46400', desc: t('Solaris / illumos avec ZFS + DTrace', 'Solaris / illumos with ZFS + DTrace'), cat: 'os' },
-  { id: 'fedora', label: 'Fedora', icon: 'F', color: '#94a3b8', desc: t('Basé sur RHEL (à venir)', 'RHEL-based (pending)'), placeholder: true },
+  { id: 'rhel', label: 'RHEL / CentOS', icon: 'R', color: '#94a3b8', desc: t('Enterprise Linux (à venir)', 'Enterprise Linux (pending)'), cat: 'os', placeholder: true },
-  { id: 'freebsd', label: 'FreeBSD', icon: 'B', color: '#94a3b8', desc: t('BSD Unix (à venir)', 'BSD Unix (pending)'), placeholder: true },
+  { id: 'fedora', label: 'Fedora', icon: 'F', color: '#94a3b8', desc: t('Basé sur RHEL (à venir)', 'RHEL-based (pending)'), cat: 'os', placeholder: true },
-  { id: 'macos', label: 'macOS', icon: 'M', color: '#94a3b8', desc: t('macOS (à venir)', 'macOS (pending)'), placeholder: true },
+  { id: 'macos', label: 'macOS', icon: 'M', color: '#94a3b8', desc: t('macOS (à venir)', 'macOS (pending)'), cat: 'os', placeholder: true },
-  { id: 'docker', label: 'Docker', icon: 'D', color: '#94a3b8', desc: t('Containers et orchestration (à venir)', 'Containers and orchestration (pending)'), placeholder: true },
+  // Docker category
-  { id: 'cisco', label: 'Cisco IOS', icon: 'C', color: '#94a3b8', desc: t('Réseau Cisco (à venir)', 'Cisco networking (pending)'), placeholder: true },
+  { id: 'docker-compose', label: 'Docker Compose', icon: 'D', color: '#0ea5e9', desc: t('Orchestration multi-conteneurs', 'Multi-container orchestration'), cat: 'docker', placeholder: true },
-  { id: 'mysql', label: 'MySQL / MariaDB', icon: 'S', color: '#94a3b8', desc: t('Bases de données SQL (à venir)', 'SQL databases (pending)'), placeholder: true },
+  { id: 'docker-swarm', label: 'Docker Swarm', icon: 'S', color: '#0ea5e9', desc: t('Cluster Docker natif', 'Native Docker clustering'), cat: 'docker', placeholder: true },
+  { id: 'dockerfile', label: 'Dockerfile', icon: 'F', color: '#0ea5e9', desc: t('Instructions de build', 'Build instructions'), cat: 'docker', placeholder: true },
+  // Other category
+  { id: 'cisco', label: 'Cisco IOS', icon: 'C', color: '#8b5cf6', desc: t('Réseau Cisco (à venir)', 'Cisco networking (pending)'), cat: 'other', placeholder: true },
+  { id: 'mysql', label: 'MySQL / MariaDB', icon: 'S', color: '#8b5cf6', desc: t('Bases de données SQL (à venir)', 'SQL databases (pending)'), cat: 'other', placeholder: true },
+  { id: 'postgresql', label: 'PostgreSQL', icon: 'P', color: '#8b5cf6', desc: t('Base de données avancée (à venir)', 'Advanced database (pending)'), cat: 'other', placeholder: true },
+  { id: 'ansible', label: 'Ansible', icon: 'A', color: '#8b5cf6', desc: t('Automatisation IT (à venir)', 'IT automation (pending)'), cat: 'other', placeholder: true },
+  { id: 'kubernetes', label: 'Kubernetes', icon: 'K', color: '#8b5cf6', desc: t('Orchestration conteneurs (à venir)', 'Container orchestration (pending)'), cat: 'other', placeholder: true },
 ];
 
 function renderCards() {
   var el = document.getElementById('card-grid');
   el.innerHTML = '';
+  var cats = { os: { label: t('Systèmes d\'exploitation', 'Operating Systems'), html: '' }, docker: { label: t('Docker / Conteneurs', 'Docker / Containers'), html: '' }, other: { label: t('Réseau, BDD, DevOps', 'Network, DB, DevOps'), html: '' } };
   OS_CARDS.forEach(function(card) {
+    card.cat = card.cat || 'other';
+    if (!cats[card.cat]) cats[card.cat] = { label: card.cat, html: '' };
     var div = document.createElement('div');
     var isPlaceholder = card.placeholder;
     var node = findNode(TREE, card.id);
@@ -411,7 +447,7 @@ function renderCards() {
     div.innerHTML =
       '<div class="flex items-start gap-3 mb-3">' +
         '<div class="icon ' + iconBg + '" style="' + (isPlaceholder ? '' : 'background:' + card.color) + '">' +
-          '<span class="font-bold ' + (isPlaceholder ? 'text-sm' : 'text-sm') + '">' + card.icon + '</span>' +
+          '<span class="font-bold text-sm">' + card.icon + '</span>' +
         '</div>' +
         '<div class="flex-1 min-w-0">' +
           '<div class="font-semibold text-sm truncate">' + (card.isGroup ? card.label + ' →' : card.label) + '</div>' +
@@ -424,7 +460,6 @@ function renderCards() {
 
     div.onclick = function() {
       if (card.isGroup) {
-        // Expand group in sidebar
         var n = findNode(TREE, card.id);
         if (n && n.children && n.children.length > 0) {
           selectNode(n.children[0]);
@@ -434,8 +469,16 @@ function renderCards() {
       }
     };
 
-    el.appendChild(div);
+    cats[card.cat].html += div.outerHTML;
   });
+
+  // Render categories
+  var html = '';
+  Object.keys(cats).forEach(function(k) {
+    html += '<div class="col-span-full text-xs font-semibold uppercase tracking-wider text-[#94a3b8] mt-2 mb-1">' + cats[k].label.fr + '</div>';
+    html += cats[k].html;
+  });
+  el.innerHTML = html;
 }
 
 // ── SHOW COMMANDS ──