Applied Extra Changes/Fixes to the UI

frontend/src/melodies/MelodyForm.jsx

@@ -432,12 +432,6 @@ export default function MelodyForm() {
                           : "transparent",
                       }}
                     />
-                    <input
-                      type="color"
-                      value={information.color ? normalizeColor(information.color) : "#000000"}
-                      onChange={(e) => updateInfo("color", e.target.value)}
-                      className="w-8 h-8 cursor-pointer border border-gray-300 rounded flex-shrink-0"
-                    />
                     <input
                       type="text"
                       value={information.color}
@@ -446,24 +440,37 @@ export default function MelodyForm() {
                       className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
                     />
                   </div>
-                  {quickColors.length > 0 && (
-                    <div className="flex flex-wrap gap-2">
-                      {quickColors.map((color) => (
-                        <button
-                          key={color}
-                          type="button"
-                          onClick={() => updateInfo("color", color)}
-                          className={`w-6 h-6 rounded border-2 transition-all ${
-                            information.color === color
-                              ? "border-blue-500 ring-2 ring-blue-200"
-                              : "border-gray-200 hover:border-gray-400"
-                          }`}
-                          style={{ backgroundColor: normalizeColor(color) }}
-                          title={color}
-                        />
-                      ))}
-                    </div>
-                  )}
+                  <div className="flex flex-wrap gap-2 items-center">
+                    {quickColors.map((color) => (
+                      <button
+                        key={color}
+                        type="button"
+                        onClick={() => updateInfo("color", color)}
+                        className={`w-7 h-7 rounded-md border-2 transition-all cursor-pointer ${
+                          information.color === color
+                            ? "border-blue-500 ring-2 ring-blue-200"
+                            : "border-gray-200 hover:border-gray-400"
+                        }`}
+                        style={{ backgroundColor: normalizeColor(color) }}
+                        title={color}
+                      />
+                    ))}
+                    <label
+                      className="relative inline-flex items-center gap-1.5 px-3 py-1.5 border-2 border-dashed border-gray-300 rounded-md text-xs text-gray-500 hover:border-gray-400 hover:text-gray-700 transition-colors cursor-pointer"
+                      title="Pick a custom color"
+                    >
+                      <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+                      </svg>
+                      Custom
+                      <input
+                        type="color"
+                        value={information.color ? normalizeColor(information.color) : "#000000"}
+                        onChange={(e) => updateInfo("color", e.target.value)}
+                        className="absolute inset-0 opacity-0 w-full h-full cursor-pointer"
+                      />
+                    </label>
+                  </div>
                 </div>
 
                 <div className="flex items-center gap-2 pt-2">
@@ -482,19 +489,6 @@ export default function MelodyForm() {
                   </label>
                 </div>
 
-                <div className="md:col-span-2">
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
-                    Notes (comma-separated integers)
-                  </label>
-                  <input
-                    type="text"
-                    value={information.notes.join(", ")}
-                    onChange={(e) => updateInfo("notes", parseIntList(e.target.value))}
-                    placeholder="e.g. 1, 2, 3, 4"
-                    className={inputClass}
-                  />
-                </div>
-
                 <div className="md:col-span-2">
                   <label className="block text-sm font-medium text-gray-700 mb-1">
                     Custom Tags
@@ -725,8 +719,8 @@ export default function MelodyForm() {
                       { length: information.totalNotes },
                       (_, i) => (
                         <div key={i}>
-                          <label className="block text-xs text-gray-400 mb-0.5 text-center">
-                            N{i + 1}
+                          <label className="block text-xs text-gray-400 mb-0.5 text-left">
+                            Note #{i + 1}
                           </label>
                           <input
                             type="number"

frontend/src/melodies/MelodyList.jsx

@@ -1,15 +1,53 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import api from "../api/client";
 import { useAuth } from "../auth/AuthContext";
 import SearchBar from "../components/SearchBar";
-import DataTable from "../components/DataTable";
 import ConfirmDialog from "../components/ConfirmDialog";
-import { getLocalizedValue, getLanguageName } from "./melodyUtils";
+import {
+  getLocalizedValue,
+  getLanguageName,
+  normalizeColor,
+  formatDuration,
+} from "./melodyUtils";
 
 const MELODY_TYPES = ["", "orthodox", "catholic", "all"];
 const MELODY_TONES = ["", "normal", "festive", "cheerful", "lamentation"];
 
+// All available columns with their defaults
+const ALL_COLUMNS = [
+  { key: "color", label: "Color", defaultOn: true },
+  { key: "name", label: "Name", defaultOn: true, alwaysOn: true },
+  { key: "description", label: "Description", defaultOn: false },
+  { key: "type", label: "Type", defaultOn: true },
+  { key: "tone", label: "Tone", defaultOn: true },
+  { key: "totalNotes", label: "Total Notes", defaultOn: true },
+  { key: "minSpeed", label: "Min Speed", defaultOn: false },
+  { key: "maxSpeed", label: "Max Speed", defaultOn: false },
+  { key: "tags", label: "Tags", defaultOn: false },
+  { key: "speed", label: "Speed", defaultOn: false },
+  { key: "duration", label: "Duration", defaultOn: false },
+  { key: "totalRunDuration", label: "Total Run", defaultOn: false },
+  { key: "pauseDuration", label: "Pause", defaultOn: false },
+  { key: "infiniteLoop", label: "Infinite", defaultOn: false },
+  { key: "noteAssignments", label: "Note Assignments", defaultOn: false },
+  { key: "isTrueRing", label: "True Ring", defaultOn: true },
+  { key: "docId", label: "Document ID", defaultOn: false },
+  { key: "pid", label: "PID", defaultOn: false },
+];
+
+function getDefaultVisibleColumns() {
+  const saved = localStorage.getItem("melodyListColumns");
+  if (saved) {
+    try {
+      return JSON.parse(saved);
+    } catch {
+      // ignore
+    }
+  }
+  return ALL_COLUMNS.filter((c) => c.defaultOn).map((c) => c.key);
+}
+
 export default function MelodyList() {
   const [melodies, setMelodies] = useState([]);
   const [total, setTotal] = useState(0);
@@ -21,6 +59,9 @@ export default function MelodyList() {
   const [displayLang, setDisplayLang] = useState("en");
   const [melodySettings, setMelodySettings] = useState(null);
   const [deleteTarget, setDeleteTarget] = useState(null);
+  const [visibleColumns, setVisibleColumns] = useState(getDefaultVisibleColumns);
+  const [showColumnPicker, setShowColumnPicker] = useState(false);
+  const columnPickerRef = useRef(null);
   const navigate = useNavigate();
   const { hasRole } = useAuth();
   const canEdit = hasRole("superadmin", "melody_editor");
@@ -32,6 +73,19 @@ export default function MelodyList() {
     });
   }, []);
 
+  // Close column picker on outside click
+  useEffect(() => {
+    const handleClick = (e) => {
+      if (columnPickerRef.current && !columnPickerRef.current.contains(e.target)) {
+        setShowColumnPicker(false);
+      }
+    };
+    if (showColumnPicker) {
+      document.addEventListener("mousedown", handleClick);
+      return () => document.removeEventListener("mousedown", handleClick);
+    }
+  }, [showColumnPicker]);
+
   const fetchMelodies = async () => {
     setLoading(true);
     setError("");
@@ -67,85 +121,126 @@ export default function MelodyList() {
     }
   };
 
-  const getDisplayName = (nameDict) => {
-    return getLocalizedValue(nameDict, displayLang, "Untitled");
+  const toggleColumn = (key) => {
+    const col = ALL_COLUMNS.find((c) => c.key === key);
+    if (col?.alwaysOn) return;
+    setVisibleColumns((prev) => {
+      const next = prev.includes(key)
+        ? prev.filter((k) => k !== key)
+        : [...prev, key];
+      localStorage.setItem("melodyListColumns", JSON.stringify(next));
+      return next;
+    });
   };
 
-  const columns = [
-    {
-      key: "name",
-      label: "Name",
-      render: (row) => (
-        <span className="font-medium text-gray-900">
-          {getDisplayName(row.information?.name)}
-        </span>
-      ),
-    },
-    {
-      key: "type",
-      label: "Type",
-      render: (row) => (
-        <span className="capitalize">{row.type}</span>
-      ),
-    },
-    {
-      key: "tone",
-      label: "Tone",
-      render: (row) => (
-        <span className="capitalize">{row.information?.melodyTone || "-"}</span>
-      ),
-    },
-    {
-      key: "totalNotes",
-      label: "Notes",
-      render: (row) => row.information?.totalNotes ?? "-",
-    },
-    {
-      key: "steps",
-      label: "Steps",
-      render: (row) => row.information?.steps ?? "-",
-    },
-    {
-      key: "isTrueRing",
-      label: "True Ring",
-      render: (row) => (
-        <span
-          className={`px-2 py-0.5 text-xs rounded-full ${
-            row.information?.isTrueRing
-              ? "bg-green-100 text-green-700"
-              : "bg-gray-100 text-gray-500"
-          }`}
-        >
-          {row.information?.isTrueRing ? "Yes" : "No"}
-        </span>
-      ),
-    },
-    ...(canEdit
-      ? [
-          {
-            key: "actions",
-            label: "",
-            width: "100px",
-            render: (row) => (
-              <div className="flex gap-2" onClick={(e) => e.stopPropagation()}>
-                <button
-                  onClick={() => navigate(`/melodies/${row.id}/edit`)}
-                  className="text-blue-600 hover:text-blue-800 text-xs"
-                >
-                  Edit
-                </button>
-                <button
-                  onClick={() => setDeleteTarget(row)}
-                  className="text-red-600 hover:text-red-800 text-xs"
-                >
-                  Delete
-                </button>
-              </div>
-            ),
-          },
-        ]
-      : []),
-  ];
+  const isVisible = (key) => visibleColumns.includes(key);
+
+  const getDisplayName = (nameVal) =>
+    getLocalizedValue(nameVal, displayLang, "Untitled");
+
+  const renderCellValue = (key, row) => {
+    const info = row.information || {};
+    const ds = row.default_settings || {};
+    switch (key) {
+      case "color":
+        return info.color ? (
+          <span
+            className="inline-block w-3 h-8 rounded-sm"
+            style={{ backgroundColor: normalizeColor(info.color) }}
+            title={info.color}
+          />
+        ) : (
+          <span className="inline-block w-3 h-8 rounded-sm bg-gray-200" />
+        );
+      case "name":
+        return (
+          <div>
+            <span className="font-medium text-gray-900">
+              {getDisplayName(info.name)}
+            </span>
+            {isVisible("description") && (
+              <p className="text-xs text-gray-500 mt-0.5 truncate max-w-xs">
+                {getLocalizedValue(info.description, displayLang) || "-"}
+              </p>
+            )}
+          </div>
+        );
+      case "type":
+        return <span className="capitalize">{row.type}</span>;
+      case "tone":
+        return <span className="capitalize">{info.melodyTone || "-"}</span>;
+      case "totalNotes":
+        return info.totalNotes ?? "-";
+      case "minSpeed":
+        return info.minSpeed ?? "-";
+      case "maxSpeed":
+        return info.maxSpeed ?? "-";
+      case "tags":
+        return info.customTags?.length > 0 ? (
+          <div className="flex flex-wrap gap-1">
+            {info.customTags.map((tag) => (
+              <span
+                key={tag}
+                className="px-1.5 py-0.5 bg-blue-50 text-blue-700 text-xs rounded-full"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+        ) : (
+          "-"
+        );
+      case "speed":
+        return ds.speed != null ? `${ds.speed}%` : "-";
+      case "duration":
+        return ds.duration != null ? formatDuration(ds.duration) : "-";
+      case "totalRunDuration":
+        return ds.totalRunDuration ?? "-";
+      case "pauseDuration":
+        return ds.pauseDuration ?? "-";
+      case "infiniteLoop":
+        return (
+          <span
+            className={`px-2 py-0.5 text-xs rounded-full ${
+              ds.infiniteLoop
+                ? "bg-green-100 text-green-700"
+                : "bg-gray-100 text-gray-500"
+            }`}
+          >
+            {ds.infiniteLoop ? "Yes" : "No"}
+          </span>
+        );
+      case "noteAssignments":
+        return ds.noteAssignments?.length > 0
+          ? ds.noteAssignments.join(", ")
+          : "-";
+      case "isTrueRing":
+        return (
+          <span
+            className={`px-2 py-0.5 text-xs rounded-full ${
+              info.isTrueRing
+                ? "bg-green-100 text-green-700"
+                : "bg-gray-100 text-gray-500"
+            }`}
+          >
+            {info.isTrueRing ? "Yes" : "No"}
+          </span>
+        );
+      case "docId":
+        return (
+          <span className="font-mono text-xs text-gray-500">{row.id}</span>
+        );
+      case "pid":
+        return row.pid || "-";
+      default:
+        return "-";
+    }
+  };
+
+  // Build visible column list (description is rendered inside name, not as its own column)
+  const activeColumns = ALL_COLUMNS.filter(
+    (c) => c.key !== "description" && isVisible(c.key)
+  );
 
   const languages = melodySettings?.available_languages || ["en"];
 
@@ -156,7 +251,7 @@ export default function MelodyList() {
         {canEdit && (
           <button
             onClick={() => navigate("/melodies/new")}
-            className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 transition-colors"
+            className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 transition-colors cursor-pointer"
           >
             Add Melody
           </button>
@@ -168,11 +263,11 @@ export default function MelodyList() {
           onSearch={setSearch}
           placeholder="Search by name, description, or tags..."
         />
-        <div className="flex flex-wrap gap-3">
+        <div className="flex flex-wrap gap-3 items-center">
           <select
             value={typeFilter}
             onChange={(e) => setTypeFilter(e.target.value)}
-            className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
           >
             <option value="">All Types</option>
             {MELODY_TYPES.filter(Boolean).map((t) => (
@@ -184,7 +279,7 @@ export default function MelodyList() {
           <select
             value={toneFilter}
             onChange={(e) => setToneFilter(e.target.value)}
-            className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
           >
             <option value="">All Tones</option>
             {MELODY_TONES.filter(Boolean).map((t) => (
@@ -197,7 +292,7 @@ export default function MelodyList() {
             <select
               value={displayLang}
               onChange={(e) => setDisplayLang(e.target.value)}
-              className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
             >
               {languages.map((l) => (
                 <option key={l} value={l}>
@@ -206,6 +301,42 @@ export default function MelodyList() {
               ))}
             </select>
           )}
+
+          {/* Column visibility dropdown */}
+          <div className="relative" ref={columnPickerRef}>
+            <button
+              type="button"
+              onClick={() => setShowColumnPicker((prev) => !prev)}
+              className="px-3 py-2 border border-gray-300 rounded-md text-sm text-gray-600 hover:bg-gray-50 transition-colors cursor-pointer flex items-center gap-1.5"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
+              </svg>
+              Columns
+            </button>
+            {showColumnPicker && (
+              <div className="absolute right-0 top-full mt-1 z-20 bg-white border border-gray-200 rounded-lg shadow-lg py-2 w-52">
+                {ALL_COLUMNS.map((col) => (
+                  <label
+                    key={col.key}
+                    className={`flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-gray-50 cursor-pointer ${
+                      col.alwaysOn ? "text-gray-400" : "text-gray-700"
+                    }`}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={isVisible(col.key)}
+                      onChange={() => toggleColumn(col.key)}
+                      disabled={col.alwaysOn}
+                      className="h-3.5 w-3.5 rounded border-gray-300 text-blue-600 cursor-pointer"
+                    />
+                    {col.label}
+                  </label>
+                ))}
+              </div>
+            )}
+          </div>
+
           <span className="flex items-center text-sm text-gray-500">
             {total} {total === 1 ? "melody" : "melodies"}
           </span>
@@ -220,13 +351,75 @@ export default function MelodyList() {
 
       {loading ? (
         <div className="text-center py-8 text-gray-500">Loading...</div>
+      ) : melodies.length === 0 ? (
+        <div className="bg-white rounded-lg border border-gray-200 p-8 text-center text-gray-500 text-sm">
+          No melodies found.
+        </div>
       ) : (
-        <DataTable
-          columns={columns}
-          data={melodies}
-          onRowClick={(row) => navigate(`/melodies/${row.id}`)}
-          emptyMessage="No melodies found."
-        />
+        <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="bg-gray-50 border-b border-gray-200">
+                  {activeColumns.map((col) => (
+                    <th
+                      key={col.key}
+                      className={`px-4 py-3 text-left font-medium text-gray-600 ${
+                        col.key === "color" ? "w-8 px-2" : ""
+                      }`}
+                    >
+                      {col.key === "color" ? "" : col.label}
+                    </th>
+                  ))}
+                  {canEdit && (
+                    <th className="px-4 py-3 text-left font-medium text-gray-600 w-24" />
+                  )}
+                </tr>
+              </thead>
+              <tbody>
+                {melodies.map((row) => (
+                  <tr
+                    key={row.id}
+                    onClick={() => navigate(`/melodies/${row.id}`)}
+                    className="border-b border-gray-100 last:border-0 cursor-pointer hover:bg-gray-50"
+                  >
+                    {activeColumns.map((col) => (
+                      <td
+                        key={col.key}
+                        className={`px-4 py-3 text-gray-700 ${
+                          col.key === "color" ? "w-8 px-2" : ""
+                        }`}
+                      >
+                        {renderCellValue(col.key, row)}
+                      </td>
+                    ))}
+                    {canEdit && (
+                      <td className="px-4 py-3">
+                        <div
+                          className="flex gap-2"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <button
+                            onClick={() => navigate(`/melodies/${row.id}/edit`)}
+                            className="text-blue-600 hover:text-blue-800 text-xs cursor-pointer"
+                          >
+                            Edit
+                          </button>
+                          <button
+                            onClick={() => setDeleteTarget(row)}
+                            className="text-red-600 hover:text-red-800 text-xs cursor-pointer"
+                          >
+                            Delete
+                          </button>
+                        </div>
+                      </td>
+                    )}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
       )}
 
       <ConfirmDialog