Move peer list into dedicated Peers sidebar tab

Keep quick Add peer (and Peers shortcut) in the sidebar footer; full
saved-peer list, counts, and actions live on a new Peers view that is
reachable offline for managing keys.

ui/modern.css

@@ -311,7 +311,7 @@ body {
   border-left: none;
 }
 
-/* Footer: add-peer + peer status dots only */
+/* Footer: quick-add + peers shortcut (list is on Peers view) */
 #sidebar.collapsed .sidebar-footer {
   width: 100%;
   margin-top: auto;
@@ -324,23 +324,19 @@ body {
 }
 
 #sidebar.collapsed .connections-panel {
-  --peer-row-h: 40px;
-  --peer-row-gap: 6px;
-  --peer-list-max-visible: 6;
   width: 100%;
   align-items: center;
   overflow: visible;
   padding: 0;
+  gap: 6px;
 }
 
-#sidebar.collapsed .connections-panel-header {
-  justify-content: center;
-  margin-bottom: 8px;
-  width: 100%;
+#sidebar.collapsed .connections-panel--compact {
   padding: 0;
 }
 
-#sidebar.collapsed .open-add-connection-btn {
+#sidebar.collapsed .open-add-connection-btn,
+#sidebar.collapsed .open-peers-view-btn {
   width: 40px;
   height: 36px;
   min-width: 40px;
@@ -351,41 +347,8 @@ body {
   font-size: 14px;
 }
 
-#sidebar.collapsed #connection-list {
-  width: 100%;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  scrollbar-gutter: auto;
-  max-height: calc(
-    (var(--peer-list-max-visible) * var(--peer-row-h)) +
-      ((var(--peer-list-max-visible) - 1) * var(--peer-row-gap))
-  );
-}
-
-#sidebar.collapsed #connection-list .list-group-item {
-  width: 44px;
-  height: var(--peer-row-h);
-  max-height: var(--peer-row-h);
-  max-width: 44px;
-  margin-bottom: var(--peer-row-gap);
-  padding: 0;
-  border-radius: 11px;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  cursor: pointer;
-}
-
-#sidebar.collapsed #connection-list .list-group-item:last-child {
-  margin-bottom: 0;
-}
-
-#sidebar.collapsed #connection-list .list-group-item:hover {
-  border-color: rgba(52, 211, 153, 0.4);
-  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.12);
+#sidebar.collapsed .open-add-connection-label {
+  display: none;
 }
 
 #sidebar.collapsed .connection-item {
@@ -569,6 +532,78 @@ body {
   max-height: none;
 }
 
+/* Compact sidebar footer: Add peer + open Peers view (list lives in Peers tab) */
+.connections-panel--compact {
+  padding: 0 6px 6px;
+  gap: 6px;
+  overflow: visible;
+}
+
+.connections-panel--compact .open-add-connection-btn,
+.connections-panel--compact .open-peers-view-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 36px;
+  border-radius: 10px;
+  font-weight: 600;
+}
+
+/* Peers view full list */
+#peers-view .peers-connection-list,
+.peers-connection-list {
+  max-height: none !important;
+  overflow: visible !important;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+}
+
+#peers-view .peers-connection-list .list-group-item {
+  border-radius: 12px !important;
+  border: 1px solid var(--border-color) !important;
+  background: var(--bg-tertiary) !important;
+  margin: 0 !important;
+  padding: 12px 14px !important;
+  width: 100% !important;
+  max-width: none !important;
+  height: auto !important;
+  max-height: none !important;
+}
+
+#peers-view .peers-connection-list .list-group-item:hover {
+  background: var(--bg-hover) !important;
+  border-color: rgba(52, 211, 153, 0.35) !important;
+}
+
+#peers-view .peers-connection-list .list-group-item.active {
+  border-color: rgba(52, 211, 153, 0.55) !important;
+  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.25), 0 8px 24px rgba(0, 0, 0, 0.25);
+  background: rgba(52, 211, 153, 0.1) !important;
+}
+
+#peers-view .connection-item {
+  gap: 12px;
+  width: 100%;
+}
+
+#peers-view .connection-name {
+  max-width: none !important;
+  font-size: 0.95rem;
+  overflow: visible;
+  text-overflow: unset;
+  white-space: normal;
+}
+
+#peers-view .connection-meta {
+  display: block !important;
+  white-space: normal;
+}
+
 .connections-panel-header {
   display: flex;
   align-items: center;

ui/ops-app.js

@@ -1208,9 +1208,10 @@ export function openPalette(navigateToView) {
     { label: 'Swarm', icon: 'fa-project-diagram', view: 'swarm' },
     { label: 'Deploy', icon: 'fa-rocket', view: 'deploy' },
     { label: 'Fleet', icon: 'fa-server', view: 'fleet' },
+    { label: 'Peers', icon: 'fa-network-wired', view: 'peers' },
     { label: 'Events', icon: 'fa-bolt', view: 'events' },
     { label: 'Host', icon: 'fa-microchip', view: 'host' },
-    { label: 'Tunnels', icon: 'fa-network-wired', view: 'tunnels' },
+    { label: 'Tunnels', icon: 'fa-satellite-dish', view: 'tunnels' },
     { label: 'Access', icon: 'fa-user-shield', view: 'access' },
     { label: 'Settings', icon: 'fa-gear', view: 'settings' },
     {