@thibautrey/chatons-extension-minecraft-servers 1.0.0 → 1.1.0

package/chaton.extension.json

@@ -1,7 +1,7 @@
 {
   "id": "@thibautrey/chatons-extension-minecraft-servers",
   "name": "Minecraft Servers",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Manage and inspect a list of Minecraft servers from Chatons.",
   "icon": "icon.svg",
   "capabilities": [

package/index.html

@@ -48,6 +48,14 @@
       background: color-mix(in srgb, var(--ce-muted, #e5e7eb) 60%, transparent);
       font-size: 12px;
     }
+    .section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 12px;
+      flex-wrap: wrap;
+    }
     .field-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
@@ -56,11 +64,14 @@
     .field-grid .full {
       grid-column: 1 / -1;
     }
-    .actions {
+    .actions, .form-actions {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
     }
+    .form-actions {
+      margin-top: 16px;
+    }
     input, textarea, select {
       width: 100%;
       box-sizing: border-box;
@@ -80,6 +91,10 @@
       background: color-mix(in srgb, var(--ce-card, #ffffff) 88%, transparent);
       display: grid;
       gap: 10px;
+      transition: all 0.2s ease;
+    }
+    .server-card:hover {
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     }
     .server-card.is-selected {
       border-color: color-mix(in srgb, #22c55e 55%, var(--ce-border, #d1d5db));
@@ -116,12 +131,20 @@
     }
     .badge.ok {
       background: rgba(34, 197, 94, 0.18);
+      color: #15803d;
     }
     .badge.warn {
       background: rgba(245, 158, 11, 0.18);
+      color: #a16207;
     }
     .badge.error {
       background: rgba(239, 68, 68, 0.18);
+      color: #dc2626;
+    }
+    .editing-badge {
+      background: rgba(59, 130, 246, 0.18);
+      color: #2563eb;
+      font-weight: 500;
     }
     .row-actions {
       display: flex;
@@ -137,6 +160,7 @@
       border-radius: 12px;
       background: color-mix(in srgb, var(--ce-muted, #e5e7eb) 55%, transparent);
       font-size: 13px;
+      text-align: center;
     }
     .status-box {
       display: grid;
@@ -154,11 +178,171 @@
       white-space: pre-wrap;
       word-break: break-word;
     }
+    .status-message {
+      padding: 10px 14px;
+      border-radius: 8px;
+      font-size: 13px;
+      display: none;
+    }
+    .status-message.visible {
+      display: block;
+    }
+    .status-message[data-kind="success"] {
+      background: rgba(34, 197, 94, 0.15);
+      color: #15803d;
+    }
+    .status-message[data-kind="error"] {
+      background: rgba(239, 68, 68, 0.15);
+      color: #dc2626;
+    }
+    .status-message[data-kind="loading"] {
+      background: rgba(59, 130, 246, 0.15);
+      color: #2563eb;
+    }
+    .help-text {
+      margin-top: 12px;
+      font-size: 12px;
+    }
+    .required {
+      color: #dc2626;
+    }
+    .field-error {
+      border-color: #dc2626 !important;
+    }
+    .field-error-msg {
+      color: #dc2626;
+      font-size: 11px;
+      margin-top: 4px;
+    }
+    .server-controls {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+    .search-box {
+      position: relative;
+      flex: 1;
+      min-width: 150px;
+    }
+    .search-box input {
+      padding-right: 28px;
+    }
+    .search-clear {
+      position: absolute;
+      right: 8px;
+      top: 50%;
+      transform: translateY(-50%);
+      background: none;
+      border: none;
+      cursor: pointer;
+      font-size: 16px;
+      color: var(--ce-muted-fg, #6b7280);
+      padding: 4px;
+    }
+    .sort-select {
+      width: auto;
+      min-width: 120px;
+    }
+    .sort-direction {
+      padding: 6px 10px;
+      background: color-mix(in srgb, var(--ce-muted, #e5e7eb) 75%, transparent);
+      border: 1px solid color-mix(in srgb, var(--ce-border, #d1d5db) 90%, transparent);
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+    }
+    .sort-direction:hover {
+      background: color-mix(in srgb, var(--ce-muted, #e5e7eb) 90%, transparent);
+    }
+    .search-results-count {
+      margin-top: 8px;
+      font-size: 12px;
+    }
+    .btn-icon {
+      margin-right: 4px;
+    }
+    /* Modal styles */
+    .modal-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+      padding: 20px;
+    }
+    .modal-content {
+      background: color-mix(in srgb, var(--ce-card, #ffffff) 98%, transparent);
+      border-radius: 16px;
+      max-width: 400px;
+      width: 100%;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+      overflow: hidden;
+    }
+    .modal-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px 20px;
+      border-bottom: 1px solid color-mix(in srgb, var(--ce-border, #d1d5db) 90%, transparent);
+    }
+    .modal-header h3 {
+      margin: 0;
+      font-size: 16px;
+    }
+    .modal-close {
+      background: none;
+      border: none;
+      font-size: 24px;
+      cursor: pointer;
+      color: var(--ce-muted-fg, #6b7280);
+      padding: 0;
+      line-height: 1;
+    }
+    .modal-close:hover {
+      color: inherit;
+    }
+    .modal-body {
+      padding: 20px;
+    }
+    .modal-body p {
+      margin: 0 0 8px 0;
+    }
+    .modal-footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: 10px;
+      padding: 16px 20px;
+      border-top: 1px solid color-mix(in srgb, var(--ce-border, #d1d5db) 90%, transparent);
+    }
+    /* Danger button style */
+    .chaton-ui-button--danger {
+      background: rgba(239, 68, 68, 0.15);
+      color: #dc2626;
+      border: 1px solid rgba(239, 68, 68, 0.3);
+    }
+    .chaton-ui-button--danger:hover {
+      background: rgba(239, 68, 68, 0.25);
+    }
+    /* Responsive */
     @media (max-width: 960px) {
       .layout, .field-grid {
         grid-template-columns: 1fr;
       }
     }
+    @media (max-width: 600px) {
+      .server-controls {
+        width: 100%;
+      }
+      .search-box {
+        width: 100%;
+      }
+    }
   </style>
 </head>
 <body>

package/index.js

@@ -11,6 +11,12 @@ const DEFAULT_FORM = {
   tags: '',
 }
 
+const SORT_OPTIONS = {
+  name: 'Nom',
+  status: 'Statut',
+  created: 'Date creation',
+}
+
 function clone(value) {
   return JSON.parse(JSON.stringify(value))
 }
@@ -42,6 +48,10 @@ const state = {
   message: '',
   messageKind: '',
   loading: false,
+  searchQuery: '',
+  sortBy: 'name',
+  sortAsc: true,
+  pendingDeleteId: null,
 }
 
 function normalizeTagsText(tags) {
@@ -103,6 +113,47 @@ async function loadServers() {
   }
 }
 
+function getFilteredServers() {
+  let servers = [...state.servers]
+  
+  // Filter by search query
+  if (state.searchQuery) {
+    const query = state.searchQuery.toLowerCase()
+    servers = servers.filter(server => {
+      const name = (server.name || '').toLowerCase()
+      const host = (server.host || '').toLowerCase()
+      const tags = (server.tags || []).join(' ').toLowerCase()
+      return name.includes(query) || host.includes(query) || tags.includes(query)
+    })
+  }
+  
+  // Sort servers
+  servers.sort((a, b) => {
+    let aVal, bVal
+    switch (state.sortBy) {
+      case 'status':
+        const aStatus = state.liveById[a.id]
+        const bStatus = state.liveById[b.id]
+        aVal = aStatus && aStatus.ok ? 1 : 0
+        bVal = bStatus && bStatus.ok ? 1 : 0
+        break
+      case 'created':
+        aVal = a.createdAt || ''
+        bVal = b.createdAt || ''
+        break
+      case 'name':
+      default:
+        aVal = (a.name || '').toLowerCase()
+        bVal = (b.name || '').toLowerCase()
+    }
+    if (aVal < bVal) return state.sortAsc ? -1 : 1
+    if (aVal > bVal) return state.sortAsc ? 1 : -1
+    return 0
+  })
+  
+  return servers
+}
+
 function describeLiveStatus(status) {
   if (!status) return '<span class="badge">Aucun statut charge</span>'
   if (status.ok === false) {
@@ -125,8 +176,9 @@ function describeLiveStatus(status) {
 function serverCardHtml(server) {
   const status = state.liveById[server.id]
   const endpoint = server.host + ':' + server.port
+  const isEditing = state.selectedId === server.id
   return `
-    <div class="server-card ${state.selectedId === server.id ? 'is-selected' : ''}" data-server-id="${escapeHtml(server.id)}">
+    <div class="server-card ${isEditing ? 'is-selected' : ''}" data-server-id="${escapeHtml(server.id)}">
       <div class="server-head">
         <div class="server-title">
           <h3>${escapeHtml(server.name)}</h3>
@@ -134,16 +186,19 @@ function serverCardHtml(server) {
           <small class="muted">${escapeHtml(server.notes || '')}</small>
         </div>
         <div class="server-badges">
+          ${isEditing ? '<span class="badge editing-badge">Edition</span>' : ''}
           <span class="badge">${escapeHtml(server.edition || 'auto')}</span>
           ${(server.tags || []).map((tag) => `<span class="badge">${escapeHtml(tag)}</span>`).join('')}
         </div>
       </div>
       <div class="server-badges">${describeLiveStatus(status)}</div>
       <div class="row-actions">
-        <button class="chaton-ui-button chaton-ui-button--ghost" data-action="select" data-server-id="${escapeHtml(server.id)}">Editer</button>
+        <button class="chaton-ui-button ${isEditing ? 'chaton-ui-button--primary' : 'chaton-ui-button--ghost'}" data-action="select" data-server-id="${escapeHtml(server.id)}">
+          ${isEditing ? 'En cours d\'edition' : 'Editer'}
+        </button>
         <button class="chaton-ui-button" data-action="probe" data-server-id="${escapeHtml(server.id)}">Tester</button>
-        <button class="chaton-ui-button chaton-ui-button--ghost" data-action="players" data-server-id="${escapeHtml(server.id)}">Joueurs</button>
-        <button class="chaton-ui-button chaton-ui-button--ghost" data-action="delete" data-server-id="${escapeHtml(server.id)}">Supprimer</button>
+        <button class="chaton-ui-button chaton-ui-button--ghost" data-action="copy" data-server-id="${escapeHtml(server.id)}" title="Copier l'adresse">Copier</button>
+        <button class="chaton-ui-button chaton-ui-button--danger" data-action="confirm-delete" data-server-id="${escapeHtml(server.id)}">Supprimer</button>
       </div>
     </div>
   `
@@ -154,7 +209,7 @@ function statusDetailHtml(server, status) {
     return '<div class="empty">Selectionne un serveur pour voir les details.</div>'
   }
   if (!status) {
-    return '<div class="empty">Aucun statut live charge pour ce serveur.</div>'
+    return '<div class="empty">Aucun statut live charge pour ce serveur. Clique sur "Tester" pour obtenir le statut.</div>'
   }
   return `
     <div class="status-box">
@@ -164,11 +219,37 @@ function statusDetailHtml(server, status) {
   `
 }
 
+function modalHtml() {
+  if (!state.pendingDeleteId) return ''
+  const server = state.servers.find(s => s.id === state.pendingDeleteId)
+  if (!server) return ''
+  return `
+    <div class="modal-overlay" id="deleteModal">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h3>Confirmer la suppression</h3>
+          <button class="modal-close" data-action="cancel-delete">&times;</button>
+        </div>
+        <div class="modal-body">
+          <p>Es-tu sur de vouloir supprimer le serveur <strong>${escapeHtml(server.name)}</strong>&nbsp;?</p>
+          <p class="muted">Cette action est irreversible.</p>
+        </div>
+        <div class="modal-footer">
+          <button class="chaton-ui-button chaton-ui-button--ghost" data-action="cancel-delete">Annuler</button>
+          <button class="chaton-ui-button chaton-ui-button--danger" data-action="confirm-delete-final" data-server-id="${escapeHtml(server.id)}">Supprimer definitivement</button>
+        </div>
+      </div>
+    </div>
+  `
+}
+
 function render() {
   const app = document.getElementById('app')
   const selected = selectedServer()
+  const filteredServers = getFilteredServers()
   const statsCount = state.servers.length
   const onlineCount = Object.values(state.liveById).filter((entry) => entry && entry.ok !== false).length
+  const isEditing = !!state.form.id
 
   app.innerHTML = `
     <div class="toolbar">
@@ -178,24 +259,31 @@ function render() {
       </div>
       <div class="actions">
         <button id="refreshAllBtn" class="chaton-ui-button">Actualiser tout</button>
-        <button id="resetFormBtn" class="chaton-ui-button chaton-ui-button--ghost">Nouveau serveur</button>
+        <button id="resetFormBtn" class="chaton-ui-button ${isEditing ? 'chaton-ui-button--primary' : 'chaton-ui-button--ghost'}">
+          ${isEditing ? 'Nouveau serveur' : '+ Ajouter'}
+        </button>
       </div>
     </div>
 
-    <div id="statusMessage" class="muted"></div>
+    <div id="statusMessage" class="status-message ${state.messageKind ? 'visible' : ''}" data-kind="${escapeHtml(state.messageKind)}">${escapeHtml(state.message)}</div>
 
     <div class="layout">
       <section class="ce-card">
         <div class="ce-card__body">
-          <h2 class="ce-section-title">Configuration</h2>
+          <div class="section-header">
+            <h2 class="ce-section-title">${isEditing ? 'Modifier le serveur' : 'Ajouter un serveur'}</h2>
+            ${isEditing ? '<span class="badge editing-badge">Mode edition</span>' : ''}
+          </div>
           <div class="field-grid">
             <div class="full ce-field">
-              <label class="ce-label" for="field-name">Nom</label>
-              <input id="field-name" value="${escapeHtml(state.form.name)}" placeholder="Mon serveur survie">
+              <label class="ce-label" for="field-name">Nom <span class="required">*</span></label>
+              <input id="field-name" value="${escapeHtml(state.form.name)}" placeholder="Mon serveur survie" class="${!state.form.name && state.form.host ? 'field-error' : ''}" required>
+              ${!state.form.name && state.form.host ? '<small class="field-error-msg">Le nom est requis</small>' : ''}
             </div>
             <div class="ce-field">
-              <label class="ce-label" for="field-host">Host</label>
-              <input id="field-host" value="${escapeHtml(state.form.host)}" placeholder="play.example.net">
+              <label class="ce-label" for="field-host">Host <span class="required">*</span></label>
+              <input id="field-host" value="${escapeHtml(state.form.host)}" placeholder="play.example.net" class="${!state.form.host && state.form.name ? 'field-error' : ''}" required>
+              ${!state.form.host && state.form.name ? '<small class="field-error-msg">Le host est requis</small>' : ''}
             </div>
             <div class="ce-field">
               <label class="ce-label" for="field-port">Port</label>
@@ -219,21 +307,41 @@ function render() {
             </div>
           </div>
           <input id="field-id" type="hidden" value="${escapeHtml(state.form.id)}">
-          <div class="actions">
-            <button id="saveBtn" class="chaton-ui-button chaton-ui-button--primary">${state.form.id ? 'Mettre a jour' : 'Ajouter'}</button>
-            <button id="probeBtn" class="chaton-ui-button">Tester ce serveur</button>
+          <div class="form-actions">
+            <button id="saveBtn" class="chaton-ui-button chaton-ui-button--primary">
+              <span class="btn-icon">${isEditing ? '&#x2713;' : '+'}</span>
+              ${isEditing ? 'Mettre a jour' : 'Ajouter le serveur'}
+            </button>
+            <button id="probeBtn" class="chaton-ui-button" ${!state.form.host ? 'disabled' : ''}>Tester</button>
             <button id="playersBtn" class="chaton-ui-button chaton-ui-button--ghost">Lister les joueurs</button>
           </div>
-          <div class="muted">Les informations live utilisent uniquement le ping public du serveur. La liste des joueurs depend de ce que le serveur expose.</div>
+          <div class="muted help-text">Les informations live utilisent uniquement le ping public du serveur. La liste des joueurs depend de ce que le serveur expose.</div>
         </div>
       </section>
 
       <section class="ce-card">
         <div class="ce-card__body">
-          <h2 class="ce-section-title">Serveurs enregistres</h2>
+          <div class="section-header">
+            <h2 class="ce-section-title">Serveurs enregistres</h2>
+            <div class="server-controls">
+              <div class="search-box">
+                <input type="text" id="searchInput" placeholder="Rechercher..." value="${escapeHtml(state.searchQuery)}">
+                ${state.searchQuery ? '<button class="search-clear" data-action="clear-search">&times;</button>' : ''}
+              </div>
+              <select id="sortSelect" class="sort-select">
+                <option value="name" ${state.sortBy === 'name' ? 'selected' : ''}>Trier par nom</option>
+                <option value="status" ${state.sortBy === 'status' ? 'selected' : ''}>Trier par statut</option>
+                <option value="created" ${state.sortBy === 'created' ? 'selected' : ''}>Trier par date</option>
+              </select>
+              <button class="sort-direction" data-action="toggle-sort" title="Inverser l'ordre">
+                ${state.sortAsc ? '&#x2191;' : '&#x2193;'}
+              </button>
+            </div>
+          </div>
           <div class="server-list">
-            ${state.servers.length ? state.servers.map(serverCardHtml).join('') : '<div class="empty">Aucun serveur configure pour le moment.</div>'}
+            ${filteredServers.length ? filteredServers.map(serverCardHtml).join('') : `<div class="empty">${state.searchQuery ? 'Aucun serveur ne correspond a ta recherche.' : 'Aucun serveur configure pour le moment.'}</div>`}
           </div>
+          ${state.searchQuery && filteredServers.length > 0 ? `<div class="search-results-count muted">${filteredServers.length} serveur(s) trouve(s)</div>` : ''}
         </div>
       </section>
     </div>
@@ -244,6 +352,8 @@ function render() {
         ${statusDetailHtml(selected, selected ? state.liveById[selected.id] : null)}
       </div>
     </section>
+
+    ${modalHtml()}
   `
 
   bindEvents()
@@ -272,6 +382,7 @@ async function saveCurrentForm() {
 
   if (!payload.name || !payload.host) {
     setMessage('Le nom et le host sont obligatoires.', 'error')
+    render()
     return
   }
 
@@ -281,6 +392,7 @@ async function saveCurrentForm() {
 
   if (!result || !result.ok) {
     setMessage(result && result.error ? result.error.message : 'Echec de sauvegarde.', 'error')
+    render()
     return
   }
 
@@ -295,10 +407,11 @@ async function probeServer(server) {
     setMessage('Aucun serveur selectionne.', 'error')
     return
   }
+  setMessage('Test en cours...', 'loading')
   const result = await call('minecraft.servers.status', { id: server.id })
   if (!result || !result.ok) {
     state.liveById[server.id] = { ok: false, error: result && result.error ? result.error.message : 'Probe failed' }
-    setMessage(result && result.error ? result.error.message : 'Probe impossible.', 'error')
+    setMessage(result && result.error ? result.error.message : 'Test impossible.', 'error')
     render()
     return
   }
@@ -312,9 +425,11 @@ async function listPlayers(server) {
     setMessage('Aucun serveur selectionne.', 'error')
     return
   }
+  setMessage('Chargement des joueurs...', 'loading')
   const result = await call('minecraft.servers.players', { id: server.id })
   if (!result || !result.ok) {
     setMessage(result && result.error ? result.error.message : 'Impossible de lister les joueurs.', 'error')
+    render()
     return
   }
   const players = result.data && Array.isArray(result.data.players) ? result.data.players : []
@@ -325,10 +440,33 @@ async function listPlayers(server) {
   render()
 }
 
+async function copyAddress(server) {
+  const address = server.host + ':' + server.port
+  try {
+    await navigator.clipboard.writeText(address)
+    setMessage('Adresse copiee: ' + address, 'success')
+  } catch (err) {
+    setMessage('Impossible de copier l\'adresse.', 'error')
+  }
+  render()
+}
+
+function confirmDelete(serverId) {
+  state.pendingDeleteId = serverId
+  render()
+}
+
+function cancelDelete() {
+  state.pendingDeleteId = null
+  render()
+}
+
 async function removeServer(serverId) {
+  state.pendingDeleteId = null
   const result = await call('minecraft.servers.remove', { id: serverId })
   if (!result || !result.ok) {
     setMessage(result && result.error ? result.error.message : 'Suppression impossible.', 'error')
+    render()
     return
   }
   delete state.liveById[serverId]
@@ -341,6 +479,7 @@ async function removeServer(serverId) {
 }
 
 async function refreshAll() {
+  setMessage('Actualisation en cours...', 'loading')
   await loadServers()
   for (const server of state.servers) {
     const result = await call('minecraft.servers.status', { id: server.id })
@@ -356,6 +495,8 @@ function bindEvents() {
   const playersBtn = document.getElementById('playersBtn')
   const resetFormBtn = document.getElementById('resetFormBtn')
   const refreshAllBtn = document.getElementById('refreshAllBtn')
+  const searchInput = document.getElementById('searchInput')
+  const sortSelect = document.getElementById('sortSelect')
 
   if (saveBtn) {
     saveBtn.onclick = function () {
@@ -384,29 +525,60 @@ function bindEvents() {
       void refreshAll()
     }
   }
+  if (searchInput) {
+    searchInput.oninput = function () {
+      state.searchQuery = searchInput.value.trim()
+      render()
+    }
+  }
+  if (sortSelect) {
+    sortSelect.onchange = function () {
+      state.sortBy = sortSelect.value
+      render()
+    }
+  }
 
-  Array.from(document.querySelectorAll('[data-action]')).forEach((node) => {
+  // Handle all click events via delegation
+  document.querySelectorAll('[data-action]').forEach((node) => {
     node.onclick = function () {
       const action = node.getAttribute('data-action')
       const serverId = node.getAttribute('data-server-id')
-      const server = state.servers.find((entry) => entry.id === serverId)
-      if (!server) return
-      if (action === 'select') {
-        state.selectedId = server.id
-        state.form = formFromServer(server)
-        render()
-        return
-      }
-      if (action === 'probe') {
-        void probeServer(server)
-        return
-      }
-      if (action === 'players') {
-        void listPlayers(server)
-        return
-      }
-      if (action === 'delete') {
-        void removeServer(server.id)
+      const server = serverId ? state.servers.find((entry) => entry.id === serverId) : null
+      
+      switch (action) {
+        case 'select':
+          if (server) {
+            state.selectedId = server.id
+            state.form = formFromServer(server)
+            render()
+          }
+          break
+        case 'probe':
+          if (server) void probeServer(server)
+          break
+        case 'players':
+          if (server) void listPlayers(server)
+          break
+        case 'copy':
+          if (server) void copyAddress(server)
+          break
+        case 'confirm-delete':
+          if (serverId) confirmDelete(serverId)
+          break
+        case 'cancel-delete':
+          cancelDelete()
+          break
+        case 'confirm-delete-final':
+          if (serverId) void removeServer(serverId)
+          break
+        case 'toggle-sort':
+          state.sortAsc = !state.sortAsc
+          render()
+          break
+        case 'clear-search':
+          state.searchQuery = ''
+          render()
+          break
       }
     }
   })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thibautrey/chatons-extension-minecraft-servers",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Minecraft servers extension for Chatons",
   "type": "module",
   "license": "MIT"