feat: make roast planner mobile PWA ready

public/index.html

@@ -4,6 +4,12 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Roast Planner</title>
+<meta name="theme-color" content="#A8481A">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="default">
+<link rel="manifest" href="/manifest.webmanifest">
+<link rel="icon" href="/icon.svg" type="image/svg+xml">
+<link rel="apple-touch-icon" href="/icon.svg">
 <link rel="stylesheet" href="/worksheet.css" media="print">
 <link rel="stylesheet" href="/app.css">
 </head>
@@ -41,6 +47,7 @@
   </div>
 </header>
 
+<div class="connection-status hidden" id="connection-status" role="status" aria-live="polite"></div>
 <div class="drawer-overlay hidden" id="drawer-overlay"></div>
 
 <aside class="drawer hidden" id="panel-prefill" aria-hidden="true">