averyfelts/Stop_smoking_website_ver2
1
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Restore missing buttons by refining UI state logic

Browse Source
This commit is contained in:
Avery Felts 2026-01-31 18:31:37 -07:00
parent af6ac933ee
commit 2e06aa833a
1 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/Dashboard.tsx
View File

@ -51,7 +51,6 @@ export function Dashboard({ user }: DashboardProps) {
const [achievements, setAchievements] = useState<Achievement[]>([]); const [achievements, setAchievements] = useState<Achievement[]>([]);
const [savingsConfig, setSavingsConfig] = useState<SavingsConfig | null>(null); const [savingsConfig, setSavingsConfig] = useState<SavingsConfig | null>(null);
const [showSetup, setShowSetup] = useState(false); const [showSetup, setShowSetup] = useState(false);
const [showUsagePrompt, setShowUsagePrompt] = useState(false);
const [showCelebration, setShowCelebration] = useState(false); const [showCelebration, setShowCelebration] = useState(false);
const [isSubstancePickerOpen, setIsSubstancePickerOpen] = useState(false); const [isSubstancePickerOpen, setIsSubstancePickerOpen] = useState(false);
const [activeLoggingSubstance, setActiveLoggingSubstance] = useState<'nicotine' | 'weed' | null>(null); const [activeLoggingSubstance, setActiveLoggingSubstance] = useState<'nicotine' | 'weed' | null>(null);
@ -63,7 +62,8 @@ export function Dashboard({ user }: DashboardProps) {
const swipeContainerRef = useRef<HTMLDivElement>(null); const swipeContainerRef = useRef<HTMLDivElement>(null);
const { theme } = useTheme(); const { theme } = useTheme();
const isAnyModalOpen = modalOpenCount > 0 || showUsagePrompt || showSetup || showCelebration; const isModalOpen = modalOpenCount > 0 || showSetup || showCelebration;
const isNavHidden = isModalOpen || isSubstancePickerOpen || !!activeLoggingSubstance;
const handleModalStateChange = useCallback((isOpen: boolean) => { const handleModalStateChange = useCallback((isOpen: boolean) => {
setModalOpenCount(prev => isOpen ? prev + 1 : Math.max(0, prev - 1)); setModalOpenCount(prev => isOpen ? prev + 1 : Math.max(0, prev - 1));
@ -165,11 +165,11 @@ export function Dashboard({ user }: DashboardProps) {
const isStandalone = window.matchMedia('(display-mode: standalone)').matches || const isStandalone = window.matchMedia('(display-mode: standalone)').matches ||
(window.navigator as Navigator & { standalone?: boolean }).standalone === true; (window.navigator as Navigator & { standalone?: boolean }).standalone === true;
// Always show usage prompt when accessed as PWA shortcut // Always show substance picker when accessed as PWA shortcut
if (isStandalone) { if (isStandalone) {
setShowUsagePrompt(true); setIsSubstancePickerOpen(true);
} else if (shouldShowUsagePrompt()) { } else if (shouldShowUsagePrompt()) {
setShowUsagePrompt(true); setIsSubstancePickerOpen(true);
markPromptShown(); markPromptShown();
} }
} }
@ -195,13 +195,14 @@ export function Dashboard({ user }: DashboardProps) {
await savePreferencesAsync(newPrefs); await savePreferencesAsync(newPrefs);
setPreferences(newPrefs); setPreferences(newPrefs);
setShowSetup(false); setShowSetup(false);
setShowUsagePrompt(true); setIsSubstancePickerOpen(true);
setRefreshKey(prev => prev + 1); setRefreshKey(prev => prev + 1);
}; };
const handleUsageSubmit = async (count: number, substance: 'nicotine' | 'weed') => { const handleUsageSubmit = async (count: number, substance: 'nicotine' | 'weed') => {
if (!preferences) { if (!preferences) {
setShowUsagePrompt(false); setIsSubstancePickerOpen(false);
setActiveLoggingSubstance(null);
return; return;
} }
@ -226,7 +227,6 @@ export function Dashboard({ user }: DashboardProps) {
setPreferences(latestPrefs); setPreferences(latestPrefs);
} }
setShowUsagePrompt(false);
setActiveLoggingSubstance(null); setActiveLoggingSubstance(null);
setIsSubstancePickerOpen(false); setIsSubstancePickerOpen(false);
// Reload data and force calendar refresh // Reload data and force calendar refresh
@ -306,7 +306,7 @@ export function Dashboard({ user }: DashboardProps) {
{preferences && ( {preferences && (
<> <>
{/* Floating Log Button - Simplified to toggle Picker */} {/* Floating Log Button - Simplified to toggle Picker */}
<div className={`fixed bottom-6 right-6 z-40 transition-all duration-300 ${isAnyModalOpen ? 'opacity-0 scale-90 pointer-events-none' : 'opacity-100 scale-100'} sm:block`}> <div className={`fixed bottom-6 right-6 z-40 transition-all duration-300 ${isModalOpen ? 'opacity-0 scale-90 pointer-events-none' : 'opacity-100 scale-100'} sm:block`}>
<Button <Button
size="lg" size="lg"
onClick={() => setIsSubstancePickerOpen(!isSubstancePickerOpen)} onClick={() => setIsSubstancePickerOpen(!isSubstancePickerOpen)}
@ -333,7 +333,7 @@ export function Dashboard({ user }: DashboardProps) {
<div className="space-y-6 sm:space-y-12 relative overflow-hidden"> <div className="space-y-6 sm:space-y-12 relative overflow-hidden">
{/* Mobile Navigation Buttons - LARGE */} {/* Mobile Navigation Buttons - LARGE */}
<div className="sm:hidden"> <div className="sm:hidden">
{currentPage > 0 && !isAnyModalOpen && ( {currentPage > 0 && !isNavHidden && (
<button <button
onClick={() => scrollToPage(currentPage - 1)} onClick={() => scrollToPage(currentPage - 1)}
className="fixed left-3 top-[55%] -translate-y-1/2 z-40 p-5 rounded-full glass border border-white/20 shadow-2xl active:scale-90 transition-all duration-300 group" className="fixed left-3 top-[55%] -translate-y-1/2 z-40 p-5 rounded-full glass border border-white/20 shadow-2xl active:scale-90 transition-all duration-300 group"
@ -346,7 +346,7 @@ export function Dashboard({ user }: DashboardProps) {
<ChevronLeft className="h-8 w-8 text-primary group-hover:scale-110" /> <ChevronLeft className="h-8 w-8 text-primary group-hover:scale-110" />
</button> </button>
)} )}
{currentPage < 3 && !isAnyModalOpen && ( {currentPage < 3 && !isNavHidden && (
<button <button
onClick={() => scrollToPage(currentPage + 1)} onClick={() => scrollToPage(currentPage + 1)}
className="fixed right-3 top-[55%] -translate-y-1/2 z-40 p-5 rounded-full glass border border-white/20 shadow-2xl active:scale-90 transition-all duration-300 group" className="fixed right-3 top-[55%] -translate-y-1/2 z-40 p-5 rounded-full glass border border-white/20 shadow-2xl active:scale-90 transition-all duration-300 group"