diff --git a/src/components/ContentSettings.tsx b/src/components/ContentSettings.tsx index ff9b1346..a6cc8193 100644 --- a/src/components/ContentSettings.tsx +++ b/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() {

{community - ? `Show posts from ${community.domain}` + ? `Show "${community.label}" tab for ${community.domain} users` : 'Set a community below to enable this feed'}

@@ -486,9 +500,9 @@ function FeedTabsSection() {
-

{community.domain}

-

- {community.userCount} {community.userCount === 1 ? 'user' : 'users'} +

{community.label}

+

+ {community.domain} • {community.userCount} {community.userCount === 1 ? 'user' : 'users'}

diff --git a/src/components/Feed.tsx b/src/components/Feed.tsx index cc374a05..97e811d0 100644 --- a/src/components/Feed.tsx +++ b/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 && ( setActiveTab('communities')} />