Make some basic cleanup

app/root.tsx

@@ -37,6 +37,35 @@ export function Layout({ children }: { children: React.ReactNode }) {
 					name="viewport"
 					content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover"
 				/>
+				<link
+					rel="manifest"
+					href="/webmanifest.json"
+					crossOrigin="use-credentials"
+				/>
+				<meta
+					name="apple-mobile-web-app-status-bar-style"
+					content="black-translucent"
+				/>
+				<link
+					rel="apple-touch-icon"
+					sizes="180x180"
+					href="/apple-touch-icon.png"
+				/>
+				<link
+					rel="icon"
+					type="image/png"
+					sizes="32x32"
+					href="/favicon-32x32.png"
+				/>
+				<link
+					rel="icon"
+					type="image/png"
+					sizes="16x16"
+					href="/favicon-16x16.png"
+				/>
+				<meta name="disabled-adaptations" content="watch" />
+				<meta name="format-detection" content="telephone=no" />
+				<meta name="msapplication-tap-highlight" content="no" />
 				<Meta />
 				<Links />
 			</head>

app/shared/controls.tsx

@@ -170,7 +170,7 @@ export const Controls = observer(() => {
 							/>
 
 							<NumberInput
-								widthClass="w-20"
+								className="w-20"
 								padWidth={3}
 								value={() => getTimeElapsedAsDuration().milliseconds}
 								suffix="ms"

app/shared/subtitle.tsx

@@ -1,12 +1,11 @@
-import clsx from 'clsx'
 import { getTextSize, getTimeElapsed, nodeIsActive, type Entry } from './utils'
 import { observer } from 'mobx-react-lite'
 
 export const Subtitle = observer((props: { node: Entry }) => {
 	// TODO: decide active node more efficiently
 	return (
 		<div
-			className={clsx(
+			className={cn(
 				`text-white`,
 				getTextSize(),
 				nodeIsActive(props.node, getTimeElapsed()) && 'font-bold',

app/shared/text-input.tsx

@@ -1,4 +1,3 @@
-import clsx from 'clsx'
 import { isNil, times } from 'lodash-es'
 import { observer } from 'mobx-react-lite'
 
@@ -8,7 +7,7 @@ export const NumberInput = observer(
 		onChange?: (value: number) => unknown
 		suffix?: string
 		padWidth?: number
-		widthClass?: string
+		className?: string
 	}) => {
 		const [mode, setMode] = useSignal('view')
 
@@ -21,9 +20,6 @@ export const NumberInput = observer(
 					? String(resolved)
 					: ''
 
-		// TODO: use the tailwind class merger
-		const widthClass = () => props.widthClass ?? 'w-10'
-
 		function commit(el: HTMLInputElement) {
 			// compare the normalized values
 			// to see if anything changed
@@ -53,9 +49,10 @@ export const NumberInput = observer(
 					defaultValue={value()}
 					type="text"
 					inputMode="numeric"
-					className={clsx(
+					className={cn(
 						`form-input h-10 px-0 py-1 text-center tabular-nums`,
-						widthClass(),
+						'w-10',
+						props.className,
 					)}
 					onKeyDown={(event) => {
 						if (event.key === 'Enter' || event.key === 'Escape') {
@@ -70,9 +67,10 @@ export const NumberInput = observer(
 		} else if (mode() === 'view') {
 			return (
 				<button
-					className={clsx(
+					className={cn(
 						'h-10 px-0 py-1 text-center tabular-nums text-gray-200 hover:text-white active:text-white',
-						widthClass(),
+						'w-10',
+						props.className,
 					)}
 					// classList={{
 					//   [widthClass]: true,

app/shared/utils.ts

@@ -4,6 +4,12 @@ import { findLast, once } from 'lodash-es'
 import { parse } from '@plussub/srt-vtt-parser'
 import { nanoid } from 'nanoid'
 import { Duration } from 'luxon'
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs))
+}
 
 export interface Entry {
 	id: string

auto-imports.d.ts

@@ -26,6 +26,7 @@ declare global {
   const ValueWithPlaceholder: typeof import('./app/shared/text-input')['ValueWithPlaceholder']
   const addFileToDatabase: typeof import('./app/shared/utils')['addFileToDatabase']
   const clock: typeof import('./app/shared/utils')['clock']
+  const cn: typeof import('./app/shared/utils')['cn']
   const createRef: typeof import('react')['createRef']
   const forwardRef: typeof import('react')['forwardRef']
   const getActiveNodes: typeof import('./app/shared/utils')['getActiveNodes']

package.json

@@ -30,6 +30,7 @@
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-router": "7.1.1",
+    "tailwind-merge": "2.6.0",
     "video-name-parser": "1.4.7"
   },
   "devDependencies": {

public/webmanifest.json

@@ -0,0 +1,21 @@
+{
+	"short_name": "Subtitle",
+	"name": "Subtitle App",
+	"start_url": "/",
+	"background_color": "#000000",
+	"display": "standalone",
+	"scope": "/",
+	"theme_color": "#000000",
+	"icons": [
+		{
+			"src": "/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/android-chrome-512x512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	]
+}