feat: add option to hide latest articles section on homepage (#42)

* feat: add option to hide latest articles section on home page

* Update src/pages/SettingsPage.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: highperfocused <highperfocused@pm.me>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

src/components/AppProvider.tsx

@@ -25,6 +25,7 @@ const RelayMetadataSchema = z.object({
 const AppConfigSchema = z.object({
   theme: z.enum(['dark', 'light', 'system']),
   relayMetadata: RelayMetadataSchema,
+  hideLatestArticles: z.boolean().optional(),
 }) satisfies z.ZodType<AppConfig>;
 
 export function AppProvider(props: AppProviderProps) {

src/contexts/AppContext.ts

@@ -14,6 +14,8 @@ export interface AppConfig {
   theme: Theme;
   /** NIP-65 relay list metadata */
   relayMetadata: RelayMetadata;
+  /** Hide latest articles section on home page */
+  hideLatestArticles?: boolean;
 }
 
 export interface AppContextType {

src/pages/HomePage.tsx

@@ -6,10 +6,12 @@ import { TrendingTags } from '@/components/TrendingTags';
 import { Music, Leaf, BrainCircuit, Bitcoin, Newspaper, Hash } from 'lucide-react';
 import { useInterestSets } from '@/hooks/useInterestSets';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useAppContext } from '@/hooks/useAppContext';
 
 export default function HomePage() {
   const { user } = useCurrentUser();
   const { data: interestSets } = useInterestSets();
+  const { config } = useAppContext();
 
   useSeoMeta({
     title: 'zelo.news - Decentralized News on Nostr',
@@ -53,7 +55,7 @@ export default function HomePage() {
         <TrendingTags />
 
         {/* Latest Articles */}
-        <LatestArticles />
+        {!config.hideLatestArticles && <LatestArticles />}
 
         {/* Display interest sets or default hashtags */}
         {displaySets ? (

src/pages/SettingsPage.tsx

@@ -5,16 +5,26 @@ import { Switch } from '@/components/ui/switch';
 import { RelayListManager } from '@/components/RelayListManager';
 import { InterestSetsManager } from '@/components/InterestSetsManager';
 import { useTheme } from '@/hooks/useTheme';
+import { useAppContext } from '@/hooks/useAppContext';
 
 export function SettingsPage() {
   const { theme, setTheme } = useTheme();
+  const { config, updateConfig } = useAppContext();
 
   const isDarkMode = theme === 'dark';
+  const hideLatestArticles = config.hideLatestArticles ?? false;
 
   const handleThemeToggle = () => {
     setTheme(isDarkMode ? 'light' : 'dark');
   };
 
+  const handleHideLatestArticlesToggle = () => {
+    updateConfig((current) => ({
+      ...current,
+      hideLatestArticles: !(current.hideLatestArticles ?? false),
+    }));
+  };
+
   return (
     <div className="container max-w-4xl py-8 px-4">
       {/* Page Header */}
@@ -42,20 +52,37 @@ export function SettingsPage() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <div className="flex items-center justify-between">
-              <div className="space-y-0.5">
-                <Label htmlFor="dark-mode" className="text-base cursor-pointer">
-                  Dark Mode
-                </Label>
-                <p className="text-sm text-muted-foreground">
-                  Switch between light and dark themes
-                </p>
+            <div className="space-y-6">
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label htmlFor="dark-mode" className="text-base cursor-pointer">
+                    Dark Mode
+                  </Label>
+                  <p className="text-sm text-muted-foreground">
+                    Switch between light and dark themes
+                  </p>
+                </div>
+                <Switch
+                  id="dark-mode"
+                  checked={isDarkMode}
+                  onCheckedChange={handleThemeToggle}
+                />
+              </div>
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label htmlFor="hide-latest" className="text-base cursor-pointer">
+                    Hide Latest Articles
+                  </Label>
+                  <p className="text-sm text-muted-foreground">
+                    Hide the latest articles section on the home page
+                  </p>
+                </div>
+                <Switch
+                  id="hide-latest"
+                  checked={hideLatestArticles}
+                  onCheckedChange={handleHideLatestArticlesToggle}
+                />
               </div>
-              <Switch
-                id="dark-mode"
-                checked={isDarkMode}
-                onCheckedChange={handleThemeToggle}
-              />
             </div>
           </CardContent>
         </Card>