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) => (