feat: consistent inputs, video-to-search click, clipboard fallback

- Unify name input style with rule-form controls (muted border, dark bg)
- Clicking a video thumbnail in a collection loads its title into the
  Discover search bar (search state lifted to App, threaded via props)
- Thumb strip items are now <button> elements for correct semantics
- Add execCommand fallback for clipboard copy on non-HTTPS origins

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: aarro

provider/ui/src/App.css

@@ -277,6 +277,11 @@ select:focus {
 select option {
   background: var(--surface2);
 }
+/* Name input in expanded card matches rule-form control style */
+.card-body-top input[type="text"] {
+  border-color: var(--muted);
+  background: var(--bg);
+}
 
 .rule-form {
   background: var(--surface2);
@@ -459,7 +464,12 @@ select option {
 }
 .thumb-strip-item {
   min-width: 0;
-  cursor: default;
+  cursor: pointer;
+  background: transparent;
+  border-radius: 0;
+  padding: 0;
+  text-align: left;
+  width: 100%;
 }
 .thumb-strip-item img {
   width: 100%;

provider/ui/src/App.jsx

@@ -20,6 +20,7 @@ export default function App() {
   const [saving, setSaving] = useState(false);
   const [rescanning, setRescanning] = useState(false);
   const [fixingThumbs, setFixingThumbs] = useState(false);
+  const [search, setSearch] = useState("");
 
   const load = useCallback(async () => {
     const [colRes, vidRes] = await Promise.all([fetch("/api/collections"), fetch("/api/videos")]);
@@ -122,10 +123,15 @@ export default function App() {
 
       <div className="two-col">
         <div className="col-left">
-          <Collections collections={data.collections} videos={videos} onChange={setCollections} />
+          <Collections
+            collections={data.collections}
+            videos={videos}
+            onChange={setCollections}
+            onVideoSearch={setSearch}
+          />
         </div>
         <div className="col-right">
-          <DiscoverPanel videos={videos} />
+          <DiscoverPanel videos={videos} search={search} onSearch={setSearch} />
         </div>
       </div>
 

provider/ui/src/Collections.jsx

@@ -67,7 +67,7 @@ function RuleForm({ rule, onChange, onRemove }) {
 
 const THUMB_PAGE = 4;
 
-function ThumbGrid({ videos }) {
+function ThumbGrid({ videos, onVideoSearch }) {
   const [expanded, setExpanded] = useState(false);
   if (videos.length === 0) {
     return <p className="empty thumb-grid-empty">No videos matched yet.</p>;
@@ -78,14 +78,20 @@ function ThumbGrid({ videos }) {
     <>
       <div className="thumb-grid">
         {shown.map((v) => (
-          <div key={v.id} className="thumb-strip-item" title={v.title}>
+          <button
+            key={v.id}
+            type="button"
+            className="thumb-strip-item"
+            title={v.title}
+            onClick={() => onVideoSearch?.(v.title)}
+          >
             {v.thumbnail ? (
               <img src={v.thumbnail} alt="" loading="lazy" />
             ) : (
               <div className="thumb-strip-placeholder" />
             )}
             <div className="thumb-title">{v.title}</div>
-          </div>
+          </button>
         ))}
       </div>
       {videos.length > THUMB_PAGE && (
@@ -101,7 +107,7 @@ function isAbsoluteUrl(url) {
   return typeof url === "string" && (url.startsWith("http://") || url.startsWith("https://"));
 }
 
-function CollectionCard({ collection, videos, onChange, onDelete, otherNames, plexThumb }) {
+function CollectionCard({ collection, videos, onChange, onDelete, otherNames, plexThumb, onVideoSearch }) {
   const [expanded, setExpanded] = useState(false);
   const [editName, setEditName] = useState(collection.name);
   const [nameError, setNameError] = useState(null);
@@ -268,7 +274,7 @@ function CollectionCard({ collection, videos, onChange, onDelete, otherNames, pl
             </div>
 
             {/* Matched video thumbnails */}
-            <ThumbGrid videos={matched} />
+            <ThumbGrid videos={matched} onVideoSearch={onVideoSearch} />
           </div>
 
           {/* Full-width row 3: rules + actions */}
@@ -351,7 +357,7 @@ function AddCollectionForm({ onAdd, onCancel, existingNames }) {
   );
 }
 
-export default function Collections({ collections, videos, onChange }) {
+export default function Collections({ collections, videos, onChange, onVideoSearch }) {
   const [adding, setAdding] = useState(false);
 
   const updateAt = (i, c) => {
@@ -390,6 +396,7 @@ export default function Collections({ collections, videos, onChange }) {
           onDelete={() => deleteAt(i)}
           otherNames={collections.filter((_, idx) => idx !== i).map((x) => x.name)}
           plexThumb={c.plex_thumb}
+          onVideoSearch={onVideoSearch}
         />
       ))}
 

provider/ui/src/DiscoverPanel.jsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 
-export default function DiscoverPanel({ videos }) {
-  const [search, setSearch] = useState("");
+export default function DiscoverPanel({ videos, search, onSearch }) {
   const [showAll, setShowAll] = useState(false);
   const [expandedTags, setExpandedTags] = useState(new Set());
   const [toast, setToast] = useState(null);
@@ -13,10 +12,21 @@ export default function DiscoverPanel({ videos }) {
   }, [toast]);
 
   const copyTag = (tag) => {
-    navigator.clipboard.writeText(tag).then(
-      () => setToast(`Copied "${tag}"`),
-      () => setToast(`Copy failed — paste manually: ${tag}`)
-    );
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(tag).then(
+        () => setToast(`Copied "${tag}"`),
+        () => setToast(`Copy failed — paste manually: ${tag}`)
+      );
+    } else {
+      const el = document.createElement("textarea");
+      el.value = tag;
+      el.style.cssText = "position:fixed;opacity:0";
+      document.body.appendChild(el);
+      el.select();
+      const ok = document.execCommand("copy");
+      document.body.removeChild(el);
+      setToast(ok ? `Copied "${tag}"` : `Copy failed — paste manually: ${tag}`);
+    }
   };
 
   const toggleTags = (id) => {
@@ -50,7 +60,7 @@ export default function DiscoverPanel({ videos }) {
         type="text"
         placeholder="Search title, channel, or tags…"
         value={search}
-        onChange={(e) => setSearch(e.target.value)}
+        onChange={(e) => onSearch(e.target.value)}
         className="discover-search"
       />