Feat : Streamer watch list

packages/web/src/styles.css

@@ -401,6 +401,85 @@ fieldset.group > legend {
   white-space: nowrap;
 }
 
+/* --- Veille --- */
+
+.watchlist {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px 18px;
+  background: var(--panel);
+  border-bottom: 1px solid var(--border);
+}
+.watchlist-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.watchlist-add {
+  max-width: 620px;
+}
+
+.target-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.target {
+  display: grid;
+  grid-template-columns: 96px minmax(120px, 1fr) 160px minmax(0, 1.2fr) auto;
+  gap: 10px;
+  align-items: center;
+  padding: 8px 10px;
+  background: var(--panel-2);
+  border-left: 3px solid transparent;
+  border-radius: 8px;
+}
+.target.tone-rec {
+  border-left-color: var(--rec);
+}
+.target.tone-warn {
+  border-left-color: var(--warn);
+}
+
+.target-name {
+  color: var(--text);
+  font-weight: 600;
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.target-name:hover {
+  text-decoration: underline;
+}
+.target-agent {
+  width: 100%;
+}
+.target-meta {
+  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 --- */
 
 .logs {