jeet/grateful-journal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add to homescreen feature

Browse Source
This commit is contained in:
Jeet Debnath
2026-03-31 11:05:26 +05:30
parent a1dd555c96
commit de7ce040c8
6 changed files with 254 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/pages/SettingsPage.tsx
View File

@@ -6,6 +6,7 @@ import { useNavigate } from 'react-router-dom'
import BottomNav from '../components/BottomNav'
import { useOnboardingTour, hasPendingTourStep, clearPendingTourStep } from '../hooks/useOnboardingTour'
import { PageLoader } from '../components/PageLoader'
import { usePWAInstall } from '../hooks/usePWAInstall'
const MAX_PHOTO_SIZE = 200 // px — resize to 200x200
@@ -51,6 +52,8 @@ export default function SettingsPage() {
const { continueTourOnSettings } = useOnboardingTour()
const navigate = useNavigate()
const fileInputRef = useRef<HTMLInputElement>(null)
const { canInstall, isIOS, isInstalled, triggerInstall } = usePWAInstall()
const [showIOSModal, setShowIOSModal] = useState(false)
// Edit profile modal state
const [showEditModal, setShowEditModal] = useState(false)
@@ -282,6 +285,34 @@ export default function SettingsPage() {
</div>
</section>
{/* App */}
{!isInstalled && (isIOS || canInstall) && (
<section className="settings-section">
<h3 className="settings-section-title">APP</h3>
<div className="settings-card">
<button
type="button"
className="settings-item settings-item-button"
onClick={() => isIOS ? setShowIOSModal(true) : triggerInstall()}
>
<div className="settings-item-icon settings-item-icon-purple">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
<line x1="12" y1="18" x2="12.01" y2="18" />
</svg>
</div>
<div className="settings-item-content">
<h4 className="settings-item-title">Add to Home Screen</h4>
<p className="settings-item-subtitle">Open as an app, no browser bar</p>
</div>
<svg className="settings-item-arrow" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<polyline points="9 18 15 12 9 6" />
</svg>
</button>
</div>
</section>
)}
{/* Data & Look */}
<section className="settings-section">
<h3 className="settings-section-title">DATA & LOOK</h3>
@@ -495,6 +526,55 @@ export default function SettingsPage() {
</div>
)}
{/* iOS "Add to Home Screen" instructions modal */}
{showIOSModal && (
<div className="confirm-modal-overlay" onClick={() => setShowIOSModal(false)}>
<div className="confirm-modal ios-install-modal" onClick={(e) => e.stopPropagation()}>
<div className="ios-install-icon">🌱</div>
<h3 className="confirm-modal-title">Add to Home Screen</h3>
<p className="ios-install-subtitle">Follow these steps in Safari:</p>
<ol className="ios-install-steps">
<li>
<span className="ios-install-step-icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
<polyline points="16 6 12 2 8 6" />
<line x1="12" y1="2" x2="12" y2="15" />
</svg>
</span>
Tap the <strong>Share</strong> button at the bottom of Safari
</li>
<li>
<span className="ios-install-step-icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" />
<line x1="12" y1="8" x2="12" y2="16" />
<line x1="8" y1="12" x2="16" y2="12" />
</svg>
</span>
Scroll down and tap <strong>Add to Home Screen</strong>
</li>
<li>
<span className="ios-install-step-icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<polyline points="20 6 9 17 4 12" />
</svg>
</span>
Tap <strong>Add</strong> to confirm
</li>
</ol>
<button
type="button"
className="edit-modal-save"
style={{ width: '100%', marginTop: '1rem' }}
onClick={() => setShowIOSModal(false)}
>
Got it
</button>
</div>
</div>
)}
<BottomNav />
</div>
)