Update PWA styling with dark theme and mobile safe-area support

.gitattributes

@@ -7,3 +7,8 @@ db/schema.rb linguist-generated
 vendor/* linguist-vendored
 config/credentials/*.yml.enc diff=rails_credentials
 config/credentials.yml.enc diff=rails_credentials
+
+# Ensure consistent line endings for scripts and Ruby files to avoid shebang issues on Unix
+bin/* text eol=lf
+*.sh text eol=lf
+*.rb text eol=lf

app/components/DS/dialog.html.erb

@@ -26,7 +26,7 @@
         </div>
 
         <% if actions? %>
-          <div class="flex items-center gap-2 justify-end p-4">
+          <div class="flex items-center gap-2 justify-end p-4 pb-[calc(1rem+env(safe-area-inset-bottom))]">
             <% actions.each do |action| %>
               <%= action %>
             <% end %>

app/components/DS/dialog.rb

@@ -90,7 +90,7 @@ def dialog_inner_classes
     end
 
     class_names(
-      "flex flex-col bg-container rounded-xl shadow-border-xs mx-3 lg:mx-0 w-full overflow-hidden",
+      "flex flex-col bg-container rounded-xl shadow-border-xs mx-3 lg:mx-0 w-full overflow-hidden pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]",
       variant_classes
     )
   end

app/views/layouts/application.html.erb

@@ -112,7 +112,8 @@
     <% end %>
 
     <%# SHARED - Main content %>
-    <%= tag.main class: class_names("grow overflow-y-auto px-3 lg:px-10 py-4 w-full mx-auto max-w-5xl"), data: { app_layout_target: "content" } do %>
+  <%# Add bottom padding to account for fixed mobile nav + safe area inset %>
+  <%= tag.main class: class_names("grow overflow-y-auto px-3 lg:px-10 py-4 pb-[calc(3.75rem+env(safe-area-inset-bottom))] w-full mx-auto max-w-5xl"), data: { app_layout_target: "content" } do %>
       <div class="hidden lg:flex gap-2 items-center justify-between mb-6">
         <div class="flex items-center gap-2">
           <%= icon("panel-left", as_button: true, data: { action: "app-layout#toggleLeftSidebar" }) %>
@@ -157,7 +158,7 @@
     <% end %>
 
     <%# MOBILE - Bottom Nav %>
-    <%= tag.nav class: "lg:hidden bg-surface shrink-0 z-10 pb-[env(safe-area-inset-bottom)] border-t border-tertiary flex justify-around" do %>
+    <%= tag.nav class: "lg:hidden bg-surface fixed bottom-0 left-0 w-full shrink-0 z-10 pb-[env(safe-area-inset-bottom)] border-t border-tertiary flex justify-around" do %>
       <% mobile_nav_items.each do |nav_item| %>
         <%= render "layouts/shared/nav_item", **nav_item %>
       <% end %>

app/views/layouts/shared/_head.html.erb

@@ -19,13 +19,18 @@
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <meta name="apple-mobile-web-app-title" content="<%= product_name %>">
+  <meta name="color-scheme" content="dark light">
 
-  <meta name="msapplication-TileColor" content="#F9F9F9">
-  <meta name="theme-color" content="#F9F9F9">
+  <%# Use a dark surface color so iOS PWA chrome matches the app theme %>
+  <meta name="msapplication-TileColor" content="#0B0B0B">
+  <meta name="theme-color" content="#0B0B0B">
 
   <link rel="manifest" href="<%= pwa_manifest_path %>">
-  <link rel="apple-touch-icon" href="/logo-pwa.png">
+  <%# Provide multiple iOS icons (standard 180x180 and larger) %>
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
   <link rel="apple-touch-icon" sizes="512x512" href="/logo-pwa.png">
+  <link rel="icon" sizes="192x192" type="image/png" href="/android-chrome-192x192.png">
 
   <% if Rails.env.production? && (posthog_config = Rails.configuration.x.posthog).try(:api_key).present? %>
     <%= render "shared/posthog", posthog_api_key: posthog_config.api_key, posthog_host: posthog_config.host %>

app/views/layouts/shared/_htmldoc.html.erb

@@ -7,13 +7,13 @@
   data-theme="<%= theme %>"
   data-controller="theme"
   data-theme-user-preference-value="<%= Current.user&.theme || "system" %>"
-  class="h-full text-primary overflow-hidden font-sans <%= @os %>">
+  class="h-dvh text-primary overflow-hidden font-sans bg-surface <%= @os %>">
   <head>
     <%= render "layouts/shared/head" %>
     <%= yield :head %>
   </head>
 
-  <body class="h-full overflow-hidden antialiased">
+  <body class="h-dvh overflow-hidden antialiased bg-surface">
     <% if Rails.env.development? %>
       <button hidden data-controller="hotkey" data-hotkey="t t /" data-action="theme#toggle"></button>
     <% end %>

app/views/pwa/manifest.json.erb

@@ -19,6 +19,6 @@
   "display_override": ["fullscreen", "minimal-ui"],
   "scope": "/",
   "description": "<%= j product_name %> is your personal finance assistant.",
-  "theme_color": "#F9F9F9",
-  "background_color": "#F9F9F9"
+  "theme_color": "#0B0B0B",
+  "background_color": "#0B0B0B"
 }

bin/dev

@@ -3,7 +3,7 @@
 if ! gem list foreman -i --silent; then
   echo "Installing foreman..."
   gem install foreman
-  
+
   # Add rehash for rbenv users
   if command -v rbenv > /dev/null; then
     echo "Running rbenv rehash..."

public/site.webmanifest

@@ -1,6 +1,8 @@
 {
-    "name": "",
-    "short_name": "",
+    "name": "Sure",
+    "short_name": "Sure",
+    "start_url": "/",
+    "scope": "/",
     "icons": [
         {
             "src": "/android-chrome-192x192.png",
@@ -13,7 +15,8 @@
             "type": "image/png"
         }
     ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
-    "display": "fullscreen"
+    "theme_color": "#0B0B0B",
+    "background_color": "#0B0B0B",
+    "display": "fullscreen",
+    "orientation": "portrait-primary"
 }