big overhaul for server and webui feature matching, things default to disabled and disappear from UI when disabled.

webui/src/components/QuickstartOverlay/index.jsx

@@ -4,6 +4,8 @@ import { formatKeyLabel } from '../../controls/keymapUtils.js';
 import NicknameForm from '../NicknameForm/index.jsx';
 import SocialButton from '../SocialButton/index.jsx';
 import KeyPill from '../vip/VipAudioUploadCard/KeyPill.jsx';
+import { useSessionSelector } from '../../context/SessionContext.jsx';
+import { getSocialById } from '../../lib/socials.js';
 
 function ControlRow({ label, keyLabel }) {
   return (
@@ -45,6 +47,25 @@ function MobileQuickstart() {
   );
 }
 
+function DiscordQuickstartCard() {
+  const discord = useSessionSelector((state) => getSocialById(state, 'discord'));
+
+  /*
+    The section has explanatory text around the actual button, so SocialButton's
+    own null return is not enough here. Keep the whole Discord prompt self-
+    contained so layouts do not need a separate social feature check.
+  */
+  if (!discord?.url) return null;
+
+  return (
+    <div className="surface p-0.5">
+      <p className="text-xl font-semibold text-slate-200">Join our Discord server!</p>
+      <p className="text-sm font-semibold text-slate-200">We have an active and welcoming community :3</p>
+      <SocialButton id="discord" label="Join Discord" />
+    </div>
+  );
+}
+
 export default function QuickstartOverlay({
   visible,
   layout,
@@ -85,11 +106,7 @@ export default function QuickstartOverlay({
               <p className="text-sm font-semibold text-slate-200">Nicknames are assigned randomly by default, you can change yours here.</p>
               <NicknameForm compact />
             </div>
-            <div className="surface p-0.5">
-              <p className="text-xl font-semibold text-slate-200">Join our Discord server!</p>
-              <p className="text-sm font-semibold text-slate-200">We have an active and welcoming community :3</p>
-              <SocialButton id="discord" label="Join Discord" />
-            </div>
+            <DiscordQuickstartCard />
           </section>
         </div>
         <div className="flex flex-wrap items-center justify-between gap-0.5 border-t border-slate-700 px-0.5 py-0.35 text-[0.8rem]">