feat: placer les services infra en tête des listes

src/frontend/src/pages/AppsPage.jsx

@@ -3,6 +3,7 @@ import { Box, RefreshCw, Plus } from 'lucide-react';
 import AppCard from '../components/AppCard';
 import AddAppModal from '../components/AddAppModal';
 import { getApps, getGiteaCommits } from '../utils/api';
+import { sortAppsWithInfraFirst } from '../utils/appSorting';
 
 export default function AppsPage({ apps, onRefresh }) {
   const [commitsMap, setCommitsMap] = useState({});
@@ -26,6 +27,9 @@ export default function AppsPage({ apps, onRefresh }) {
     });
   }, [apps]);
 
+  // Les services d’infrastructure restent visibles en premier, sans modifier les données API.
+  const sortedApps = sortAppsWithInfraFirst(apps);
+
   const handleAddSuccess = () => {
     setShowAddModal(false);
     // Rafraîchir la liste après un délai pour laisser le temps au health check
@@ -86,7 +90,7 @@ export default function AppsPage({ apps, onRefresh }) {
         </div>
       ) : (
         <div className="space-y-4">
-          {apps.map((app) => (
+          {sortedApps.map((app) => (
             <AppCard
               key={app.id}
               app={app}

src/frontend/src/pages/DashboardPage.jsx

@@ -12,6 +12,7 @@ import {
 } from 'lucide-react';
 import { getApps, getSystemInfo } from '../utils/api';
 import StatusBadge from '../components/StatusBadge';
+import { sortAppsWithInfraFirst } from '../utils/appSorting';
 
 function StatCard({ icon: Icon, label, value, color, subtext }) {
   return (
@@ -44,6 +45,7 @@ export default function DashboardPage({ apps }) {
   const onlineApps = apps.filter((a) => a.status === 'online').length;
   const offlineApps = apps.filter((a) => a.status === 'offline').length;
   const errorApps = apps.filter((a) => a.status === 'error').length;
+  const sortedApps = sortAppsWithInfraFirst(apps);
 
   return (
     <div className="space-y-6">
@@ -147,7 +149,7 @@ export default function DashboardPage({ apps }) {
             <p className="text-gray-500 text-sm">Aucune application détectée</p>
           ) : (
             <div className="space-y-3">
-              {apps.map((app) => {
+              {sortedApps.map((app) => {
                 const isInfra = app.category === "INFRA" || ["portail-santinova", "manus-dashboard"].includes(app.id);
                 return (
                 <div

src/frontend/src/utils/appSorting.js

@@ -0,0 +1,15 @@
+/**
+ * Retourne une copie triée sans modifier la liste fournie par l'API.
+ * Les services INFRA sont affichés en premier ; l'ordre d'origine est conservé
+ * au sein de chaque groupe afin d'éviter des déplacements visuels inutiles.
+ */
+export function sortAppsWithInfraFirst(apps) {
+  return (Array.isArray(apps) ? apps : [])
+    .map((app, index) => ({ app, index }))
+    .sort((left, right) => {
+      const leftPriority = left.app?.category === 'INFRA' ? 0 : 1;
+      const rightPriority = right.app?.category === 'INFRA' ? 0 : 1;
+      return leftPriority - rightPriority || left.index - right.index;
+    })
+    .map(({ app }) => app);
+}