Add about page

TODO.md

@@ -16,3 +16,5 @@
   - like +10s -10s
   - or a dial
   - or tapping text in the transcript view
+- fix darkmode
+  - the number inputs seem to have white text in white bg in dark mode

app/routes/_index.tsx

@@ -195,6 +195,12 @@ const EditFilesPage = () => {
 					}}
 				</For>
 			</List>
+
+			<Block className="px-4 mt-4 text-center">
+				<RouterLink to="/about" className="text-sm text-blue-600">
+					About this app
+				</RouterLink>
+			</Block>
 		</>
 	)
 }

app/routes/about.tsx

@@ -0,0 +1,56 @@
+import {
+	Block,
+	Navbar,
+	NavbarBackLink,
+	Page,
+	List,
+	ListItem,
+} from 'konsta/react'
+import type { Route } from './+types/_index'
+import { useNavigate } from 'react-router'
+
+export function meta({}: Route.MetaArgs) {
+	return [{ title: 'About - Subtitle App' }]
+}
+
+export default function About({}: Route.ComponentProps) {
+	let navigate = useNavigate()
+
+	return (
+		<Page>
+			<Navbar
+				title="About"
+				large
+				transparent
+				centerTitle
+				left={<NavbarBackLink text="Back" onClick={() => navigate(-1)} />}
+			/>
+			<Block className="px-4">
+				<p className="text-sm text-gray-600">
+					Subtitle App by{' '}
+					<a href="https://github.com/patdx" target="_blank" rel="noreferrer">
+						patdx
+					</a>
+					.
+				</p>
+			</Block>
+
+			<List strongIos outlineIos>
+				<ListItem
+					link
+					title="Visit patdx on GitHub"
+					href="https://github.com/patdx"
+					target="_blank"
+					rel="noreferrer"
+				/>
+				<ListItem
+					link
+					title="View the Subtitle App repository"
+					href="https://github.com/patdx/subtitle-app"
+					target="_blank"
+					rel="noreferrer"
+				/>
+			</List>
+		</Page>
+	)
+}