Wire up standard rails JS

Dockerfile

@@ -28,30 +28,17 @@ ENV RAILS_ENV="production" \
 # Throw-away build stage to reduce size of final image
 FROM base AS build
 
-# Install packages needed to build gems and node modules
+# Install packages needed to build gems
 RUN apt-get update -qq && \
-    apt-get install --no-install-recommends -y build-essential git libpq-dev node-gyp pkg-config python-is-python3 && \
+    apt-get install --no-install-recommends -y build-essential git libpq-dev pkg-config && \
     rm -rf /var/lib/apt/lists /var/cache/apt/archives
 
-# Install JavaScript dependencies
-ARG NODE_VERSION=22.9.0
-ARG YARN_VERSION=1.22.22
-ENV PATH=/usr/local/node/bin:$PATH
-RUN curl -sL https://github.com/nodenv/node-build/archive/master.tar.gz | tar xz -C /tmp/ && \
-    /tmp/node-build-master/bin/node-build "${NODE_VERSION}" /usr/local/node && \
-    npm install -g yarn@$YARN_VERSION && \
-    rm -rf /tmp/node-build-master
-
 # Install application gems
 COPY Gemfile Gemfile.lock ./
 RUN bundle install && \
     rm -rf ~/.bundle/ "${BUNDLE_PATH}"/ruby/*/cache "${BUNDLE_PATH}"/ruby/*/bundler/gems/*/.git && \
     bundle exec bootsnap precompile --gemfile
 
-# Install node modules
-COPY package.json yarn.lock ./
-RUN yarn install --frozen-lockfile
-
 # Copy application code
 COPY . .
 
@@ -62,7 +49,6 @@ RUN bundle exec bootsnap precompile app/ lib/
 RUN SECRET_KEY_BASE_DUMMY=1 ./bin/rails assets:precompile
 
 
-RUN rm -rf node_modules
 
 
 # Final stage for app image

Gemfile

@@ -15,7 +15,7 @@ gem "turbo-rails"
 # Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
 gem "stimulus-rails"
 # Bundle and process CSS [https://github.com/rails/cssbundling-rails]
-gem "cssbundling-rails"
+gem "dartsass-rails"
 # Build JSON APIs with ease [https://github.com/rails/jbuilder]
 gem "jbuilder"
 

Gemfile.lock

@@ -87,8 +87,9 @@ GEM
     concurrent-ruby (1.3.4)
     connection_pool (2.4.1)
     crass (1.0.6)
-    cssbundling-rails (1.4.1)
+    dartsass-rails (0.5.1)
       railties (>= 6.0.0)
+      sass-embedded (~> 1.63)
     date (3.4.1)
     debug (1.10.0)
       irb (~> 1.10)
@@ -111,6 +112,24 @@ GEM
       raabro (~> 1.4)
     globalid (1.2.1)
       activesupport (>= 6.1)
+    google-protobuf (4.29.3)
+      bigdecimal
+      rake (>= 13)
+    google-protobuf (4.29.3-aarch64-linux)
+      bigdecimal
+      rake (>= 13)
+    google-protobuf (4.29.3-arm64-darwin)
+      bigdecimal
+      rake (>= 13)
+    google-protobuf (4.29.3-x86-linux)
+      bigdecimal
+      rake (>= 13)
+    google-protobuf (4.29.3-x86_64-darwin)
+      bigdecimal
+      rake (>= 13)
+    google-protobuf (4.29.3-x86_64-linux)
+      bigdecimal
+      rake (>= 13)
     i18n (1.14.6)
       concurrent-ruby (~> 1.0)
     importmap-rails (2.1.0)
@@ -290,6 +309,19 @@ GEM
       rubocop-performance
       rubocop-rails
     ruby-progressbar (1.13.0)
+    sass-embedded (1.83.4)
+      google-protobuf (~> 4.29)
+      rake (>= 13)
+    sass-embedded (1.83.4-aarch64-linux-gnu)
+      google-protobuf (~> 4.29)
+    sass-embedded (1.83.4-arm-linux-gnueabihf)
+      google-protobuf (~> 4.29)
+    sass-embedded (1.83.4-arm64-darwin)
+      google-protobuf (~> 4.29)
+    sass-embedded (1.83.4-x86_64-darwin)
+      google-protobuf (~> 4.29)
+    sass-embedded (1.83.4-x86_64-linux-gnu)
+      google-protobuf (~> 4.29)
     securerandom (0.4.1)
     shoulda-matchers (6.4.0)
       activesupport (>= 5.2.0)
@@ -363,7 +395,7 @@ DEPENDENCIES
   bcrypt (~> 3.1.7)
   bootsnap
   brakeman
-  cssbundling-rails
+  dartsass-rails
   debug
   factory_bot_rails
   importmap-rails

Procfile.dev

@@ -1,2 +1,2 @@
 web: env RUBY_DEBUG_OPEN=true bin/rails server
-css: yarn watch:css
+css: bin/rails dartsass:watch

app/assets/stylesheets/application.css

@@ -0,0 +1,10 @@
+/*
+ * This is a manifest file that'll be compiled into application.css.
+ *
+ * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
+ * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
+ * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
+ * depending on specificity.
+ *
+ * Consider organizing styles into separate files for maintainability.
+ */

app/assets/stylesheets/application.scss

@@ -0,0 +1 @@
+// Sassy

app/controllers/regions_controller.rb

@@ -27,7 +27,7 @@ def create
 
     respond_to do |format|
       if @region.save
-        format.html { redirect_to @region, notice: "Region was successfully created." }
+        format.html { redirect_to @region, notice: "#{@region.name} Region was successfully added to the system." }
         format.json { render :show, status: :created, location: @region }
       else
         format.html { render :new, status: :unprocessable_entity }
@@ -54,7 +54,7 @@ def destroy
     @region.destroy!
 
     respond_to do |format|
-      format.html { redirect_to regions_path, status: :see_other, notice: "Region was successfully destroyed." }
+      format.html { redirect_to regions_path, status: :see_other, notice: "#{@region.name} Region was removed from the system." }
       format.json { head :no_content }
     end
   end

app/helpers/application_helper.rb

@@ -3,6 +3,15 @@ def sidebar
     render partial: "layouts/sidebar"
   end
 
+  def flash_messages
+    render "layouts/flash"
+  end
+
+  def turbo_stream_flash_messages
+    turbo_stream.prepend "flash", partial: "layouts/flash_messages"
+  end
+
+
   def linked_logo
     render partial: "layouts/linked_logo"
   end
@@ -28,6 +37,13 @@ def show_page_tool_link(item, label = "Show")
   end
 
   def delete_tool_link(item, label = "Delete")
-    link_to '<i class="bi bi-trash"></i>'.html_safe, item, method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-danger btn-sm"
+    link_to '<i class="bi bi-trash"></i>'.html_safe,
+            item,
+            class: "btn btn-danger btn-sm",
+            data: {
+              turbo_method: :delete,
+              turbo_confirm: "Are you sure you want to delete this?"
+            },
+            aria: { label: label }
   end
 end

app/javascript/application.js

@@ -1,4 +1,3 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
 import "controllers"
-import * as bootstrap from "bootstrap"

app/javascript/controllers/flash_controller.js

@@ -0,0 +1,42 @@
+import { Controller } from "@hotwired/stimulus"
+import Swal from 'sweetalert2'
+
+export default class extends Controller {
+  static values = {
+    message: String,
+    type: String
+  }
+
+  connect() {
+    if (this.messageValue) {
+      const Toast = Swal.mixin({
+        toast: true,
+        position: 'top',
+        width: '600px',
+        padding: '1.5rem',
+        showClass: {
+          popup: ''
+        },
+        hideClass: {
+          popup: ''
+        },
+        showConfirmButton: true,
+        buttonsStyling: true,
+        showCloseButton: false,
+        customClass: {
+          confirmButton: 'swal2-confirm swal2-styled',
+          actions: 'swal2-actions-right',
+          popup: 'swal2-popup-custom',
+          title: 'swal2-title-custom',
+          icon: 'swal2-icon-custom'
+        }
+      })
+
+      Toast.fire({
+        icon: this.typeValue || 'success',
+        title: this.messageValue,
+        width: '600px'
+      })
+    }
+  }
+}

app/views/layouts/_flash.html.erb

@@ -0,0 +1,6 @@
+<% flash.each do |type, message| %>
+  <div data-controller="flash"
+        data-flash-message-value="<%= message %>"
+        data-flash-type-value="<%= type == 'notice' ? 'success' : 'error' %>">
+  </div>
+<% end %>

app/views/layouts/_sidebar.html.erb

@@ -59,6 +59,12 @@
             <%= nav_link("Users", users_path, "people") %>
           </li>
         <% end %>
+        <li class="sidebar-item">
+          <%= link_to session_path, class: 'sidebar-link', data: { turbo_method: :delete } do %>
+            <i class="bi bi-box-arrow-right"></i>
+            <span>Sign Out</span>
+          <% end %>
+        </li>
       </ul>
     </div>
   </div>

app/views/layouts/application.html.erb

@@ -28,6 +28,10 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/css/app-dark.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/css/iconly.css">
 
+    <%# Includes all stylesheet files in app/assets/stylesheets %>
+    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
+    <%= javascript_importmap_tags %>
+
     <style>
       #app {
         display: flex;
@@ -60,10 +64,46 @@
         z-index: 1000;
       }
 
+      .swal2-actions-right {
+        justify-content: flex-end !important;
+        padding-top: 0.5rem !important;
+        margin-top: 0 !important;
+        width: 100% !important;
+        padding-right: 1rem !important;
+      }
+
+      .swal2-popup-custom {
+        display: flex !important;
+        align-items: center !important;
+        padding: 1.5rem !important;
+      }
+
+      .swal2-confirm {
+        margin: 0 !important;
+        margin-right: -0.5rem !important;
+      }
+
+      .swal2-title-custom {
+        white-space: nowrap !important;        /* Keep text in one line */
+        overflow: visible !important;          /* Show all text */
+        text-align: left !important;
+        padding: 0 !important;
+        margin: 0 !important;
+        margin-left: 1rem !important;
+        line-height: 1.5 !important;
+        flex-grow: 1 !important;               /* Take up available space */
+        min-width: 0 !important;               /* Allow flex shrinking */
+      }
+
+      .swal2-icon-custom {
+        margin: 0 !important;
+        flex-shrink: 0 !important;             /* Prevent icon from shrinking */
+      }
       .section {
         padding-bottom: 2rem; /* Add space before footer */
       }
     </style>
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
   </head>
 
   <body>
@@ -72,10 +112,10 @@
     <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/extensions/perfect-scrollbar/perfect-scrollbar.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/js/app.js"></script>
     <div id="app">
-        <%= sidebar %>
-
+      <%= sidebar %>
       <div id="main" class='layout-navbar navbar-fixed'>
         <div id="main-content">
+          <%= flash_messages %>
           <%= yield %>
         </div>
         <footer>