Auto-enable Community feed and use domain-based labels

When downloading a community:
- Extract label from hostname (ditto.pub → "Ditto")
- Capitalize first letter of hostname
- Store label in community object
- Auto-enable Community Feed toggle
- Display label in feed tab instead of generic "Community"

Community card display:
- Show label as primary text (e.g., "Ditto")
- Show domain + user count in secondary text
- Format: "Ditto" with "ditto.pub • 247 users"

Feed tab:
- Load community label from localStorage
- Display as tab name (e.g., "Ditto" instead of "Community")
- Falls back to "Community" if no label found

Removing community:
- Auto-disables Community Feed toggle
- Clears all community data
- Returns to input state

Examples:
- ditto.pub → "Ditto" tab
- spinster.xyz → "Spinster" tab
- bitcoinhackers.org → "Bitcoinhackers" tab

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>

src/components/ContentSettings.tsx

@@ -285,7 +285,7 @@ function FeedTabsSection() {
   const { toast } = useToast();
   const [communityDomain, setCommunityDomain] = useState('');
   const [isDownloading, setIsDownloading] = useState(false);
-  const [community, setCommunity] = useState<{ domain: string; userCount: number } | null>(() => {
+  const [community, setCommunity] = useState<{ domain: string; userCount: number; label: string } | null>(() => {
     const stored = localStorage.getItem('mew:community');
     return stored ? JSON.parse(stored) : null;
   });
@@ -356,17 +356,27 @@ function FeedTabsSection() {
 
       const userCount = Object.keys(data.names).length;
 
+      // Extract label from domain (hostname without TLD)
+      // ditto.pub -> Ditto, spinster.xyz -> Spinster, etc.
+      const domainParts = domain.split('.');
+      const hostname = domainParts[0]; // Get first part
+      const label = hostname.charAt(0).toUpperCase() + hostname.slice(1); // Capitalize
+
       // Store in localStorage (single community only)
-      const newCommunity = { domain, userCount };
+      const newCommunity = { domain, userCount, label };
       setCommunity(newCommunity);
       localStorage.setItem('mew:community', JSON.stringify(newCommunity));
       
       // Store the actual JSON data for later use
       localStorage.setItem('mew:communityData', JSON.stringify(data));
 
+      // Auto-enable the Community feed tab
+      setShowCommunityFeed(true);
+      localStorage.setItem('mew:showCommunityFeed', 'true');
+
       toast({
         title: 'Community set',
-        description: `${domain} with ${userCount} users`,
+        description: `${label} with ${userCount} users`,
       });
 
       setCommunityDomain('');
@@ -387,6 +397,10 @@ function FeedTabsSection() {
     localStorage.removeItem('mew:community');
     localStorage.removeItem('mew:communityData');
     
+    // Also disable the community feed tab
+    setShowCommunityFeed(false);
+    localStorage.setItem('mew:showCommunityFeed', 'false');
+    
     toast({
       title: 'Community removed',
       description: 'Community feed cleared',
@@ -430,7 +444,7 @@ function FeedTabsSection() {
             <Label className="text-sm font-medium">Community Feed</Label>
             <p className="text-xs text-muted-foreground">
               {community 
-                ? `Show posts from ${community.domain}`
+                ? `Show "${community.label}" tab for ${community.domain} users`
                 : 'Set a community below to enable this feed'}
             </p>
           </div>
@@ -486,9 +500,9 @@ function FeedTabsSection() {
             <div className="flex items-center gap-2 flex-1 min-w-0">
               <Users className="h-4 w-4 text-muted-foreground shrink-0" />
               <div className="min-w-0">
-                <p className="text-sm font-medium truncate">{community.domain}</p>
-                <p className="text-xs text-muted-foreground">
-                  {community.userCount} {community.userCount === 1 ? 'user' : 'users'}
+                <p className="text-sm font-medium truncate">{community.label}</p>
+                <p className="text-xs text-muted-foreground truncate">
+                  {community.domain} • {community.userCount} {community.userCount === 1 ? 'user' : 'users'}
                 </p>
               </div>
             </div>

src/components/Feed.tsx

@@ -30,6 +30,19 @@ export function Feed() {
     return stored !== null ? stored === 'true' : false;
   })();
 
+  const communityLabel = (() => {
+    try {
+      const stored = localStorage.getItem('mew:community');
+      if (stored) {
+        const community = JSON.parse(stored);
+        return community.label || 'Community';
+      }
+    } catch {
+      // Fall through
+    }
+    return 'Community';
+  })();
+
   const [activeTab, setActiveTab] = useState<'follows' | 'global' | 'communities'>(user ? 'follows' : 'global');
   const [loginDialogOpen, setLoginDialogOpen] = useState(false);
   const [signupDialogOpen, setSignupDialogOpen] = useState(false);
@@ -139,7 +152,7 @@ export function Feed() {
           )}
           {showCommunityFeed && (
             <TabButton
-              label="Community"
+              label={communityLabel}
               active={activeTab === 'communities'}
               onClick={() => setActiveTab('communities')}
             />