Refactor code structure for improved readability and maintainability

2025-12-21 07:29:48 +01:00
parent 4ffbcef877
commit 3ffca8f333
10 changed files with 47 additions and 6 deletions
@@ -3,7 +3,19 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Medassist</title>
+    <title>MedAssist</title>
+    
+    <!-- Favicons -->
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    
+    <!-- Theme color -->
+    <meta name="theme-color" content="#0f172a" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  </head>
  <body>
    <div id="root"></div>
@@ -0,0 +1,21 @@
+{
+  "name": "MedAssist",
+  "short_name": "MedAssist",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
@@ -507,10 +507,13 @@ export default function App() {
 	return (
 		<main className="page">
 			<header className="hero">
+				<div className="hero-title">
+					<img src="/favicon.svg" alt="MedAssist" className="hero-logo" />
 					<div>
 						<p className="eyebrow">{pageInfo.eyebrow}</p>
 						<h1>{pageInfo.title}</h1>
 					</div>
+				</div>
 				<div className="header-actions">
 					<div className="tabs">
 						<button className={currentPath === "/dashboard" || currentPath === "/" ? "pill primary" : "pill"} onClick={() => navigate("/dashboard")}>Dashboard</button>
@@ -1405,7 +1408,7 @@ function getReminderStatusText(reminderDaysBefore: number, lowStock: Coverage[],
 			return (
 				<>
 					<strong className="warning-text">⚠ {medsNeedingReminder.length} med{medsNeedingReminder.length > 1 ? "s" : ""} need reorder</strong>
-					{" · "}Last email: {formatLastSent(lastSent)}
+					{" · "}Last reminder: {formatLastSent(lastSent)}
 				</>
 			);
 		}
@@ -1435,7 +1438,7 @@ function getReminderStatusText(reminderDaysBefore: number, lowStock: Coverage[],
 		return (
 			<>
 				<span className="success-text">✓ All stock OK</span>
-				{" · "}Last email: {formatLastSent(lastSent)}
+				{" · "}Last reminder: {formatLastSent(lastSent)}
 			</>
 		);
 	}
@@ -111,6 +111,8 @@ body {
 [data-theme="light"] .icon-btn:hover { background: rgba(0, 0, 0, 0.08); }
 [data-theme="light"] .icon-btn.active { background: rgba(47, 134, 246, 0.12); }

+.hero-title { display: flex; align-items: center; gap: 1rem; }
+.hero-logo { width: 48px; height: 48px; }
 .hero h1 { margin: 0.15rem 0 0; font-size: 1.6rem; font-weight: 600; }
 .sub { color: var(--text-secondary); margin: 0; }
 .eyebrow { letter-spacing: 0.06em; text-transform: uppercase; color: #7ca7ff; font-size: 0.75rem; margin: 0; font-weight: 500; }