Improve community bookmark reliability

Places a NIP-51 kind 10004 bookmark button between the edit and share
buttons so users can save a community while viewing it, not just from
the feed card's more-menu.

NIP.md

@@ -791,6 +791,22 @@ Both kind `34550` and kind `30009` are addressable events. To add or remove rank
 2. Extract badge `a` tags from results.
 3. `{ "kinds": [34550], "#a": ["30009:...", "..."] }`
 
+**Communities a user has bookmarked:**
+
+Agora uses [NIP-51](https://github.com/nostr-protocol/nips/blob/master/51.md) kind `10004` ("Communities") to let users save communities they want quick access to without requiring membership. Bookmarked communities are surfaced in the "My Communities" view alongside founded and member-of communities.
+
+1. `{ "kinds": [10004], "authors": ["<user-pubkey>"], "limit": 1 }`
+2. Extract `a` tags whose value begins with `34550:` from the result.
+3. For each coordinate `34550:<author-pubkey>:<d-tag>`, query the community definition with both `authors` and `#d` filters to prevent spoofing:
+
+   ```jsonc
+   { "kinds": [34550], "authors": ["<author-pubkey>"], "#d": ["<d-tag>"], "limit": 1 }
+   ```
+
+Clients toggling a bookmark MUST perform a read-modify-write cycle on the replaceable kind `10004` event: fetch the freshest version from relays, add or remove the matching `["a", "34550:<pubkey>:<d-tag>"]` tag, and republish the full tag list. Appending new entries to the end preserves chronological bookmark order per NIP-51.
+
+When the same community appears in multiple discovery sources, clients SHOULD display a single card but MAY indicate all applicable relationships (e.g. a member who has also bookmarked a community).
+
 ### Security Considerations
 
 - **Author filtering**: Clients MUST filter community definitions by `authors` to prevent impersonation.
@@ -804,6 +820,7 @@ Both kind `34550` and kind `30009` are addressable events. To add or remove rank
 - [NIP-22](https://github.com/nostr-protocol/nips/blob/master/22.md) -- Comment
 - [NIP-31](https://github.com/nostr-protocol/nips/blob/master/31.md) -- Unknown Event Kinds (`alt` tag)
 - [NIP-32](https://github.com/nostr-protocol/nips/blob/master/32.md) -- Labeling (moderation `ban` label)
+- [NIP-51](https://github.com/nostr-protocol/nips/blob/master/51.md) -- Lists (kind `10004` Communities list for bookmarks)
 - [NIP-56](https://github.com/nostr-protocol/nips/blob/master/56.md) -- Reporting
 - [NIP-58](https://github.com/nostr-protocol/nips/blob/master/58.md) -- Badges
 - [NIP-72](https://github.com/nostr-protocol/nips/blob/master/72.md) -- Moderated Communities

src/components/AddMemberDialog.tsx

@@ -0,0 +1,621 @@
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { UserPlus, Upload, Loader2, X, Search, Crown, Users } from 'lucide-react';
+import { useNostr } from '@nostrify/react';
+import { useQueryClient } from '@tanstack/react-query';
+import type { NostrEvent } from '@nostrify/nostrify';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
+import { getAvatarShape } from '@/lib/avatarShape';
+import { EmojifiedText } from '@/components/CustomEmoji';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useUploadFile } from '@/hooks/useUploadFile';
+import { useToast } from '@/hooks/useToast';
+import { useSearchProfiles, type SearchProfile } from '@/hooks/useSearchProfiles';
+import { PortalContainerProvider } from '@/hooks/usePortalContainer';
+import { genUserName } from '@/lib/genUserName';
+import { fetchFreshEvent } from '@/lib/fetchFreshEvent';
+import {
+  COMMUNITY_DEFINITION_KIND,
+  BADGE_DEFINITION_KIND,
+  BADGE_AWARD_KIND,
+  EMPTY_MODERATION,
+  type CommunityMember,
+  type CommunityMembership,
+  type CommunityModeration,
+  type ParsedCommunity,
+} from '@/lib/communityUtils';
+import { cn } from '@/lib/utils';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+type MemberRole = 'moderator' | 'member';
+
+interface PendingMember {
+  profile: SearchProfile;
+  role: MemberRole;
+}
+
+interface CommunityMembersCacheValue {
+  membership: CommunityMembership;
+  moderation: CommunityModeration;
+  rankMap: Map<string, CommunityMember>;
+}
+
+interface AddMemberDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** The raw community definition event. */
+  communityEvent: NostrEvent;
+  /** Parsed community data. */
+  community: ParsedCommunity;
+  /** Whether the current user is the founder (can add moderators). */
+  isFounder: boolean;
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function AddMemberDialog({
+  open,
+  onOpenChange,
+  communityEvent,
+  community,
+  isFounder,
+}: AddMemberDialogProps) {
+  const { user } = useCurrentUser();
+  const { nostr } = useNostr();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+
+  // Form state
+  const [pendingMembers, setPendingMembers] = useState<PendingMember[]>([]);
+  const [badgeImageUrl, setBadgeImageUrl] = useState('');
+  const [badgeImagePreview, setBadgeImagePreview] = useState('');
+  const [isPublishing, setIsPublishing] = useState(false);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | undefined>(undefined);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const dialogContentRef = useCallback((node: HTMLElement | null) => {
+    setPortalContainer(node ?? undefined);
+  }, []);
+
+  // Mutations
+  const { mutateAsync: publishEvent } = useNostrPublish();
+  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
+
+  // Does this community already have a badge definition?
+  const existingBadgeATag = community.ranks.find((r) => r.rank === 1)?.badgeATag;
+  const hasBadge = !!existingBadgeATag;
+
+  // Are there any pending members with the "member" role?
+  const hasPendingMembers = pendingMembers.some((m) => m.role === 'member');
+  // Will we need to create a badge? (members added + no badge exists yet)
+  const needsBadgeCreation = hasPendingMembers && !hasBadge;
+
+  const resetForm = useCallback(() => {
+    setPendingMembers([]);
+    setBadgeImageUrl('');
+    setBadgeImagePreview('');
+    setIsPublishing(false);
+  }, []);
+
+  const handleOpenChange = useCallback((nextOpen: boolean) => {
+    if (!nextOpen) resetForm();
+    onOpenChange(nextOpen);
+  }, [onOpenChange, resetForm]);
+
+  // ── People management ─────────────────────────────────────────────────────
+
+  const addPerson = useCallback((profile: SearchProfile) => {
+    if (!user) return;
+    if (profile.pubkey === community.founderPubkey) {
+      toast({ title: 'Already the founder' });
+      return;
+    }
+    if (pendingMembers.some((m) => m.profile.pubkey === profile.pubkey)) {
+      toast({ title: 'Already added' });
+      return;
+    }
+    // Default role: member if they're not already a moderator, moderator if founder is adding
+    const defaultRole: MemberRole = isFounder ? 'moderator' : 'member';
+    setPendingMembers((prev) => [...prev, { profile, role: defaultRole }]);
+  }, [user, community.founderPubkey, pendingMembers, isFounder, toast]);
+
+  const removePerson = useCallback((pubkey: string) => {
+    setPendingMembers((prev) => prev.filter((m) => m.profile.pubkey !== pubkey));
+  }, []);
+
+  const toggleRole = useCallback((pubkey: string) => {
+    if (!isFounder) return; // Only founder can toggle to moderator
+    setPendingMembers((prev) => prev.map((m) =>
+      m.profile.pubkey === pubkey
+        ? { ...m, role: m.role === 'moderator' ? 'member' : 'moderator' }
+        : m,
+    ));
+  }, [isFounder]);
+
+  const applyOptimisticMembership = useCallback((members: PendingMember[], awardEvents: Map<string, NostrEvent>) => {
+    queryClient.setQueryData<CommunityMembersCacheValue>(['community-members', community.aTag], (prev) => {
+      const moderation = prev?.moderation ?? EMPTY_MODERATION;
+      const rankMap = new Map(prev?.rankMap ?? []);
+      const membershipByPubkey = new Map(
+        (prev?.membership.members ?? []).map((member) => [member.pubkey, member] as const),
+      );
+
+      const seedRankZero = (pubkey: string) => {
+        if (moderation.bannedPubkeys.has(pubkey)) return;
+        const member: CommunityMember = { pubkey, rank: 0 };
+        if (!membershipByPubkey.has(pubkey)) membershipByPubkey.set(pubkey, member);
+        if (!rankMap.has(pubkey)) rankMap.set(pubkey, member);
+      };
+
+      seedRankZero(community.founderPubkey);
+      community.moderatorPubkeys.forEach(seedRankZero);
+
+      for (const pending of members) {
+        if (moderation.bannedPubkeys.has(pending.profile.pubkey)) continue;
+
+        const nextMember: CommunityMember = pending.role === 'moderator'
+          ? { pubkey: pending.profile.pubkey, rank: 0 }
+          : {
+              pubkey: pending.profile.pubkey,
+              rank: 1,
+              awardEvent: awardEvents.get(pending.profile.pubkey),
+              awardedBy: user?.pubkey,
+            };
+
+        const current = membershipByPubkey.get(nextMember.pubkey);
+        if (!current || nextMember.rank < current.rank) {
+          membershipByPubkey.set(nextMember.pubkey, nextMember);
+        }
+
+        const currentRank = rankMap.get(nextMember.pubkey);
+        if (!currentRank || nextMember.rank < currentRank.rank) {
+          rankMap.set(nextMember.pubkey, nextMember);
+        }
+      }
+
+      const membership: CommunityMembership = {
+        members: Array.from(membershipByPubkey.values()).sort((a, b) => a.rank - b.rank),
+      };
+
+      return { membership, moderation, rankMap };
+    });
+  }, [community.aTag, community.founderPubkey, community.moderatorPubkeys, queryClient, user?.pubkey]);
+
+  // ── Badge image upload ────────────────────────────────────────────────────
+
+  const handleBadgeFileSelect = useCallback(async (file: File) => {
+    if (!file.type.startsWith('image/')) {
+      toast({ title: 'Invalid file', description: 'Please select an image file.', variant: 'destructive' });
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = (e) => setBadgeImagePreview(e.target?.result as string);
+    reader.readAsDataURL(file);
+    try {
+      const [[, url]] = await uploadFile(file);
+      setBadgeImageUrl(url);
+      toast({ title: 'Badge image uploaded' });
+    } catch {
+      setBadgeImagePreview('');
+      toast({ title: 'Upload failed', description: 'Please try again.', variant: 'destructive' });
+    }
+  }, [uploadFile, toast]);
+
+  const handleBadgeDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    const file = e.dataTransfer.files[0];
+    if (file) handleBadgeFileSelect(file);
+  }, [handleBadgeFileSelect]);
+
+  // ── Publish ───────────────────────────────────────────────────────────────
+
+  const handleSubmit = useCallback(async () => {
+    if (!user || pendingMembers.length === 0) return;
+
+    setIsPublishing(true);
+    try {
+      const newModerators = pendingMembers.filter((m) => m.role === 'moderator');
+      const newMembers = pendingMembers.filter((m) => m.role === 'member');
+
+      let badgeATag = existingBadgeATag;
+
+      // Step 1: Create badge definition if needed
+      if (newMembers.length > 0 && !hasBadge) {
+        const badgeDTag = `${community.dTag}-member`;
+        const badgeTags: string[][] = [
+          ['d', badgeDTag],
+          ['name', 'Member'],
+          ['description', `Member of ${community.name}`],
+        ];
+        if (badgeImageUrl) {
+          badgeTags.push(['image', badgeImageUrl, '1024x1024']);
+        }
+        badgeTags.push(['alt', `Badge definition: Member of ${community.name}`]);
+
+        const badgeEvent = await publishEvent({
+          kind: BADGE_DEFINITION_KIND,
+          content: '',
+          tags: badgeTags,
+        } as Omit<NostrEvent, 'id' | 'pubkey' | 'sig'>);
+
+        badgeATag = `${BADGE_DEFINITION_KIND}:${badgeEvent.pubkey}:${badgeDTag}`;
+      }
+
+      // Step 2: Republish community definition if needed
+      // Needed when: adding moderators (new p tags) OR badge was just created (new a tag)
+      const needsCommunityUpdate = newModerators.length > 0 || (newMembers.length > 0 && !hasBadge);
+
+      if (needsCommunityUpdate) {
+        // Fetch fresh community event to avoid stale overwrites
+        const prev = await fetchFreshEvent(nostr, {
+          kinds: [COMMUNITY_DEFINITION_KIND],
+          authors: [communityEvent.pubkey],
+          '#d': [community.dTag],
+        });
+
+        const baseTags = prev?.tags ?? communityEvent.tags;
+        const updatedTags = [...baseTags];
+
+        // Add new moderator p tags
+        for (const mod of newModerators) {
+          // Don't add if already exists
+          const exists = updatedTags.some(
+            ([n, v, , role]) => n === 'p' && v === mod.profile.pubkey && role === 'moderator',
+          );
+          if (!exists) {
+            updatedTags.push(['p', mod.profile.pubkey, '', 'moderator']);
+          }
+        }
+
+        // Add badge a tag if badge was just created
+        if (badgeATag && !hasBadge) {
+          updatedTags.push(['a', badgeATag, '', '1']);
+        }
+
+        await publishEvent({
+          kind: COMMUNITY_DEFINITION_KIND,
+          content: prev?.content ?? '',
+          tags: updatedTags,
+          prev: prev ?? undefined,
+        } as Omit<NostrEvent, 'id' | 'pubkey' | 'sig'> & { prev?: NostrEvent });
+      }
+
+      // Step 3: Publish badge awards for each member
+      const memberAwardEvents = new Map<string, NostrEvent>();
+      if (newMembers.length > 0 && badgeATag) {
+        for (const member of newMembers) {
+          const awardEvent = await publishEvent({
+            kind: BADGE_AWARD_KIND,
+            content: '',
+            tags: [
+              ['a', badgeATag],
+              ['p', member.profile.pubkey],
+              ['alt', `Badge award: Member in ${community.name}`],
+            ],
+          } as Omit<NostrEvent, 'id' | 'pubkey' | 'sig'>);
+          memberAwardEvents.set(member.profile.pubkey, awardEvent);
+        }
+      }
+
+      applyOptimisticMembership(pendingMembers, memberAwardEvents);
+      queryClient.invalidateQueries({ queryKey: ['my-communities'], exact: false });
+      if (!hasBadge && newMembers.length > 0) {
+        queryClient.invalidateQueries({ queryKey: ['badge-feed'] });
+      }
+
+      const addedCount = pendingMembers.length;
+      toast({ title: `Added ${addedCount} ${addedCount === 1 ? 'person' : 'people'} to the community` });
+      handleOpenChange(false);
+    } catch (err) {
+      toast({
+        title: 'Failed to add members',
+        description: err instanceof Error ? err.message : 'Please try again.',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsPublishing(false);
+    }
+  }, [
+    user, pendingMembers, existingBadgeATag, hasBadge, community, communityEvent,
+    badgeImageUrl, nostr, publishEvent, queryClient, toast, handleOpenChange, applyOptimisticMembership,
+  ]);
+
+  if (!user) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent ref={dialogContentRef} className="sm:max-w-md gap-0 p-0 overflow-visible">
+        <PortalContainerProvider value={portalContainer}>
+        <DialogHeader className="px-5 pt-5 pb-3">
+          <DialogTitle className="flex items-center gap-2">
+            <UserPlus className="size-5 text-primary" />
+            Add Members
+          </DialogTitle>
+          <DialogDescription>
+            {isFounder
+              ? 'Add moderators or members to your community.'
+              : 'Invite members to the community.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <ScrollArea className="max-h-[60vh]">
+          <div className="px-5 pb-5 space-y-4">
+            {/* People search */}
+            <div className="space-y-1.5">
+              <Label>Search people</Label>
+              <PersonSearch
+                onAdd={addPerson}
+                excludePubkeys={[
+                  community.founderPubkey,
+                  ...pendingMembers.map((m) => m.profile.pubkey),
+                ]}
+              />
+            </div>
+
+            {/* Pending members list */}
+            {pendingMembers.length > 0 && (
+              <div className="space-y-1.5">
+                <Label>
+                  People to add
+                  <span className="text-muted-foreground font-normal ml-1">({pendingMembers.length})</span>
+                </Label>
+                <div className="space-y-1">
+                  {pendingMembers.map((pm) => (
+                    <PendingMemberChip
+                      key={pm.profile.pubkey}
+                      pending={pm}
+                      onRemove={removePerson}
+                      onToggleRole={isFounder ? toggleRole : undefined}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Badge image — only shown when badge needs to be created */}
+            {needsBadgeCreation && (
+              <div className="space-y-1.5">
+                <Label>
+                  Member Badge Image
+                  <span className="text-muted-foreground font-normal ml-1">(optional)</span>
+                </Label>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => fileInputRef.current?.click()}
+                  onDrop={handleBadgeDrop}
+                  onDragOver={(e) => e.preventDefault()}
+                  onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') fileInputRef.current?.click(); }}
+                  className="relative flex flex-col items-center justify-center w-full h-24 border-2 border-dashed border-border rounded-xl bg-secondary/5 hover:bg-secondary/10 transition-colors cursor-pointer overflow-hidden"
+                >
+                  {badgeImagePreview ? (
+                    <img src={badgeImagePreview} alt="Badge preview" className="h-full object-contain" />
+                  ) : isUploading ? (
+                    <div className="flex flex-col items-center gap-1.5 text-muted-foreground">
+                      <Loader2 className="size-5 animate-spin" />
+                      <span className="text-xs">Uploading...</span>
+                    </div>
+                  ) : (
+                    <div className="flex flex-col items-center gap-1.5 text-muted-foreground">
+                      <Upload className="size-5 opacity-40" />
+                      <span className="text-xs">Drop an image or click to upload</span>
+                    </div>
+                  )}
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept="image/*"
+                    className="hidden"
+                    onChange={(e) => {
+                      const file = e.target.files?.[0];
+                      if (file) handleBadgeFileSelect(file);
+                    }}
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* Submit button */}
+            <Button
+              onClick={handleSubmit}
+              disabled={pendingMembers.length === 0 || isPublishing || isUploading}
+              className="w-full gap-2"
+            >
+              {isPublishing ? (
+                <><Loader2 className="size-4 animate-spin" /> Adding...</>
+              ) : (
+                <><UserPlus className="size-4" /> Add {pendingMembers.length || ''} {pendingMembers.length === 1 ? 'Person' : pendingMembers.length > 1 ? 'People' : 'Members'}</>
+              )}
+            </Button>
+          </div>
+        </ScrollArea>
+        </PortalContainerProvider>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ── Sub-Components ────────────────────────────────────────────────────────────
+
+/** Inline type-ahead person search. */
+function PersonSearch({
+  onAdd,
+  excludePubkeys,
+}: {
+  onAdd: (profile: SearchProfile) => void;
+  excludePubkeys: string[];
+}) {
+  const [query, setQuery] = useState('');
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const { data: profiles, isFetching } = useSearchProfiles(query);
+
+  const excludeSet = useMemo(() => new Set(excludePubkeys), [excludePubkeys]);
+  const filteredProfiles = useMemo(
+    () => (profiles ?? []).filter((p) => !excludeSet.has(p.pubkey)),
+    [profiles, excludeSet],
+  );
+
+  useEffect(() => {
+    if (query.trim().length > 0 && filteredProfiles.length > 0) {
+      setDropdownOpen(true);
+    } else if (query.trim().length === 0) {
+      setDropdownOpen(false);
+    }
+  }, [filteredProfiles, query]);
+
+  const handleSelect = useCallback((profile: SearchProfile) => {
+    onAdd(profile);
+    setQuery('');
+    setDropdownOpen(false);
+    inputRef.current?.focus();
+  }, [onAdd]);
+
+  return (
+    <Popover open={dropdownOpen} onOpenChange={setDropdownOpen}>
+      <PopoverTrigger asChild>
+        <div className="relative flex items-center">
+          <Search className="absolute left-3 size-4 text-muted-foreground pointer-events-none" />
+          {isFetching && query.trim() && (
+            <Loader2 className="absolute right-3 size-4 text-muted-foreground animate-spin" />
+          )}
+          <Input
+            ref={inputRef}
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onFocus={() => {
+              if (query.trim().length > 0 && filteredProfiles.length > 0) {
+                setDropdownOpen(true);
+              }
+            }}
+            placeholder="Search people to add..."
+            className="pl-10 pr-10 rounded-full bg-secondary border-0 focus-visible:ring-0 focus-visible:ring-offset-0 h-9 text-sm"
+            autoComplete="off"
+          />
+        </div>
+      </PopoverTrigger>
+
+      <PopoverContent
+        align="start"
+        side="bottom"
+        sideOffset={6}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        className="z-[270] w-[var(--radix-popover-trigger-width)] rounded-xl border-border p-0 shadow-lg overflow-hidden"
+      >
+        {filteredProfiles.length > 0 ? (
+          <div className="max-h-[200px] overflow-y-auto py-1">
+            {filteredProfiles.map((profile) => (
+              <SearchResultItem key={profile.pubkey} profile={profile} onClick={handleSelect} />
+            ))}
+          </div>
+        ) : query.trim().length >= 2 && !isFetching ? (
+          <div className="py-4 text-center text-sm text-muted-foreground">
+            No people found
+          </div>
+        ) : null}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+/** A pending member chip with role toggle and remove button. */
+function PendingMemberChip({
+  pending,
+  onRemove,
+  onToggleRole,
+}: {
+  pending: PendingMember;
+  onRemove: (pubkey: string) => void;
+  onToggleRole?: (pubkey: string) => void;
+}) {
+  const { profile, role } = pending;
+  const { metadata, pubkey } = profile;
+  const displayName = metadata.display_name || metadata.name || genUserName(pubkey);
+
+  return (
+    <div className="flex items-center gap-2 p-2 rounded-lg bg-secondary/30 border border-border/50">
+      <Avatar shape={getAvatarShape(metadata)} className="size-7 shrink-0">
+        <AvatarImage src={metadata.picture} alt={displayName} />
+        <AvatarFallback className="bg-primary/20 text-primary text-[10px]">
+          {displayName[0]?.toUpperCase() || '?'}
+        </AvatarFallback>
+      </Avatar>
+      <span className="flex-1 text-sm truncate">
+        <EmojifiedText tags={profile.event.tags}>{displayName}</EmojifiedText>
+      </span>
+
+      {/* Role badge — clickable if founder can toggle */}
+      <button
+        type="button"
+        onClick={onToggleRole ? () => onToggleRole(pubkey) : undefined}
+        disabled={!onToggleRole}
+        className={cn(
+          'flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full shrink-0 transition-colors',
+          role === 'moderator'
+            ? 'bg-amber-500/10 text-amber-600 dark:text-amber-400'
+            : 'bg-primary/10 text-primary',
+          onToggleRole && 'cursor-pointer hover:opacity-80',
+        )}
+        title={onToggleRole ? 'Click to toggle role' : undefined}
+      >
+        {role === 'moderator' ? <Crown className="size-3" /> : <Users className="size-3" />}
+        {role === 'moderator' ? 'Moderator' : 'Member'}
+      </button>
+
+      <button
+        type="button"
+        onClick={() => onRemove(pubkey)}
+        className="shrink-0 size-6 rounded-full hover:bg-destructive/10 flex items-center justify-center transition-colors"
+        title="Remove"
+      >
+        <X className="size-3.5 text-muted-foreground hover:text-destructive" />
+      </button>
+    </div>
+  );
+}
+
+/** A profile search result row. */
+function SearchResultItem({ profile, onClick }: { profile: SearchProfile; onClick: (profile: SearchProfile) => void }) {
+  const { metadata, pubkey } = profile;
+  const displayName = metadata.display_name || metadata.name || genUserName(pubkey);
+
+  return (
+    <button
+      className="w-full flex items-center gap-3 px-3 py-2 text-left transition-colors cursor-pointer hover:bg-secondary/60"
+      onClick={() => onClick(profile)}
+      onMouseDown={(e) => e.preventDefault()}
+    >
+      <Avatar shape={getAvatarShape(metadata)} className="size-8 shrink-0">
+        <AvatarImage src={metadata.picture} alt={displayName} />
+        <AvatarFallback className="bg-primary/20 text-primary text-xs">
+          {displayName[0]?.toUpperCase() || '?'}
+        </AvatarFallback>
+      </Avatar>
+      <div className="flex-1 min-w-0">
+        <span className="text-sm font-medium truncate block">
+          <EmojifiedText tags={profile.event.tags}>{displayName}</EmojifiedText>
+        </span>
+        {metadata.nip05 && (
+          <span className="text-xs text-muted-foreground truncate block">
+            {metadata.nip05.startsWith('_@') ? metadata.nip05.slice(2) : metadata.nip05}
+          </span>
+        )}
+      </div>
+    </button>
+  );
+}

src/components/CommunityCard.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { Link } from 'react-router-dom';
-import { Crown, Shield, Users } from 'lucide-react';
+import { Bookmark, Crown, Shield, Users } from 'lucide-react';
 import { nip19 } from 'nostr-tools';
 import type { NostrEvent } from '@nostrify/nostrify';
 
@@ -18,6 +18,10 @@ interface CommunityCardProps {
   event: NostrEvent;
   /** Whether the current user founded this community. */
   isFounded?: boolean;
+  /** Whether the current user is a validated member (rank > 0 via badge chain). */
+  isMember?: boolean;
+  /** Whether the current user has bookmarked this community (NIP-51 kind 10004). */
+  isBookmarked?: boolean;
   className?: string;
 }
 
@@ -25,7 +29,13 @@ interface CommunityCardProps {
  * Compact card for displaying a community in a list.
  * Shows image, name, description snippet, founder info, and moderator count.
  */
-export function CommunityCard({ event, isFounded, className }: CommunityCardProps) {
+export function CommunityCard({
+  event,
+  isFounded,
+  isMember,
+  isBookmarked,
+  className,
+}: CommunityCardProps) {
   const community = useMemo(() => parseCommunityEvent(event), [event]);
 
   const founderAuthor = useAuthor(event.pubkey);
@@ -75,12 +85,22 @@ export function CommunityCard({ event, isFounded, className }: CommunityCardProp
           <h3 className="text-sm font-semibold truncate flex-1 group-hover:text-primary transition-colors">
             {community.name}
           </h3>
-          {isFounded && (
+          {isFounded ? (
             <Badge variant="secondary" className="text-[10px] gap-1 shrink-0 bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20">
               <Crown className="size-2.5" />
               Founder
             </Badge>
-          )}
+          ) : isMember ? (
+            <Badge variant="secondary" className="text-[10px] gap-1 shrink-0 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20">
+              <Shield className="size-2.5" />
+              Member
+            </Badge>
+          ) : isBookmarked ? (
+            <Badge variant="secondary" className="text-[10px] gap-1 shrink-0 bg-primary/10 text-primary border-primary/20">
+              <Bookmark className="size-2.5 fill-current" />
+              Bookmarked
+            </Badge>
+          ) : null}
         </div>
 
         {/* Description */}

src/components/CommunityContent.tsx

@@ -1,15 +1,12 @@
-import { useMemo, useCallback } from 'react';
+import { useMemo } from 'react';
 import { Link } from 'react-router-dom';
-import { Users, Share2, Globe } from 'lucide-react';
-import { nip19 } from 'nostr-tools';
+import { Users, Globe } from 'lucide-react';
 import type { NostrEvent } from '@nostrify/nostrify';
 
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
 import { getAvatarShape } from '@/lib/avatarShape';
-import { Button } from '@/components/ui/button';
 import { useAuthor } from '@/hooks/useAuthor';
 import { useProfileUrl } from '@/hooks/useProfileUrl';
-import { useToast } from '@/hooks/useToast';
 import { genUserName } from '@/lib/genUserName';
 import { cn } from '@/lib/utils';
 import { sanitizeUrl } from '@/lib/sanitizeUrl';
@@ -43,7 +40,6 @@ function parseCommunityEvent(event: NostrEvent) {
 // --- Main Component ---
 
 export function CommunityContent({ event }: { event: NostrEvent }) {
-  const { toast } = useToast();
   const { name, description, image } = useMemo(
     () => parseCommunityEvent(event),
     [event],
@@ -68,22 +64,6 @@ export function CommunityContent({ event }: { event: NostrEvent }) {
     return description.replace(new RegExp(`\\s*${descriptionUrl.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\s*$`), '').trim();
   }, [description, descriptionUrl]);
 
-  const handleShare = useCallback(async () => {
-    const d = getTag(event.tags, 'd') ?? '';
-    const naddr = nip19.naddrEncode({
-      kind: event.kind,
-      pubkey: event.pubkey,
-      identifier: d,
-    });
-    const url = `${window.location.origin}/${naddr}`;
-    try {
-      await navigator.clipboard.writeText(url);
-      toast({ title: 'Link copied to clipboard' });
-    } catch {
-      toast({ title: 'Failed to copy link', variant: 'destructive' });
-    }
-  }, [event, toast]);
-
   return (
     <div className="mt-3 space-y-5">
       {/* Community hero image */}
@@ -110,13 +90,6 @@ export function CommunityContent({ event }: { event: NostrEvent }) {
         </div>
       )}
 
-      {/* Share button */}
-      <div className="flex items-center">
-        <Button variant="outline" size="icon" className="ml-auto size-8 shrink-0" onClick={handleShare}>
-          <Share2 className="size-3.5" />
-        </Button>
-      </div>
-
       {/* Description */}
       {descriptionText && (
         <p className="text-sm leading-relaxed text-muted-foreground whitespace-pre-wrap">{descriptionText}</p>

src/components/CommunityDetailPage.tsx

@@ -3,16 +3,21 @@ import { Link, useNavigate } from 'react-router-dom';
 import { nip19 } from 'nostr-tools';
 import {
   ArrowLeft,
+  Bookmark,
   Crown,
   MessageCircle,
+  Pencil,
   Shield,
   ShieldBan,
   Share2,
   Target,
+  UserPlus,
   Users,
 } from 'lucide-react';
 import type { NostrEvent, NostrMetadata } from '@nostrify/nostrify';
 
+import { AddMemberDialog } from '@/components/AddMemberDialog';
+import { CreateCommunityDialog } from '@/components/CreateCommunityDialog';
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
 import { getAvatarShape } from '@/lib/avatarShape';
 import { Badge } from '@/components/ui/badge';
@@ -28,6 +33,7 @@ import { ThreadedReplyList, type ReplyNode } from '@/components/ThreadedReplyLis
 import { useAuthor } from '@/hooks/useAuthor';
 import { useAuthors } from '@/hooks/useAuthors';
 import { useComments } from '@/hooks/useComments';
+import { useCommunityBookmarks } from '@/hooks/useCommunityBookmarks';
 import { useCommunityMembers } from '@/hooks/useCommunityMembers';
 import { useCommunityGoals } from '@/hooks/useCommunityGoals';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
@@ -133,6 +139,8 @@ export function CommunityDetailPage({ event }: { event: NostrEvent }) {
   const [activeTab, setActiveTab] = useState('members');
   const [composeOpen, setComposeOpen] = useState(false);
   const [goalDialogOpen, setGoalDialogOpen] = useState(false);
+  const [addMemberOpen, setAddMemberOpen] = useState(false);
+  const [editCommunityOpen, setEditCommunityOpen] = useState(false);
 
   // Parse community definition
   const community = useMemo(() => parseCommunityEvent(event), [event]);
@@ -156,6 +164,32 @@ export function CommunityDetailPage({ event }: { event: NostrEvent }) {
   const { data: membership, moderation, rankMap, isLoading: membersLoading } = useCommunityMembers(community);
   const viewerMember = user ? getViewerAuthority(user.pubkey, rankMap, moderation) : undefined;
 
+  // Founder can add moderators + members; moderators (rank 0) can add members
+  const isFounder = !!user && user.pubkey === event.pubkey;
+  const canAddMembers = !!viewerMember && viewerMember.rank === 0;
+
+  // NIP-51 kind 10004 community bookmark toggle. Toasts are fired from inside
+  // the mutation so they survive even if this page unmounts mid-publish.
+  const {
+    isBookmarked: isCommunityBookmarked,
+    toggleBookmark: toggleCommunityBookmark,
+  } = useCommunityBookmarks();
+  const bookmarked = !!communityATag && isCommunityBookmarked(communityATag);
+  const handleToggleBookmark = useCallback(() => {
+    if (!user || !communityATag || toggleCommunityBookmark.isPending) return;
+    toggleCommunityBookmark.mutate({ aTag: communityATag });
+  }, [user, communityATag, toggleCommunityBookmark]);
+
+  const handleAddMembersClick = useCallback(() => {
+    setAddMemberOpen(true);
+  }, []);
+
+  useLayoutOptions({
+    showFAB: canAddMembers && activeTab === 'members',
+    onFabClick: handleAddMembersClick,
+    fabIcon: <UserPlus className="size-5" />,
+  });
+
   // Batch-fetch profiles for all members
   const allMemberPubkeys = useMemo(
     () => membership?.members.map((m) => m.pubkey) ?? [],
@@ -287,21 +321,28 @@ export function CommunityDetailPage({ event }: { event: NostrEvent }) {
     }
   }, [event, toast]);
 
-  // ── FAB — visible on comments & fundraising tabs ──────────────────────────
+  // ── FAB — visible on comments, fundraising, and members tabs ──────────────
   const handleFabClick = useCallback(() => {
     if (activeTab === 'comments') {
       setComposeOpen(true);
     } else if (activeTab === 'fundraising') {
       setGoalDialogOpen(true);
+    } else if (activeTab === 'members') {
+      setAddMemberOpen(true);
     }
   }, [activeTab]);
 
   const fabIcon = activeTab === 'fundraising'
     ? <Target strokeWidth={3} size={18} />
-    : undefined; // default Plus icon for comments
+    : activeTab === 'members'
+      ? <UserPlus className="size-5" />
+      : undefined; // default Plus icon for comments
 
   useLayoutOptions({
-    showFAB: activeTab === 'comments' || activeTab === 'fundraising',
+    showFAB:
+      activeTab === 'comments'
+      || activeTab === 'fundraising'
+      || (activeTab === 'members' && canAddMembers),
     onFabClick: handleFabClick,
     fabIcon,
   });
@@ -324,6 +365,27 @@ export function CommunityDetailPage({ event }: { event: NostrEvent }) {
           <ArrowLeft className="size-5" />
         </button>
         <h1 className="text-xl font-bold flex-1 truncate">Community</h1>
+        {isFounder && community && (
+          <button
+            className="p-2 rounded-full hover:bg-secondary/60 transition-colors"
+            onClick={() => setEditCommunityOpen(true)}
+            aria-label="Edit community"
+          >
+            <Pencil className="size-5" />
+          </button>
+        )}
+        {user && communityATag && (
+          <button
+            className="p-2 rounded-full hover:bg-secondary/60 transition-colors disabled:opacity-50 disabled:pointer-events-none"
+            onClick={handleToggleBookmark}
+            disabled={toggleCommunityBookmark.isPending}
+            aria-label={bookmarked ? 'Remove community bookmark' : 'Bookmark community'}
+            aria-pressed={bookmarked}
+            aria-busy={toggleCommunityBookmark.isPending}
+          >
+            <Bookmark className={cn('size-5', bookmarked && 'fill-current')} />
+          </button>
+        )}
         <button
           className="p-2 rounded-full hover:bg-secondary/60 transition-colors"
           onClick={handleShare}
@@ -535,6 +597,27 @@ export function CommunityDetailPage({ event }: { event: NostrEvent }) {
           onOpenChange={setGoalDialogOpen}
         />
       )}
+
+      {/* Add member dialog */}
+      {canAddMembers && community && (
+        <AddMemberDialog
+          open={addMemberOpen}
+          onOpenChange={setAddMemberOpen}
+          communityEvent={event}
+          community={community}
+          isFounder={isFounder}
+        />
+      )}
+
+      {/* Edit community dialog — founder only */}
+      {isFounder && community && (
+        <CreateCommunityDialog
+          open={editCommunityOpen}
+          onOpenChange={setEditCommunityOpen}
+          communityEvent={event}
+          community={community}
+        />
+      )}
     </div>
   );
 }

src/components/CreateCommunityDialog.tsx

@@ -0,0 +1,348 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Users, Upload, Loader2 } from 'lucide-react';
+import { useNostr } from '@nostrify/react';
+import { useQueryClient } from '@tanstack/react-query';
+import { nip19 } from 'nostr-tools';
+import type { NostrEvent } from '@nostrify/nostrify';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useUploadFile } from '@/hooks/useUploadFile';
+import { useToast } from '@/hooks/useToast';
+import { fetchFreshEvent } from '@/lib/fetchFreshEvent';
+import { COMMUNITY_DEFINITION_KIND, type ParsedCommunity } from '@/lib/communityUtils';
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+/** Convert text into a URL-safe slug for the d-tag identifier. */
+function slugify(text: string): string {
+  return text
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/[\s_]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+}
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+interface CreateCommunityDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Existing community event when editing. Omit to create a new community. */
+  communityEvent?: NostrEvent;
+  /** Parsed existing community data when editing. */
+  community?: ParsedCommunity;
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function CreateCommunityDialog({ open, onOpenChange, communityEvent, community }: CreateCommunityDialogProps) {
+  const { user } = useCurrentUser();
+  const { nostr } = useNostr();
+  const { toast } = useToast();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const isEditing = !!communityEvent && !!community;
+
+  // Form state
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [imageUrl, setImageUrl] = useState('');
+  const [imagePreview, setImagePreview] = useState('');
+  const [isPublishing, setIsPublishing] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Mutations
+  const { mutateAsync: publishEvent } = useNostrPublish();
+  const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile();
+
+  // Derived
+  const effectiveSlug = isEditing && community ? community.dTag : slugify(name);
+
+  const populateFromCommunity = useCallback(() => {
+    setName(community?.name ?? '');
+    setDescription(community?.description ?? '');
+    setImageUrl(community?.image ?? '');
+    setImagePreview(community?.image ?? '');
+    setIsPublishing(false);
+  }, [community]);
+
+  const resetForm = useCallback(() => {
+    if (isEditing) {
+      populateFromCommunity();
+    } else {
+      setName('');
+      setDescription('');
+      setImageUrl('');
+      setImagePreview('');
+      setIsPublishing(false);
+    }
+  }, [isEditing, populateFromCommunity]);
+
+  useEffect(() => {
+    if (open && isEditing) {
+      populateFromCommunity();
+    }
+  }, [open, isEditing, populateFromCommunity]);
+
+  const handleOpenChange = useCallback((nextOpen: boolean) => {
+    if (!nextOpen) resetForm();
+    onOpenChange(nextOpen);
+  }, [onOpenChange, resetForm]);
+
+  // ── Image upload ──────────────────────────────────────────────────────────
+
+  const handleFileSelect = useCallback(async (file: File) => {
+    if (!file.type.startsWith('image/')) {
+      toast({ title: 'Invalid file', description: 'Please select an image file.', variant: 'destructive' });
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = (e) => setImagePreview(e.target?.result as string);
+    reader.readAsDataURL(file);
+    try {
+      const [[, url]] = await uploadFile(file);
+      setImageUrl(url);
+      toast({ title: 'Image uploaded' });
+    } catch {
+      setImagePreview('');
+      toast({ title: 'Upload failed', description: 'Please try again.', variant: 'destructive' });
+    }
+  }, [uploadFile, toast]);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    const file = e.dataTransfer.files[0];
+    if (file) handleFileSelect(file);
+  }, [handleFileSelect]);
+
+  const buildUpdatedCommunityTags = useCallback((baseTags: string[][]): string[][] => {
+    const tags = baseTags.filter(([name]) => !['d', 'name', 'description', 'image', 'alt'].includes(name));
+    const nextTags: string[][] = [
+      ['d', effectiveSlug],
+      ['name', name.trim()],
+    ];
+
+    if (description.trim()) {
+      nextTags.push(['description', description.trim()]);
+    }
+
+    if (imageUrl) {
+      nextTags.push(['image', imageUrl]);
+    }
+
+    nextTags.push(...tags);
+    nextTags.push(['alt', `Community: ${name.trim()}`]);
+
+    return nextTags;
+  }, [description, effectiveSlug, imageUrl, name]);
+
+  // ── Publish ───────────────────────────────────────────────────────────────
+
+  const handleCreate = useCallback(async () => {
+    if (!user || !name.trim() || !effectiveSlug) return;
+
+    setIsPublishing(true);
+    try {
+      if (isEditing && communityEvent && community) {
+        const prev = await fetchFreshEvent(nostr, {
+          kinds: [COMMUNITY_DEFINITION_KIND],
+          authors: [communityEvent.pubkey],
+          '#d': [community.dTag],
+        });
+
+        const updatedEvent = await publishEvent({
+          kind: COMMUNITY_DEFINITION_KIND,
+          content: prev?.content ?? communityEvent.content,
+          tags: buildUpdatedCommunityTags(prev?.tags ?? communityEvent.tags),
+          prev: prev ?? undefined,
+        } as Omit<NostrEvent, 'id' | 'pubkey' | 'sig'> & { prev?: NostrEvent });
+
+        queryClient.setQueryData(
+          ['addr-event', COMMUNITY_DEFINITION_KIND, communityEvent.pubkey, community.dTag],
+          updatedEvent,
+        );
+        queryClient.invalidateQueries({ queryKey: ['community-activity-feed'], exact: false });
+        queryClient.invalidateQueries({ queryKey: ['my-communities'], exact: false });
+
+        toast({ title: 'Community updated!' });
+        handleOpenChange(false);
+        return;
+      }
+
+      // Check for d-tag collision (same author, same kind, same d-tag)
+      const existing = await nostr.query([{
+        kinds: [COMMUNITY_DEFINITION_KIND],
+        authors: [user.pubkey],
+        '#d': [effectiveSlug],
+        limit: 1,
+      }]);
+
+      if (existing.length > 0) {
+        toast({
+          title: 'Name already in use',
+          description: 'You already have a community with this name. Please choose a different name.',
+          variant: 'destructive',
+        });
+        setIsPublishing(false);
+        return;
+      }
+
+      // Founder as moderator (p tag)
+      const communityTags = buildUpdatedCommunityTags([['p', user.pubkey, '', 'moderator']]);
+
+      // Publish community definition (kind 34550)
+      const createdEvent = await publishEvent({
+        kind: COMMUNITY_DEFINITION_KIND,
+        content: '',
+        tags: communityTags,
+      } as Omit<NostrEvent, 'id' | 'pubkey' | 'sig'>);
+
+      // Navigate to the new community
+      const naddr = nip19.naddrEncode({
+        kind: COMMUNITY_DEFINITION_KIND,
+        pubkey: createdEvent.pubkey,
+        identifier: effectiveSlug,
+      });
+
+      toast({ title: 'Community created!' });
+      handleOpenChange(false);
+      navigate(`/${naddr}`);
+    } catch (err) {
+      toast({
+        title: isEditing ? 'Failed to update community' : 'Failed to create community',
+        description: err instanceof Error ? err.message : 'Please try again.',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsPublishing(false);
+    }
+  }, [
+    user, name, effectiveSlug, isEditing, communityEvent, community, nostr,
+    publishEvent, buildUpdatedCommunityTags, queryClient, toast, handleOpenChange, navigate,
+  ]);
+
+  if (!user) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-md gap-0 p-0 overflow-hidden">
+        <DialogHeader className="px-5 pt-5 pb-3">
+          <DialogTitle className="flex items-center gap-2">
+            <Users className="size-5 text-primary" />
+            {isEditing ? 'Edit Community' : 'Create a Community'}
+          </DialogTitle>
+          <DialogDescription>
+            {isEditing
+              ? 'Update the name, image, and description. Moderators are preserved.'
+              : "Start a new community on Nostr. You'll be the founder."}
+          </DialogDescription>
+        </DialogHeader>
+
+        <ScrollArea className="max-h-[60vh]">
+          <div className="px-5 pb-5 space-y-4">
+            {/* Community name */}
+            <div className="space-y-1.5">
+              <Label htmlFor="community-name">Community Name *</Label>
+              <Input
+                id="community-name"
+                placeholder="e.g. The Arbiter's Guard"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                maxLength={100}
+              />
+              {name.trim() && (
+                <p className="text-xs text-muted-foreground font-mono">
+                  ID: {effectiveSlug || '...'}{isEditing ? ' (unchanged)' : ''}
+                </p>
+              )}
+            </div>
+
+            {/* Image upload */}
+            <div className="space-y-1.5">
+              <Label>
+                Community Image
+                <span className="text-muted-foreground font-normal ml-1">(recommended)</span>
+              </Label>
+              <div
+                role="button"
+                tabIndex={0}
+                onClick={() => fileInputRef.current?.click()}
+                onDrop={handleDrop}
+                onDragOver={(e) => e.preventDefault()}
+                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') fileInputRef.current?.click(); }}
+                className="relative flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-border rounded-xl bg-secondary/5 hover:bg-secondary/10 transition-colors cursor-pointer overflow-hidden"
+              >
+                {imagePreview ? (
+                  <img src={imagePreview} alt="Community image preview" className="w-full h-full object-cover" />
+                ) : isUploading ? (
+                  <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                    <Loader2 className="size-6 animate-spin" />
+                    <span className="text-xs">Uploading...</span>
+                  </div>
+                ) : (
+                  <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                    <Upload className="size-6 opacity-40" />
+                    <span className="text-xs">Drop an image or click to upload</span>
+                  </div>
+                )}
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={(e) => {
+                    const file = e.target.files?.[0];
+                    if (file) handleFileSelect(file);
+                  }}
+                />
+              </div>
+            </div>
+
+            {/* Description */}
+            <div className="space-y-1.5">
+              <Label htmlFor="community-description">
+                Description
+                <span className="text-muted-foreground font-normal ml-1">(recommended)</span>
+              </Label>
+              <Textarea
+                id="community-description"
+                placeholder="What is this community about?"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                rows={3}
+              />
+            </div>
+
+            {/* Submit button */}
+            <Button
+              onClick={handleCreate}
+              disabled={!name.trim() || !effectiveSlug || isPublishing || isUploading}
+              className="w-full gap-2"
+            >
+              {isPublishing ? (
+                <><Loader2 className="size-4 animate-spin" /> {isEditing ? 'Saving...' : 'Creating...'}</>
+              ) : (
+                <><Users className="size-4" /> {isEditing ? 'Save Changes' : 'Create Community'}</>
+              )}
+            </Button>
+          </div>
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/NoteMoreMenu.tsx

@@ -47,6 +47,7 @@ import { CommunityReportDialog } from '@/components/CommunityReportDialog';
 import { AddToListDialog } from '@/components/AddToListDialog';
 import { useNostr } from '@nostrify/react';
 import { useBookmarks } from '@/hooks/useBookmarks';
+import { useCommunityBookmarks } from '@/hooks/useCommunityBookmarks';
 import { usePinnedNotes } from '@/hooks/usePinnedNotes';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { useAuthor } from '@/hooks/useAuthor';
@@ -57,7 +58,7 @@ import { useOrganizers } from '@/hooks/useOrganizers';
 import { usePinnedPosts } from '@/hooks/usePinnedPosts';
 import { useCountryFeed } from '@/contexts/CountryFeedContext';
 import { useCommunityModerationContext } from '@/contexts/CommunityModerationContext';
-import { type CommunityMenuContext, canBanTarget, getViewerAuthority } from '@/lib/communityUtils';
+import { type CommunityMenuContext, canBanTarget, getViewerAuthority, COMMUNITY_DEFINITION_KIND } from '@/lib/communityUtils';
 // NOTE: `CommunityMenuContext` is derived automatically from
 // `useCommunityModerationContext()`. Parents install a
 // `CommunityModerationContext.Provider` to enable community-aware menu items.
@@ -368,7 +369,26 @@ function NoteMoreMenuContent({ event, open, onOpenChange, communityContext, onRe
   const navigate = useNavigate();
   const { user } = useCurrentUser();
   const { isBookmarked, toggleBookmark } = useBookmarks();
-  const bookmarked = isBookmarked(event.id);
+  const {
+    isBookmarked: isCommunityBookmarked,
+    toggleBookmark: toggleCommunityBookmark,
+  } = useCommunityBookmarks();
+
+  // Community events (kind 34550) are bookmarked via NIP-51 kind 10004
+  // using their addressable `a` tag coordinate, so the reference stays
+  // valid across community updates. Non-community events use the standard
+  // kind 10003 bookmark list keyed by event id.
+  const isCommunityEvent = event.kind === COMMUNITY_DEFINITION_KIND;
+  const communityATag = useMemo(() => {
+    if (!isCommunityEvent) return undefined;
+    const dTag = event.tags.find(([n]) => n === 'd')?.[1];
+    if (!dTag) return undefined;
+    return `${COMMUNITY_DEFINITION_KIND}:${event.pubkey}:${dTag}`;
+  }, [isCommunityEvent, event.pubkey, event.tags]);
+
+  const bookmarked = isCommunityEvent
+    ? !!communityATag && isCommunityBookmarked(communityATag)
+    : isBookmarked(event.id);
   const { isPinned, togglePin } = usePinnedNotes(user?.pubkey);
   const pinned = isPinned(event.id);
   const isOwnPost = user?.pubkey === event.pubkey;
@@ -411,7 +431,15 @@ function NoteMoreMenuContent({ event, open, onOpenChange, communityContext, onRe
 
   const handleBookmark = () => {
     impactLight();
-    toggleBookmark.mutate(event.id);
+    if (isCommunityEvent) {
+      if (!communityATag) return;
+      // Success/error toasts are fired from the mutation itself in
+      // useCommunityBookmarks so they survive this dialog unmounting
+      // before the publish resolves.
+      toggleCommunityBookmark.mutate({ aTag: communityATag });
+    } else {
+      toggleBookmark.mutate(event.id);
+    }
     close();
   };
 
@@ -548,7 +576,11 @@ function NoteMoreMenuContent({ event, open, onOpenChange, communityContext, onRe
           />
           <MenuItem
             icon={<Bookmark className={cn("size-5", bookmarked && "fill-current")} />}
-            label={bookmarked ? 'Remove Bookmark' : 'Bookmark'}
+            label={
+              isCommunityEvent
+                ? (bookmarked ? 'Remove community bookmark' : 'Bookmark community')
+                : (bookmarked ? 'Remove Bookmark' : 'Bookmark')
+            }
             onClick={handleBookmark}
           />
           {user && (

src/hooks/useCommunityBookmarks.ts

@@ -0,0 +1,139 @@
+import { useNostr } from '@nostrify/react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { useCurrentUser } from './useCurrentUser';
+import { useNostrPublish } from './useNostrPublish';
+import { fetchFreshEvent } from '@/lib/fetchFreshEvent';
+import { COMMUNITY_DEFINITION_KIND } from '@/lib/communityUtils';
+import { parseATagCoordinate } from '@/lib/nostrEvents';
+import { toast } from '@/hooks/useToast';
+
+/** NIP-51 Communities list — kind 10004. */
+export const COMMUNITIES_LIST_KIND = 10004;
+
+const HEX_PUBKEY_RE = /^[0-9a-f]{64}$/i;
+
+/** Parse and validate a NIP-51 community list coordinate. */
+export function parseCommunityBookmarkATag(aTag: string): { pubkey: string; dTag: string } | undefined {
+  const coord = parseATagCoordinate(aTag);
+  if (!coord || coord.kind !== COMMUNITY_DEFINITION_KIND) return undefined;
+  if (!HEX_PUBKEY_RE.test(coord.pubkey) || !coord.identifier) return undefined;
+  return { pubkey: coord.pubkey, dTag: coord.identifier };
+}
+
+/**
+ * Hook to manage the user's NIP-51 Communities list (kind 10004).
+ *
+ * This list stores `a` tag coordinates for kind 34550 community definitions
+ * that the user has bookmarked / "saved". Unlike `useBookmarks` (kind 10003)
+ * which targets event IDs, this list targets addressable coordinates so the
+ * reference remains stable across community updates.
+ */
+export function useCommunityBookmarks() {
+  const { nostr } = useNostr();
+  const { user } = useCurrentUser();
+  const queryClient = useQueryClient();
+  const { mutateAsync: publishEvent } = useNostrPublish();
+
+  // Query the user's communities list (kind 10004 — replaceable event)
+  const listQuery = useQuery({
+    queryKey: ['community-bookmarks', user?.pubkey],
+    queryFn: async () => {
+      if (!user) return null;
+      const events = await nostr.query([{
+        kinds: [COMMUNITIES_LIST_KIND],
+        authors: [user.pubkey],
+        limit: 1,
+      }]);
+      return events[0] ?? null;
+    },
+    enabled: !!user,
+  });
+
+  // Extract bookmarked community a-tags (only `34550:` coordinates)
+  const bookmarkedATags: string[] = (listQuery.data?.tags ?? [])
+    .filter(([name, value]) =>
+      name === 'a' && typeof value === 'string' && !!parseCommunityBookmarkATag(value),
+    )
+    .map(([, value]) => value);
+
+  /** Check if a community `a` tag coordinate is bookmarked. */
+  function isBookmarked(aTag: string): boolean {
+    return bookmarkedATags.includes(aTag);
+  }
+
+  /**
+   * Toggle bookmark for a given community coordinate.
+   * `aTag` is expected to be a `34550:<pubkey>:<d-tag>` string.
+   * `relayHint` is optional — appended to the tag per NIP-51 when provided.
+   */
+  const toggleBookmark = useMutation({
+    mutationFn: async ({ aTag, relayHint }: { aTag: string; relayHint?: string }) => {
+      if (!user) throw new Error('User is not logged in');
+
+      // Fetch the freshest kind 10004 from relays before mutating
+      const prev = await fetchFreshEvent(nostr, {
+        kinds: [COMMUNITIES_LIST_KIND],
+        authors: [user.pubkey],
+      });
+
+      const currentTags = prev?.tags ?? [];
+      const currentlyBookmarked = currentTags.some(
+        ([name, value]) => name === 'a' && value === aTag,
+      );
+
+      let newTags: string[][];
+
+      if (currentlyBookmarked) {
+        // Remove all matching a-tags for this coordinate
+        newTags = currentTags.filter(
+          ([name, value]) => !(name === 'a' && value === aTag),
+        );
+      } else {
+        // Append the new bookmark per NIP-51 recommendation
+        const newTag: string[] = relayHint ? ['a', aTag, relayHint] : ['a', aTag];
+        newTags = [...currentTags, newTag];
+      }
+
+      await publishEvent({
+        kind: COMMUNITIES_LIST_KIND,
+        content: prev?.content ?? '',
+        tags: newTags,
+        created_at: Math.floor(Date.now() / 1000),
+        prev: prev ?? undefined,
+      });
+
+      // Return whether this was a remove or add so onSuccess can pick the
+      // right toast wording. Callbacks live on the mutation (not per-call)
+      // so they still fire when the triggering UI (e.g. a dialog) unmounts
+      // before the publish resolves.
+      return { removed: currentlyBookmarked };
+    },
+    onSuccess: ({ removed }) => {
+      queryClient.invalidateQueries({ queryKey: ['community-bookmarks', user?.pubkey] });
+      queryClient.invalidateQueries({ queryKey: ['my-communities'] });
+      toast({
+        title: removed ? 'Community removed from bookmarks' : 'Community bookmarked',
+      });
+    },
+    onError: () => {
+      toast({
+        title: 'Failed to update bookmark',
+        variant: 'destructive',
+      });
+    },
+  });
+
+  return {
+    /** The kind 10004 list event itself. */
+    listEvent: listQuery.data,
+    /** Array of bookmarked community `a` tag coordinates. */
+    bookmarkedATags,
+    /** Whether the list query is still loading. */
+    isLoading: listQuery.isLoading,
+    /** Check whether a given `a` tag coordinate is bookmarked. */
+    isBookmarked,
+    /** Toggle a community bookmark on/off. */
+    toggleBookmark,
+  };
+}

src/hooks/useFeedSettings.ts

@@ -13,6 +13,7 @@ import { useCallback, useMemo } from "react";
  */
 const DEFAULT_SIDEBAR_ORDER: string[] = [
   'wallet',
+  'search',
   'verified',
   'actions',
   'polls',

src/hooks/useMyCommunities.ts

@@ -3,6 +3,7 @@ import { useNostr } from '@nostrify/react';
 import { useQuery } from '@tanstack/react-query';
 
 import { useCurrentUser } from './useCurrentUser';
+import { COMMUNITIES_LIST_KIND, parseCommunityBookmarkATag } from './useCommunityBookmarks';
 import {
   COMMUNITY_DEFINITION_KIND,
   BADGE_AWARD_KIND,
@@ -17,15 +18,26 @@ export interface MyCommunityEntry {
   event: NostrEvent;
   /** Whether the current user is the founder. */
   isFounded: boolean;
+  /** Whether the current user is a validated (chain-derived) member. */
+  isMember: boolean;
+  /** Whether the current user has bookmarked the community via kind 10004. */
+  isBookmarked: boolean;
 }
 
 /**
- * Fetch communities the logged-in user has founded or been recruited into.
+ * Fetch communities the logged-in user has founded, been recruited into,
+ * or bookmarked via their NIP-51 Communities list (kind 10004).
  *
- * Discovery follows the NIP:
- * 1. Founded: `{ kinds: [34550], authors: [<user-pubkey>] }`
- * 2. Member-of: query kind 8 awards targeting the user, extract badge `a` tags,
+ * Discovery:
+ *
+ * 1. Founded -- `{ kinds: [34550], authors: [user.pubkey] }`
+ * 2. Member-of -- kind 8 awards targeting the user, extract badge `a` tags,
  *    then find the community definitions referencing those badges.
+ * 3. Bookmarked -- read kind 10004 authored by user, extract `a` tags
+ *    pointing at kind 34550 events, and fetch those community definitions.
+ *
+ * Priority when the same community appears in multiple sources:
+ * founded > member > bookmarked.
  */
 export function useMyCommunities() {
   const { nostr } = useNostr();
@@ -39,17 +51,27 @@ export function useMyCommunities() {
       const timeout = AbortSignal.timeout(10_000);
       const combinedSignal = AbortSignal.any([signal, timeout]);
 
-      // Step 1: Communities founded by the user
+      // ── Step 1: Communities founded by the user ───────────────────────────
       const foundedEvents = await nostr.query(
         [{ kinds: [COMMUNITY_DEFINITION_KIND], authors: [user.pubkey], limit: 50 }],
         { signal: combinedSignal },
       );
 
-      // Step 2: Badge awards targeting the user
-      const awards = await nostr.query(
-        [{ kinds: [BADGE_AWARD_KIND], '#p': [user.pubkey], limit: 200 }],
-        { signal: combinedSignal },
-      );
+      // ── Step 2: Badge awards targeting the user + Bookmarks list ──────────
+      //
+      // Batched into a single relay round-trip. The kind 10004 list is a
+      // replaceable event, so pulling it here keeps the read path tight and
+      // reuses the same connection.
+      const [awards, bookmarkListEvents] = await Promise.all([
+        nostr.query(
+          [{ kinds: [BADGE_AWARD_KIND], '#p': [user.pubkey], limit: 200 }],
+          { signal: combinedSignal },
+        ),
+        nostr.query(
+          [{ kinds: [COMMUNITIES_LIST_KIND], authors: [user.pubkey], limit: 1 }],
+          { signal: combinedSignal },
+        ),
+      ]);
 
       // Extract badge a-tag coordinates from awards
       const badgeATags = new Set<string>();
@@ -70,26 +92,110 @@ export function useMyCommunities() {
         );
       }
 
-      // Merge and deduplicate (founded takes priority)
+      // ── Step 4: Resolve bookmarked community coordinates ──────────────────
+      //
+      // NIP-51 kind 10004 stores community definitions as `a` tags like
+      // `34550:<pubkey>:<d-tag>`. For each bookmarked coordinate we query
+      // with both `authors` and `#d` so relays return a single authentic
+      // event per bookmark (per AGENTS.md security guidance on addressable
+      // events).
+      //
+      // Multiple coordinates with the same author are grouped to minimise
+      // the number of relay queries while keeping the author filter intact.
+
+      const bookmarkListEvent = bookmarkListEvents[0];
+      const bookmarkedCoords: string[] = (bookmarkListEvent?.tags ?? [])
+        .filter(([n, v]) =>
+          n === 'a'
+          && typeof v === 'string'
+          && !!parseCommunityBookmarkATag(v),
+        )
+        .map(([, v]) => v);
+
+      // Group bookmarked coords by author pubkey: author -> Set<d-tag>
+      const coordsByAuthor = new Map<string, Set<string>>();
+      for (const coord of bookmarkedCoords) {
+        const parsed = parseCommunityBookmarkATag(coord);
+        if (!parsed) continue;
+        const existing = coordsByAuthor.get(parsed.pubkey);
+        if (existing) {
+          existing.add(parsed.dTag);
+        } else {
+          coordsByAuthor.set(parsed.pubkey, new Set([parsed.dTag]));
+        }
+      }
+
+      let bookmarkedCommunityEvents: NostrEvent[] = [];
+      if (coordsByAuthor.size > 0) {
+        bookmarkedCommunityEvents = await nostr.query(
+          Array.from(coordsByAuthor.entries()).map(([authorPubkey, dTags]) => ({
+            kinds: [COMMUNITY_DEFINITION_KIND],
+            authors: [authorPubkey],
+            '#d': [...dTags],
+            limit: dTags.size,
+          })),
+          { signal: combinedSignal },
+        );
+      }
+
+      const bookmarkedATagSet = new Set(bookmarkedCoords);
+
+      // ── Merge & deduplicate ──────────────────────────────────────────────
+      // Priority: founded > member > bookmarked. `isBookmarked` is resolved
+      // from the bookmark list irrespective of which bucket produced the
+      // entry, so founders/members who have also bookmarked see both flags.
       const seen = new Map<string, MyCommunityEntry>();
 
       for (const event of foundedEvents) {
         const community = parseCommunityEvent(event);
         if (!community) continue;
-        seen.set(community.aTag, { community, event, isFounded: true });
+        seen.set(community.aTag, {
+          community,
+          event,
+          isFounded: true,
+          isMember: false,
+          isBookmarked: bookmarkedATagSet.has(community.aTag),
+        });
       }
 
       for (const event of memberCommunityEvents) {
         const community = parseCommunityEvent(event);
         if (!community) continue;
-        if (!seen.has(community.aTag)) {
-          seen.set(community.aTag, { community, event, isFounded: false });
-        }
+        if (seen.has(community.aTag)) continue;
+        seen.set(community.aTag, {
+          community,
+          event,
+          isFounded: false,
+          isMember: true,
+          isBookmarked: bookmarkedATagSet.has(community.aTag),
+        });
       }
 
-      // Sort: founded first, then by created_at descending
+      for (const event of bookmarkedCommunityEvents) {
+        const community = parseCommunityEvent(event);
+        if (!community) continue;
+        if (!bookmarkedATagSet.has(community.aTag)) continue;
+        if (seen.has(community.aTag)) continue;
+        seen.set(community.aTag, {
+          community,
+          event,
+          isFounded: false,
+          isMember: false,
+          isBookmarked: true,
+        });
+      }
+
+      // Sort: founded first, then member, then bookmarked-only;
+      // tie-break by created_at descending.
+      const sortRank = (entry: MyCommunityEntry): number => {
+        if (entry.isFounded) return 0;
+        if (entry.isMember) return 1;
+        return 2;
+      };
+
       return Array.from(seen.values()).sort((a, b) => {
-        if (a.isFounded !== b.isFounded) return a.isFounded ? -1 : 1;
+        const rankDiff = sortRank(a) - sortRank(b);
+        if (rankDiff !== 0) return rankDiff;
         return b.event.created_at - a.event.created_at;
       });
     },

src/pages/CommunitiesPage.tsx

@@ -1,11 +1,13 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
 import { useQueryClient } from '@tanstack/react-query';
 import { useSeoMeta } from '@unhead/react';
-import { Loader2, Users } from 'lucide-react';
+import { Loader2, Search, Users } from 'lucide-react';
 import type { NostrEvent } from '@nostrify/nostrify';
 import { useInView } from 'react-intersection-observer';
 
 import { CommunityCard } from '@/components/CommunityCard';
+import { CreateCommunityDialog } from '@/components/CreateCommunityDialog';
 import { FeedEmptyState } from '@/components/FeedEmptyState';
 import { LoginArea } from '@/components/auth/LoginArea';
 import { MembersOnlyToggle } from '@/components/MembersOnlyToggle';
@@ -14,6 +16,7 @@ import { PageHeader } from '@/components/PageHeader';
 import { PullToRefresh } from '@/components/PullToRefresh';
 import { SubHeaderBar } from '@/components/SubHeaderBar';
 import { TabButton } from '@/components/TabButton';
+import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
 import { CommunityModerationContext, type CommunityModerationContextValue } from '@/contexts/CommunityModerationContext';
 import { COMMUNITY_DEFINITION_KIND, EMPTY_MODERATION } from '@/lib/communityUtils';
@@ -78,16 +81,20 @@ export function CommunitiesPage() {
   const { config } = useAppContext();
   const { user } = useCurrentUser();
   const queryClient = useQueryClient();
-
-  useLayoutOptions({
-    hasSubHeader: !!user,
-  });
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);
 
   const [activeTab, setActiveTab] = useFeedTab<CommunitiesTab>('communities', [
     'activities',
     'mine',
   ]);
 
+  useLayoutOptions({
+    hasSubHeader: !!user,
+    showFAB: !!user && activeTab === 'mine',
+    onFabClick: () => setCreateDialogOpen(true),
+    fabIcon: <Users className="size-5" />,
+  });
+
   useSeoMeta({
     title: `Communities | ${config.appName}`,
     description: 'Discover and join hierarchical communities on Nostr',
@@ -131,6 +138,8 @@ export function CommunitiesPage() {
           }
         />
       )}
+
+      <CreateCommunityDialog open={createDialogOpen} onOpenChange={setCreateDialogOpen} />
     </main>
   );
 }
@@ -177,7 +186,25 @@ function MyCommunitiesContent() {
 
   if (!myCommunities || myCommunities.length === 0) {
     return (
-      <FeedEmptyState message="You haven't founded or joined any communities yet." />
+      <div className="py-20 px-8 flex flex-col items-center gap-6 text-center">
+        <div className="p-4 rounded-full bg-primary/10">
+          <Users className="size-8 text-primary" />
+        </div>
+        <div className="space-y-2 max-w-xs">
+          <h2 className="text-xl font-bold">No communities yet</h2>
+          <p className="text-muted-foreground text-sm">
+            Discover communities to join via the Search page, or create your own using the button below.
+          </p>
+        </div>
+        <div className="flex flex-col gap-2 w-full max-w-xs">
+          <Button asChild className="rounded-full">
+            <Link to="/search?tab=communities">
+              <Search className="size-4 mr-2" />
+              Search communities
+            </Link>
+          </Button>
+        </div>
+      </div>
     );
   }
 
@@ -188,6 +215,8 @@ function MyCommunitiesContent() {
           key={entry.community.aTag}
           event={entry.event}
           isFounded={entry.isFounded}
+          isMember={entry.isMember}
+          isBookmarked={entry.isBookmarked}
         />
       ))}
     </div>
@@ -294,7 +323,25 @@ function ActivitiesTab({ onRefresh }: { onRefresh: () => Promise<void> }) {
         ) : membersOnly && activityEvents && activityEvents.length > 0 ? (
           <FeedEmptyState message="No activity from members of your communities yet. Toggle the shield icon to see all community activity." />
         ) : (
-          <FeedEmptyState message="No activity from your communities yet." />
+          <div className="py-20 px-8 flex flex-col items-center gap-6 text-center">
+            <div className="p-4 rounded-full bg-primary/10">
+              <Users className="size-8 text-primary" />
+            </div>
+            <div className="space-y-2 max-w-xs">
+              <h2 className="text-xl font-bold">No activity yet</h2>
+              <p className="text-muted-foreground text-sm">
+                Discover communities to join via the Search page, or create your own from the My Communities tab.
+              </p>
+            </div>
+            <div className="flex flex-col gap-2 w-full max-w-xs">
+              <Button asChild className="rounded-full">
+                <Link to="/search?tab=communities">
+                  <Search className="size-4 mr-2" />
+                  Search communities
+                </Link>
+              </Button>
+            </div>
+          </div>
         )}
         {!isLoading && hasNextPage && (
           <div ref={scrollRef} className="py-4 flex justify-center">

src/pages/SearchPage.tsx

@@ -62,7 +62,7 @@ type TabType = 'communities' | 'posts' | 'accounts';
 const VALID_TABS: TabType[] = ['communities', 'posts', 'accounts'];
 
 function parseTab(value: string | null): TabType {
-  return VALID_TABS.includes(value as TabType) ? (value as TabType) : 'posts';
+  return VALID_TABS.includes(value as TabType) ? (value as TabType) : 'communities';
 }
 
 const VALID_AUTHOR_SCOPES = ['anyone', 'follows', 'people'] as const;
@@ -199,7 +199,7 @@ export function SearchPage() {
   const setActiveTab = useCallback((tab: TabType) => {
     setSearchParams((prev) => {
       const next = new URLSearchParams(prev);
-      if (tab === 'posts') {
+      if (tab === 'communities') {
         next.delete('tab');
       } else {
         next.set('tab', tab);
@@ -1208,4 +1208,3 @@ function SaveDestinationRow({
   );
 }
 
-