feat: setup assets pipeline and styling framework

- Bootstrap integration with custom SCSS
- JavaScript modules for interactive features
- Action Cable channels for real-time updates
- Simple Form configuration with Bootstrap styling
- Importmap configuration for modern JS

Author: lucasleandro1

app/assets/builds/application.css

@@ -27,6 +27,7 @@ body {
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
+  line-clamp: 2; // Standard property for compatibility
   -webkit-box-orient: vertical;
 }
 

app/assets/stylesheets/_custom.scss

@@ -1,13 +1,10 @@
-// Bootstrap and its dependencies
-@import "bootstrap";
-
-// Custom styles
-@import "custom";
-@import "components/navbar";
-@import "components/forms";
-@import "components/cards";
-@import "components/tables";
+// Custom styles (Bootstrap loaded via CDN in layout)
+@use "custom";
+@use "components/navbar";
+@use "components/forms";
+@use "components/cards";
+@use "components/tables";
 
 // Layout styles
-@import "layouts/dashboard";
-@import "layouts/authentication";
+@use "layouts/dashboard";
+@use "layouts/authentication";

app/assets/stylesheets/application.scss

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

app/javascript/application.js

@@ -0,0 +1,6 @@
+// Action Cable provides the framework to deal with WebSockets in Rails.
+// You can generate new channels where WebSocket features live using the `bin/rails generate channel` command.
+
+import { createConsumer } from "@rails/actioncable"
+
+export default createConsumer()

app/javascript/channels/consumer.js

@@ -0,0 +1,15 @@
+import consumer from "channels/consumer"
+
+consumer.subscriptions.create("DashboardChannel", {
+  connected() {
+    // Called when the subscription is ready for use on the server
+  },
+
+  disconnected() {
+    // Called when the subscription has been terminated by the server
+  },
+
+  received(data) {
+    // Called when there's incoming data on the websocket for this channel
+  }
+});

app/javascript/channels/dashboard_channel.js

@@ -0,0 +1,15 @@
+import consumer from "channels/consumer"
+
+consumer.subscriptions.create("ImportProgressChannel", {
+  connected() {
+    // Called when the subscription is ready for use on the server
+  },
+
+  disconnected() {
+    // Called when the subscription has been terminated by the server
+  },
+
+  received(data) {
+    // Called when there's incoming data on the websocket for this channel
+  }
+});

app/javascript/channels/import_progress_channel.js

@@ -0,0 +1,3 @@
+// Import all the channels to be used by Action Cable
+import "channels/import_progress_channel"
+import "channels/dashboard_channel"

app/javascript/channels/index.js

@@ -5,3 +5,5 @@
 pin "@hotwired/stimulus", to: "stimulus.min.js"
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
 pin_all_from "app/javascript/controllers", under: "controllers"
+pin "@rails/actioncable", to: "actioncable.esm.js"
+pin_all_from "app/javascript/channels", under: "channels"