add category "technical_mistake, and order index

app/assets/stylesheets/application.css

@@ -10,7 +10,7 @@
  */
 
 /* CSS Variables for Light/Dark Theme */
-@import url("https://ga.jspm.io/npm:trix@2.1.16/dist/trix.css");
+@import url("https://ga.jspm.io/npm:trix@2.1.17/dist/trix.css");
 
 :root {
   /* Light theme colors (default) */
@@ -903,6 +903,21 @@ div[style*="color: red"],
   margin: 0.35rem 0;
 }
 
+.star-story-order-input {
+  width: 36px;
+}
+
+.star-story-order-sort-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  font-weight: 700;
+  color: inherit;
+  cursor: pointer;
+}
+
 .opportunities-date-filter-note {
   margin: 0.5rem 0 0;
   color: var(--text-muted);
@@ -1150,6 +1165,10 @@ div[style*="color: red"],
     page-break-inside: avoid;
   }
 
+  .star-story-order-column {
+    display: none !important;
+  }
+
   /* Skill badges */
   .skill-badge {
     border: 1px solid black;

app/javascript/application.js

@@ -11,7 +11,11 @@ function initializeClickableRows() {
   clickableRows.forEach((row) => {
     // Check if already initialized to avoid duplicate listeners
     if (!row.hasAttribute("data-clickable-initialized")) {
-      row.addEventListener("click", function () {
+      row.addEventListener("click", function (event) {
+        if (event.target.closest("a, button, input, select, textarea, label")) {
+          return;
+        }
+
         const href = this.dataset.href;
         if (href) {
           window.location.href = href;
@@ -25,8 +29,58 @@ function initializeClickableRows() {
   });
 }
 
+function initializeStarStoryTemporaryOrdering() {
+  const sortButton = document.getElementById("star-story-order-sort");
+  const tableBody = document.querySelector("#star_stories tbody");
+
+  if (!sortButton || !tableBody || sortButton.dataset.initialized === "true") {
+    return;
+  }
+
+  let sortDirection = "asc";
+
+  const readOrderValue = (row) => {
+    const input = row.querySelector(".star-story-order-input");
+    if (!input) return null;
+
+    const parsed = Number.parseInt(input.value, 10);
+    return Number.isNaN(parsed) ? null : parsed;
+  };
+
+  const applySort = () => {
+    const rows = Array.from(tableBody.querySelectorAll("tr"));
+
+    rows.sort((leftRow, rightRow) => {
+      const left = readOrderValue(leftRow);
+      const right = readOrderValue(rightRow);
+
+      if (left === null && right === null) return 0;
+      if (left === null) return 1;
+      if (right === null) return -1;
+
+      return sortDirection === "asc" ? left - right : right - left;
+    });
+
+    rows.forEach((row) => tableBody.appendChild(row));
+  };
+
+  sortButton.addEventListener("click", () => {
+    applySort();
+    sortDirection = sortDirection === "asc" ? "desc" : "asc";
+    sortButton.textContent = sortDirection === "asc" ? "Order ▲" : "Order ▼";
+  });
+
+  sortButton.dataset.initialized = "true";
+}
+
 // Initialize on page load
-document.addEventListener("DOMContentLoaded", initializeClickableRows);
+document.addEventListener("DOMContentLoaded", () => {
+  initializeClickableRows();
+  initializeStarStoryTemporaryOrdering();
+});
 
 // Initialize after Turbo navigates to a new page
-document.addEventListener("turbo:load", initializeClickableRows);
+document.addEventListener("turbo:load", () => {
+  initializeClickableRows();
+  initializeStarStoryTemporaryOrdering();
+});

app/models/star_story.rb

@@ -6,6 +6,7 @@ class StarStory < ApplicationRecord
   # Enums
   enum :category, {
     incident: "incident",
+    technical_mistake: "technical_mistake",
     leadership: "leadership",
     devops: "devops",
     refactor: "refactor",

app/views/star_stories/index.html.erb

@@ -18,6 +18,9 @@
   <table>
     <thead>
       <tr>
+        <th class="star-story-order-column">
+          <button type="button" id="star-story-order-sort" class="star-story-order-sort-btn">Order ▲</button>
+        </th>
         <th>Title</th>
         <th>Situation</th>
         <th>Task</th>
@@ -32,6 +35,9 @@
     <tbody>
       <% @star_stories.each do |star_story| %>
         <tr id="<%= dom_id star_story %>" class="clickable-row" data-href="<%= star_story_path(star_story) %>">
+          <td class="star-story-order-column">
+            <input type="number" min="1" class="form-input star-story-order-input" aria-label="Temporary order for <%= star_story.title %>">
+          </td>
           <td><%= star_story.title %></td>
           <td class="table-cell-wrap"><%= truncate(star_story.situation, length: 200) %></td>
           <td class="table-cell-wrap"><%= truncate(star_story.task, length: 200) %></td>

config/importmap.rb

@@ -2,7 +2,7 @@
 
 pin "application"
 pin "@hotwired/turbo-rails", to: "turbo.min.js"
-pin "trix", to: "https://ga.jspm.io/npm:trix@2.1.16/dist/trix.esm.min.js"
+pin "trix", to: "https://ga.jspm.io/npm:trix@2.1.17/dist/trix.esm.min.js"
 pin "@rails/actiontext", to: "actiontext.esm.js"
 pin "@hotwired/stimulus", to: "stimulus.min.js"
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"