Feat : page streamer

packages/web/src/styles.css

@@ -401,84 +401,142 @@ fieldset.group > legend {
   white-space: nowrap;
 }
 
-/* --- Veille --- */
+/* --- Onglets --- */
 
-.watchlist {
+.tabs {
   display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 14px 18px;
-  background: var(--panel);
-  border-bottom: 1px solid var(--border);
+  gap: 4px;
 }
-.watchlist-head {
+.tab {
   display: flex;
   align-items: center;
-  gap: 10px;
-}
-.watchlist-add {
-  max-width: 620px;
-}
-
-.target-list {
-  display: flex;
-  flex-direction: column;
   gap: 6px;
+  background: transparent;
+  border-color: transparent;
+  color: var(--muted);
+  font-weight: 600;
 }
-.target {
-  display: grid;
-  grid-template-columns: 96px minmax(120px, 1fr) 160px minmax(0, 1.2fr) auto;
-  gap: 10px;
-  align-items: center;
-  padding: 8px 10px;
+.tab.active {
   background: var(--panel-2);
-  border-left: 3px solid transparent;
-  border-radius: 8px;
+  border-color: var(--border);
+  color: var(--text);
 }
-.target.tone-rec {
+.pill {
+  min-width: 18px;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: var(--rec);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  text-align: center;
+}
+
+/* --- Page Streamers --- */
+
+.page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 18px;
+  align-content: start;
+}
+.streamer-add {
+  max-width: 720px;
+  flex-wrap: wrap;
+}
+
+.streamer-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 14px;
+  align-content: start;
+}
+
+.streamer {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 14px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--border);
+  border-radius: var(--radius);
+}
+.streamer.tone-rec {
   border-left-color: var(--rec);
 }
-.target.tone-warn {
+.streamer.tone-warn {
   border-left-color: var(--warn);
 }
+.streamer.tone-offline {
+  opacity: 0.72;
+}
 
-.target-name {
+.streamer-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.avatar {
+  width: 44px;
+  height: 44px;
+  flex: 0 0 44px;
+  border-radius: 50%;
+  object-fit: cover;
+  background: var(--panel-2);
+}
+.avatar-fallback {
+  display: grid;
+  place-items: center;
+  font-weight: 700;
+  color: var(--muted);
+  border: 1px solid var(--border);
+}
+.streamer-identity {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.streamer-name {
   color: var(--text);
   font-weight: 600;
+  font-size: 15px;
   text-decoration: none;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.target-name:hover {
+.streamer-name:hover {
   text-decoration: underline;
 }
-.target-agent {
-  width: 100%;
+
+.streamer-facts {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin: 0;
+  padding: 10px;
+  background: var(--panel-2);
+  border-radius: 8px;
 }
-.target-meta {
+.streamer-facts > div {
+  min-width: 0;
+}
+.streamer-facts dt {
+  font-size: 11px;
+  color: var(--muted);
+}
+.streamer-facts dd {
+  margin: 0;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.target-actions {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-}
-
-@media (max-width: 900px) {
-  .target {
-    grid-template-columns: 96px 1fr;
-    row-gap: 6px;
-  }
-  .target-meta {
-    grid-column: 1 / -1;
-  }
-  .target-actions {
-    grid-column: 1 / -1;
-  }
-}
 
 /* --- Journal --- */