Replaces the grey slab and filled-box handle with the house card idiom,

a tabler grip and icon-only edit and delete actions. Shows each item's
non-default translations muted below the title, read from the
translation rows rather than the accessor so the fallback chain cannot
disguise a missing label as a translated one.

Adds move up/down buttons via acts_as_list, the single-pointer
alternative WCAG 2.5.7 requires: the jQuery UI sortable binds mouse
events only, so dragging works neither on touch nor from the keyboard.
The grip is hidden below the desktop breakpoint for the same reason.

The sort handler dropped dataType: "json" against a head :ok response,
which sent every success down the error path, and now reloads so the
disabled chevron states match the stored order after a drag.

7 files changed, 196 insertions, 30 deletions

diff --git a/app/controllers/menu_items_controller.rb b/app/controllers/menu_items_controller.rb
index 48018800..f169e0ca 100644
--- a/app/controllers/menu_items_controller.rb
+++ b/app/controllers/menu_items_controller.rb
@@ -54,6 +54,16 @@ class MenuItemsController < ApplicationController
     head :ok
   end
 
+  def move_up
+    MenuItem.find(params[:id]).move_higher
+    redirect_to menu_items_path
+  end
+
+  def move_down
+    MenuItem.find(params[:id]).move_lower
+    redirect_to menu_items_path
+  end
+
   private
 
     def menu_item_params
diff --git a/app/views/menu_items/index.html.erb b/app/views/menu_items/index.html.erb
index cdc60c63..0eacc34a 100644
--- a/app/views/menu_items/index.html.erb
+++ b/app/views/menu_items/index.html.erb
@@ -4,18 +4,55 @@
   <%= icon("plus", library: "tabler", "aria-hidden": true) %> <%= t(".create_item") %>
 <% end %>
 
+<p class="field_hint"><%= t(".reorder_hint") %></p>
+
 <table id="menu_item_list">
   <% @menu_items.each do |menu_item| %>
   <tr id="menu_items-<%= menu_item.id %>">
     <td class="menu_sort_handle">
-      <div></div>
+      <span class="menu_grip"><%= icon("grip-vertical", library: "tabler", "aria-hidden": true) %></span>
+
+      <%= button_to move_up_menu_item_path(menu_item), method: :post,
+            disabled: menu_item.first?,
+            form: { class: "button_to menu_move" },
+            "aria-label" => t(".move_up"), title: t(".move_up") do %>
+        <%= icon("chevron-up", library: "tabler", "aria-hidden": true) %>
+      <% end %>
+
+      <%= button_to move_down_menu_item_path(menu_item), method: :post,
+            disabled: menu_item.last?,
+            form: { class: "button_to menu_move" },
+            "aria-label" => t(".move_down"), title: t(".move_down") do %>
+        <%= icon("chevron-down", library: "tabler", "aria-hidden": true) %>
+      <% end %>
+    </td>
+    <td class="menu_item_title">
+      <%= menu_item.title %>
+      <% (I18n.available_locales - [:root, I18n.default_locale]).each do |locale| %>
+        <% translated = menu_item.translations.find_by(:locale => locale)&.title %>
+        <span class="menu_item_translation">
+          <span class="menu_item_translation_locale"><%= locale.to_s.upcase %></span>
+          <% if translated.present? %>
+            <%= translated %>
+          <% else %>
+            <span class="menu_item_translation_absent"><%= t(".falls_back") %></span>
+          <% end %>
+        </span>
+      <% end %>
+    </td>
+    <td class="menu_item_action">
+      <%= link_to edit_menu_item_path(menu_item),
+            "aria-label" => t("admin.common.edit"),
+            title: t("admin.common.edit") do %>
+        <%= icon("edit", library: "tabler", "aria-hidden": true) %>
+      <% end %>
     </td>
-    <td class="menu_item_title"><%= menu_item.title %></td>
-    <td><%= link_to t("admin.common.edit"), edit_menu_item_path(menu_item) %></td>
-    <td>
+    <td class="menu_item_action">
       <%= button_to menu_item_path(menu_item), method: :delete,
-            form: { data: { confirm: t(".confirm_destroy") }, class: 'button_to destructive' } do %>
-        <%= icon("trash", library: "tabler", "aria-hidden": true) %> <%= t("admin.common.destroy") %>
+            form: { data: { confirm: t(".confirm_destroy") }, class: 'button_to destructive' },
+            "aria-label" => t("admin.common.destroy"),
+            title: t("admin.common.destroy") do %>
+        <%= icon("trash", library: "tabler", "aria-hidden": true) %>
       <% end %>
     </td>
   </tr>
diff --git a/config/locales/de.yml b/config/locales/de.yml
index 647caf57..2d5e9685 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -669,6 +669,10 @@ de:
       title: "Menüeinträge"
       create_item: "Menüeintrag anlegen"
       confirm_destroy: "Diesen Menüeintrag wirklich löschen?"
+      reorder_hint: "Die Einträge im Navi-Menü kann man draggen"
+      falls_back: "… Fallback auf deutsch"
+      move_up: "Nach oben"
+      move_down: "Nach unten"
     new:
       title: "Menüeintrag hinzufügen"
     edit:
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 1b112e3d..da8282cf 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -481,6 +481,10 @@ en:
       title: "Menu Items"
       create_item: "Create menu item"
       confirm_destroy: "Do you really want to destroy the menu entry?"
+      reorder_hint: "Drag the handles to change the order"
+      falls_back: "… falls back to German"
+      move_up: "Move up"
+      move_down: "Move down"
     new:
       title: "Add Menu Item"
     edit:
diff --git a/config/routes.rb b/config/routes.rb
index 9793c6a6..4b5d15c9 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -108,6 +108,8 @@ Cccms::Application.routes.draw do
     resources :menu_items, :except => :show do
       member do
         post :sort
+        post :move_up
+        post :move_down
       end
     end
 
diff --git a/public/javascripts/admin_interface.js b/public/javascripts/admin_interface.js
index ee0b34cd..d94fb623 100644
--- a/public/javascripts/admin_interface.js
+++ b/public/javascripts/admin_interface.js
@@ -386,9 +386,16 @@ menu_item_sorter = {
           type: "POST",
           url: "/menu_items/0/sort",
           data: $(this).sortable("serialize"),
-          dataType: "json",
-          success : function(results) {
-            alert(results);
+          success : function() {
+            // The controller answers head :ok, so there is nothing to parse
+            // and dataType: "json" would send every success down the error
+            // path. Reload rather than patch the DOM: first?/last? decide the
+            // disabled chevrons server-side, and after a drag they describe
+            // the old order.
+            window.location.reload();
+          },
+          error : function() {
+            alert("Reihenfolge konnte nicht gespeichert werden.");
           }
         });
       }
diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index 49e2362b..1d39dd6c 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -9,7 +9,6 @@
   --hairline:              color-mix(in srgb, CanvasText, Canvas 91%);  /* #e8e8e8 */
   --hairline-faint:        color-mix(in srgb, CanvasText, Canvas 94%);  /* #f1f1f1 */
   --border:                color-mix(in srgb, CanvasText, Canvas 87%);  /* #ddd */
-  --frame-fill:            color-mix(in srgb, CanvasText, Canvas 83%);  /* lightgrey */
   --field-border:          color-mix(in srgb, CanvasText, Canvas 60%);  /* #989898 */
   --handle-fill:           color-mix(in srgb, CanvasText, Canvas 60%);  /* #989898 as fill */
   --link-underline:        color-mix(in srgb, CanvasText, Canvas 69%);  /* #b0b0b0 */
@@ -1295,11 +1294,15 @@ input#menu_item_title {
    ============================================================ */
 
 #menu_item_list {
-  border-collapse: collapse;
-  padding: 5px 5px 5px 5px;
-  border: solid 5px var(--frame-fill);
-  background-color: var(--frame-fill);
-  border-radius: 5px;
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+  max-width: 44rem;
+
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius);
+
+  padding: 0.5rem;
 }
 
 #menu_item_list tr:hover {
@@ -1307,33 +1310,132 @@ input#menu_item_title {
 }
 
 #menu_item_list td {
-  height: 20px;
+  padding: 0.4rem 0.5rem;
+  border-bottom: 1px solid var(--hairline);
+}
+
+#menu_item_list tr:last-child td {
+  border-bottom: none;
 }
 
 #menu_item_list td.menu_item_title {
-  width: 200px;
+  width: 100%;
+}
+
+.menu_item_translation {
+  display: block;
+  font-size: 0.85rem;
+  color: var(--text-muted);
 }
 
-#menu_item_list td.menu_sort_handle div {
-  background-color: var(--handle-fill);
-  height: 26px;
-  width: 26px;
+.menu_item_translation_locale {
+  font-variant: all-small-caps;
+  letter-spacing: 0.04em;
+  margin-right: 0.35rem;
 }
 
-#menu_item_list td.menu_sort_handle div:before {
-  content: "⇳";
-  font-size: 20px;
-  font-weight: bold;
+.menu_item_translation_absent {
+  font-style: italic;
+}
+
+#menu_item_list td.menu_item_action {
+  width: 1px;
+  white-space: nowrap;
   text-align: center;
-  vertical-align: center;
 }
 
-#menu_item_list td.menu_sort_handle div:hover {
-  cursor: grab;
+#menu_item_list td.menu_item_action a {
+  text-decoration: none;
 }
 
-.ui-state-highlight td {
-  height: 20px;
+#menu_item_list td.menu_item_action svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  vertical-align: middle;
+}
+
+#menu_item_list td.menu_sort_handle {
+  width: 1px;
+  white-space: nowrap;
+  color: var(--text-muted);
+}
+
+/* jQuery UI sortable binds mouse events, so drag never works on touch.
+   Below the desktop breakpoint the grip would advertise something that
+   cannot happen, and the width is better spent on the chevrons. */
+#menu_item_list .menu_grip {
+  display: none;
+}
+
+@media (min-width: 1016px) {
+  #menu_item_list .menu_grip {
+    display: inline-block;
+    cursor: grab;
+    vertical-align: middle;
+  }
+
+  #menu_item_list td.menu_sort_handle:active .menu_grip {
+    cursor: grabbing;
+  }
+}
+
+#menu_item_list form.menu_move {
+  display: inline-block;
+  margin: 0;
+}
+
+#menu_item_list form.menu_move button[type="submit"] {
+  padding: 0.15rem 0.2rem;
+  border: 1px solid transparent;
+  background-color: transparent;
+  color: var(--text-muted);
+  line-height: 1;
+}
+
+#menu_item_list form.menu_move button[type="submit"]:hover {
+  color: var(--text);
+  background-color: var(--surface-tint);
+}
+
+#menu_item_list form.menu_move button[type="submit"]:disabled {
+  opacity: 0.35;
+  cursor: default;
+  background-color: transparent;
+  color: var(--text-muted);
+}
+
+#menu_item_list td.menu_sort_handle svg {
+  width: 1.1rem;
+  height: 1.1rem;
+  vertical-align: middle;
+}
+
+#menu_item_list td.menu_sort_handle:active {
+  cursor: grabbing;
+}
+
+#menu_item_list td.menu_sort_handle svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  vertical-align: middle;
+}
+
+#menu_item_list tr.ui-state-highlight td {
+  height: 2.5rem;
+  background-color: var(--accent-surface);
+  border: 1px dashed var(--accent);
+}
+
+#menu_item_list form.button_to.destructive input[type="submit"],
+#menu_item_list form.button_to.destructive button[type="submit"] {
+  color: var(--danger);
+  background-color: transparent;
+}
+
+#menu_item_list form.button_to.destructive input[type="submit"]:hover,
+#menu_item_list form.button_to.destructive button[type="submit"]:hover {
+  color: var(--on-solid);
+  background-color: var(--danger-solid);
 }
 
 /* ============================================================