localtower 0.5.0 → 2.0.0

data/app/javascript/components/data/Stores.js

@@ -0,0 +1,294 @@
+import React from "react";
+import {
+  Braces,
+  ALargeSmall,
+  Calendar1,
+  CalendarClock,
+  Hash,
+  Brackets,
+  ListOrdered,
+  ToggleRight,
+  Binary,
+  LetterText,
+  Bolt,
+  Package,
+  CirclePlus,
+  CircleMinus,
+  RefreshCw,
+} from "lucide-react";
+
+const Stores = () => {
+  const COLUMN_TYPES = window.COLUMN_TYPES;
+  const COLUMN_INDEXES = window.COLUMN_INDEXES;
+  const COLUMN_DEFAULTS = window.COLUMN_DEFAULTS;
+  const APP_MODELS = window.APP_MODELS;
+
+  const modelsForSelect = () => {
+    return APP_MODELS.map((model) => ({
+      value: model.underscore,
+      label: (
+        <div className="flex flex-row gap-2">
+          <div className="py-1 flex justify-center items-center text-localtower-50">
+            {model.name}
+          </div>
+          <div className="text-localtower-400 py-1 flex justify-center items-center text-xss font-mono">
+            {model.table_name}
+          </div>
+        </div>
+      ),
+    }));
+  };
+
+  const actionsForSelect = () => {
+    return COLUMN_ACTIONS.map((action) => ({
+      value: action.name,
+      label: (
+        <div className="flex flex-row gap-2">
+          <div className="py-1 flex justify-center items-center w-5 text-localtower-300">
+            {iconForAction(action.name)}
+          </div>
+          <div className="py-1 flex justify-center items-center text-localtower-50">
+            {action.label}
+          </div>
+          <div className="text-localtower-400 py-1 flex justify-center items-center text-xss font-mono">
+            {action.example}
+          </div>
+        </div>
+      ),
+    }));
+  };
+
+  const modelsForSelectWithout = (excludedModelNames) => {
+    return modelsForSelect().filter((entry) => {
+      return !excludedModelNames.includes(entry.value);
+    });
+  };
+
+  const snakeCase = (str) => {
+    return str
+      .replace(/\ /g, "_")
+      .replace(/[^a-zA-Z0-9\_]/g, "")
+      .replace(/\_\_/g, "_")
+      .toLowerCase();
+  };
+
+  const modelByValue = (value) => {
+    return APP_MODELS.find((model) => model.underscore === value);
+  };
+
+  const filterAttributes = (row) => {
+    let model = modelByValue(row.model_name);
+
+    return model ? model.attributes_list : [];
+  };
+
+  const filterIndexes = (row) => {
+    let model = modelByValue(row.model_name);
+
+    let indexes = [];
+
+    if (model) {
+      let attributes_with_index = model.attributes_list.filter(
+        (attribute) => attribute.index.length > 0
+      );
+
+      attributes_with_index.map((attribute) => {
+        attribute.index.map((index) => {
+          let columns = [index.columns.map((column) => column).join(", ")];
+
+          indexes.push({
+            value: index.name,
+            label: (
+              <div className="flex flex-row gap-2">
+                <div className="py-1 flex justify-center items-center">
+                  {columns}
+                </div>
+                <div className="text-localtower-400 py-1 flex justify-center items-center text-xss font-mono">
+                  {index.name}{" "}
+                  {index.unique && (
+                    <span className="bg-localtower-300 text-xs font-sans mx-2 px-2 text-localtower-700 rounded-full">
+                      unique
+                    </span>
+                  )}
+                </div>
+              </div>
+            ),
+          });
+        });
+      });
+    }
+
+    return indexes;
+  };
+
+  const attributesForSelect = (attributes_list, additional = []) => {
+    // "additional" is used to add columns that are already in the migration file
+    const existingColumns = additional
+      .filter((row) => row.action_name === "add_column")
+      .filter((row) => row.column_name.length)
+      .map((row) => {
+        return {
+          name: row.column_name,
+          type: row.column_type,
+          index: [],
+        };
+      });
+
+    const list = existingColumns.concat(attributes_list);
+
+    return list.map((attr) => ({
+      value: attr.name,
+      label: (
+        <div className="flex flex-row gap-2">
+          <div className="py-1 flex justify-center items-center">
+            {attr.name}
+          </div>
+          <div className="text-localtower-400 py-1 flex justify-center items-center text-xss font-mono">
+            {attr.type}{" "}
+            {attr.index.length > 0 && (
+              <span className="bg-localtower-300 text-xs font-sans mx-2 px-2 text-localtower-700 rounded-full">
+                index
+              </span>
+            )}
+          </div>
+        </div>
+      ),
+    }));
+  };
+
+  const iconForAction = (action) => {
+    const size = 17;
+    const strokeWidth = 1;
+
+    if (action.indexOf("add") !== -1 || action === "belongs_to") {
+      return <CirclePlus strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (action.indexOf("remove") !== -1 || action === "drop_table") {
+      return <CircleMinus strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (action.indexOf("change") !== -1 || action === "rename_column") {
+      return <RefreshCw strokeWidth={strokeWidth} size={size} />;
+    }
+
+    return;
+  };
+
+  const iconForType = (type) => {
+    const size = 17;
+    const strokeWidth = 1;
+
+    if (type === "string") {
+      return <ALargeSmall strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (type === "text") {
+      return <LetterText strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (type === "datetime") {
+      return <CalendarClock strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (type === "date") {
+      return <Calendar1 strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (
+      type === "integer" ||
+      type === "bigint" ||
+      type === "float" ||
+      type === "numeric" ||
+      type === "decimal"
+    ) {
+      return <Hash strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (type === "array") {
+      return <Brackets strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (type === "uuid") {
+      return <ListOrdered strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (type === "json" || type === "jsonb") {
+      return <Braces strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (type === "boolean") {
+      return <ToggleRight strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (type === "binary") {
+      return <Binary strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (type === "blob") {
+      return <Package strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (type === "references") {
+      return <Bolt strokeWidth={strokeWidth} size={size} />;
+    }
+
+    return;
+  };
+
+  const typesForSelect = () => {
+    return COLUMN_TYPES.map((type) => ({
+      value: type.name,
+      label: (
+        <div className="flex flex-row gap-2 items-center">
+          <div className="py-1 flex justify-center items-center w-5 text-localtower-300">
+            {iconForType(type.name)}
+          </div>
+          <div className="py-1 flex justify-center items-center text-localtower-50">
+            {type.name}
+          </div>
+          <div className="text-localtower-400 py-1 flex justify-center items-center text-xss font-mono">
+            {type.example}
+          </div>
+        </div>
+      ),
+    }));
+  };
+
+  const indexesForSelect = () => {
+    return [{ value: "", label: "(none)" }].concat(
+      COLUMN_INDEXES.map((type) => ({
+        value: type.name,
+        label: (
+          <div className="flex flex-row gap-2 items-center">
+            <div className="py-1 flex justify-center items-center text-localtower-50">
+              {type.label || type.name}
+            </div>
+            <div className="text-localtower-400 py-1 flex justify-center items-center text-xss font-mono">
+              {type.example}
+            </div>
+          </div>
+        ),
+      }))
+    );
+  };
+
+  return {
+    actionsForSelect: actionsForSelect,
+    modelsForSelect: modelsForSelect,
+    typesForSelect: typesForSelect,
+    attributesForSelect: attributesForSelect,
+    indexesForSelect: indexesForSelect,
+    modelsForSelectWithout: modelsForSelectWithout,
+    modelByValue: modelByValue,
+    filterAttributes: filterAttributes,
+    filterIndexes: filterIndexes,
+    snakeCase: snakeCase,
+    APP_MODELS: APP_MODELS,
+    COLUMN_DEFAULTS: COLUMN_DEFAULTS,
+    COLUMN_TYPES: COLUMN_TYPES,
+    COLUMN_INDEXES: COLUMN_INDEXES,
+  };
+};
+
+export default Stores;

data/app/views/layouts/localtower/application.html.erb

@@ -2,97 +2,94 @@
 <html lang="en">
   <head>
     <title>Localtower - <%= yield :title %></title>
-
     <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
     <meta name="viewport" content="width=device-width" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
-    <link rel="stylesheet" type="text/css" href="/light-bootstrap-dashboard-master/assets/css/bootstrap.min.css">
-    <link rel="stylesheet" type="text/css" href="/light-bootstrap-dashboard-master/assets/css/animate.min.css">
-    <link rel="stylesheet" type="text/css" href="/light-bootstrap-dashboard-master/assets/css/light-bootstrap-dashboard.css">
-
-    <!--     Fonts and icons     -->
-    <link href="/vendor/font-awesome.min.css" rel="stylesheet">
-    <link rel="stylesheet" type="text/css" href="/light-bootstrap-dashboard-master/assets/css/pe-icon-7-stroke.css">
-
-    <link rel="stylesheet" type="text/css" href="/vendor/highlight-js-default.min.css">
-    <link rel="stylesheet" type="text/css" href="/css/app.css">
+    <link rel="shortcut icon" href="/com/favicon-64.png" type="image/png" />
+    <link rel="stylesheet" type="text/css" href="/vendor/monokai-sublime.css">
+
+    <style>
+      @font-face {
+        font-family: 'Circular';
+        src: url('/fonts/Circular/CircularStd-Book.otf') format('opentype');
+        font-weight: 400;
+        font-style: normal;
+      }
+
+      @font-face {
+        font-family: 'Circular';
+        src: url('/fonts/Circular/CircularStd-Medium.otf') format('opentype');
+        font-weight: 500;
+        font-style: normal;
+      }
+
+      @font-face {
+        font-family: 'Circular';
+        src: url('/fonts/Circular/CircularStd-Bold.otf') format('opentype');
+        font-weight: 700;
+        font-style: normal;
+      }
+    </style>
+    <%= stylesheet_link_tag "application" %>
 
     <%= csrf_meta_tags %>
+    <script>
+      window.COLUMN_TYPES = <%= ::Localtower::Generators::Migration::TYPES.to_json.html_safe %>;
+      window.COLUMN_ACTIONS = <%= ::Localtower::Generators::Migration::ACTIONS.to_json.html_safe %>;
+      window.COLUMN_INDEXES = <%= ::Localtower::Generators::ServiceObjects::InsertIndexes::USING.to_json.html_safe %>;
+      window.COLUMN_INDEXES_ALGORITHMS = <%= ::Localtower::Generators::ServiceObjects::InsertIndexes::ALGO.to_json.html_safe %>;
+      window.COLUMN_DEFAULTS = <%= ::Localtower::Generators::ServiceObjects::InsertDefaults::DEFAULTS_BY_TYPE.to_json.html_safe %>;
+      window.APP_MODELS = <%= ::Localtower::Tools.models_presented.to_json.html_safe %>;
+    </script>
   </head>
-
-  <body>
-
-    <div class="wrapper">
-      <div class="sidebar">
-
-        <div class="sidebar-wrapper">
-          <ul class="nav">
-            <li class="<%= is_active_link?(schema_path, :inclusive) ? "active" : nil %>">
-              <a href="<%= schema_path %>">
-                <i class="pe-7s-home"></i>
-                <p>Schema</p>
-              </a>
-            </li>
-
-            <li class="<%= is_active_link?(models_path, :inclusive) ? "active" : nil %>">
-              <a href="<%= models_path %>">
-                <i class="pe-7s-server"></i>
-                <p>New Model</p>
-              </a>
-            </li>
-
-            <li class="<%= is_active_link?(migrations_path, :inclusive) ? "active" : nil %>">
-              <a href="<%= migrations_path %>">
-                <i class="pe-7s-edit"></i>
-                <p>New Migration</p>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-
-
-      <div class="main-panel">
-        <div class="content">
-          <div class="container-fluid">
-            <%= yield %>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="full-message" style="display: none;">
-
-      <div class="text-center">
-        <br>
-        <h3>Magic stuff happening.</h3>
-        <br>
-        <i class="pe-7s-refresh-2 rotate"></i>
-        <br>
-        <br>
-        <br>
-        <p class="full-message-migrate" style="display: none;">
-          If you're seeing an error message on the next page (pending migrations), just run in your terminal:
-          <br>
-          <br>
-          <code>bundle exec rails db:migrate</code>
-        </p>
-      </div>
-
+  <body class="bg-localtower-700 text-localtower-300 text-sm">
+    <div class="wrapper flex h-screen">
+      <!-- Sidebar -->
+      <nav class="w-[200px] flex-shrink-0 h-screen border-r border-localtower-500">
+        <ul class="flex flex-col py-2 px-2">
+          <li class="py-0.5">
+            <a href="<%= new_model_path %>" class="flex flex-row gap-2 items-center px-4 py-2.5 hover:text-white transition-colors duration-200 rounded <%= is_active_link?(new_model_path, :inclusive) ? 'bg-localtower-500 text-localtower-100 hover:bg-localtower-500' : 'text-gray-400 hover:bg-localtower-600' %> active:opacity-70">
+              <i data-lucide="circle-plus" class="w-5 " stroke-width="2"></i>
+              <p class="text-sm">New Model</p>
+            </a>
+          </li>
+
+          <li class="py-0.5">
+            <a href="<%= new_migration_path %>" class="flex flex-row gap-2 items-center px-4 py-2.5 hover:text-white transition-colors duration-200 rounded <%= is_active_link?(new_migration_path, :exclusive) ? 'bg-localtower-500 text-localtower-100 hover:bg-localtower-500' : 'text-gray-400 hover:bg-localtower-600' %> active:opacity-70">
+              <i data-lucide="circle-plus" class="w-5 " stroke-width="2"></i>
+              <p class="text-sm">New Migration</p>
+            </a>
+          </li>
+
+          <li class="my-2 border-t border-localtower-500 h-1"></li>
+
+          <li class="py-0.5">
+            <a href="<%= migrations_path %>" class="flex flex-row gap-2 items-center px-4 py-2.5 hover:text-white transition-colors duration-200 rounded <%= is_active_link?(migrations_path, :exclusive) ? 'bg-localtower-500 text-localtower-100 hover:bg-localtower-500' : 'text-gray-400 hover:bg-localtower-600' %> active:opacity-70">
+              <i data-lucide="book-plus" class="w-5 " stroke-width="2"></i>
+              <p class="text-sm">Migrations</p>
+            </a>
+          </li>
+        </ul>
+      </nav>
+
+      <!-- Main Content -->
+      <main class="flex-1 overflow-y-auto p-8">
+        <%= yield %>
+      </main>
     </div>
 
     <!--   Core JS Files   -->
-    <script src="/light-bootstrap-dashboard-master/assets/js/jquery-1.10.2.js" type="text/javascript"></script>
-    <script src="/light-bootstrap-dashboard-master/assets/js/bootstrap.min.js" type="text/javascript"></script>
-
-    <!--  Checkbox, Radio & Switch Plugins -->
-    <script src="/light-bootstrap-dashboard-master/assets/js/bootstrap-checkbox-radio-switch.js"></script>
-
-    <!-- Light Bootstrap Table Core javascript and methods for Demo purpose -->
-    <script src="/light-bootstrap-dashboard-master/assets/js/light-bootstrap-dashboard.js"></script>
+    <script src="/vendor/jquery-3.7.1.min.js"></script>
     <script src="/vendor/highlight.min.js"></script>
     <script src="/vendor/masonry.pkgd.min.js"></script>
-    <script src="/js/app.js"></script>
+    <script src="/vendor/lucide.min.js"></script>
+    <script src="/vendor/rails-ujs.min.js"></script>
+
+    <script>
+      lucide.createIcons();
+    </script>
+
+    <%= javascript_include_tag "application" %>
   </body>
 </html>

data/app/views/localtower/_migration.html.erb

@@ -0,0 +1,30 @@
+<div class="">
+  <div class="">
+    <h5 class="py-3 flex flex-row gap-3 items-center">
+      <% if entry['status'] == :todo %>
+        <div class="rounded-full bg-orange-700 text-localtower-100 text-xs px-3 py-0.5 inline-flex items-center">
+          <span>Pending</span>
+        </div>
+      <% else %>
+        <%= form_tag actions_path, class: "inline-flex" do %>
+          <button name="cmd" title="rake db:migrate:down VERSION=<%= entry['time'] %>" type="submit" value="rake db:migrate:down VERSION=<%= entry['time'] %>" class="px-2 py-0.5 rounded-md bg-green-800 text-localtower-100 border border-green-700 outline-none hover:border-green-500 hover:bg-green-700 hover:text-white active:opacity-60 transition-colors text-xs inline-flex items-center">
+            Rollback
+          </button>
+        <% end %>
+      <% end %>
+      <a href="<%= file_link(entry['file_full_path']) %>" class="font-mono text-xs text-localtower-400 inline-flex"><%= entry['relative_path'] %></a>
+      <% if entry['status'] == :todo %>
+        <%= form_tag rm_file_path, class: "inline-flex" do %>
+          <button name="file" title="rake db:migrate:down VERSION=<%= entry['time'] %>" type="submit" value="<%= entry['file_full_path'] %>" class="px-2 py-0.5 rounded-md text-red-500 border border-red-500 hover:border-red-300 outline-none active:opacity-60 transition-colors text-xs inline-flex items-center" data-confirm="Are you sure?">
+            destroy
+          </button>
+        <% end %>
+      <% end %>
+    </h5>
+  </div>
+</div>
+<div class="pb-4 border-b border-localtower-500">
+  <div class="">
+    <pre class="px-3 py-1.5 rounded border border-localtower-500 block" style="background-color: rgb(35, 36, 31);"><code class="language-ruby text-xs"><%= entry['content'] %></code></pre>
+  </div>
+</div>

data/app/views/localtower/pages/_alert_no_models.html.erb

@@ -0,0 +1,3 @@
+<div class="alert alert-danger">
+  You don't have any models in this app. You can create one <%= link_to 'here.', new_model_path, class: 'font-bold' %>
+</div>

data/app/views/localtower/pages/migrations.html.erb

@@ -1,92 +1,30 @@
 <% content_for :title do %>Migrations<% end %>
-
-<div class="row">
-  <div class="col-md-12">
-    <div class="card">
-      <div class="header">
-        <h4 class="title"></h4>
-      </div>
-
-      <div class="content">
-        <%= form_tag migrations_path, class: "form" do %>
-
-        <table class="table table-hover table-striped">
-          <thead>
-            <th> <span data-selector=''>On Model</span></th>
-            <th> <span data-selector=''>Action</span></th>
-            <th> <span data-selector='belongs_to_label'>Belongs To</span></th>
-            <th> <span data-selector='column_label'>Column</span></th>
-            <th> <span data-selector='new_column_name_label'>New Column Name</span></th>
-            <th> <span data-selector='column_type_label'>Type</span></th>
-            <th> <span data-selector='index_label'>Index?</span></th>
-            <th> <span data-selector='nullable_label'>Can be null?</span></th>
-            <th> <span data-selector=''></span></th>
-          </thead>
-
-          <tbody data-selector="tbody">
-            <tr data-selector="tr">
-              <td>
-                <%= select_tag "migrations[migrations][][table_name]", options_for_select(Localtower::Tools.models.collect {|p| [ p, p.table_name ] }), class: "form-control" %>
-              </td>
-
-              <td>
-                <%= select_tag "migrations[migrations][][action]", options_for_select(::Localtower::Generators::Migration::ACTIONS), class: "form-control", "data-selector" => "action" %>
-              </td>
-
-              <td>
-                <%= select_tag "migrations[migrations][][belongs_to]", options_for_select(Localtower::Tools.models.collect {|p| [ p, p.table_name ] }), class: "form-control", "data-selector" => "belongs_to" %>
-              </td>
-
-              <td class="text-center">
-                <input type="text" name="migrations[migrations][][column]" class="form-control" data-selector="column_text">
-
-                <%= select_tag "migrations[migrations][][column_list]", options_for_select(::Localtower::Tools.all_columns), class: "form-control", include_blank: true, "data-selector" => "column_list", style: "display:none;" %>
-              </td>
-
-              <td>
-                <input type="text" name="migrations[migrations][][new_column_name]" class="form-control" data-selector="new_column_name">
-              </td>
-
-              <td>
-                <%= select_tag "migrations[migrations][][column_type]", options_for_select(::Localtower::Generators::Migration::TYPES), class: "form-control", "data-selector" => "column_type" %>
-              </td>
-
-              <td>
-                <input type="checkbox" name="migrations[migrations][][index]" class="form-control" data-selector="index">
-              </td>
-
-              <td>
-                <input type="checkbox" name="migrations[migrations][][nullable]" class="form-control" checked="" data-selector="nullable">
-              </td>
-
-              <td>
-                <div class="pull-right">
-                  <button class="btn btn-danger btn-xs pointer" data-selector="remove">Remove</button>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <div class="row">
-          <div class="col-md-12 text-center">
-            <i class="pe-7s-plus pointer" data-selector="duplicate" style="font-size: 3em;"></i>
-          </div>
-        </div>
-
-        <hr>
-
-        <div class="row">
-          <div class="col-md-12 text-center">
-            <button type="submit" value="true" class="btn btn-success" data-selector="submit">
-            Create the migration
-            </button>
-          </div>
-        </div>
+<div class="">
+  <% if flash[:notice] %>
+    <div class="">
+      <span><%= flash[:notice] %></span>
+    </div>
+  <% end %>
+  <div class="flex flex-col gap-3">
+    <div class="">
+      <% if @migrations.select {|i| i['status'] == :todo}.any? %>
+        <%= form_tag actions_path, class: "" do %>
+          <button name="cmd" type="submit" value="rails db:migrate" class="px-3 py-1 rounded-md bg-green-800 text-localtower-100 border border-green-700 outline-none hover:border-green-500 hover:bg-green-700 hover:text-white active:opacity-60 transition-colors text-xs inline-flex items-center">
+            <code>bundle exec rails db:migrate</code>
+          </button>
         <% end %>
-      </div>
+      <% end %>
+    </div>
+    <div class="">
+      <% if @migrations.any? %>
+        <% @migrations.each do |entry| %>
+          <%= render partial: 'localtower/migration', locals: { entry: entry } %>
+        <% end %>
+      <% else %>
+        <div class="">
+          <span>No migrations found</span>
+        </div>
+      <% end %>
     </div>
-
-    <%= render partial: "migrations", locals: { migrations: @migrations } %>
   </div>
 </div>

data/app/views/localtower/pages/new_migration.html.erb

@@ -0,0 +1,40 @@
+<% content_for :title do %>New Migration<% end %>
+<div>
+  <div>
+    <% if @models.empty? %>
+      <%= render partial: 'alert_no_models' %>
+    <% end %>
+  </div>
+  <% if @models.any? %>
+    <%= form_tag migrations_path, class: "pb-10" do %>
+      <input type="hidden" id="form_attributes" name="migrations">
+      <div class="flex flex-col gap-2 pb-4">
+        <div class="block text-localtower-100">Migration name <span class="text-localtower-400">(optionnal)</span></div>
+        <div class="w-80">
+          <input autocomplete="off" type="text" data-selector="modelName" name="migration_name" class="px-2 py-1.5 rounded bg-localtower-600 border border-localtower-500 inline-block w-full outline-none focus:border-localtower-400 transition-colors text-localtower-100 placeholder:italic placeholder:text-localtower-450 focus:placeholder:text-localtower-600 disabled:cursor-not-allowed" placeholder="Ex: AddFieldsToUser" <%= @migrations.any? ? 'disabled' : '' %>>
+        </div>
+      </div>
+      <div class="py-4 flex flex-col gap-4">
+        <label class="block text-localtower-100">Actions</label>
+        <div id="react-container-new-migration"></div>
+      </div>
+      <div>
+        <button type="submit" value="true" class="px-3 py-1.5 rounded-md bg-green-800 text-localtower-100 border border-green-700 inline-block outline-none hover:border-green-500 hover:bg-green-700 hover:text-white active:opacity-60 transition-colors text-md">
+          <%= @migrations.any? ? 'Add to Migration' : 'Generate Migration' %>
+        </button>
+      </div>
+    <% end %>
+  <% end %>
+  <% if @migrations.any? %>
+    <div class="py-10 border-t border-localtower-500 flex flex-col gap-4">
+      <h4 class="text-localtower-300">
+        There is a pending migration. All new actions will be added to this one:
+      </h4>
+      <div>
+        <% @migrations.take(1).each do |entry| %>
+          <%= render partial: 'localtower/migration', locals: { entry: entry } %>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>