Add mobile status action sheet

Author: reniko

app/_components/FeatureComponents/Kanban/KanbanCard.tsx

@@ -5,6 +5,7 @@ import { CSS } from "@dnd-kit/utilities";
 import { Item, Checklist, KanbanStatus } from "@/app/_types";
 import { cn } from "@/app/_utils/global-utils";
 import { Dropdown } from "@/app/_components/GlobalComponents/Dropdowns/Dropdown";
+import { Modal } from "@/app/_components/GlobalComponents/Modals/Modal";
 import { useState, useEffect, memo, useMemo, useCallback } from "react";
 import { TaskStatus } from "@/app/_types/enums";
 import { KanbanCardDetail } from "./KanbanCardDetail";
@@ -72,6 +73,7 @@ const KanbanCardComponent = ({
 
   const [showDetailModal, setShowDetailModal] = useState(false);
   const [showTimeEntriesModal, setShowTimeEntriesModal] = useState(false);
+  const [showStatusSheet, setShowStatusSheet] = useState(false);
   const hideMobileStatusDropdown = user?.hideMobileStatusDropdown === "enable";
 
   const kanbanItemHook = useKanbanItem({
@@ -116,8 +118,47 @@ const KanbanCardComponent = ({
     return options?.sort((a, b) => a.order - b.order);
   }, [statuses]);
 
+  const handleMobileStatusChange = async (newStatus: string) => {
+    await kanbanItemHook.handleStatusChange(newStatus);
+    setShowStatusSheet(false);
+  };
+
   return (
     <>
+      {showStatusSheet && (
+        <Modal
+          isOpen={showStatusSheet}
+          onClose={() => setShowStatusSheet(false)}
+          title={t("kanban.changeStatus")}
+          className="lg:hidden"
+        >
+          <div className="space-y-2">
+            {statusOptions.map((status) => {
+              const isCurrent = status.id === (item.status || TaskStatus.TODO);
+              return (
+                <button
+                  key={status.id}
+                  type="button"
+                  onClick={() => handleMobileStatusChange(status.id.toString())}
+                  className={cn(
+                    "w-full flex items-center gap-3 px-3 py-2.5 rounded-jotty border text-left transition-colors",
+                    isCurrent
+                      ? "border-primary/50 bg-primary/5 text-foreground font-semibold"
+                      : "border-border text-muted-foreground hover:border-primary/30 hover:bg-muted/50"
+                  )}
+                >
+                  <span
+                    className="h-3 w-3 rounded-full flex-shrink-0"
+                    style={{ backgroundColor: status.color || "#6b7280" }}
+                  />
+                  <span className="text-sm">{status.name}</span>
+                </button>
+              );
+            })}
+          </div>
+        </Modal>
+      )}
+
       {showTimeEntriesModal && item.timeEntries && (
         <TimeEntriesModal
           isOpen={showTimeEntriesModal}
@@ -172,6 +213,7 @@ const KanbanCardComponent = ({
               onEditSave={kanbanItemHook.handleSave}
               onEditKeyDown={kanbanItemHook.handleKeyDown}
               onShowSubtaskModal={() => setShowDetailModal(true)}
+              onShowStatusMenu={() => setShowStatusSheet(true)}
               onEdit={kanbanItemHook.handleEdit}
               onDelete={kanbanItemHook.handleDelete}
               onArchive={kanbanItemHook.handleArchive}

app/_components/FeatureComponents/Kanban/KanbanItemContent.tsx

@@ -23,6 +23,7 @@ interface KanbanItemContentProps {
   onEditSave: () => void;
   onEditKeyDown: (e: React.KeyboardEvent) => void;
   onShowSubtaskModal: () => void;
+  onShowStatusMenu: () => void;
   onEdit: () => void;
   onDelete: () => void;
   onArchive: () => void;
@@ -43,6 +44,7 @@ const KanbanItemContentComponent = ({
   onEditSave,
   onEditKeyDown,
   onShowSubtaskModal,
+  onShowStatusMenu,
   onEdit,
   onDelete,
   onArchive,
@@ -110,6 +112,15 @@ const KanbanItemContentComponent = ({
             value=""
             options={[
               { id: "view", name: t("tasks.viewTask") },
+              ...(permissions?.canEdit
+                ? [
+                    {
+                      id: "status",
+                      name: t("kanban.changeStatus"),
+                      className: "lg:hidden",
+                    },
+                  ]
+                : []),
               ...(permissions?.canEdit
                 ? [{ id: "add", name: t("tasks.addSubtask") }]
                 : []),
@@ -128,6 +139,9 @@ const KanbanItemContentComponent = ({
                 case "view":
                   onShowSubtaskModal();
                   break;
+                case "status":
+                  onShowStatusMenu();
+                  break;
                 case "add":
                   onShowSubtaskModal();
                   break;

app/_components/GlobalComponents/Dropdowns/Dropdown.tsx

@@ -10,6 +10,7 @@ interface DropdownOption {
   name: React.ReactNode;
   icon?: React.ComponentType<{ className?: string }>;
   colors?: { background: string; primary: string } | null;
+  className?: string;
 }
 
 interface DropdownProps {
@@ -135,7 +136,8 @@ export const Dropdown = ({
                 onClick={(e) => handleSelect(e, option.id.toString())}
                 className={cn(
                   "w-full flex items-center gap-2 px-3 py-2 text-md lg:text-sm hover:bg-accent hover:text-accent-foreground",
-                  option.id === value && "bg-accent text-accent-foreground"
+                  option.id === value && "bg-accent text-accent-foreground",
+                  option.className
                 )}
               >
                 {option.icon && <option.icon className="h-4 w-4" />}

app/_translations/de.json

@@ -574,6 +574,7 @@
     "itemTitle": "Elementtitel",
     "manageStatuses": "Status verwalten",
     "viewArchived": "Archivierte anzeigen",
+    "changeStatus": "Status ändern",
     "noBoards": "Keine Boards gefunden",
     "noBoardsYet": "Noch keine Kanban-Boards",
     "createFirstBoard": "Erstelle dein erstes Kanban-Board, um deine Projekte zu verwalten.",

app/_translations/en.json

@@ -599,6 +599,7 @@
     "itemTitle": "Item Title",
     "manageStatuses": "Manage Statuses",
     "viewArchived": "View Archived",
+    "changeStatus": "Change status",
     "noBoards": "No boards found",
     "noBoardsYet": "No kanban boards yet",
     "createFirstBoard": "Create your first kanban board to start managing your projects.",

app/_translations/es.json

@@ -543,6 +543,8 @@
     "autoComplete": "Autocompletar"
   },
   "kanban": {
+    "properties": "Propiedades",
+    "status": "Estado",
     "priority": "Prioridad",
     "score": "Puntuación",
     "assignee": "Asignado a",
@@ -572,6 +574,7 @@
     "itemTitle": "Título del elemento",
     "manageStatuses": "Gestionar estados",
     "viewArchived": "Ver archivados",
+    "changeStatus": "Cambiar estado",
     "noBoards": "No se encontraron tableros",
     "noBoardsYet": "Aún no hay tableros Kanban",
     "createFirstBoard": "Cree su primer tablero Kanban para empezar a gestionar sus proyectos.",
@@ -836,6 +839,11 @@
     "showStatusOnCards": "Mostrar estado",
     "hideStatusOnCards": "Ocultar estado",
     "hideStatusOnCardsDescription": "Oculta la etiqueta de estado en las tarjetas Kanban. El estado ya se indica por la columna en la que se encuentra la tarjeta.",
+    "hideMobileStatusDropdownLabel": "Menú desplegable de estado móvil en tarjetas",
+    "showMobileStatusDropdown": "Mostrar menú móvil",
+    "hideMobileStatusDropdown": "Ocultar menú móvil",
+    "selectMobileStatusDropdown": "Seleccionar comportamiento del menú de estado móvil",
+    "hideMobileStatusDropdownDescription": "Controla el menú desplegable de estado siempre visible en tarjetas Kanban móviles. La configuración de la etiqueta de estado es independiente.",
     "selectStatusOnCards": "Seleccionar visibilidad del estado",
     "codeBlockChoice": "Elija el estilo del bloque de código",
     "themedCodeBlock": "Bloque de código temático",

app/_translations/fr.json

@@ -543,6 +543,8 @@
     "autoComplete": "Complétion automatique"
   },
   "kanban": {
+    "properties": "Propriétés",
+    "status": "Statut",
     "priority": "Priorité",
     "score": "Score",
     "assignee": "Assigné à",
@@ -572,6 +574,7 @@
     "itemTitle": "Titre de l'élément",
     "manageStatuses": "Gérer les statuts",
     "viewArchived": "Voir les archivés",
+    "changeStatus": "Changer le statut",
     "noBoards": "Aucun tableau trouvé",
     "noBoardsYet": "Pas encore de tableaux Kanban",
     "createFirstBoard": "Créez votre premier tableau Kanban pour gérer vos projets.",
@@ -836,6 +839,11 @@
     "showStatusOnCards": "Afficher le statut",
     "hideStatusOnCards": "Masquer le statut",
     "hideStatusOnCardsDescription": "Masque l'étiquette de statut sur les cartes Kanban. Le statut est déjà indiqué par la colonne dans laquelle se trouve la carte.",
+    "hideMobileStatusDropdownLabel": "Menu déroulant de statut mobile sur les cartes",
+    "showMobileStatusDropdown": "Afficher le menu mobile",
+    "hideMobileStatusDropdown": "Masquer le menu mobile",
+    "selectMobileStatusDropdown": "Sélectionner le comportement du menu de statut mobile",
+    "hideMobileStatusDropdownDescription": "Contrôle le menu déroulant de statut toujours visible sur les cartes Kanban mobiles. Le réglage de l'étiquette de statut est séparé.",
     "selectStatusOnCards": "Sélectionner la visibilité du statut",
     "codeBlockChoice": "Choisissez le style de bloc de code",
     "themedCodeBlock": "Bloc de code thématique",

app/_translations/it.json

@@ -543,6 +543,8 @@
     "autoComplete": "Complete automaticamente"
   },
   "kanban": {
+    "properties": "Proprietà",
+    "status": "Stato",
     "priority": "Priorità",
     "score": "Punteggio",
     "assignee": "Assegnato a",
@@ -572,6 +574,7 @@
     "itemTitle": "Titolo elemento",
     "manageStatuses": "Gestisci stati",
     "viewArchived": "Visualizza archiviati",
+    "changeStatus": "Cambia stato",
     "noBoards": "Nessuna board trovata",
     "noBoardsYet": "Nessuna board Kanban ancora",
     "createFirstBoard": "Crea la tua prima board Kanban per gestire i tuoi progetti.",
@@ -836,6 +839,11 @@
     "showStatusOnCards": "Mostra stato",
     "hideStatusOnCards": "Nascondi stato",
     "hideStatusOnCardsDescription": "Nasconde l'etichetta di stato dalle schede Kanban. Lo stato è già indicato dalla colonna in cui si trova la scheda.",
+    "hideMobileStatusDropdownLabel": "Menu a discesa stato mobile sulle schede",
+    "showMobileStatusDropdown": "Mostra menu mobile",
+    "hideMobileStatusDropdown": "Nascondi menu mobile",
+    "selectMobileStatusDropdown": "Seleziona comportamento del menu stato mobile",
+    "hideMobileStatusDropdownDescription": "Controlla il menu a discesa dello stato sempre visibile sulle schede Kanban mobili. L'impostazione dell'etichetta di stato è separata.",
     "selectStatusOnCards": "Seleziona visibilità stato",
     "codeBlockChoice": "Scegli lo stile del blocco di codice",
     "themedCodeBlock": "Blocco di codice a tema",

app/_translations/klingon.json

@@ -568,6 +568,8 @@
     "autoComplete": "nIteb rIn"
   },
   "kanban": {
+    "properties": "DI'onmey",
+    "status": "ghu'",
     "priority": "nom mIw",
     "score": "pong",
     "assignee": "ghu' ghoS",
@@ -597,6 +599,7 @@
     "itemTitle": "chel pong",
     "manageStatuses": "ghu'mey yIvu'",
     "viewArchived": "Pol yIlegh",
+    "changeStatus": "ghu' yIchoH",
     "noBoards": "beQmey lutu'lu'be'",
     "noBoardsYet": "Kanban beQmey not yet",
     "createFirstBoard": "Kanban beQ wa' yIchel 'ej QInmey yIvu'.",
@@ -861,6 +864,11 @@
     "showStatusOnCards": "ngoq legh",
     "hideStatusOnCards": "ngoq So'",
     "hideStatusOnCardsDescription": "Kanban ghItlhmey ngoq So'. ngoq DaH ram vIghItlh Daq legh.",
+    "hideMobileStatusDropdownLabel": "mobile ghu' menu ghItlhmeyDaq",
+    "showMobileStatusDropdown": "mobile menu yIcha'",
+    "hideMobileStatusDropdown": "mobile menu yISo'",
+    "selectMobileStatusDropdown": "mobile ghu' menu mIw yIwIv",
+    "hideMobileStatusDropdownDescription": "mobile Kanban ghItlhmeyDaq reH leghlu'bogh ghu' menu SeH. ngoq label setting latlh.",
     "selectStatusOnCards": "ngoq leghlaHghach wIv",
     "codeBlockChoice": "Choose the code block style",
     "themedCodeBlock": "Themed codeblock",

app/_translations/ko.json

@@ -568,6 +568,8 @@
     "autoComplete": "자동 완료"
   },
   "kanban": {
+    "properties": "속성",
+    "status": "상태",
     "priority": "우선순위",
     "score": "점수",
     "assignee": "담당자",
@@ -597,6 +599,7 @@
     "itemTitle": "항목 제목",
     "manageStatuses": "상태 관리",
     "viewArchived": "보관된 항목 보기",
+    "changeStatus": "상태 변경",
     "noBoards": "보드를 찾을 수 없습니다",
     "noBoardsYet": "아직 칸반 보드가 없습니다",
     "createFirstBoard": "프로젝트 관리를 위해 첫 번째 칸반 보드를 만드세요.",
@@ -861,6 +864,11 @@
     "showStatusOnCards": "상태 표시",
     "hideStatusOnCards": "상태 숨기기",
     "hideStatusOnCardsDescription": "칸반 카드에서 상태 레이블을 숨깁니다. 상태는 카드가 있는 열로 이미 표시됩니다.",
+    "hideMobileStatusDropdownLabel": "카드의 모바일 상태 드롭다운",
+    "showMobileStatusDropdown": "모바일 드롭다운 표시",
+    "hideMobileStatusDropdown": "모바일 드롭다운 숨기기",
+    "selectMobileStatusDropdown": "모바일 상태 드롭다운 동작 선택",
+    "hideMobileStatusDropdownDescription": "모바일 칸반 카드에서 항상 보이는 상태 드롭다운을 제어합니다. 상태 레이블 설정은 별도입니다.",
     "selectStatusOnCards": "상태 표시 여부 선택",
     "codeBlockChoice": "코드 블록 스타일을 선택하세요",
     "themedCodeBlock": "테마 코드블록",