fix: dropdown of Reading Experience

fezcode · fezcode · commit 718be4f1d30e · 2025-12-17T15:19:13.000+03:00
diff --git a/src/context/VisualSettingsContext.js b/src/context/VisualSettingsContext.js
@@ -42,9 +42,9 @@ export const VisualSettingsProvider = ({ children }) => {
   const [isGarden, setIsGarden] = usePersistentState('is-garden', false);
   const [isAutumn, setIsAutumn] = usePersistentState('is-autumn', false);
   const [isRain, setIsRain] = usePersistentState('is-rain', false);
-  const [isDossierMode, setIsDossierMode] = usePersistentState(
-    'is-dossier-mode',
-    false,
+  const [blogPostViewMode, setBlogPostViewMode] = usePersistentState(
+    'blog-post-view-mode',
+    'standard',
   );
 
   // Chaos Theory Achievement Tracker
@@ -80,7 +80,7 @@ export const VisualSettingsProvider = ({ children }) => {
     isGarden,
     isAutumn,
     isRain,
-    isDossierMode,
+    blogPostViewMode,
     unlockAchievement,
   ]);
 
@@ -235,7 +235,6 @@ export const VisualSettingsProvider = ({ children }) => {
   const toggleGarden = () => setIsGarden((prev) => !prev);
   const toggleAutumn = () => setIsAutumn((prev) => !prev);
   const toggleRain = () => setIsRain((prev) => !prev);
-  const toggleDossierMode = () => setIsDossierMode((prev) => !prev);
 
   return (
     <VisualSettingsContext.Provider
@@ -276,8 +275,8 @@ export const VisualSettingsProvider = ({ children }) => {
         toggleAutumn,
         isRain,
         toggleRain,
-        isDossierMode,
-        toggleDossierMode,
+        blogPostViewMode,
+        setBlogPostViewMode,
       }}
     >
       {children}
diff --git a/src/pages/BlogPostPage.js b/src/pages/BlogPostPage.js
@@ -4,9 +4,9 @@ import DossierBlogPostPage from './DossierBlogPostPage';
 import StandardBlogPostPage from './StandardBlogPostPage';
 
 const BlogPostPage = () => {
-  const { isDossierMode } = useVisualSettings();
+  const { blogPostViewMode } = useVisualSettings();
 
-  if (isDossierMode) {
+  if (blogPostViewMode === 'dossier') {
     return <DossierBlogPostPage />;
   }
 
diff --git a/src/pages/SettingsPage.js b/src/pages/SettingsPage.js
@@ -19,6 +19,7 @@ import { useAnimation } from '../context/AnimationContext';
 import { useVisualSettings } from '../context/VisualSettingsContext';
 import { useAchievements } from '../context/AchievementContext';
 import CustomToggle from '../components/CustomToggle';
+import CustomDropdown from '../components/CustomDropdown'; // Added CustomDropdown
 import useSeo from '../hooks/useSeo';
 import { useToast } from '../hooks/useToast';
 import { useHomepageOrder } from '../context/HomepageOrderContext';
@@ -109,8 +110,8 @@ const SettingsPage = () => {
     toggleAutumn,
     isRain,
     toggleRain,
-    isDossierMode,
-    toggleDossierMode,
+    blogPostViewMode, // Changed from isDossierMode
+    setBlogPostViewMode, // Changed from toggleDossierMode
   } = useVisualSettings();
 
   const { addToast } = useToast();
@@ -247,16 +248,23 @@ const SettingsPage = () => {
 
           {/* Reading Experience */}
           <Section title="Reading Experience" icon={<Article />} delay={0.05}>
-            <div className="bg-gray-800/30 rounded-xl p-4 border border-white/5">
-              <CustomToggle
-                id="dossier-mode"
-                label="Dossier Mode"
-                checked={isDossierMode}
-                onChange={toggleDossierMode}
-                colorTheme="stone"
-              />
-              <p className="mt-2 text-sm text-gray-400 ml-1">
-                Render blog posts as classified dossiers.
+            <div className="bg-gray-800/30 rounded-xl p-4 border border-white/5 flex flex-col gap-4">
+              <div className="flex items-center justify-between">
+                <span className="font-medium text-white">Blog Post View</span>
+                <CustomDropdown
+                  label="Select View"
+                  options={[
+                    { label: 'Standard', value: 'standard' },
+                    { label: 'Dossier', value: 'dossier' },
+                  ]}
+                  value={blogPostViewMode}
+                  onChange={setBlogPostViewMode}
+                  icon={Article}
+                  className="ml-auto"
+                />
+              </div>
+              <p className="text-sm text-gray-400">
+                Select the default rendering style for blog posts.
               </p>
             </div>
           </Section>

Original file line number	Diff line number	Diff line change
`@@ -4,9 +4,9 @@ import DossierBlogPostPage from './DossierBlogPostPage';`
`4`	`4`	`import StandardBlogPostPage from './StandardBlogPostPage';`
`5`	`5`
`6`	`6`	`const BlogPostPage = () => {`
`7`		`- const { isDossierMode } = useVisualSettings();`
	`7`	`+ const { blogPostViewMode } = useVisualSettings();`
`8`	`8`
`9`		`- if (isDossierMode) {`
	`9`	`+ if (blogPostViewMode === 'dossier') {`
`10`	`10`	`return <DossierBlogPostPage />;`
`11`	`11`	`}`
`12`	`12`