RelaySelector should not accept any props

CONTEXT.md

@@ -472,6 +472,36 @@ The router includes automatic scroll-to-top functionality and a 404 NotFound pag
 </Card>
 ```
 
+### Empty States and No Content Found
+
+When no content is found (empty search results, no data available, etc.), display a minimalist empty state with the `RelaySelector` component. This allows users to easily switch relays to discover content from different sources.
+
+```tsx
+import { RelaySelector } from '@/components/RelaySelector';
+import { Card, CardContent } from '@/components/ui/card';
+
+// Empty state example
+<div className="col-span-full">
+  <Card className="border-dashed">
+    <CardContent className="py-12 px-8 text-center">
+      <div className="max-w-sm mx-auto space-y-6">
+        <p className="text-muted-foreground">
+          No results found. Try another relay?
+        </p>
+        <RelaySelector className="w-full" />
+      </div>
+    </CardContent>
+  </Card>
+</div>
+```
+
+**Key principles for empty states:**
+- Keep text minimal and clear
+- Use dashed borders to indicate empty/placeholder state
+- Include the RelaySelector to provide actionable next steps
+- Center content with generous whitespace (`py-12 px-8`)
+- Constrain width with `max-w-sm mx-auto` for focused layout
+
 ## Design Customization
 
 **Tailor the site's look and feel based on the user's specific request.** This includes:

src/components/RelaySelector.tsx

@@ -15,16 +15,20 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { useState } from "react";
+import { useAppContext } from "@/hooks/useAppContext";
 
 interface RelaySelectorProps {
   className?: string;
-  selectedRelay?: string;
-  setSelectedRelay: (relay: string) => void;
-  presetRelays?: { name: string; url: string }[];
 }
 
 export function RelaySelector(props: RelaySelectorProps) {
-  const { selectedRelay, setSelectedRelay, className, presetRelays = [] } = props;
+  const { className } = props;
+  const { config, updateConfig, presetRelays = [] } = useAppContext();
+  
+  const selectedRelay = config.relayUrl;
+  const setSelectedRelay = (relay: string) => {
+    updateConfig((current) => ({ ...current, relayUrl: relay }));
+  };
 
   const [open, setOpen] = useState(false);
   const [inputValue, setInputValue] = useState("");

src/components/auth/AccountSwitcher.tsx

@@ -12,7 +12,6 @@ import {
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar.tsx';
 import { RelaySelector } from '@/components/RelaySelector';
 import { useLoggedInAccounts, type Account } from '@/hooks/useLoggedInAccounts';
-import { useAppContext } from '@/hooks/useAppContext';
 import { genUserName } from '@/lib/genUserName';
 
 interface AccountSwitcherProps {
@@ -20,7 +19,6 @@ interface AccountSwitcherProps {
 }
 
 export function AccountSwitcher({ onAddAccountClick }: AccountSwitcherProps) {
-  const { config, updateConfig, presetRelays } = useAppContext();
   const { currentUser, otherUsers, setLogin, removeLogin } = useLoggedInAccounts();
 
   if (!currentUser) return null;
@@ -45,12 +43,7 @@ export function AccountSwitcher({ onAddAccountClick }: AccountSwitcherProps) {
       </DropdownMenuTrigger>
       <DropdownMenuContent className='w-56 p-2 animate-scale-in'>
         <div className='font-medium text-sm px-2 py-1.5'>Switch Relay</div>
-        <RelaySelector
+        <RelaySelector className="w-full" />
-          className="w-full"
-          selectedRelay={config.relayUrl}
-          setSelectedRelay={(relayUrl) => updateConfig((config) => ({ ...config, relayUrl }))}
-          presetRelays={presetRelays}
-        />
         <DropdownMenuSeparator />
         <div className='font-medium text-sm px-2 py-1.5'>Switch Account</div>
         {otherUsers.map((user) => (