Merge pull request 'Node page Discord picker: org's servers + voice channels, not raw IDs (#213 item 3)' (#220) from feat/213-node-join-picker into main

Reviewed-on: #220

drb-frontend/app/nodes/[id]/page.tsx

@@ -10,6 +10,7 @@ import { StatusBadge } from "@/components/StatusBadge";
 import { NodeConfigModal } from "@/components/NodeConfigModal";
 import { SdrSettings } from "@/components/SdrSettings";
 import { RadioChannels } from "@/components/RadioChannels";
+import { NodeDiscordRadio } from "@/components/NodeDiscordRadio";
 import { CallRow } from "@/components/CallRow";
 import { MachineOutputNotice } from "@/components/ui/MachineOutputNotice";
 import { useAuth } from "@/components/AuthProvider";
@@ -28,96 +29,11 @@ function ApprovalBadge({ status }: { status: string | null }) {
   );
 }
 
-function DiscordJoinModal({
-  nodeId,
-  onClose,
-}: {
-  nodeId: string;
-  onClose: () => void;
-}) {
-  const [guildId, setGuildId] = useState("");
-  const [channelId, setChannelId] = useState("");
-  const [sending, setSending] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    setSending(true);
-    setError(null);
-    try {
-      await c2api.sendCommand(nodeId, {
-        action: "discord_join",
-        guild_id: guildId,
-        channel_id: channelId,
-      });
-      onClose();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to send join command.");
-    } finally {
-      setSending(false);
-    }
-  }
-
-  return (
-    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
-      <form
-        onSubmit={handleSubmit}
-        className="bg-gray-900 border border-gray-700 rounded-xl p-6 space-y-4 font-mono w-full max-w-sm max-h-[90vh] overflow-y-auto"
-      >
-        <h3 className="text-white font-semibold">Join Discord Voice</h3>
-        <div>
-          <label className="text-xs text-gray-400 block mb-1">Server ID (Guild)</label>
-          <input
-            value={guildId}
-            onChange={(e) => setGuildId(e.target.value)}
-            required
-            pattern="[0-9]+"
-            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
-            placeholder="123456789012345678"
-          />
-        </div>
-        <div>
-          <label className="text-xs text-gray-400 block mb-1">Voice Channel ID</label>
-          <input
-            value={channelId}
-            onChange={(e) => setChannelId(e.target.value)}
-            required
-            pattern="[0-9]+"
-            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-indigo-500"
-            placeholder="123456789012345678"
-          />
-        </div>
-        <p className="text-xs text-gray-600">
-          A token will be drawn from the pool automatically. Make sure the bot is a member of the server.
-        </p>
-        {error && <p className="text-red-400 text-xs">{error}</p>}
-        <div className="flex gap-3">
-          <button
-            type="submit"
-            disabled={sending}
-            className="flex-1 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white rounded-lg py-2 text-sm font-semibold transition-colors"
-          >
-            {sending ? "Joining…" : "Join"}
-          </button>
-          <button
-            type="button"
-            onClick={onClose}
-            className="flex-1 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg py-2 text-sm transition-colors"
-          >
-            Cancel
-          </button>
-        </div>
-      </form>
-    </div>
-  );
-}
-
 export default function NodeDetailPage() {
   const { id } = useParams<{ id: string }>();
   const router = useRouter();
   const [node, setNode] = useState<NodeRecord | null>(null);
   const [showConfig, setShowConfig] = useState(false);
-  const [showDiscordJoin, setShowDiscordJoin] = useState(false);
   const [sending, setSending] = useState(false);
   const [approving, setApproving] = useState(false);
   const [deleting, setDeleting] = useState(false);
@@ -347,19 +263,6 @@ export default function NodeDetailPage() {
             Update Node Software
           </button>
         )}
-        <button
-          onClick={() => setShowDiscordJoin(true)}
-          className="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg text-sm font-mono transition-colors"
-        >
-          Join Discord
-        </button>
-        <button
-          disabled={sending}
-          onClick={() => sendCommand("discord_leave")}
-          className="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg text-sm font-mono transition-colors disabled:opacity-50"
-        >
-          Leave Discord
-        </button>
         {isAdmin && (
           <button
             disabled={deleting}
@@ -371,6 +274,9 @@ export default function NodeDetailPage() {
         )}
       </div>
 
+      {/* server-26#213 item 3: picker over the org's linked servers, not raw IDs. */}
+      <NodeDiscordRadio nodeId={id} />
+
       <RadioChannels channels={node.radio_channels} />
 
       <SdrSettings node={node} canEdit={isAdmin} />
@@ -413,12 +319,6 @@ export default function NodeDetailPage() {
         />
       )}
 
-      {showDiscordJoin && (
-        <DiscordJoinModal
-          nodeId={id}
-          onClose={() => setShowDiscordJoin(false)}
-        />
-      )}
     </div>
   );
 }