Deps: upgrade to Bootstrap 5 (#1447)

mockdeep · web-flow · commit 117c34a0bdde · 2026-03-12T13:53:45.000-07:00
diff --git a/app/javascript/application.ts b/app/javascript/application.ts
@@ -2,7 +2,9 @@
 import "@hotwired/turbo-rails";
 import "@rails/activestorage";
 import "jquery";
-import "bootstrap";
+import * as bootstrap from "bootstrap";
+
+window.bootstrap = bootstrap;
 import "mousetrap";
 import "jquery-visible";
 import _ from "underscore";
@@ -323,7 +325,7 @@ var AppView = Backbone.NativeView.extend({
 
 $(document).ready(function() {
   Mousetrap.bind("?", function() {
-    $("#shortcuts").modal('toggle');
+    bootstrap.Modal.getOrCreateInstance(document.getElementById('shortcuts')).toggle();
   });
 });
 
diff --git a/app/views/feeds/_feed.html.erb b/app/views/feeds/_feed.html.erb
@@ -2,7 +2,8 @@
   <div class="feed-line">
     <div class="feed-title-container">
       <p class="feed-title <%= feed.unread_stories_count > 0 ? "feed-unread" : "" %>">
-        <i class="fa fa-circle status <%= feed.status_bubble %>" data-toggle="tooltip" title="<%= t("partials.feed.status_bubble.#{feed.status_bubble}") if feed.status_bubble %>" data-placement="left"></i>
+        <i class="fa fa-circle status <%= feed.status_bubble %>" aria-hidden="true" data-bs-toggle="tooltip" title="<%= t("partials.feed.status_bubble.#{feed.status_bubble}") if feed.status_bubble %>" data-placement="left"></i>
+        <% if feed.status_bubble %><span class="sr-only"><%= t("partials.feed.status_bubble.#{feed.status_bubble}") %></span><% end %>
         <a href="/feed/<%= feed.id %>">
           <% if feed.unread_stories_count > 0 %>
             (<%= feed.unread_stories_count %>)
diff --git a/app/views/feeds/_single_feed_action_bar.html.erb b/app/views/feeds/_single_feed_action_bar.html.erb
@@ -1,5 +1,5 @@
 <div class="row" data-controller="hotkeys mark-all-as-read" data-action="keydown@document->hotkeys#handleKeydown">
-  <div class="float-left">
+  <div class="float-start">
     <a class="btn" id="home" href="/news" title="<%= t('partials.feed_action_bar.home') %>">
       <i class="fa fa-reply"></i>
     </a>
@@ -12,7 +12,7 @@
     </a>
   </div>
 
-  <div class="float-right">
+  <div class="float-end">
     <a class="btn btn-primary" id="starred" href="/starred" title="<%= t('partials.action_bar.starred_stories') %>">
       <i class="fa fa-star"></i>
     </a>
diff --git a/app/views/feeds/edit.html.erb b/app/views/feeds/edit.html.erb
@@ -7,18 +7,18 @@
   <hr />
   <%= form_with(url: "/feeds/#{@feed.id}", method: :put, id: "add-feed-setup") do %>
     <input type="hidden" name="feed_id" value="<%= @feed.id %>">
-    <div class="form-group">
+    <div>
       <input name="feed_name" id="feed-name" class="form-control" type="text" value="<%= @feed.name %>" required />
       <i class="fa fa-pencil field-icon"></i>
       <label id="feed-name-label" class="field-label" for="feed-name"><%= t('feeds.edit.fields.feed_name') %></label>
     </div>
-    <div class="form-group">
+    <div>
       <input name="feed_url" id="feed-url" class="form-control" type="text" value="<%= @feed.url %>" autofocus required />
       <i class="fa fa-rss field-icon"></i>
       <label id="feed-url-label" class="field-label" for="feed-url"><%= t('feeds.edit.fields.feed_url') %></label>
     </div>
     <% if current_user.groups.any? %>
-      <div class="form-group">
+      <div>
         <input type="text" class="form-control" tabindex="-1">
         <select name="group_id" id="group-id">
           <option value=""></option>
@@ -30,6 +30,6 @@
       </div>
     <% end %>
 
-    <input type="submit" id="submit" class="btn btn-primary float-right" value="<%= t('feeds.edit.fields.submit') %>"/>
+    <input type="submit" id="submit" class="btn btn-primary float-end" value="<%= t('feeds.edit.fields.submit') %>"/>
   <% end %>
 </div>
diff --git a/app/views/feeds/index.html.erb b/app/views/feeds/index.html.erb
@@ -18,6 +18,8 @@
 
 <script type="text/javascript">
   $(document).ready(function () {
-    $(".status").tooltip();
+    document.querySelectorAll(".status").forEach(function(el) {
+      new bootstrap.Tooltip(el);
+    });
   });
 </script>
diff --git a/app/views/feeds/new.html.erb b/app/views/feeds/new.html.erb
@@ -8,12 +8,12 @@
   <p><%= t('feeds.add.description') %></p>
   <hr />
   <%= form_with(url: "/feeds", id: "add-feed-setup") do %>
-    <div class="form-group">
+    <div>
       <input name="feed_url" class="form-control" id="feed-url" type="text" value="<%= @feed_url %>" autofocus/>
       <i class="fa fa-rss field-icon"></i>
       <label id="feed_url-label" class="field-label" for="feed-url"><%= t('feeds.add.fields.feed_url') %></label>
     </div>
 
-    <input type="submit" id="submit" class="btn btn-primary float-right" value="<%= t('feeds.add.fields.submit') %>"/>
+    <input type="submit" id="submit" class="btn btn-primary float-end" value="<%= t('feeds.add.fields.submit') %>"/>
   <% end %>
 </div>
diff --git a/app/views/imports/new.html.erb b/app/views/imports/new.html.erb
@@ -16,7 +16,7 @@
 
   <%= form_with(url: "/feeds/import", id: "import", multipart: true) do %>
     <input id="opml_file" name="opml_file" type="file" title="<%= t('import.fields.import') %>" aria-label="<%= t('import.fields.import') %>" class="btn-primary" />
-    <a href="/setup/tutorial" id="skip" class="btn float-right"><%= t('import.fields.not_now') %></a>
+    <a href="/setup/tutorial" id="skip" class="btn float-end"><%= t('import.fields.not_now') %></a>
   <% end %>
 </div>
 
diff --git a/app/views/js/templates/_story.js.erb b/app/views/js/templates/_story.js.erb
@@ -33,12 +33,12 @@
       {{= body }}
     </div>
     <div class="row story-actions-container">
-      <div class="float-left">
+      <div class="float-start">
         <span class="story-published">
           {{= pretty_date }}
         </span>
       </div>
-      <div class="float-right story-actions">
+      <div class="float-end story-actions">
         <div class="story-keep-unread">
           <i class="fa {{ if(keep_unread) { }}fa-check{{ } else { }}fa-square-o{{ } }}"></i> <%= I18n.t('stories.keep_unread') %>
         </div>
diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb
@@ -10,7 +10,7 @@
           <li><a href="/feeds/export"><%= t('layout.export') %></a></li>
           <li class="text-muted">·</li>
           <li>
-            <a href="#shortcuts" data-toggle="modal" aria-label="shortcuts">
+            <a href="#shortcuts" data-bs-toggle="modal" data-bs-target="#shortcuts" aria-label="shortcuts">
               <i aria-hidden="true" class="fa fa-keyboard-o">
               </i>
             </a>
@@ -28,7 +28,7 @@
       </ul>
     </div>
     <div class="col-md-4">
-      <p class="float-right">
+      <p class="float-end">
         <b><%= t('layout.hey') %></b> <%= t('layout.back_to_work') %>
       </p>
     </div>
diff --git a/app/views/layouts/_shortcuts.html.erb b/app/views/layouts/_shortcuts.html.erb
@@ -2,8 +2,8 @@
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h4 id="myModalLabel"><%= t('partials.shortcuts.title') %></h4>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
         <ul class="shortcut-legend">
diff --git a/app/views/passwords/new.html.erb b/app/views/passwords/new.html.erb
@@ -5,23 +5,23 @@
   <p><%= t('first_run.password.description') %></p>
   <hr />
   <%= form_with(model: User.new, url: "/setup/password", id: "password_setup") do |form| %>
-    <div class="form-group">
+    <div>
       <%= form.text_field :username, class: "form-control", required: true %>
       <%= form.label :username, t('first_run.password.fields.username'), class: "field-label" %>
     </div>
 
-    <div class="form-group">
+    <div>
       <%= form.password_field :password, class: "form-control", required: true %>
       <i class="fa fa-lock field-icon"></i>
       <%= form.label :password, t('first_run.password.fields.password'), class: "field-label" %>
     </div>
 
-    <div class="form-group">
+    <div>
       <%= form.password_field :password_confirmation, class: "form-control", required: true %>
       <i class="fa fa-lock field-icon"></i>
       <%= form.label :password_confirmation, t('first_run.password.fields.password_confirmation'), class: "field-label" %>
     </div>
 
-    <input type="submit" id="submit" class="btn btn-primary float-right" value="<%= t('first_run.password.fields.next') %>"/>
+    <input type="submit" id="submit" class="btn btn-primary float-end" value="<%= t('first_run.password.fields.next') %>"/>
   <% end %>
 </div>
diff --git a/app/views/sessions/new.erb b/app/views/sessions/new.erb
@@ -6,17 +6,17 @@
 
   <%= form_with(url: "/login") do |form| %>
     <p><%= t('sessions.new.fields.unknown_username_html') %></p>
-    <div class="form-group">
+    <div>
       <%= form.text_field :username, class: "form-control", required: true %>
       <%= form.label :username, t('sessions.new.fields.username'), class: "field-label" %>
     </div>
 
-    <div class="form-group">
+    <div>
       <input name="password" class="form-control" id="password" type="password" required />
       <i class="fa fa-lock field-icon"></i>
       <label id="password-label" class="field-label" for="password"><%= t('sessions.new.fields.password') %></label>
     </div>
-    <input type="submit" value="<%= t('sessions.new.fields.submit') %>" class="btn btn-primary float-right" />
+    <input type="submit" value="<%= t('sessions.new.fields.submit') %>" class="btn btn-primary float-end" />
   <% end %>
 
   <% if Setting::UserSignup.enabled? %>
diff --git a/app/views/settings/index.html.erb b/app/views/settings/index.html.erb
@@ -7,17 +7,17 @@
   <hr />
   <p><%= t('.description') %></p>
   <hr />
-  <div class="form-group">
+  <div>
     <% setting = Setting::UserSignup.first %>
     <%= form_with(model: setting, scope: :setting, url: setting_path(setting)) do |form| %>
       <% if Setting::UserSignup.enabled? %>
         <%= form.hidden_field :enabled, value: false %>
         <span class='setup__label'><%= t('.signup.enabled') %></span>
-        <%= form.submit(t('.signup.disable'), class: 'btn btn-primary float-right') %>
+        <%= form.submit(t('.signup.disable'), class: 'btn btn-primary float-end') %>
       <% else %>
         <%= form.hidden_field :enabled, value: true %>
         <span class='setup__label'><%= t('.signup.disabled') %></span>
-        <%= form.submit(t('.signup.enable'), class: 'btn btn-primary float-right') %>
+        <%= form.submit(t('.signup.enable'), class: 'btn btn-primary float-end') %>
       <% end %>
     <% end %>
   </div>
diff --git a/app/views/stories/_templates.html.erb b/app/views/stories/_templates.html.erb
@@ -33,12 +33,12 @@
       {{= body }}
     </div>
     <div class="row story-actions-container">
-      <div class="float-left">
+      <div class="float-start">
         <span class="story-published">
           {{= pretty_date }}
         </span>
       </div>
-      <div class="float-right story-actions">
+      <div class="float-end story-actions">
         <div class="story-keep-unread" data-action="click->keep-unread-toggle#toggle:stop">
           <i class="fa {{ if(keep_unread) { }}fa-check{{ } else { }}fa-square-o{{ } }}" data-keep-unread-toggle-target="icon"></i> <%= t('stories.keep_unread') %>
         </div>
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "@rails/activestorage": "^8.1.100",
     "backbone": "1.6.1",
     "backbone.nativeview": "^0.3.4",
-    "bootstrap": "^4.6.2",
+    "bootstrap": "^5.3.3",
     "font-awesome": "4.7.0",
     "jquery": "2.2.4",
     "jquery-visible": "1.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
