Show Active Ticket on Clock Page

[SarkarShubhdeep]

Summary

Fixes #414: the clock status card did not show which ticket was running.

Changes (ClockPage only):

• When clocked in with a running ticket timer, show a clickable ticket badge (icon + title) that opens /app/tickets/:id
• When clocked in with no ticket and the team requires a plan, show “Plan required for this team”
• Live updates via timerApi.getToday() + DDP timers.liveForUser

Test plan

• Clock in with no ticket on a plan-required team → plan badge shows
• Start a ticket timer → badge switches to ticket title (with ticket icon)
• Click badge → ticket detail page
• Stop ticket timer → plan badge returns (if plan required)
• Long title truncates on mobile; Break button / timer unchanged

Made with Cursor

[Copilot]

Pull request overview

Adds active-ticket visibility to the clock status card.

Changes:

• Fetches and live-updates the running ticket.
• Displays a clickable, truncated ticket badge.
• Shows the plan-required badge when no ticket runs.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[github-actions]

🚀 Preview Deployment Ready

Service	URL
App	https://mieweb-timehuddle-fix-414-ticket-not-on-clock.os.mieweb.org
API (Meteor)	https://mieweb-timehuddle-fix-414-ticket-not-on-clock-api.os.mieweb.org

Preview auto-deletes when this PR is closed.

[Dharp02]

Duplicate "running ticket" logic — should be extracted into a shared hook

fetchRunningTicket in this file is a near-duplicate of fetchRunningTimer in TicketsPage.tsx — same getToday() call, same flatMap(...).find((t) => !t.endTime) derivation, same token guard, same timers.liveForUser DDP subscription + work:refetch/tickets:refetch listeners. With this PR, the same "which ticket has a running timer" algorithm now exists in three places once you count WorkPage.tsx's similar timers.liveForUser wiring.

What to do:
Extract a shared hook, e.g. src/lib/useRunningTicket.ts:

export function useRunningTicket(enabled: boolean) {
  const [running, setRunning] = useState<{ id: string; title: string; sessionId: string } | null>(null);

  const refetch = useCallback(async () => {
    if (!localStorage.getItem('meteor_resume_token')) {
      setRunning(null);
      return;
    }
    try {
      const dayEntries = await timerApi.getToday();
      const session = dayEntries.flatMap((de) => de.sessions).find((t) => !t.endTime);
      const dayEntry = session && dayEntries.find((de) => de.sessions.some((t) => t.id === session.id));
      if (!session || !dayEntry?.entry.ticketId) {
        setRunning(null);
        return;
      }
      setRunning({
        id: dayEntry.entry.ticketId,
        title: dayEntry.entry.displayTitle || dayEntry.entry.ticketId,
        sessionId: session.id,
      });
    } catch {
      setRunning(null);
    }
  }, []);

  useEffect(() => {
    if (!enabled) {
      setRunning(null);
      return;
    }
    void refetch();
    const ddp = getDdpClient();
    const offChange = ddp.onCollectionChange('timers', () => void refetch());
    const unsubscribe = ddp.subscribe('timers.liveForUser', []);
    const onRefetch = () => void refetch();
    window.addEventListener('work:refetch', onRefetch);
    window.addEventListener('tickets:refetch', onRefetch);
    return () => {
      offChange();
      unsubscribe();
      window.removeEventListener('work:refetch', onRefetch);
      window.removeEventListener('tickets:refetch', onRefetch);
    };
  }, [enabled, refetch]);

  return running;
}

How to wire it up:

• ClockPage.tsx: const runningTicket = useRunningTicket(isClockedIn);
• TicketsPage.tsx: const runningTicket = useRunningTicket(true); then read runningTicket?.id / runningTicket?.sessionId instead of the separate runningTicketId/runningSessionId state.

This also fixes a small existing inconsistency between the two copies: TicketsPage's version doesn't null out state on missing token or on error (leaves stale data), while this PR's version does — consolidating them into one hook means there's only one behavior to reason about instead of two slightly different ones.

Not a blocker for this PR, but worth a follow-up so we don't end up with a fourth copy the next time a ticket-timer indicator is added elsewhere.

[SarkarShubhdeep]

Merge conflict resolved (rebase onto main)

Rebased fix/414-ticket-not-on-clock onto current main and force-pushed with --force-with-lease. GitHub was previously CONFLICTING / DIRTY; the branch is mergeable again.

What conflicted

Only src/features/clock/ClockPage.tsx overlapped.

• This PR added the active-ticket badge + live timer fetch (timerApi / DDP timers.liveForUser).
• main meanwhile updated the same file for Pulse/composer uploads (useAttachmentUpload, ComposerProgress, uploadInFlight gates, clearComposerPulseUpload, and huddleApi.createPost).

How it was resolved

Kept all of main’s composer/Pulse/upload work, and re-applied this PR’s active-ticket badge + live fetch on top. No raw DDP huddle.createPost calls were reintroduced.

Still to follow (not in this rebase)

• Copilot: overnight timers — switch from getToday() to getRunning() + getDay(session.date) (discussion)
• Dharp02: extract shared useRunningTicket hook (comment)

Will address those next before asking for re-review.

[SarkarShubhdeep]

Re: shared `useRunningTicket` (Dharp02’s note)

Done in 772b2c2.

Extracted `src/lib/useRunningTicket.ts` and wired:

• `ClockPage`: `useRunningTicket(isClockedIn)`
• `TicketsPage`: `useRunningTicket(true)` (reads `id` / `sessionId`)

Fetch path uses `getRunning()` + `getDay(session.date)` (not `getToday()`), and clears on missing token / error so Tickets no longer keeps stale running ids. Left `WorkPage` alone — its `timers.liveForUser` wiring is day/week refetch, not “which ticket is running.”

@Dharp02 ready for another look when you have a chance.

[SarkarShubhdeep]

Re-ran the failed PR Preview Environment job — deploy-preview hit a transient Launchpad API timeout (HTTP 504 deleting container 2086), not an app/code failure. Build/push and frontend/iOS checks had already passed.