syntaxbullet/minabot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move app installation to a prominent header button

Browse Source
This commit is contained in:
syntaxbullet
2026-10-25 14:43:55 +01:00
parent 61001188b7
commit 7be401d105
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/PwaControls.tsx
View File

@@ -1,4 +1,5 @@
import { useState } from "react"; import { useState } from "react";
import { Download } from "lucide-react";
import { applyUpdate, installApp, useOnline, usePwa } from "../pwa/client"; import { applyUpdate, installApp, useOnline, usePwa } from "../pwa/client";
import { Button } from "./design-system/primitives"; import { Button } from "./design-system/primitives";
import { Modal } from "./design-system/Modal"; import { Modal } from "./design-system/Modal";
@@ -8,7 +9,7 @@ export function InstallApp() {
const [help, setHelp] = useState(false); const [help, setHelp] = useState(false);
if (!enabled || installed) return null; if (!enabled || installed) return null;
return <> return <>
<Button variant="text" onClick={() => { if (installPrompt) void installApp(); else setHelp(true); }}>Install app</Button> <Button variant="primary" onClick={() => { if (installPrompt) void installApp(); else setHelp(true); }}><Download size={16} aria-hidden="true" />Install app</Button>
{help && <Modal id="install-app" size="compact" title="Install app" onClose={() => setHelp(false)}> {help && <Modal id="install-app" size="compact" title="Install app" onClose={() => setHelp(false)}>
<div className="ds-form-stack"> <div className="ds-form-stack">
<p><strong>iPhone or iPad:</strong> open the Share menu, then choose Add to Home Screen.</p> <p><strong>iPhone or iPad:</strong> open the Share menu, then choose Add to Home Screen.</p>

3
src/components/design-system/PageLayout.tsx
View File

@@ -32,14 +32,13 @@ export function PageLayout({
<Link className="ds-wordmark" to={wordmarkTo}> <Link className="ds-wordmark" to={wordmarkTo}>
Mina Habits<span aria-hidden="true">.</span> Mina Habits<span aria-hidden="true">.</span>
</Link> </Link>
<div className="ds-header-actions">{header}<ThemeControl /></div> <div className="ds-header-actions">{header}<InstallApp /><ThemeControl /></div>
</header> </header>
<main id={mainId} className="ds-main" tabIndex={-1}> <main id={mainId} className="ds-main" tabIndex={-1}>
<PwaStatus /> <PwaStatus />
{children} {children}
<footer className="ds-footer"> <footer className="ds-footer">
<span className="ds-wordmark">Mina Habits.</span> <span className="ds-wordmark">Mina Habits.</span>
<InstallApp />
<Button <Button
variant="text" variant="text"
onClick={() => window.scrollTo({ top: 0, behavior: "instant" })} onClick={() => window.scrollTo({ top: 0, behavior: "instant" })}