diff --git a/CONTEXT.md b/CONTEXT.md
index 20ca209..096ecb2 100644
--- a/CONTEXT.md
+++ b/CONTEXT.md
@@ -472,6 +472,36 @@ The router includes automatic scroll-to-top functionality and a 404 NotFound pag
```
+### 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
+
+
+
+
+
+ No results found. Try another relay?
+
+
+
+
+
+
+```
+
+**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:
diff --git a/src/components/RelaySelector.tsx b/src/components/RelaySelector.tsx
index ae032ef..afdd658 100644
--- a/src/components/RelaySelector.tsx
+++ b/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("");
diff --git a/src/components/auth/AccountSwitcher.tsx b/src/components/auth/AccountSwitcher.tsx
index 52aaef2..d3ebf5e 100644
--- a/src/components/auth/AccountSwitcher.tsx
+++ b/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) {
Switch Relay
- updateConfig((config) => ({ ...config, relayUrl }))}
- presetRelays={presetRelays}
- />
+
Switch Account
{otherUsers.map((user) => (