Add context menu to time entry rows

e2e/time.spec.ts

@@ -2042,3 +2042,228 @@ test.describe('Employee Time Entry Isolation', () => {
         await expect(timeEntryRow).not.toBeVisible();
     });
 });
+
+// =============================================
+// Context Menu Tests
+// =============================================
+
+async function openTimeEntryContextMenu(page: Page, description: string) {
+    const row = page
+        .locator('[data-testid="time_entry_row"]')
+        .filter({ hasText: description })
+        .first();
+    await row.click({ button: 'right' });
+    await expect(page.getByRole('menu')).toBeVisible();
+}
+
+test('test that context menu appears with correct items on time entry row', async ({
+    page,
+    ctx,
+}) => {
+    const description = 'Context menu items test ' + Math.floor(1 + Math.random() * 10000);
+    await createBareTimeEntryViaApi(ctx, description, '1h');
+
+    await goToTimeOverview(page);
+    await openTimeEntryContextMenu(page, description);
+
+    await expect(page.getByRole('menuitem', { name: 'Continue' })).toBeVisible();
+    await expect(page.getByRole('menuitem', { name: 'Edit' })).toBeVisible();
+    await expect(page.getByRole('menuitem', { name: 'Duplicate' })).toBeVisible();
+    await expect(page.getByRole('menuitem', { name: 'Delete' })).toBeVisible();
+});
+
+test('test that context menu edit opens the edit modal', async ({ page, ctx }) => {
+    const description = 'Context edit test ' + Math.floor(1 + Math.random() * 10000);
+    await createBareTimeEntryViaApi(ctx, description, '1h');
+
+    await goToTimeOverview(page);
+    await openTimeEntryContextMenu(page, description);
+
+    await page.getByRole('menuitem', { name: 'Edit' }).click();
+    await expect(page.getByRole('dialog')).toBeVisible();
+    await expect(page.getByRole('dialog').getByPlaceholder('What did you work on?')).toHaveValue(
+        description
+    );
+});
+
+test('test that context menu duplicate creates a copy', async ({ page, ctx }) => {
+    const description = 'Context dup test ' + Math.floor(1 + Math.random() * 10000);
+    const project = await createProjectViaApi(ctx, {
+        name: 'Dup Project ' + Math.floor(1 + Math.random() * 10000),
+        is_billable: true,
+    });
+    await createTimeEntryViaApi(ctx, {
+        description,
+        duration: '1h',
+        projectId: project.id,
+        billable: true,
+    });
+
+    await goToTimeOverview(page);
+    await openTimeEntryContextMenu(page, description);
+
+    const [createResponse] = await Promise.all([
+        page.waitForResponse(
+            (response) =>
+                response.url().includes('/time-entries') &&
+                response.request().method() === 'POST' &&
+                response.status() === 201
+        ),
+        page.getByRole('menuitem', { name: 'Duplicate' }).click(),
+    ]);
+
+    const body = await createResponse.json();
+    expect(body.data.description).toBe(description);
+    expect(body.data.project_id).toBe(project.id);
+    expect(body.data.billable).toBe(true);
+});
+
+test('test that context menu continue starts a new time entry', async ({ page, ctx }) => {
+    const description = 'Context continue test ' + Math.floor(1 + Math.random() * 10000);
+    const project = await createProjectViaApi(ctx, {
+        name: 'Continue Project ' + Math.floor(1 + Math.random() * 10000),
+        is_billable: false,
+    });
+    await createTimeEntryViaApi(ctx, {
+        description,
+        duration: '1h',
+        projectId: project.id,
+    });
+
+    await goToTimeOverview(page);
+    await openTimeEntryContextMenu(page, description);
+
+    const [createResponse] = await Promise.all([
+        page.waitForResponse(
+            (response) =>
+                response.url().includes('/time-entries') &&
+                response.request().method() === 'POST' &&
+                response.status() === 201
+        ),
+        page.getByRole('menuitem', { name: 'Continue' }).click(),
+    ]);
+
+    const body = await createResponse.json();
+    expect(body.data.description).toBe(description);
+    expect(body.data.project_id).toBe(project.id);
+    expect(body.data.end).toBeNull();
+});
+
+test('test that context menu delete removes the time entry', async ({ page, ctx }) => {
+    const description = 'Context delete test ' + Math.floor(1 + Math.random() * 10000);
+    await createBareTimeEntryViaApi(ctx, description, '1h');
+
+    await goToTimeOverview(page);
+    await openTimeEntryContextMenu(page, description);
+
+    await Promise.all([
+        page.waitForResponse(
+            (response) =>
+                response.url().includes('/time-entries') && response.request().method() === 'DELETE'
+        ),
+        page.getByRole('menuitem', { name: 'Delete' }).click(),
+    ]);
+
+    await expect(
+        page.locator('[data-testid="time_entry_row"]').filter({ hasText: description })
+    ).not.toBeVisible();
+});
+
+test('test that aggregate row context menu shows only Continue and Delete', async ({
+    page,
+    ctx,
+}) => {
+    const description = 'Context agg items ' + Math.floor(1 + Math.random() * 10000);
+    await createBareTimeEntryViaApi(ctx, description, '1h');
+    await createBareTimeEntryViaApi(ctx, description, '30min');
+
+    await goToTimeOverview(page);
+
+    const aggregateRow = page
+        .locator('[data-testid="time_entry_row"]')
+        .filter({ hasText: description })
+        .first();
+    await aggregateRow.click({ button: 'right' });
+    await expect(page.getByRole('menu')).toBeVisible();
+
+    await expect(page.getByRole('menuitem', { name: 'Continue' })).toBeVisible();
+    await expect(page.getByRole('menuitem', { name: 'Delete' })).toBeVisible();
+    await expect(page.getByRole('menuitem', { name: 'Edit' })).not.toBeVisible();
+    await expect(page.getByRole('menuitem', { name: 'Duplicate' })).not.toBeVisible();
+});
+
+test('test that aggregate row context menu continue starts a new time entry', async ({
+    page,
+    ctx,
+}) => {
+    const description = 'Context agg continue ' + Math.floor(1 + Math.random() * 10000);
+    const project = await createProjectViaApi(ctx, {
+        name: 'Agg Continue Project ' + Math.floor(1 + Math.random() * 10000),
+        is_billable: false,
+    });
+    await createTimeEntryViaApi(ctx, {
+        description,
+        duration: '1h',
+        projectId: project.id,
+    });
+    await createTimeEntryViaApi(ctx, {
+        description,
+        duration: '30min',
+        projectId: project.id,
+    });
+
+    await goToTimeOverview(page);
+
+    const aggregateRow = page
+        .locator('[data-testid="time_entry_row"]')
+        .filter({ hasText: description })
+        .first();
+    await aggregateRow.click({ button: 'right' });
+    await expect(page.getByRole('menu')).toBeVisible();
+
+    const [createResponse] = await Promise.all([
+        page.waitForResponse(
+            (response) =>
+                response.url().includes('/time-entries') &&
+                response.request().method() === 'POST' &&
+                response.status() === 201
+        ),
+        page.getByRole('menuitem', { name: 'Continue' }).click(),
+    ]);
+
+    const body = await createResponse.json();
+    expect(body.data.description).toBe(description);
+    expect(body.data.project_id).toBe(project.id);
+    expect(body.data.end).toBeNull();
+});
+
+test('test that aggregate row context menu delete removes all grouped entries', async ({
+    page,
+    ctx,
+}) => {
+    const description = 'Context agg delete ' + Math.floor(1 + Math.random() * 10000);
+    await createBareTimeEntryViaApi(ctx, description, '1h');
+    await createBareTimeEntryViaApi(ctx, description, '30min');
+
+    await goToTimeOverview(page);
+
+    // The aggregate row groups entries with same description
+    const aggregateRow = page
+        .locator('[data-testid="time_entry_row"]')
+        .filter({ hasText: description })
+        .first();
+    await aggregateRow.click({ button: 'right' });
+    await expect(page.getByRole('menu')).toBeVisible();
+
+    await Promise.all([
+        page.waitForResponse(
+            (response) =>
+                response.url().includes('/time-entries') && response.request().method() === 'DELETE'
+        ),
+        page.getByRole('menuitem', { name: 'Delete' }).click(),
+    ]);
+
+    await expect(
+        page.locator('[data-testid="time_entry_row"]').filter({ hasText: description })
+    ).not.toBeVisible();
+});

resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue

@@ -21,7 +21,15 @@ import { formatHumanReadableDuration, formatStartEnd } from '@/packages/ui/src/u
 import TimeEntryRow from '@/packages/ui/src/TimeEntry/TimeEntryRow.vue';
 import GroupedItemsCountButton from '@/packages/ui/src/GroupedItemsCountButton.vue';
 import type { TimeEntriesGroupedByType } from '@/types/time-entries';
-import { Checkbox } from '@/packages/ui/src';
+import {
+    Checkbox,
+    ContextMenu,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuSeparator,
+    ContextMenuTrigger,
+} from '@/packages/ui/src';
+import { PlayIcon, TrashIcon } from '@heroicons/vue/20/solid';
 import { twMerge } from 'tailwind-merge';
 const props = defineProps<{
     timeEntry: TimeEntriesGroupedByType;
@@ -89,156 +97,99 @@ function onSelectChange(checked: boolean) {
 </script>
 
 <template>
-    <div
+    <ContextMenu>
-        class="border-b border-default-background-separator bg-row-background min-w-0 transition"
+        <ContextMenuTrigger as-child>
-        data-testid="time_entry_row">
+            <div
-        <MainContainer class="min-w-0">
+                class="border-b border-default-background-separator bg-row-background min-w-0 transition"
-            <div class="@xl:flex py-2 items-center min-w-0 justify-between group">
+                data-testid="time_entry_row">
-                <!-- Desktop layout -->
+                <MainContainer class="min-w-0">
-                <div class="hidden @lg:flex space-x-3 items-center min-w-0">
+                    <div class="@xl:flex py-2 items-center min-w-0 justify-between group">
-                    <Checkbox
+                        <!-- Desktop layout -->
-                        :checked="
+                        <div class="hidden @lg:flex space-x-3 items-center min-w-0">
-                            timeEntry.timeEntries.every((aggregateTimeEntry: TimeEntry) =>
+                            <Checkbox
-                                selectedTimeEntries.includes(aggregateTimeEntry)
+                                :checked="
-                            )
+                                    timeEntry.timeEntries.every((aggregateTimeEntry: TimeEntry) =>
-                        "
+                                        selectedTimeEntries.includes(aggregateTimeEntry)
-                        @update:checked="onSelectChange" />
+                                    )
-                    <div class="flex items-center min-w-0">
+                                "
-                        <GroupedItemsCountButton :expanded="expanded" @click="expanded = !expanded">
+                                @update:checked="onSelectChange" />
-                            {{ timeEntry?.timeEntries?.length }}
+                            <div class="flex items-center min-w-0">
-                        </GroupedItemsCountButton>
+                                <GroupedItemsCountButton
-                        <TimeEntryDescriptionInput
+                                    :expanded="expanded"
-                            class="min-w-0 mr-4 shrink"
+                                    @click="expanded = !expanded">
-                            :model-value="timeEntry.description"
+                                    {{ timeEntry?.timeEntries?.length }}
-                            @changed="updateTimeEntryDescription"></TimeEntryDescriptionInput>
+                                </GroupedItemsCountButton>
-                        <TimeTrackerProjectTaskDropdown
+                                <TimeEntryDescriptionInput
-                            class="min-w-0 shrink"
+                                    class="min-w-0 mr-4 shrink"
-                            :clients
+                                    :model-value="timeEntry.description"
-                            :create-project
+                                    @changed="
-                            :create-client
+                                        updateTimeEntryDescription
-                            :can-create-project
+                                    "></TimeEntryDescriptionInput>
-                            :projects="projects"
+                                <TimeTrackerProjectTaskDropdown
-                            :tasks="tasks"
+                                    class="min-w-0 shrink"
-                            :project="timeEntry.project_id"
+                                    :clients
-                            :enable-estimated-time
+                                    :create-project
-                            :currency="currency"
+                                    :create-client
-                            :task="timeEntry.task_id"
+                                    :can-create-project
-                            @changed="updateProjectAndTask"></TimeTrackerProjectTaskDropdown>
+                                    :projects="projects"
-                    </div>
+                                    :tasks="tasks"
-                </div>
+                                    :project="timeEntry.project_id"
-                <div
+                                    :enable-estimated-time
-                    class="hidden @lg:flex items-center font-medium space-x-1 @lg:space-x-2 shrink-0">
+                                    :currency="currency"
-                    <TimeEntryRowTagDropdown
+                                    :task="timeEntry.task_id"
-                        :create-tag
+                                    @changed="
-                        :tags="tags"
+                                        updateProjectAndTask
-                        :model-value="timeEntry.tags"
+                                    "></TimeTrackerProjectTaskDropdown>
-                        @changed="updateTimeEntryTags"></TimeEntryRowTagDropdown>
+                            </div>
-                    <BillableToggleButton
-                        :model-value="timeEntry.billable"
-                        size="small"
-                        faded
-                        @changed="updateTimeEntryBillable"></BillableToggleButton>
-                    <div class="flex-1">
-                        <button
-                            :class="
-                                twMerge(
-                                    'text-text-secondary px-1 py-1.5 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary',
-                                    organization?.time_format === '12-hours'
-                                        ? 'w-[160px]'
-                                        : 'w-[100px]'
-                                )
-                            "
-                            @click="expanded = !expanded">
-                            {{
-                                formatStartEnd(
-                                    timeEntry.start,
-                                    timeEntry.end,
-                                    organization?.time_format
-                                )
-                            }}
-                        </button>
-                    </div>
-                    <button
-                        class="text-text-primary !mr-2 min-w-[80px] px-1.5 py-1.5 bg-transparent text-right hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary"
-                        @click="expanded = !expanded">
-                        {{
-                            formatHumanReadableDuration(
-                                timeEntry.duration ?? 0,
-                                organization?.interval_format,
-                                organization?.number_format
-                            )
-                        }}
-                    </button>
-
-                    <TimeTrackerStartStop
-                        :active="!!(timeEntry.start && !timeEntry.end)"
-                        variant="secondary"
-                        class="opacity-60 flex group-hover:opacity-100 focus-visible:opacity-100"
-                        @changed="onStartStopClick(timeEntry)"></TimeTrackerStartStop>
-                    <TimeEntryMoreOptionsDropdown
-                        :show-edit="false"
-                        :show-duplicate="false"
-                        @delete="
-                            deleteTimeEntries(timeEntry?.timeEntries ?? [])
-                        "></TimeEntryMoreOptionsDropdown>
-                </div>
-                <!-- Mobile layout -->
-                <div class="@lg:hidden">
-                    <!-- First row: count + description + duration -->
-                    <div class="flex items-center justify-between min-w-0">
-                        <div class="flex items-center min-w-0 flex-1">
-                            <GroupedItemsCountButton
-                                :expanded="expanded"
-                                @click="expanded = !expanded">
-                                {{ timeEntry?.timeEntries?.length }}
-                            </GroupedItemsCountButton>
-                            <TimeEntryDescriptionInput
-                                class="min-w-0 flex-1"
-                                :model-value="timeEntry.description"
-                                @changed="updateTimeEntryDescription"></TimeEntryDescriptionInput>
                         </div>
-                        <button
+                        <div
-                            class="text-text-primary min-w-[80px] px-1.5 py-1.5 bg-transparent text-right hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary"
+                            class="hidden @lg:flex items-center font-medium space-x-1 @lg:space-x-2 shrink-0">
-                            @click="expanded = !expanded">
-                            {{
-                                formatHumanReadableDuration(
-                                    timeEntry.duration ?? 0,
-                                    organization?.interval_format,
-                                    organization?.number_format
-                                )
-                            }}
-                        </button>
-                    </div>
-                    <!-- Second row: project/task - tags - billable - start - more -->
-                    <div class="flex items-center justify-between mt-1">
-                        <TimeTrackerProjectTaskDropdown
-                            class="min-w-0"
-                            :clients
-                            :create-project
-                            :create-client
-                            :can-create-project
-                            :projects="projects"
-                            :tasks="tasks"
-                            :project="timeEntry.project_id"
-                            :enable-estimated-time
-                            :currency="currency"
-                            :task="timeEntry.task_id"
-                            @changed="updateProjectAndTask"></TimeTrackerProjectTaskDropdown>
-                        <div class="flex items-center shrink-0">
                             <TimeEntryRowTagDropdown
                                 :create-tag
                                 :tags="tags"
                                 :model-value="timeEntry.tags"
-                                compact
                                 @changed="updateTimeEntryTags"></TimeEntryRowTagDropdown>
                             <BillableToggleButton
                                 :model-value="timeEntry.billable"
                                 size="small"
+                                faded
                                 @changed="updateTimeEntryBillable"></BillableToggleButton>
+                            <div class="flex-1">
+                                <button
+                                    :class="
+                                        twMerge(
+                                            'text-text-secondary px-1 py-1.5 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary',
+                                            organization?.time_format === '12-hours'
+                                                ? 'w-[160px]'
+                                                : 'w-[100px]'
+                                        )
+                                    "
+                                    @click="expanded = !expanded">
+                                    {{
+                                        formatStartEnd(
+                                            timeEntry.start,
+                                            timeEntry.end,
+                                            organization?.time_format
+                                        )
+                                    }}
+                                </button>
+                            </div>
+                            <button
+                                class="text-text-primary !mr-2 min-w-[80px] px-1.5 py-1.5 bg-transparent text-right hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary"
+                                @click="expanded = !expanded">
+                                {{
+                                    formatHumanReadableDuration(
+                                        timeEntry.duration ?? 0,
+                                        organization?.interval_format,
+                                        organization?.number_format
+                                    )
+                                }}
+                            </button>
+
                             <TimeTrackerStartStop
                                 :active="!!(timeEntry.start && !timeEntry.end)"
                                 variant="secondary"
-                                class="ml-2"
+                                class="opacity-60 flex group-hover:opacity-100 focus-visible:opacity-100"
                                 @changed="onStartStopClick(timeEntry)"></TimeTrackerStartStop>
                             <TimeEntryMoreOptionsDropdown
                                 :show-edit="false"
@@ -247,41 +198,129 @@ function onSelectChange(checked: boolean) {
                                     deleteTimeEntries(timeEntry?.timeEntries ?? [])
                                 "></TimeEntryMoreOptionsDropdown>
                         </div>
+                        <!-- Mobile layout -->
+                        <div class="@lg:hidden">
+                            <!-- First row: count + description + duration -->
+                            <div class="flex items-center justify-between min-w-0">
+                                <div class="flex items-center min-w-0 flex-1">
+                                    <GroupedItemsCountButton
+                                        :expanded="expanded"
+                                        @click="expanded = !expanded">
+                                        {{ timeEntry?.timeEntries?.length }}
+                                    </GroupedItemsCountButton>
+                                    <TimeEntryDescriptionInput
+                                        class="min-w-0 flex-1"
+                                        :model-value="timeEntry.description"
+                                        @changed="
+                                            updateTimeEntryDescription
+                                        "></TimeEntryDescriptionInput>
+                                </div>
+                                <button
+                                    class="text-text-primary min-w-[80px] px-1.5 py-1.5 bg-transparent text-right hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary"
+                                    @click="expanded = !expanded">
+                                    {{
+                                        formatHumanReadableDuration(
+                                            timeEntry.duration ?? 0,
+                                            organization?.interval_format,
+                                            organization?.number_format
+                                        )
+                                    }}
+                                </button>
+                            </div>
+                            <!-- Second row: project/task - tags - billable - start - more -->
+                            <div class="flex items-center justify-between mt-1">
+                                <TimeTrackerProjectTaskDropdown
+                                    class="min-w-0"
+                                    :clients
+                                    :create-project
+                                    :create-client
+                                    :can-create-project
+                                    :projects="projects"
+                                    :tasks="tasks"
+                                    :project="timeEntry.project_id"
+                                    :enable-estimated-time
+                                    :currency="currency"
+                                    :task="timeEntry.task_id"
+                                    @changed="
+                                        updateProjectAndTask
+                                    "></TimeTrackerProjectTaskDropdown>
+                                <div class="flex items-center shrink-0">
+                                    <TimeEntryRowTagDropdown
+                                        :create-tag
+                                        :tags="tags"
+                                        :model-value="timeEntry.tags"
+                                        compact
+                                        @changed="updateTimeEntryTags"></TimeEntryRowTagDropdown>
+                                    <BillableToggleButton
+                                        :model-value="timeEntry.billable"
+                                        size="small"
+                                        @changed="updateTimeEntryBillable"></BillableToggleButton>
+                                    <TimeTrackerStartStop
+                                        :active="!!(timeEntry.start && !timeEntry.end)"
+                                        variant="secondary"
+                                        class="ml-2"
+                                        @changed="
+                                            onStartStopClick(timeEntry)
+                                        "></TimeTrackerStartStop>
+                                    <TimeEntryMoreOptionsDropdown
+                                        :show-edit="false"
+                                        :show-duplicate="false"
+                                        @delete="
+                                            deleteTimeEntries(timeEntry?.timeEntries ?? [])
+                                        "></TimeEntryMoreOptionsDropdown>
+                                </div>
+                            </div>
+                        </div>
                     </div>
+                </MainContainer>
+                <div
+                    v-if="expanded"
+                    class="w-full border-t border-default-background-separator bg-black/15">
+                    <TimeEntryRow
+                        v-for="subEntry in timeEntry.timeEntries"
+                        :key="subEntry.id"
+                        :projects="projects"
+                        :enable-estimated-time
+                        :can-create-project
+                        :tasks="tasks"
+                        :selected="
+                            !!selectedTimeEntries.find(
+                                (filterEntry: TimeEntry) => filterEntry.id === subEntry.id
+                            )
+                        "
+                        :create-client
+                        :clients
+                        :create-project
+                        :tags="tags"
+                        indent
+                        :update-time-entry="(timeEntry: TimeEntry) => updateTimeEntry(timeEntry)"
+                        :on-start-stop-click="() => onStartStopClick(subEntry)"
+                        :delete-time-entry="() => deleteTimeEntries([subEntry])"
+                        :duplicate-time-entry="() => duplicateTimeEntry(subEntry)"
+                        :currency="currency"
+                        :create-tag
+                        :time-entry="subEntry"
+                        @selected="emit('selected', [subEntry])"
+                        @unselected="emit('unselected', [subEntry])"></TimeEntryRow>
                 </div>
             </div>
-        </MainContainer>
+        </ContextMenuTrigger>
-        <div
+        <ContextMenuContent class="min-w-[160px]">
-            v-if="expanded"
+            <ContextMenuItem
-            class="w-full border-t border-default-background-separator bg-black/15">
+                class="space-x-3"
-            <TimeEntryRow
+                @select="onStartStopClick(timeEntry.timeEntries[0]!)">
-                v-for="subEntry in timeEntry.timeEntries"
+                <PlayIcon class="w-4 h-4 text-icon-default" />
-                :key="subEntry.id"
+                <span>Continue</span>
-                :projects="projects"
+            </ContextMenuItem>
-                :enable-estimated-time
+            <ContextMenuSeparator />
-                :can-create-project
+            <ContextMenuItem
-                :tasks="tasks"
+                class="space-x-3 text-destructive"
-                :selected="
+                @select="deleteTimeEntries(timeEntry?.timeEntries ?? [])">
-                    !!selectedTimeEntries.find(
+                <TrashIcon class="w-4 h-4 text-icon-default" />
-                        (filterEntry: TimeEntry) => filterEntry.id === subEntry.id
+                <span>Delete</span>
-                    )
+            </ContextMenuItem>
-                "
+        </ContextMenuContent>
-                :create-client
+    </ContextMenu>
-                :clients
-                :create-project
-                :tags="tags"
-                indent
-                :update-time-entry="(timeEntry: TimeEntry) => updateTimeEntry(timeEntry)"
-                :on-start-stop-click="() => onStartStopClick(subEntry)"
-                :delete-time-entry="() => deleteTimeEntries([subEntry])"
-                :duplicate-time-entry="() => duplicateTimeEntry(subEntry)"
-                :currency="currency"
-                :create-tag
-                :time-entry="subEntry"
-                @selected="emit('selected', [subEntry])"
-                @unselected="emit('unselected', [subEntry])"></TimeEntryRow>
-        </div>
-    </div>
 </template>
 
 <style scoped></style>

resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue

@@ -20,7 +20,15 @@ import { TimeEntryEditModal } from '@/packages/ui/src';
 import BillableToggleButton from '@/packages/ui/src/Input/BillableToggleButton.vue';
 import { computed, ref } from 'vue';
 import TimeTrackerProjectTaskDropdown from '@/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
-import { Checkbox } from '@/packages/ui/src';
+import {
+    Checkbox,
+    ContextMenu,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuSeparator,
+    ContextMenuTrigger,
+} from '@/packages/ui/src';
+import { PlayIcon, PencilIcon, DocumentDuplicateIcon, TrashIcon } from '@heroicons/vue/20/solid';
 
 const props = defineProps<{
     timeEntry: TimeEntry;
@@ -109,123 +117,150 @@ async function handleDeleteTimeEntry() {
 </script>
 
 <template>
-    <div
+    <ContextMenu>
-        class="border-b border-default-background-separator transition min-w-0 bg-row-background"
+        <ContextMenuTrigger as-child>
-        data-testid="time_entry_row">
+            <div
-        <MainContainer class="min-w-0">
+                class="border-b border-default-background-separator transition min-w-0 bg-row-background"
-            <div class="@xl:flex py-2 min-w-0 items-center justify-between group">
+                data-testid="time_entry_row">
-                <!-- Desktop layout -->
+                <MainContainer class="min-w-0">
-                <div class="hidden @lg:flex items-center min-w-0">
+                    <div class="@xl:flex py-2 min-w-0 items-center justify-between group">
-                    <Checkbox :checked="selected" @update:checked="onSelectChange" />
+                        <!-- Desktop layout -->
-                    <div v-if="indent === true" class="w-10 h-7"></div>
+                        <div class="hidden @lg:flex items-center min-w-0">
-                    <TimeEntryDescriptionInput
+                            <Checkbox :checked="selected" @update:checked="onSelectChange" />
-                        class="min-w-0 mr-4 shrink"
+                            <div v-if="indent === true" class="w-10 h-7"></div>
-                        :model-value="timeEntry.description"
+                            <TimeEntryDescriptionInput
-                        @changed="updateTimeEntryDescription"></TimeEntryDescriptionInput>
+                                class="min-w-0 mr-4 shrink"
-                    <TimeTrackerProjectTaskDropdown
+                                :model-value="timeEntry.description"
-                        class="min-w-0 shrink"
+                                @changed="updateTimeEntryDescription"></TimeEntryDescriptionInput>
-                        :create-project
+                            <TimeTrackerProjectTaskDropdown
-                        :create-client
+                                class="min-w-0 shrink"
-                        :can-create-project
+                                :create-project
-                        :clients
+                                :create-client
-                        :projects="projects"
+                                :can-create-project
-                        :tasks="tasks"
+                                :clients
-                        :project="timeEntry.project_id"
+                                :projects="projects"
-                        :currency="currency"
+                                :tasks="tasks"
-                        :enable-estimated-time
+                                :project="timeEntry.project_id"
-                        :task="timeEntry.task_id"
+                                :currency="currency"
-                        @changed="updateProjectAndTask"></TimeTrackerProjectTaskDropdown>
+                                :enable-estimated-time
-                </div>
+                                :task="timeEntry.task_id"
-                <div
+                                @changed="updateProjectAndTask"></TimeTrackerProjectTaskDropdown>
-                    class="hidden @lg:flex items-center font-medium space-x-1 @lg:space-x-2 shrink-0">
+                        </div>
-                    <div v-if="showMember && members" class="text-sm px-2">
+                        <div
-                        {{ memberName }}
+                            class="hidden @lg:flex items-center font-medium space-x-1 @lg:space-x-2 shrink-0">
-                    </div>
+                            <div v-if="showMember && members" class="text-sm px-2">
-                    <TimeEntryRowTagDropdown
+                                {{ memberName }}
-                        :create-tag
+                            </div>
-                        :tags="tags"
-                        :model-value="timeEntry.tags"
-                        @changed="updateTimeEntryTags"></TimeEntryRowTagDropdown>
-                    <BillableToggleButton
-                        :model-value="timeEntry.billable"
-                        size="small"
-                        faded
-                        @changed="updateTimeEntryBillable"></BillableToggleButton>
-                    <div class="flex-1">
-                        <TimeEntryRangeSelector
-                            :start="timeEntry.start"
-                            :end="timeEntry.end"
-                            :show-date
-                            @changed="updateStartEndTime"></TimeEntryRangeSelector>
-                    </div>
-                    <TimeEntryRowDurationInput
-                        :start="timeEntry.start"
-                        :end="timeEntry.end"
-                        @changed="updateStartEndTime"></TimeEntryRowDurationInput>
-                    <TimeTrackerStartStop
-                        :active="!!(timeEntry.start && !timeEntry.end)"
-                        variant="secondary"
-                        class="opacity-60 flex focus-visible:opacity-100 group-hover:opacity-100"
-                        @changed="onStartStopClick"></TimeTrackerStartStop>
-                    <TimeEntryMoreOptionsDropdown
-                        @edit="handleEdit"
-                        @duplicate="duplicateTimeEntry"
-                        @delete="deleteTimeEntry"></TimeEntryMoreOptionsDropdown>
-                </div>
-                <!-- Mobile layout -->
-                <div class="@lg:hidden">
-                    <!-- First row: description + duration -->
-                    <div class="flex items-center justify-between min-w-0">
-                        <TimeEntryDescriptionInput
-                            class="min-w-0 flex-1"
-                            :model-value="timeEntry.description"
-                            @changed="updateTimeEntryDescription"></TimeEntryDescriptionInput>
-                        <TimeEntryRowDurationInput
-                            :start="timeEntry.start"
-                            :end="timeEntry.end"
-                            @changed="updateStartEndTime"></TimeEntryRowDurationInput>
-                    </div>
-                    <!-- Second row: project/task - tags - billable - start - more -->
-                    <div class="flex items-center justify-between mt-1">
-                        <TimeTrackerProjectTaskDropdown
-                            class="min-w-0"
-                            :create-project
-                            :create-client
-                            :can-create-project
-                            :clients
-                            :projects="projects"
-                            :tasks="tasks"
-                            :project="timeEntry.project_id"
-                            :currency="currency"
-                            :enable-estimated-time
-                            :task="timeEntry.task_id"
-                            @changed="updateProjectAndTask"></TimeTrackerProjectTaskDropdown>
-                        <div class="flex items-center shrink-0">
                             <TimeEntryRowTagDropdown
                                 :create-tag
                                 :tags="tags"
                                 :model-value="timeEntry.tags"
-                                compact
                                 @changed="updateTimeEntryTags"></TimeEntryRowTagDropdown>
                             <BillableToggleButton
                                 :model-value="timeEntry.billable"
                                 size="small"
+                                faded
                                 @changed="updateTimeEntryBillable"></BillableToggleButton>
+                            <div class="flex-1">
+                                <TimeEntryRangeSelector
+                                    :start="timeEntry.start"
+                                    :end="timeEntry.end"
+                                    :show-date
+                                    @changed="updateStartEndTime"></TimeEntryRangeSelector>
+                            </div>
+                            <TimeEntryRowDurationInput
+                                :start="timeEntry.start"
+                                :end="timeEntry.end"
+                                @changed="updateStartEndTime"></TimeEntryRowDurationInput>
                             <TimeTrackerStartStop
                                 :active="!!(timeEntry.start && !timeEntry.end)"
                                 variant="secondary"
-                                class="ml-2"
+                                class="opacity-60 flex focus-visible:opacity-100 group-hover:opacity-100"
                                 @changed="onStartStopClick"></TimeTrackerStartStop>
                             <TimeEntryMoreOptionsDropdown
                                 @edit="handleEdit"
                                 @duplicate="duplicateTimeEntry"
                                 @delete="deleteTimeEntry"></TimeEntryMoreOptionsDropdown>
                         </div>
+                        <!-- Mobile layout -->
+                        <div class="@lg:hidden">
+                            <!-- First row: description + duration -->
+                            <div class="flex items-center justify-between min-w-0">
+                                <TimeEntryDescriptionInput
+                                    class="min-w-0 flex-1"
+                                    :model-value="timeEntry.description"
+                                    @changed="
+                                        updateTimeEntryDescription
+                                    "></TimeEntryDescriptionInput>
+                                <TimeEntryRowDurationInput
+                                    :start="timeEntry.start"
+                                    :end="timeEntry.end"
+                                    @changed="updateStartEndTime"></TimeEntryRowDurationInput>
+                            </div>
+                            <!-- Second row: project/task - tags - billable - start - more -->
+                            <div class="flex items-center justify-between mt-1">
+                                <TimeTrackerProjectTaskDropdown
+                                    class="min-w-0"
+                                    :create-project
+                                    :create-client
+                                    :can-create-project
+                                    :clients
+                                    :projects="projects"
+                                    :tasks="tasks"
+                                    :project="timeEntry.project_id"
+                                    :currency="currency"
+                                    :enable-estimated-time
+                                    :task="timeEntry.task_id"
+                                    @changed="
+                                        updateProjectAndTask
+                                    "></TimeTrackerProjectTaskDropdown>
+                                <div class="flex items-center shrink-0">
+                                    <TimeEntryRowTagDropdown
+                                        :create-tag
+                                        :tags="tags"
+                                        :model-value="timeEntry.tags"
+                                        compact
+                                        @changed="updateTimeEntryTags"></TimeEntryRowTagDropdown>
+                                    <BillableToggleButton
+                                        :model-value="timeEntry.billable"
+                                        size="small"
+                                        @changed="updateTimeEntryBillable"></BillableToggleButton>
+                                    <TimeTrackerStartStop
+                                        :active="!!(timeEntry.start && !timeEntry.end)"
+                                        variant="secondary"
+                                        class="ml-2"
+                                        @changed="onStartStopClick"></TimeTrackerStartStop>
+                                    <TimeEntryMoreOptionsDropdown
+                                        @edit="handleEdit"
+                                        @duplicate="duplicateTimeEntry"
+                                        @delete="deleteTimeEntry"></TimeEntryMoreOptionsDropdown>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                </div>
+                </MainContainer>
             </div>
-        </MainContainer>
+        </ContextMenuTrigger>
-    </div>
+        <ContextMenuContent class="min-w-[160px]">
+            <ContextMenuItem class="space-x-3" @select="onStartStopClick()">
+                <PlayIcon class="w-4 h-4 text-icon-default" />
+                <span>Continue</span>
+            </ContextMenuItem>
+            <ContextMenuItem class="space-x-3" @select="handleEdit()">
+                <PencilIcon class="w-4 h-4 text-icon-default" />
+                <span>Edit</span>
+            </ContextMenuItem>
+            <ContextMenuItem class="space-x-3" @select="duplicateTimeEntry?.()">
+                <DocumentDuplicateIcon class="w-4 h-4 text-icon-default" />
+                <span>Duplicate</span>
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem class="space-x-3 text-destructive" @select="deleteTimeEntry()">
+                <TrashIcon class="w-4 h-4 text-icon-default" />
+                <span>Delete</span>
+            </ContextMenuItem>
+        </ContextMenuContent>
+    </ContextMenu>
 
     <TimeEntryEditModal
         v-if="showEditModal"