Skip to content

Commit 5528f0c

Browse files
fezcodefezcode
committed
feat(apps): fullscreen app setting
1 parent cfcde3f commit 5528f0c

File tree

3 files changed

+67
-30
lines changed

3 files changed

+67
-30
lines changed

‎src/components/Layout.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ const Layout = ({
3636
sidebarMode,
3737
isSidebarOpen,
3838
toggleSidebar,
39+
isAppFullscreen,
3940
} = useVisualSettings();
4041
const location = useLocation();
4142
const { projects } = useProjects();
@@ -57,7 +58,9 @@ const Layout = ({
5758
projectStyle === 'museum'
5859
;
5960

60-
const hideLayout = isAboutPage || isGraphPage || isSpecialProject || isTheVaguePage;
61+
// Check if we are inside a specific app (but not the apps listing page)
62+
const isAppDetail = location.pathname.startsWith('/apps/') && location.pathname !== '/apps/';
63+
const hideLayout = isAboutPage || isGraphPage || isSpecialProject || isTheVaguePage || (isAppDetail && isAppFullscreen);
6164

6265
const mainContent = (location.pathname.startsWith('/stories')) ? (
6366
<DndProvider>

‎src/context/VisualSettingsContext.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export const VisualSettingsProvider = ({ children }) => {
5454
const [sidebarMode, setSidebarMode] = usePersistentState('sidebar-mode','brutalist');
5555
const [sidebarColor, setSidebarColor] = usePersistentState('sidebar-color','default');
5656
const [isSplashTextEnabled, setIsSplashTextEnabled] = usePersistentState('is-splash-text-enabled',true);
57+
const [isAppFullscreen, setIsAppFullscreen] = usePersistentState('is-app-fullscreen', false);
5758

5859
const [isSidebarOpen, setIsSidebarOpen] = React.useState(window.innerWidth > 768);
5960
useEffect(() => {
@@ -270,6 +271,7 @@ export const VisualSettingsProvider = ({ children }) => {
270271
const toggleFalloutScanlines = () => setIsFalloutScanlinesEnabled((prev) => !prev);
271272
const toggleFalloutVignette = () => setIsFalloutVignetteEnabled((prev) => !prev);
272273
const toggleSplashText = () => setIsSplashTextEnabled((prev) => !prev);
274+
const toggleAppFullscreen = () => setIsAppFullscreen((prev) => !prev);
273275

274276
return (
275277
<VisualSettingsContext.Provider
@@ -333,6 +335,8 @@ export const VisualSettingsProvider = ({ children }) => {
333335
availableFonts,
334336
isSplashTextEnabled,
335337
toggleSplashText,
338+
isAppFullscreen,
339+
toggleAppFullscreen,
336340
isSidebarOpen,
337341
setIsSidebarOpen,
338342
toggleSidebar,

‎src/pages/SettingsPage.jsx‎

Lines changed: 59 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const Section = ({ title, icon, children, delay = 0, id }) => (
4646
<div className="p-3 bg-emerald-500/10 border border-emerald-500/20 rounded-sm text-emerald-500">
4747
{React.cloneElement(icon, { size: 24, weight: 'bold' })}
4848
</div>
49-
<h2 className="text-3xl font-black text-white uppercase tracking-tighter">
49+
<h2 className="text-3xl text-white uppercase tracking-tighter">
5050
{title}
5151
</h2>
5252
</div>
@@ -145,6 +145,8 @@ const SettingsPage = () => {
145145
bodyFont,
146146
setBodyFont,
147147
availableFonts,
148+
isAppFullscreen,
149+
toggleAppFullscreen,
148150
} = useVisualSettings();
149151

150152
const {
@@ -243,7 +245,7 @@ const SettingsPage = () => {
243245

244246
<div className="flex flex-col md:flex-row md:items-end justify-between gap-12">
245247
<div className="space-y-4">
246-
<h1 className="text-6xl md:text-8xl font-black tracking-tighter text-white leading-none uppercase">
248+
<h1 className="text-6xl md:text-8xl tracking-tighter text-white leading-none uppercase">
247249
Settings
248250
</h1>
249251
<p className="text-xl text-gray-400 max-w-2xl font-light leading-relaxed">
@@ -291,6 +293,27 @@ const SettingsPage = () => {
291293
label="Blogposts First"
292294
checked={sectionOrder[0] === 'blogposts'}
293295
onChange={toggleSectionOrder}
296+
fontClass="font-outfit"
297+
/>
298+
</div>
299+
</div>
300+
301+
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6 p-6 border border-white/5 bg-white/[0.01] rounded-sm">
302+
<div>
303+
<h3 className="text-lg font-bold text-white mb-1">
304+
App Experience
305+
</h3>
306+
<p className="text-sm text-gray-500">
307+
Control how applications are displayed.
308+
</p>
309+
</div>
310+
<div className="flex items-center gap-4">
311+
<CustomToggle
312+
id="app-fullscreen"
313+
label="Fullscreen Apps"
314+
checked={isAppFullscreen}
315+
onChange={toggleAppFullscreen}
316+
fontClass="font-outfit"
294317
/>
295318
</div>
296319
</div>
@@ -416,6 +439,7 @@ const SettingsPage = () => {
416439
label={isAnimationEnabled ? 'Enabled' : 'Disabled'}
417440
checked={isAnimationEnabled}
418441
onChange={toggleAnimation}
442+
fontClass="font-outfit"
419443
/>
420444
</div>
421445

@@ -432,12 +456,14 @@ const SettingsPage = () => {
432456
label="Homepage Motion"
433457
checked={showAnimationsHomepage}
434458
onChange={toggleShowAnimationsHomepage}
459+
fontClass="font-outfit"
435460
/>
436461
<CustomToggle
437462
id="show-animations-inner-pages"
438463
label="Interior Page Motion"
439464
checked={showAnimationsInnerPages}
440465
onChange={toggleShowAnimationsInnerPages}
466+
fontClass="font-outfit"
441467
/>
442468
</motion.div>
443469
)}
@@ -472,6 +498,7 @@ const SettingsPage = () => {
472498
label={showAchievementToast ? 'Active' : 'Silent'}
473499
checked={showAchievementToast}
474500
onChange={toggleAchievementToast}
501+
fontClass="font-outfit"
475502
/>
476503
</div>
477504
</Section>
@@ -482,25 +509,25 @@ const SettingsPage = () => {
482509
Apply experimental filters to the entire application. Combine with caution.
483510
</p>
484511
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
485-
<CustomToggle id="fx-invert" colorTheme="rose" label="Invert Colors" checked={isInverted} onChange={toggleInvert} />
486-
<CustomToggle id="fx-retro" colorTheme="blue" label="Retro CRT" checked={isRetro} onChange={toggleRetro} />
487-
<CustomToggle id="fx-party" colorTheme="green" label="Party Mode" checked={isParty} onChange={toggleParty} />
488-
<CustomToggle id="fx-mirror" colorTheme="amber" label="Mirror World" checked={isMirror} onChange={toggleMirror} />
489-
<CustomToggle id="fx-noir" colorTheme="purple" label="Film Noir" checked={isNoir} onChange={toggleNoir} />
490-
<CustomToggle id="fx-terminal" colorTheme="cyan" label="Emerald Term" checked={isTerminal} onChange={toggleTerminal} />
491-
<CustomToggle id="fx-blueprint" colorTheme="indigo" label="Blueprint" checked={isBlueprint} onChange={toggleBlueprint} />
492-
<CustomToggle id="fx-sepia" colorTheme="rose" label="Vintage Sepia" checked={isSepia} onChange={toggleSepia} />
493-
<CustomToggle id="fx-vaporwave" colorTheme="blue" label="Vaporwave" checked={isVaporwave} onChange={toggleVaporwave} />
494-
<CustomToggle id="fx-cyberpunk" colorTheme="green" label="Cyberpunk" checked={isCyberpunk} onChange={toggleCyberpunk} />
495-
<CustomToggle id="fx-gameboy" colorTheme="amber" label="Legacy Handheld" checked={isGameboy} onChange={toggleGameboy} />
496-
<CustomToggle id="fx-comic" colorTheme="purple" label="Comic Array" checked={isComic} onChange={toggleComic} />
497-
<CustomToggle id="fx-sketchbook" colorTheme="cyan" label="Graphite Map" checked={isSketchbook} onChange={toggleSketchbook} />
498-
<CustomToggle id="fx-hellenic" colorTheme="indigo" label="Classical Agora" checked={isHellenic} onChange={toggleHellenic} />
499-
<CustomToggle id="fx-glitch" colorTheme="rose" label="Data Corruption" checked={isGlitch} onChange={toggleGlitch} />
500-
<CustomToggle id="fx-garden" colorTheme="blue" label="Flora Protocol" checked={isGarden} onChange={toggleGarden} />
501-
<CustomToggle id="fx-autumn" colorTheme="green" label="Seasonal Decay" checked={isAutumn} onChange={toggleAutumn} />
502-
<CustomToggle id="fx-rain" colorTheme="amber" label="Hydraulic Filter" checked={isRain} onChange={toggleRain} />
503-
<CustomToggle id="fx-fallout" colorTheme="purple" label="Fallout Overlay" checked={isFalloutOverlay} onChange={toggleFalloutOverlay} />
512+
<CustomToggle id="fx-invert" colorTheme="rose" label="Invert Colors" checked={isInverted} onChange={toggleInvert} fontClass="font-outfit" />
513+
<CustomToggle id="fx-retro" colorTheme="blue" label="Retro CRT" checked={isRetro} onChange={toggleRetro} fontClass="font-outfit" />
514+
<CustomToggle id="fx-party" colorTheme="green" label="Party Mode" checked={isParty} onChange={toggleParty} fontClass="font-outfit" />
515+
<CustomToggle id="fx-mirror" colorTheme="amber" label="Mirror World" checked={isMirror} onChange={toggleMirror} fontClass="font-outfit" />
516+
<CustomToggle id="fx-noir" colorTheme="purple" label="Film Noir" checked={isNoir} onChange={toggleNoir} fontClass="font-outfit" />
517+
<CustomToggle id="fx-terminal" colorTheme="cyan" label="Emerald Term" checked={isTerminal} onChange={toggleTerminal} fontClass="font-outfit" />
518+
<CustomToggle id="fx-blueprint" colorTheme="indigo" label="Blueprint" checked={isBlueprint} onChange={toggleBlueprint} fontClass="font-outfit" />
519+
<CustomToggle id="fx-sepia" colorTheme="rose" label="Vintage Sepia" checked={isSepia} onChange={toggleSepia} fontClass="font-outfit" />
520+
<CustomToggle id="fx-vaporwave" colorTheme="blue" label="Vaporwave" checked={isVaporwave} onChange={toggleVaporwave} fontClass="font-outfit" />
521+
<CustomToggle id="fx-cyberpunk" colorTheme="green" label="Cyberpunk" checked={isCyberpunk} onChange={toggleCyberpunk} fontClass="font-outfit" />
522+
<CustomToggle id="fx-gameboy" colorTheme="amber" label="Legacy Handheld" checked={isGameboy} onChange={toggleGameboy} fontClass="font-outfit" />
523+
<CustomToggle id="fx-comic" colorTheme="purple" label="Comic Array" checked={isComic} onChange={toggleComic} fontClass="font-outfit" />
524+
<CustomToggle id="fx-sketchbook" colorTheme="cyan" label="Graphite Map" checked={isSketchbook} onChange={toggleSketchbook} fontClass="font-outfit" />
525+
<CustomToggle id="fx-hellenic" colorTheme="indigo" label="Classical Agora" checked={isHellenic} onChange={toggleHellenic} fontClass="font-outfit" />
526+
<CustomToggle id="fx-glitch" colorTheme="rose" label="Data Corruption" checked={isGlitch} onChange={toggleGlitch} fontClass="font-outfit" />
527+
<CustomToggle id="fx-garden" colorTheme="blue" label="Flora Protocol" checked={isGarden} onChange={toggleGarden} fontClass="font-outfit" />
528+
<CustomToggle id="fx-autumn" colorTheme="green" label="Seasonal Decay" checked={isAutumn} onChange={toggleAutumn} fontClass="font-outfit" />
529+
<CustomToggle id="fx-rain" colorTheme="amber" label="Hydraulic Filter" checked={isRain} onChange={toggleRain} fontClass="font-outfit" />
530+
<CustomToggle id="fx-fallout" colorTheme="purple" label="Fallout Overlay" checked={isFalloutOverlay} onChange={toggleFalloutOverlay} fontClass="font-outfit" />
504531
{isFalloutOverlay && (
505532
<div className="col-span-1 md:col-span-2 lg:col-span-3 mt-4 p-6 border border-white/10 bg-white/5 rounded-sm space-y-6">
506533
<div className="flex items-center gap-4">
@@ -524,23 +551,26 @@ const SettingsPage = () => {
524551
label="Signal Noise"
525552
checked={isFalloutNoiseEnabled}
526553
onChange={toggleFalloutNoise}
554+
fontClass="font-outfit"
527555
/>
528556
<CustomToggle
529557
id="fallout-scanlines"
530558
label="CRT Scanlines"
531559
checked={isFalloutScanlinesEnabled}
532560
onChange={toggleFalloutScanlines}
561+
fontClass="font-outfit"
533562
/>
534563
<CustomToggle
535564
id="fallout-vignette"
536565
label="Screen Vignette"
537566
checked={isFalloutVignetteEnabled}
538567
onChange={toggleFalloutVignette}
568+
fontClass="font-outfit"
539569
/>
540570
</div>
541571
</div>
542572
)}
543-
<CustomToggle id="fx-splash" label="Splash Text" checked={isSplashTextEnabled} onChange={toggleSplashText} />
573+
<CustomToggle id="fx-splash" label="Splash Text" checked={isSplashTextEnabled} onChange={toggleSplashText} fontClass="font-outfit" />
544574
</div>
545575
</Section>
546576

@@ -551,11 +581,11 @@ const SettingsPage = () => {
551581
</p>
552582

553583
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
554-
<CustomToggle id="dnd-lightning" label="Lightning Strikes" checked={isLightningEnabled} onChange={toggleLightning} />
555-
<CustomToggle id="dnd-loot" label="Loot Discovery" checked={isLootDiscoveryEnabled} onChange={toggleLootDiscovery} />
556-
<CustomToggle id="dnd-fire-overlay" label="Fire Overlay" checked={isFireOverlayEnabled} onChange={toggleFireOverlay} />
557-
<CustomToggle id="dnd-fire-particles" label="Fire Particles" checked={isFireParticlesEnabled} onChange={toggleFireParticles} />
558-
<CustomToggle id="dnd-frame" label="Viewport Frame" checked={isViewportFrameEnabled} onChange={toggleViewportFrame} />
584+
<CustomToggle id="dnd-lightning" label="Lightning Strikes" checked={isLightningEnabled} onChange={toggleLightning} fontClass="font-outfit" />
585+
<CustomToggle id="dnd-loot" label="Loot Discovery" checked={isLootDiscoveryEnabled} onChange={toggleLootDiscovery} fontClass="font-outfit" />
586+
<CustomToggle id="dnd-fire-overlay" label="Fire Overlay" checked={isFireOverlayEnabled} onChange={toggleFireOverlay} fontClass="font-outfit" />
587+
<CustomToggle id="dnd-fire-particles" label="Fire Particles" checked={isFireParticlesEnabled} onChange={toggleFireParticles} fontClass="font-outfit" />
588+
<CustomToggle id="dnd-frame" label="Viewport Frame" checked={isViewportFrameEnabled} onChange={toggleViewportFrame} fontClass="font-outfit" />
559589
</div>
560590
</Section>
561591

@@ -673,7 +703,7 @@ const SettingsPage = () => {
673703
<WarningIcon size={32} weight="bold" />
674704
</div>
675705
<div className="flex-1 text-center md:text-left">
676-
<h3 className="text-2xl font-black text-white uppercase tracking-tighter mb-2">
706+
<h3 className="text-2xl text-white uppercase tracking-tighter mb-2">
677707
Factory Reset
678708
</h3>
679709
<p className="text-gray-400 font-light max-w-xl">
@@ -683,7 +713,7 @@ const SettingsPage = () => {
683713
</div>
684714
<button
685715
onClick={handleClearStorage}
686-
className="w-full md:w-auto px-8 py-4 bg-red-500 text-black hover:bg-red-400 transition-colors font-black uppercase tracking-widest text-sm rounded-sm shadow-[0_0_30px_rgba(239,68,68,0.2)]"
716+
className="w-full md:w-auto px-8 py-4 bg-red-500 text-black hover:bg-red-400 transition-colors uppercase tracking-widest text-sm rounded-sm shadow-[0_0_30px_rgba(239,68,68,0.2)]"
687717
>
688718
Reset Everything
689719
</button>

0 commit comments

Comments
 (0)