Merge branch 'feat/hardware-signer-connection-filter'

Author: andreasgriffin

assets/js/main.js

@@ -257,8 +257,11 @@ const setupHardwareSignerFilters = () => {
     const buttons = Array.from(root.querySelectorAll('[data-connection-type]'))
     const cards = Array.from(root.querySelectorAll('[data-hardware-signer-card]'))
     const emptyState = root.querySelector('[data-hardware-signer-empty]')
+    const grid = root.querySelector('[data-hardware-signer-grid]')
+    const sortSelect = root.querySelector('[data-hardware-signer-sort]')
+    const hasFilterButtons = buttons.length > 0
 
-    if (!buttons.length || !cards.length || !emptyState) {
+    if (!cards.length || !emptyState || !grid) {
       return
     }
 
@@ -277,6 +280,43 @@ const setupHardwareSignerFilters = () => {
         .filter(Boolean)
     )
 
+    const collator = new Intl.Collator(undefined, {
+      numeric: true,
+      sensitivity: 'base'
+    })
+
+    const sortCards = () => {
+      if (!sortSelect) {
+        return
+      }
+
+      const sortValue = sortSelect.value || 'alpha-asc'
+      const sortedCards = [...cards]
+
+      if (sortValue === 'manual') {
+        sortedCards
+          .sort((left, right) => (
+            Number(left.dataset.originalIndex || 0) - Number(right.dataset.originalIndex || 0)
+          ))
+          .forEach((card) => grid.appendChild(card))
+        return
+      }
+
+      sortedCards.sort((left, right) => {
+        const leftName = left.dataset.sortName || ''
+        const rightName = right.dataset.sortName || ''
+        const result = collator.compare(leftName, rightName)
+
+        if (result !== 0) {
+          return sortValue === 'alpha-desc' ? -result : result
+        }
+
+        return Number(left.dataset.originalIndex || 0) - Number(right.dataset.originalIndex || 0)
+      })
+
+      sortedCards.forEach((card) => grid.appendChild(card))
+    }
+
     const updateCards = () => {
       const activeTypes = getActiveTypes()
       let visibleCount = 0
@@ -287,7 +327,9 @@ const setupHardwareSignerFilters = () => {
           .map(type => type.trim())
           .filter(Boolean)
 
-        const isVisible = activeTypes.size > 0 && supportedTypes.some(type => activeTypes.has(type))
+        const isVisible = !hasFilterButtons || (
+          activeTypes.size > 0 && supportedTypes.some(type => activeTypes.has(type))
+        )
         card.hidden = !isVisible
 
         if (isVisible) {
@@ -307,6 +349,14 @@ const setupHardwareSignerFilters = () => {
       })
     })
 
+    if (sortSelect) {
+      sortSelect.addEventListener('change', () => {
+        sortCards()
+        updateCards()
+      })
+    }
+
+    sortCards()
     updateCards()
   })
 }

assets/sass/styles.scss

@@ -124,7 +124,8 @@ table img {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: 0.9rem;
+    gap: 1rem;
+    min-width: 0;
 }
 
 .hardware-signer-filter-label {
@@ -137,6 +138,32 @@ table img {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+    min-width: 0;
+}
+
+.hardware-signer-sort {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: auto;
+    margin-left: auto;
+    white-space: nowrap;
+}
+
+.hardware-signer-sort-label {
+    color: var(--bs-secondary-color);
+    font-size: 0.95rem;
+    font-weight: 600;
+    margin-bottom: 0;
+}
+
+.hardware-signer-sort-select {
+    min-width: 220px;
 }
 
 .hardware-signer-filter-btn {
@@ -193,6 +220,16 @@ table img {
 }
 
 @media (max-width: 575.98px) {
+    .hardware-signer-sort {
+        width: 100%;
+        margin-left: 0;
+    }
+
+    .hardware-signer-sort-select {
+        min-width: 0;
+        flex: 1 1 auto;
+    }
+
     .hardware-signer-filter-btn {
         width: 100%;
         justify-content: center;

content/knowledge/supported-hardware-signers/trezor-safe-7/index.ar.md

@@ -0,0 +1,16 @@
+---
+aliases:
+- /ar/knowledge/supported-hardware-signers/trezor-safe-7/
+title: Trezor Safe 7
+signer: trezor-safe-7
+videos:
+- https://www.youtube.com/watch?v=m0g6ytYTy0w
+- https://www.youtube.com/watch?v=dbSmQmt0uDI
+---
+
+# Videos
+  
+{{< youtube-gallery >}} 
+
+
+

content/knowledge/supported-hardware-signers/trezor-safe-7/index.ca.md

@@ -0,0 +1,16 @@
+---
+aliases:
+- /ca/knowledge/supported-hardware-signers/trezor-safe-7/
+title: Trezor Safe 7
+signer: trezor-safe-7
+videos:
+- https://www.youtube.com/watch?v=m0g6ytYTy0w
+- https://www.youtube.com/watch?v=dbSmQmt0uDI
+---
+
+# Videos
+  
+{{< youtube-gallery >}} 
+
+
+

content/knowledge/supported-hardware-signers/trezor-safe-7/index.de.md

@@ -0,0 +1,16 @@
+---
+aliases:
+- /de/knowledge/supported-hardware-signers/trezor-safe-7/
+title: Trezor Safe 7
+signer: trezor-safe-7
+videos:
+- https://www.youtube.com/watch?v=m0g6ytYTy0w
+- https://www.youtube.com/watch?v=dbSmQmt0uDI
+---
+
+# Videos
+  
+{{< youtube-gallery >}} 
+
+
+

content/knowledge/supported-hardware-signers/trezor-safe-7/index.es.md

@@ -0,0 +1,16 @@
+---
+aliases:
+- /es/knowledge/supported-hardware-signers/trezor-safe-7/
+title: Trezor Safe 7
+signer: trezor-safe-7
+videos:
+- https://www.youtube.com/watch?v=m0g6ytYTy0w
+- https://www.youtube.com/watch?v=dbSmQmt0uDI
+---
+
+# Videos
+  
+{{< youtube-gallery >}} 
+
+
+

content/knowledge/supported-hardware-signers/trezor-safe-7/index.fa.md

@@ -0,0 +1,16 @@
+---
+aliases:
+- /fa/knowledge/supported-hardware-signers/trezor-safe-7/
+title: Trezor Safe 7
+signer: trezor-safe-7
+videos:
+- https://www.youtube.com/watch?v=m0g6ytYTy0w
+- https://www.youtube.com/watch?v=dbSmQmt0uDI
+---
+
+# Videos
+  
+{{< youtube-gallery >}} 
+
+
+

content/knowledge/supported-hardware-signers/trezor-safe-7/index.fr.md

@@ -0,0 +1,16 @@
+---
+aliases:
+- /fr/knowledge/supported-hardware-signers/trezor-safe-7/
+title: Trezor Safe 7
+signer: trezor-safe-7
+videos:
+- https://www.youtube.com/watch?v=m0g6ytYTy0w
+- https://www.youtube.com/watch?v=dbSmQmt0uDI
+---
+
+# Videos
+  
+{{< youtube-gallery >}} 
+
+
+

content/knowledge/supported-hardware-signers/trezor-safe-7/index.hi.md

@@ -0,0 +1,16 @@
+---
+aliases:
+- /hi/knowledge/supported-hardware-signers/trezor-safe-7/
+title: Trezor Safe 7
+signer: trezor-safe-7
+videos:
+- https://www.youtube.com/watch?v=m0g6ytYTy0w
+- https://www.youtube.com/watch?v=dbSmQmt0uDI
+---
+
+# Videos
+  
+{{< youtube-gallery >}} 
+
+
+

content/knowledge/supported-hardware-signers/trezor-safe-7/index.id.md

@@ -0,0 +1,16 @@
+---
+aliases:
+- /id/knowledge/supported-hardware-signers/trezor-safe-7/
+title: Trezor Safe 7
+signer: trezor-safe-7
+videos:
+- https://www.youtube.com/watch?v=m0g6ytYTy0w
+- https://www.youtube.com/watch?v=dbSmQmt0uDI
+---
+
+# Videos
+  
+{{< youtube-gallery >}} 
+
+
+