Add an About section to the account menu (#51)

Shows the app version, links the AGPL-3.0-or-later license text, and
links the source repo -- AGPL's own suggested-usage text recommends
exactly this ("if your software can interact with users remotely...
its interface could display a 'Source' link"), not just a courtesy
credits screen.

Version comes from package.json at build time via a Vite `define`
(__APP_VERSION__), so it can't drift from what's actually released.
License text is served at /LICENSE via a frontend/public/ symlink to
the repo-root LICENSE, the same pattern already used for the user
guide. Also bumps both package manifests to 1.0.0 ahead of tagging
the first release.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-18 18:59:50 -06:00
co-authored by Claude Sonnet 5
parent 3fdfbd96e2
commit 0a91f4f347
8 changed files with 111 additions and 2 deletions
+56
View File
@@ -0,0 +1,56 @@
import logo from '../assets/logo.png'
import './Modal.css'
import './AboutModal.css'
interface AboutModalProps {
onClose: () => void
}
// AGPL-3.0 itself recommends this: "if your software can interact with
// users remotely through a computer network, you should also make sure
// that it provides a way for users to get its source... its interface
// could display a 'Source' link" -- this modal is that link, not just a
// courtesy credits screen.
const SOURCE_URL = 'https://git.darksingularity.org/DarkSingularity/ds-chat'
export function AboutModal({ onClose }: AboutModalProps) {
return (
<div className="modal-scrim" onClick={onClose}>
<div className="modal about-modal" onClick={(e) => e.stopPropagation()}>
<div className="modal-header">
<h2>About</h2>
<button type="button" className="modal-close" onClick={onClose} aria-label="Close">
&times;
</button>
</div>
<div className="about-modal-brand">
<img src={logo} alt="" className="about-modal-logo" />
<div>
<div className="about-modal-name">DS Chat</div>
<div className="about-modal-version">Version {__APP_VERSION__}</div>
</div>
</div>
<p className="about-modal-line">
Licensed under the{' '}
<a href="/LICENSE" target="_blank" rel="noopener noreferrer">
GNU Affero General Public License v3.0 (or later)
</a>
.
</p>
<p className="about-modal-line">
<a href={SOURCE_URL} target="_blank" rel="noopener noreferrer">
Source code
</a>
</p>
<div className="modal-actions" style={{ marginTop: '1rem' }}>
<button type="button" className="btn-secondary" onClick={onClose}>
Close
</button>
</div>
</div>
</div>
)
}