Add preferMinimalCards configuration to App and related components

src/App.tsx

@@ -42,6 +42,7 @@ const defaultConfig: AppConfig = {
     ],
     updatedAt: 0,
   },
+  preferMinimalCards: false,
 };
 
 export function App() {

src/components/AppProvider.tsx

@@ -25,6 +25,7 @@ const RelayMetadataSchema = z.object({
 const AppConfigSchema = z.object({
   theme: z.enum(['dark', 'light', 'system']),
   relayMetadata: RelayMetadataSchema,
+  preferMinimalCards: z.boolean(),
 }) 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;
+  /** Prefer minimal picture cards in the feed */
+  preferMinimalCards: boolean;
 }
 
 export interface AppContextType {

src/pages/Index.tsx

@@ -2,10 +2,12 @@ import { useSeoMeta } from '@unhead/react';
 import { Layout } from '@/components/Layout';
 import { usePictureFeed } from '@/hooks/usePictureFeed';
 import { PictureCard } from '@/components/feed/PictureCard';
+import { MinimalPictureCard } from '@/components/feed/MinimalPictureCard';
 import { useInView } from 'react-intersection-observer';
 import { useEffect, useMemo } from 'react';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Card, CardContent } from '@/components/ui/card';
+import { useAppContext } from '@/hooks/useAppContext';
 
 const Index = () => {
   useSeoMeta({
@@ -13,6 +15,7 @@ const Index = () => {
     description: 'Discover amazing pictures shared on Nostr.',
   });
 
+  const { config } = useAppContext();
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = usePictureFeed();
   const { ref, inView } = useInView();
 
@@ -72,7 +75,11 @@ const Index = () => {
             // Picture feed
             <>
               {pictures.map((picture) => (
-                <PictureCard key={picture.id} event={picture} />
+                config.preferMinimalCards ? (
+                  <MinimalPictureCard key={picture.id} event={picture} />
+                ) : (
+                  <PictureCard key={picture.id} event={picture} />
+                )
               ))}
 
               {/* Infinite scroll trigger */}

src/pages/Settings.tsx

@@ -5,10 +5,12 @@ import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import { RelayListManager } from '@/components/RelayListManager';
 import { useTheme } from '@/hooks/useTheme';
-import { Moon, Sun } from 'lucide-react';
+import { useAppContext } from '@/hooks/useAppContext';
+import { Moon, Sun, LayoutGrid } from 'lucide-react';
 
 export function Settings() {
   const { theme, setTheme } = useTheme();
+  const { config, updateConfig } = useAppContext();
 
   useSeoMeta({
     title: 'Settings - Lumina',
@@ -33,7 +35,7 @@ export function Settings() {
               Customize how the app looks and feels
             </CardDescription>
           </CardHeader>
-          <CardContent>
+          <CardContent className="space-y-6">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-3">
                 {theme === 'light' ? (
@@ -56,6 +58,27 @@ export function Settings() {
                 onCheckedChange={(checked) => setTheme(checked ? 'dark' : 'light')}
               />
             </div>
+            
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <LayoutGrid className="h-5 w-5 text-muted-foreground" />
+                <div>
+                  <Label htmlFor="minimal-cards-toggle" className="text-base cursor-pointer">
+                    Minimal Cards
+                  </Label>
+                  <p className="text-sm text-muted-foreground">
+                    Show compact picture-only cards in feed
+                  </p>
+                </div>
+              </div>
+              <Switch
+                id="minimal-cards-toggle"
+                checked={config.preferMinimalCards}
+                onCheckedChange={(checked) => 
+                  updateConfig((current) => ({ ...current, preferMinimalCards: checked }))
+                }
+              />
+            </div>
           </CardContent>
         </Card>
 

src/test/TestApp.tsx

@@ -29,6 +29,7 @@ export function TestApp({ children }: TestAppProps) {
       ],
       updatedAt: 0,
     },
+    preferMinimalCards: false,
   };
 
   return (