Kanban time tracking: detail-view access, hide-on-cards setting, session delete fix

app/_components/FeatureComponents/Kanban/KanbanCard.tsx

@@ -78,6 +78,7 @@ const KanbanCardComponent = ({
   const [showTimeEntriesModal, setShowTimeEntriesModal] = useState(false);
   const [showStatusSheet, setShowStatusSheet] = useState(false);
   const hideMobileStatusDropdown = user?.hideMobileStatusDropdown === "enable";
+  const hideTimeTrackingOnCards = user?.hideTimeTrackingOnCards === "enable";
 
   const kanbanItemHook = useKanbanItem({
     checklist,
@@ -157,7 +158,7 @@ const KanbanCardComponent = ({
           isOpen={showTimeEntriesModal}
           onClose={() => setShowTimeEntriesModal(false)}
           timeEntries={item.timeEntries}
-          checklistId={checklist.uuid || checklistId}
+          checklistId={checklistId}
           itemId={item.id}
           category={category}
           onUpdate={onUpdate}
@@ -255,29 +256,33 @@ const KanbanCardComponent = ({
               )}
             </div>
 
-            <KanbanItemTimer
-              totalTime={kanbanItemHook.totalTime}
-              currentTime={kanbanItemHook.currentTime}
-              isRunning={kanbanItemHook.isRunning}
-              formatTimerTime={formatTimerTime}
-              onTimerToggle={kanbanItemHook.handleTimerToggle}
-              onAddManualTime={kanbanItemHook.handleAddManualTime}
-            />
-
-            {item.timeEntries && item.timeEntries.length > 0 && (
-              <div onPointerDown={(e) => e.stopPropagation()}>
-                <TimeEntriesAccordion
-                  timeEntries={item.timeEntries}
-                  totalTime={
-                    kanbanItemHook.totalTime + kanbanItemHook.currentTime
-                  }
+            {!hideTimeTrackingOnCards && (
+              <>
+                <KanbanItemTimer
+                  totalTime={kanbanItemHook.totalTime}
+                  currentTime={kanbanItemHook.currentTime}
+                  isRunning={kanbanItemHook.isRunning}
                   formatTimerTime={formatTimerTime}
-                  usersPublicData={usersPublicData}
-                  formatDateString={formatDateString}
-                  formatTimeString={formatTimeString}
-                  onOpenTimeEntries={() => setShowTimeEntriesModal(true)}
+                  onTimerToggle={kanbanItemHook.handleTimerToggle}
+                  onAddManualTime={kanbanItemHook.handleAddManualTime}
                 />
-              </div>
+
+                {item.timeEntries && item.timeEntries.length > 0 && (
+                  <div onPointerDown={(e) => e.stopPropagation()}>
+                    <TimeEntriesAccordion
+                      timeEntries={item.timeEntries}
+                      totalTime={
+                        kanbanItemHook.totalTime + kanbanItemHook.currentTime
+                      }
+                      formatTimerTime={formatTimerTime}
+                      usersPublicData={usersPublicData}
+                      formatDateString={formatDateString}
+                      formatTimeString={formatTimeString}
+                      onOpenTimeEntries={() => setShowTimeEntriesModal(true)}
+                    />
+                  </div>
+                )}
+              </>
             )}
 
             {item.recurrence && (

app/_components/FeatureComponents/Kanban/KanbanCardDetail.tsx

@@ -22,6 +22,12 @@ import { useTranslations } from "next-intl";
 import { KanbanPriorityLevel } from "@/app/_types/enums";
 import { KanbanCardDetailProperties } from "./KanbanCardDetailProperties";
 import { KanbanCardDetailSubtasks } from "./KanbanCardDetailSubtasks";
+import { KanbanItemTimer } from "./KanbanItemTimer";
+import { TimeEntriesAccordion } from "./TimeEntriesAccordion";
+import { TimeEntriesModal } from "./TimeEntriesModal";
+import { useKanbanItem } from "@/app/_hooks/kanban/useKanbanItem";
+import { useAppMode } from "@/app/_providers/AppModeProvider";
+import { formatTimerTime } from "@/app/_utils/kanban/index";
 import { DEFAULT_KANBAN_STATUSES } from "@/app/_consts/kanban";
 
 interface KanbanCardDetailProps {
@@ -78,7 +84,9 @@ export const KanbanCardDetail = ({
 }: KanbanCardDetailProps) => {
   const t = useTranslations();
   const { permissions } = usePermissions();
-  const { formatDateTimeString } = usePreferredDateTime();
+  const { usersPublicData } = useAppMode();
+  const { formatDateTimeString, formatDateString, formatTimeString } =
+    usePreferredDateTime();
   const statuses = checklist.statuses || DEFAULT_KANBAN_STATUSES;
   const defaultStatusId =
     [...statuses].sort((a, b) => a.order - b.order)[0]?.id || "";
@@ -98,6 +106,15 @@ export const KanbanCardDetail = ({
   const [estimatedTimeInput, setEstimatedTimeInput] = useState(initialItem.estimatedTime?.toString() || "");
   const [availableUsers, setAvailableUsers] = useState<{ username: string; avatarUrl?: string }[]>([]);
   const [boardIsShared, setBoardIsShared] = useState(false);
+  const [showTimeEntriesModal, setShowTimeEntriesModal] = useState(false);
+
+  const kanbanItemHook = useKanbanItem({
+    checklist,
+    item,
+    checklistId,
+    category,
+    onUpdate,
+  });
 
   useEffect(() => {
     setItem(initialItem);
@@ -379,16 +396,53 @@ export const KanbanCardDetail = ({
     await _saveField({ estimatedTime: hours.toString() });
   };
 
+  const timeTrackingContent = (
+    <div className="space-y-2">
+      <KanbanItemTimer
+        totalTime={kanbanItemHook.totalTime}
+        currentTime={kanbanItemHook.currentTime}
+        isRunning={kanbanItemHook.isRunning}
+        formatTimerTime={formatTimerTime}
+        onTimerToggle={kanbanItemHook.handleTimerToggle}
+        onAddManualTime={kanbanItemHook.handleAddManualTime}
+      />
+      {item.timeEntries && item.timeEntries.length > 0 && (
+        <TimeEntriesAccordion
+          timeEntries={item.timeEntries}
+          totalTime={kanbanItemHook.totalTime + kanbanItemHook.currentTime}
+          formatTimerTime={formatTimerTime}
+          usersPublicData={usersPublicData}
+          formatDateString={formatDateString}
+          formatTimeString={formatTimeString}
+          onOpenTimeEntries={() => setShowTimeEntriesModal(true)}
+        />
+      )}
+    </div>
+  );
+
   return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      title={item.text || t("checklists.untitledTask")}
-      size="fullscreen"
-      allowEnlarge
-      defaultEnlarged
-      className="lg:!max-w-[80vw] lg:!w-full lg:!h-[80vh] lg:!max-h-[80vh] max-h-[min(90dvh,100dvh)]"
-    >
+    <>
+      {showTimeEntriesModal && item.timeEntries && (
+        <TimeEntriesModal
+          isOpen={showTimeEntriesModal}
+          onClose={() => setShowTimeEntriesModal(false)}
+          timeEntries={item.timeEntries}
+          checklistId={checklistId}
+          itemId={item.id}
+          category={category}
+          onUpdate={onUpdate}
+          usersPublicData={usersPublicData}
+        />
+      )}
+      <Modal
+        isOpen={isOpen}
+        onClose={onClose}
+        title={item.text || t("checklists.untitledTask")}
+        size="fullscreen"
+        allowEnlarge
+        defaultEnlarged
+        className="lg:!max-w-[80vw] lg:!w-full lg:!h-[80vh] lg:!max-h-[80vh] max-h-[min(90dvh,100dvh)]"
+      >
       <div className="kanban-card-detail-body flex min-h-0 flex-1 flex-col gap-6 lg:flex-row lg:overflow-hidden">
         <div className="min-w-0 space-y-4 p-4 lg:min-h-0 lg:flex-1 lg:overflow-y-auto">
           {isEditing ? (
@@ -545,9 +599,11 @@ export const KanbanCardDetail = ({
             onEstimatedTimeSave={handleEstimatedTimeSave}
             formatDateTimeString={formatDateTimeString}
             onStatusChange={handleStatusChange}
+            timeTracking={timeTrackingContent}
           />
         </div>
       </div>
-    </Modal>
+      </Modal>
+    </>
   );
 };

app/_components/FeatureComponents/Kanban/KanbanCardDetailProperties.tsx

@@ -42,6 +42,7 @@ interface KanbanCardDetailPropertiesProps {
   onEstimatedTimeChange: (v: string) => void;
   onEstimatedTimeSave: () => void;
   formatDateTimeString: (v: string) => string;
+  timeTracking?: ReactNode;
 }
 
 interface PropertySectionProps {
@@ -104,6 +105,7 @@ export const KanbanCardDetailProperties = ({
   onEstimatedTimeChange,
   onEstimatedTimeSave,
   formatDateTimeString,
+  timeTracking,
 }: KanbanCardDetailPropertiesProps) => {
   const t = useTranslations();
 
@@ -288,6 +290,12 @@ export const KanbanCardDetailProperties = ({
         </>
       )}
 
+      {timeTracking && (
+        <PropertySection title={t("kanban.timeTracking")}>
+          {timeTracking}
+        </PropertySection>
+      )}
+
       {metadata.length > 0 && (
         <PropertySection
           title={t("auditLogs.metadata")}

app/_components/FeatureComponents/Profile/Parts/UserPreferencesTab.tsx

@@ -29,6 +29,7 @@ import {
   HideConnectionIndicator,
   HideStatusOnCards,
   HideMobileStatusDropdown,
+  HideTimeTrackingOnCards,
   CodeBlockStyle,
 } from "@/app/_types";
 import { Modes } from "@/app/_types/enums";
@@ -75,6 +76,7 @@ const getSettingsFromUser = (user: SanitisedUser | null): Partial<SanitisedUser>
   hideConnectionIndicator: user?.hideConnectionIndicator || "disable",
   hideStatusOnCards: user?.hideStatusOnCards || "disable",
   hideMobileStatusDropdown: user?.hideMobileStatusDropdown || "disable",
+  hideTimeTrackingOnCards: user?.hideTimeTrackingOnCards || "disable",
   codeBlockStyle: user?.codeBlockStyle || "default",
 });
 
@@ -171,6 +173,7 @@ export const UserPreferencesTab = ({ noteCategories, localeOptions }: SettingsTa
   const hasKanbanChanges = hasChanges([
     "hideStatusOnCards",
     "hideMobileStatusDropdown",
+    "hideTimeTrackingOnCards",
   ]);
 
   const validateAndSave = async <T extends Record<string, any>>(
@@ -952,7 +955,11 @@ export const UserPreferencesTab = ({ noteCategories, localeOptions }: SettingsTa
           <Button
             onClick={() =>
               handleSaveSection(
-                ["hideStatusOnCards", "hideMobileStatusDropdown"],
+                [
+                  "hideStatusOnCards",
+                  "hideMobileStatusDropdown",
+                  "hideTimeTrackingOnCards",
+                ],
                 kanbanSettingsSchema,
                 "Kanban"
               )
@@ -1008,6 +1015,30 @@ export const UserPreferencesTab = ({ noteCategories, localeOptions }: SettingsTa
             {t('settings.hideMobileStatusDropdownDescription')}
           </p>
         </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="hide-time-tracking-on-cards">
+            {t('settings.hideTimeTrackingOnCardsLabel')}
+          </Label>
+          <Dropdown
+            value={currentSettings.hideTimeTrackingOnCards || "disable"}
+            onChange={(value) =>
+              handleSettingChange(
+                "hideTimeTrackingOnCards",
+                value as HideTimeTrackingOnCards
+              )
+            }
+            options={[
+              { id: "disable", name: t('settings.showTimeTrackingOnCards') },
+              { id: "enable", name: t('settings.hideTimeTrackingOnCards') },
+            ]}
+            placeholder={t('settings.selectTimeTrackingOnCards')}
+            className="w-full"
+          />
+          <p className="text-md lg:text-sm text-muted-foreground">
+            {t('settings.hideTimeTrackingOnCardsDescription')}
+          </p>
+        </div>
       </FormWrapper>
 
       <FormWrapper title={t('settings.accountManagement')}>

app/_hooks/kanban/useKanbanItem.tsx

@@ -15,6 +15,8 @@ import { useToast } from "@/app/_providers/ToastProvider";
 const TIMER_STORAGE_KEY = (checklistId: string, itemId: string) =>
   `jotty-timer-${checklistId}-${itemId}`;
 
+const TIMER_SYNC_EVENT = "jotty-timer-sync";
+
 interface UseKanbanItemProps {
   item: Item;
   checklist: Checklist;
@@ -79,8 +81,54 @@ export const useKanbanItem = ({
     } else {
       localStorage.removeItem(storageKey);
     }
+    // The same item can mount this hook twice at once (card + detail modal).
+    // The "storage" event only fires across tabs, so broadcast in-tab too.
+    window.dispatchEvent(
+      new CustomEvent(TIMER_SYNC_EVENT, { detail: { key: storageKey } })
+    );
   }, [isRunning, startTime, checklistId, item.id]);
 
+  useEffect(() => {
+    const storageKey = TIMER_STORAGE_KEY(checklistId, item.id);
+
+    const _syncFromStorage = () => {
+      let parsed: { startTime?: string; isRunning?: boolean } | null = null;
+      try {
+        const stored = localStorage.getItem(storageKey);
+        parsed = stored ? JSON.parse(stored) : null;
+      } catch {
+        parsed = null;
+      }
+
+      if (parsed?.isRunning && parsed.startTime) {
+        const storedStart = new Date(parsed.startTime);
+        setStartTime((prev) =>
+          prev?.getTime() === storedStart.getTime() ? prev : storedStart
+        );
+        setIsRunning((prev) => (prev ? prev : true));
+        setCurrentTime(Math.floor((Date.now() - storedStart.getTime()) / 1000));
+      } else {
+        setIsRunning((prev) => (prev ? false : prev));
+        setStartTime((prev) => (prev ? null : prev));
+        setCurrentTime((prev) => (prev ? 0 : prev));
+      }
+    };
+
+    const _handleStorage = (e: StorageEvent) => {
+      if (e.key === storageKey) _syncFromStorage();
+    };
+    const _handleSync = (e: Event) => {
+      if ((e as CustomEvent).detail?.key === storageKey) _syncFromStorage();
+    };
+
+    window.addEventListener("storage", _handleStorage);
+    window.addEventListener(TIMER_SYNC_EVENT, _handleSync);
+    return () => {
+      window.removeEventListener("storage", _handleStorage);
+      window.removeEventListener(TIMER_SYNC_EVENT, _handleSync);
+    };
+  }, [checklistId, item.id]);
+
   useEffect(() => {
     let interval: NodeJS.Timeout;
     if (isRunning && startTime) {

app/_schemas/user-schemas.ts

@@ -85,6 +85,12 @@ export const kanbanSettingsSchema = z.object({
         "Hide mobile status dropdown must be either 'enable' or 'disable'",
     })
     .optional(),
+  hideTimeTrackingOnCards: z
+    .enum(["enable", "disable"], {
+      message:
+        "Hide time tracking on cards must be either 'enable' or 'disable'",
+    })
+    .optional(),
 });
 
 export const fileSettingsSchema = z.object({

app/_server/actions/kanban/time-entries.ts

@@ -55,12 +55,10 @@ export const editTimeEntry = async (formData: FormData) => {
     const endTime = formData.get("endTime") as string;
     const duration = formData.get("duration") as string;
 
-    const [currentUser, list] = await Promise.all([
-      getCurrentUser(),
-      getListById(listId, undefined, category),
-    ]);
-
+    const currentUser = await getCurrentUser();
     if (!currentUser) return { error: "Not authenticated" };
+
+    const list = await getListById(listId, currentUser.username, category);
     if (!list) return { error: "List not found" };
 
     const canEdit = await checkUserPermission(
@@ -107,12 +105,10 @@ export const deleteTimeEntry = async (formData: FormData) => {
       "listId", "itemId", "entryId", "category",
     ]);
 
-    const [currentUser, list] = await Promise.all([
-      getCurrentUser(),
-      getListById(listId, undefined, category),
-    ]);
-
+    const currentUser = await getCurrentUser();
     if (!currentUser) return { error: "Not authenticated" };
+
+    const list = await getListById(listId, currentUser.username, category);
     if (!list) return { error: "List not found" };
 
     const canEdit = await checkUserPermission(