add native app

app/views/shared/_flash.html.erb

@@ -1,17 +1,21 @@
-<div id="flash" class="absolute top-0 w-full h-0 z-20">
-  <div class="max-w-xl mx-auto mt-1.5">
-    <div class="px-4 py-3 rounded-2xl bg-base-200 flex items-center justify-between mx-4 md:mx-0">
-      <div class="flex items-center space-x-3">
-        <% if flash[:notice] %>
-          <%= svg_icon('info_circle', class: 'stroke-info flex-none w-6 h-6') %>
-        <% else %>
-          <%= svg_icon('exclamation_circle', class: 'stroke-error flex-none w-6 h-6') %>
-        <% end %>
-        <div>
-          <span><%= flash[:notice] || flash[:alert] %></span>
+<% if turbo_native_app? %>
+  <div id="native_flash" hidden data-notice="<%= flash[:notice] %>" data-alert="<%= flash[:alert] %>"></div>
+<% else %>
+  <div id="flash" class="absolute top-0 w-full h-0 z-20">
+    <div class="max-w-xl mx-auto mt-1.5">
+      <div class="px-4 py-3 rounded-2xl bg-base-200 flex items-center justify-between mx-4 md:mx-0">
+        <div class="flex items-center space-x-3">
+          <% if flash[:notice] %>
+            <%= svg_icon('info_circle', class: 'stroke-info flex-none w-6 h-6') %>
+          <% else %>
+            <%= svg_icon('exclamation_circle', class: 'stroke-error flex-none w-6 h-6') %>
+          <% end %>
+          <div>
+            <span><%= flash[:notice] || flash[:alert] %></span>
+          </div>
         </div>
+        <remove-on-event data-event-type="click" data-selector-id="flash" class="mr-1 cursor-pointer">&times;</remove-on-event>
       </div>
-      <remove-on-event data-event-type="click" data-selector-id="flash" class="mr-1 cursor-pointer">&times;</remove-on-event>
     </div>
   </div>
-</div>
+<% end %>

app/views/shared/_settings_nav.html.erb

@@ -1,6 +1,6 @@
 <% expanded = local_assigns[:expanded] %>
 <div class="<%= expanded ? 'block -mx-3 md:mx-0' : 'w-full md:w-52 flex-none' %>">
-  <% unless expanded %>
+  <% unless expanded || turbo_native_app? %>
     <div class="md:hidden w-full">
       <a href="<%= settings_path %>" class="flex items-center space-x-0.5 font-medium">
         <%= svg_icon('arrow_left', class: 'w-4 h-4 stroke-2') %>
@@ -11,7 +11,7 @@
   <div class="<%= 'hidden md:block' unless expanded %>">
     <menu-active>
       <ul id="account_settings_menu" class="menu px-0">
-        <% unless expanded %>
+        <% unless expanded || turbo_native_app? %>
           <li class="menu-title py-0 !bg-transparent mb-3 -mt-5">
             <a href="<%= root_path %>" class="!bg-transparent !text-neutral font-medium flex items-center space-x-0.5">
               <%= svg_icon('arrow_left', class: 'w-4 h-4 stroke-2') %>

app/views/shared/_turbo_drawer.html.erb

@@ -1,23 +1,32 @@
-<% offset = local_assigns[:title] ? '45px' : '0px' %>
-<turbo-frame id="drawer">
-  <turbo-modal class="modal modal-open items-start !animate-none justify-end overflow-y-auto !justify-normal md:!justify-end" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
-    <div class="absolute top-0 bottom-0 right-0 left-0" data-action="click:turbo-modal#close"></div>
-    <div class="bg-base-100 min-h-screen max-h-screen relative w-full min-w-0">
-      <% if local_assigns[:title] %>
-        <div class="flex justify-between bg-base-100 py-2 px-4 items-center border-b pb-2 font-medium">
-          <span>
-            <%= local_assigns[:title] %>
-          </span>
-          <a href="#" class="text-xl" data-action="click:turbo-modal#close">&times;</a>
-        </div>
-      <% else %>
-        <span data-action="click:turbo-modal#close" class="absolute btn border border-base-100 bg-base-100 hover:bg-base-300 hover:border-base-300 btn-primary !text-base btn-sm btn-circle" style="left: -40px; top: 6px">
-          &times;
-        </span>
-      <% end %>
-      <div class="md:w-[620px] overflow-y-auto" style="max-height: calc(100vh - <%= offset %>); max-height: calc(100dvh - <%= offset %>)">
-        <%= yield %>
-      </div>
+<% if turbo_native_app? && !turbo_frame_request? %>
+  <% content_for(:html_title, local_assigns[:title]) if local_assigns[:title] %>
+  <turbo-frame id="drawer">
+    <div class="w-full">
+      <%= yield %>
     </div>
-  </turbo-modal>
-</turbo-frame>
+  </turbo-frame>
+<% else %>
+  <% offset = local_assigns[:title] ? '45px' : '0px' %>
+  <turbo-frame id="drawer">
+    <turbo-modal class="modal modal-open items-start !animate-none justify-end overflow-y-auto !justify-normal md:!justify-end" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
+      <div class="absolute top-0 bottom-0 right-0 left-0" data-action="click:turbo-modal#close"></div>
+      <div class="bg-base-100 min-h-screen max-h-screen relative w-full min-w-0">
+        <% if local_assigns[:title] %>
+          <div class="flex justify-between bg-base-100 py-2 px-4 items-center border-b pb-2 font-medium">
+            <span>
+              <%= local_assigns[:title] %>
+            </span>
+            <a href="#" class="text-xl" data-action="click:turbo-modal#close">&times;</a>
+          </div>
+        <% else %>
+          <span data-action="click:turbo-modal#close" class="absolute btn border border-base-100 bg-base-100 hover:bg-base-300 hover:border-base-300 btn-primary !text-base btn-sm btn-circle" style="left: -40px; top: 6px">
+            &times;
+          </span>
+        <% end %>
+        <div class="md:w-[620px] overflow-y-auto" style="max-height: calc(100vh - <%= offset %>); max-height: calc(100dvh - <%= offset %>)">
+          <%= yield %>
+        </div>
+      </div>
+    </turbo-modal>
+  </turbo-frame>
+<% end %>

app/views/shared/_turbo_modal.html.erb

@@ -1,18 +1,27 @@
-<turbo-frame id="modal">
-  <turbo-modal class="modal modal-open items-start !animate-none overflow-y-auto" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
-    <div class="absolute top-0 bottom-0 right-0 left-0" data-action="click:turbo-modal#close"></div>
-    <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none">
-      <% if local_assigns[:title] %>
-        <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
-          <span>
-            <%= local_assigns[:title] %>
-          </span>
-          <a href="#" class="text-xl" data-action="click:turbo-modal#close">&times;</a>
-        </div>
-      <% end %>
-      <div>
-        <%= yield %>
-      </div>
+<% if turbo_native_app? && !turbo_frame_request? %>
+  <% content_for(:html_title, local_assigns[:title]) if local_assigns[:title] %>
+  <turbo-frame id="modal">
+    <div class="max-w-lg mx-auto px-4 pb-6">
+      <%= yield %>
     </div>
-  </turbo-modal>
-</turbo-frame>
+  </turbo-frame>
+<% else %>
+  <turbo-frame id="modal">
+    <turbo-modal class="modal modal-open items-start !animate-none overflow-y-auto" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
+      <div class="absolute top-0 bottom-0 right-0 left-0" data-action="click:turbo-modal#close"></div>
+      <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none">
+        <% if local_assigns[:title] %>
+          <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
+            <span>
+              <%= local_assigns[:title] %>
+            </span>
+            <a href="#" class="text-xl" data-action="click:turbo-modal#close">&times;</a>
+          </div>
+        <% end %>
+        <div>
+          <%= yield %>
+        </div>
+      </div>
+    </turbo-modal>
+  </turbo-frame>
+<% end %>

app/views/shared/_turbo_modal_large.html.erb

@@ -17,6 +17,11 @@
       </div>
     </turbo-modal>
   </turbo-frame>
+<% elsif turbo_native_app? %>
+  <% content_for(:html_title, local_assigns[:title]) if local_assigns[:title] %>
+  <div class="w-full">
+    <%= yield %>
+  </div>
 <% else %>
   <% if local_assigns[:title] %>
     <div class="sticky top-0 z-10 flex justify-between bg-base-100 py-2 px-5 items-center border-b pb-2 font-medium">