fix profile setting sidebar alignment

package.json

@@ -28,30 +28,30 @@
         "@eslint/eslintrc": "^3.2.0",
         "@eslint/js": "^9.19.0",
         "@inertiajs/vue3": "^2.0.0",
-        "@playwright/test": "^1.60.0",
+        "@playwright/test": "^1.41.1",
         "@tailwindcss/forms": "^0.5.9",
         "@tailwindcss/typography": "^0.5.15",
         "@types/chroma-js": "^3.1.0",
         "@types/node": "^22.10.10",
-        "@vitejs/plugin-vue": "^6.0.7",
+        "@vitejs/plugin-vue": "^6.0.3",
-        "@vue/test-utils": "^2.4.10",
+        "@vue/test-utils": "^2.4.6",
-        "@vue/tsconfig": "^0.9.1",
+        "@vue/tsconfig": "^0.8.0",
         "autoprefixer": "^10.4.20",
-        "axios": "^1.16.1",
+        "axios": "^1.6.4",
         "eslint-plugin-unused-imports": "^4.1.4",
         "happy-dom": "^20.8.9",
         "laravel-vite-plugin": "^2.1.0",
         "openapi-zod-client": "^1.16.2",
-        "postcss": "^8.5.15",
+        "postcss": "^8.4.47",
         "postcss-import": "^15.1.0",
         "postcss-nesting": "^12.1.5",
         "tailwindcss": "^3.4.13",
         "typescript": "^5.7.3",
         "vite": "^7.0.0",
-        "vite-plugin-checker": "^0.13.0",
+        "vite-plugin-checker": "^0.12.0",
-        "vitest": "^4.1.7",
+        "vitest": "^4.1.4",
-        "vue": "^3.5.34",
+        "vue": "^3.5.0",
-        "vue-tsc": "^3.3.2"
+        "vue-tsc": "^3.0.0"
     },
     "dependencies": {
         "@floating-ui/core": "^1.6.0",
@@ -59,26 +59,26 @@
         "@heroicons/vue": "^2.1.1",
         "@rushstack/eslint-patch": "^1.10.5",
         "@tailwindcss/container-queries": "^0.1.1",
-        "@tanstack/vue-form": "^1.32.0",
+        "@tanstack/vue-form": "^1.3.1",
-        "@tanstack/vue-query": "^5.100.14",
+        "@tanstack/vue-query": "^5.56.2",
         "@tanstack/vue-query-devtools": "^5.58.0",
         "@tanstack/vue-table": "^8.21.2",
         "@vue/eslint-config-prettier": "^10.2.0",
         "@vue/eslint-config-typescript": "^14.3.0",
-        "@vueuse/core": "^14.3.0",
+        "@vueuse/core": "^14.2.1",
-        "@vueuse/integrations": "^14.3.0",
+        "@vueuse/integrations": "^14.0.0",
         "@zodios/core": "^10.9.6",
-        "chroma-js": "3.2.0",
+        "chroma-js": "3.1.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "dayjs": "^1.11.11",
-        "echarts": "^6.1.0",
+        "echarts": "^6.0.0",
-        "focus-trap": "^8.2.1",
+        "focus-trap": "^8.0.0",
         "lucide-vue-next": "^0.487.0",
         "parse-duration": "^2.0.1",
         "pinia": "^3.0.0",
         "radix-vue": "^1.9.6",
-        "reka-ui": "2.9.8",
+        "reka-ui": "2.8.2",
         "tailwind-merge": "^2.6.0",
         "tailwindcss-animate": "^1.0.7",
         "vue-echarts": "^8.0.0",

resources/js/Components/Timesheet/TimesheetCell.test.ts

@@ -62,4 +62,35 @@ describe('TimesheetCell', () => {
         expect(wrapper.emitted('update')).toBeUndefined();
         expect((input.element as HTMLInputElement).value).toBe(previousValue);
     });
+
+    it('shows a pending 0 (delete in flight) over the cell total', () => {
+        const wrapper = mount(TimesheetCell, {
+            props: {
+                cell: buildCell(2 * 3600),
+                dayIndex: 0,
+                date: '2026-04-13',
+                isToday: false,
+                hasRunningEntry: false,
+                pendingSeconds: 0,
+            },
+        });
+
+        // `??` (not `||`): a pending 0 must win over the 2h cell total.
+        expect((wrapper.get('input').element as HTMLInputElement).value).toBe('');
+    });
+
+    it('disables editing while the cell is saving', () => {
+        const wrapper = mount(TimesheetCell, {
+            props: {
+                cell: buildCell(2 * 3600),
+                dayIndex: 0,
+                date: '2026-04-13',
+                isToday: false,
+                hasRunningEntry: false,
+                saveStatus: 'saving',
+            },
+        });
+
+        expect((wrapper.get('input').element as HTMLInputElement).disabled).toBe(true);
+    });
 });

resources/js/Components/Timesheet/TimesheetCell.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+import { CheckIcon } from '@heroicons/vue/16/solid';
 import DurationSecondsInput from '@/packages/ui/src/Input/DurationSecondsInput.vue';
+import LoadingSpinner from '@/packages/ui/src/LoadingSpinner.vue';
 import {
     Tooltip,
     TooltipContent,
@@ -7,18 +10,40 @@ import {
     TooltipTrigger,
 } from '@/packages/ui/src/tooltip';
 import type { TimesheetCell } from '@/utils/useTimesheetGrid';
+import type { CellSaveStatus } from '@/utils/timesheet/useTimesheetCellMutations';
 
-defineProps<{
+const props = defineProps<{
     cell?: TimesheetCell;
     dayIndex: number;
     date: string;
     isToday: boolean;
     hasRunningEntry: boolean;
+    saveStatus?: CellSaveStatus;
+    pendingSeconds?: number;
 }>();
 
 const emit = defineEmits<{
     update: [newSeconds: number];
 }>();
+
+// Show the optimistic value while saving; `??` (not `||`) so a pending 0 (delete) wins.
+const displaySeconds = computed(() => props.pendingSeconds ?? props.cell?.totalSeconds ?? 0);
+const isSaving = computed(() => props.saveStatus === 'saving');
+
+// Swap the border color (don't layer) to avoid same-specificity fights.
+const inputClass = computed(() => {
+    const border = props.saveStatus === 'error' ? 'border-red-500/70' : 'border-input-border';
+    return [
+        'w-[80px] mx-auto text-center font-medium',
+        'bg-transparent text-text-primary placeholder:text-text-quaternary',
+        'rounded-lg border shadow-none',
+        border,
+        'hover:bg-card-background',
+        'focus-visible:bg-tertiary focus-visible:border-transparent',
+        'focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none',
+        'disabled:cursor-wait disabled:opacity-70',
+    ].join(' ');
+});
 </script>
 
 <template>
@@ -46,18 +71,26 @@ const emit = defineEmits<{
                 <TooltipContent> Stop the running time entry to edit the timesheet </TooltipContent>
             </Tooltip>
         </TooltipProvider>
-        <DurationSecondsInput
+        <template v-else>
-            v-else
+            <span class="relative inline-flex items-center">
-            :model-value="cell?.totalSeconds ?? 0"
+                <DurationSecondsInput
-            default-unit="hours"
+                    :model-value="displaySeconds"
-            placeholder="-"
+                    default-unit="hours"
-            size="sm"
+                    placeholder="-"
-            input-class="w-[80px] mx-auto text-center font-medium
+                    size="sm"
-                bg-transparent text-text-primary placeholder:text-text-quaternary
+                    :disabled="isSaving"
-                rounded-lg border border-input-border shadow-none
+                    :input-class="inputClass"
-                hover:bg-card-background
+                    @commit="(seconds) => emit('update', seconds ?? 0)" />
-                focus-visible:bg-tertiary focus-visible:border-transparent
+                <span
-                focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
+                    v-if="saveStatus === 'saving' || saveStatus === 'saved'"
-            @commit="(seconds) => emit('update', seconds ?? 0)" />
+                    class="pointer-events-none absolute left-full top-1/2 ml-1.5 flex -translate-y-1/2 items-center"
+                    :aria-label="saveStatus === 'saving' ? 'Saving' : 'Saved'">
+                    <LoadingSpinner
+                        v-if="saveStatus === 'saving'"
+                        class="h-3 w-3 m-0 text-text-tertiary" />
+                    <CheckIcon v-else class="h-3 w-3 text-text-tertiary" />
+                </span>
+            </span>
+        </template>
     </div>
 </template>

resources/js/Components/Timesheet/TimesheetGrid.vue

@@ -15,6 +15,7 @@ import type {
     Task,
 } from '@/packages/api/src';
 import type { TimesheetRow as TimesheetRowType, TimesheetRowKey } from '@/utils/useTimesheetGrid';
+import type { CellSaveStatus } from '@/utils/timesheet/useTimesheetCellMutations';
 
 const organization = inject<ComputedRef<Organization>>('organization');
 const dayjs = getDayJsInstance();
@@ -36,6 +37,8 @@ defineProps<{
     createClient: (client: CreateClientBody) => Promise<Client | undefined>;
     createTag: (name: string) => Promise<Tag | undefined>;
     formatDuration: (seconds: number) => string;
+    cellStatuses: Record<string, CellSaveStatus>;
+    cellPendingSeconds: Record<string, number>;
 }>();
 
 const emit = defineEmits<{
@@ -60,7 +63,7 @@ const emit = defineEmits<{
                 class="grid min-w-full w-max border-y border-default-background-separator"
                 style="
                     grid-template-columns:
-                        minmax(420px, 1fr) repeat(7, minmax(96px, 120px)) minmax(100px, auto)
+                        minmax(420px, 1fr) repeat(7, minmax(116px, 120px)) minmax(100px, auto)
                         40px;
                 ">
                 <!-- Header row -->
@@ -100,6 +103,8 @@ const emit = defineEmits<{
                     :create-client="createClient"
                     :create-tag="createTag"
                     :format-duration="formatDuration"
+                    :cell-statuses="cellStatuses"
+                    :cell-pending-seconds="cellPendingSeconds"
                     @remove-row="$emit('remove-row', $event)"
                     @cell-update="
                         (dayIndex, seconds) => $emit('cell-update', row, dayIndex, seconds)

resources/js/Components/Timesheet/TimesheetRow.vue

@@ -15,6 +15,10 @@ import type {
     Organization,
 } from '@/packages/api/src';
 import type { TimesheetRow, TimesheetRowKey } from '@/utils/useTimesheetGrid';
+import {
+    makeCellStatusKey,
+    type CellSaveStatus,
+} from '@/utils/timesheet/useTimesheetCellMutations';
 import { Button } from '@/packages/ui/src/Buttons';
 
 const organization = inject<ComputedRef<Organization>>('organization');
@@ -34,6 +38,8 @@ const props = defineProps<{
     createClient: (client: CreateClientBody) => Promise<Client | undefined>;
     createTag: (name: string) => Promise<Tag | undefined>;
     formatDuration: (seconds: number) => string;
+    cellStatuses: Record<string, CellSaveStatus>;
+    cellPendingSeconds: Record<string, number>;
 }>();
 
 const emit = defineEmits<{
@@ -109,6 +115,8 @@ function hasRunningEntry(dayIndex: number): boolean {
             :date="day"
             :is-today="day === todayDate"
             :has-running-entry="hasRunningEntry(dayIndex)"
+            :save-status="cellStatuses[makeCellStatusKey(row.key, dayIndex)]"
+            :pending-seconds="cellPendingSeconds[makeCellStatusKey(row.key, dayIndex)]"
             @update="(seconds) => emit('cellUpdate', dayIndex, seconds)" />
 
         <!-- Row total -->

resources/js/Layouts/AppLayout.vue

@@ -293,7 +293,7 @@ const page = usePage<{
                 <div class="justify-self-end">
                     <UpdateSidebarNotification></UpdateSidebarNotification>
                     <ul
-                        class="border-t border-default-background-separator pt-3 gap-1 pr-2 flex justify-between items-center">
+                        class="border-t border-default-background-separator pt-3 gap-1 flex justify-between items-center">
                         <UserSettingsIcon></UserSettingsIcon>
 
                         <NavigationSidebarItem

resources/js/Pages/Timesheet.vue

@@ -90,7 +90,12 @@ const weekRangeDisplay = computed(() => {
 });
 
 // ── Cell / row mutation handlers ──────────────────────────────────
-const { handleCellUpdate } = useTimesheetCellMutations(weekDays, timeEntries, rows, removeSlot);
+const { handleCellUpdate, cellStatus, cellPendingSeconds } = useTimesheetCellMutations(
+    weekDays,
+    timeEntries,
+    rows,
+    removeSlot
+);
 
 const { handleRowIdentityChange, handleAddRow } = useTimesheetRowMutations(
     mutations,
@@ -167,6 +172,8 @@ async function createTag(name: string): Promise<Tag | undefined> {
                 :create-client="createClient"
                 :create-tag="createTag"
                 :format-duration="formatDuration"
+                :cell-statuses="cellStatus"
+                :cell-pending-seconds="cellPendingSeconds"
                 @remove-row="handleRemoveRow"
                 @cell-update="handleCellUpdate"
                 @project-task-change="

resources/js/utils/timesheet/useTimesheetCellMutations.test.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { ref } from 'vue';
 import { createPinia, setActivePinia } from 'pinia';
-import { useTimesheetCellMutations } from './useTimesheetCellMutations';
+import { useTimesheetCellMutations, makeCellStatusKey } from './useTimesheetCellMutations';
 import { api } from '@/packages/api/src';
 import type { TimesheetRow, TimesheetCell } from '@/utils/useTimesheetGrid';
 import type { TimeEntry } from '@/packages/api/src';
@@ -549,3 +549,119 @@ describe('useTimesheetCellMutations.handleCellUpdate', () => {
         });
     });
 });
+
+describe('useTimesheetCellMutations save status', () => {
+    // Timer handles keep old fade-outs from clearing newer status, and
+    // the same-cell saving guard prevents concurrent writes from stale rows.
+
+    it('does not let a stale fade-out timer clear a newer edit on the same cell', async () => {
+        const { cellMutations } = setup([]);
+        const row = buildEmptyRow('p-1');
+        const key = makeCellStatusKey(row.key, 0);
+
+        await cellMutations.handleCellUpdate(row, 0, HOUR);
+        expect(cellMutations.cellStatus.value[key]).toBe('saved');
+
+        // Re-edit the same cell partway through the first "saved" window.
+        vi.advanceTimersByTime(1000);
+        await cellMutations.handleCellUpdate(row, 0, 2 * HOUR);
+        expect(cellMutations.cellPendingSeconds.value[key]).toBe(2 * HOUR);
+
+        // Advance past the FIRST timer's deadline: it must not wipe the newer state.
+        vi.advanceTimersByTime(2000);
+        expect(cellMutations.cellStatus.value[key]).toBe('saved');
+        expect(cellMutations.cellPendingSeconds.value[key]).toBe(2 * HOUR);
+    });
+
+    it('ignores another commit while the same cell is saving', async () => {
+        const { cellMutations } = setup([]);
+        const row = buildEmptyRow('p-1');
+        const key = makeCellStatusKey(row.key, 0);
+
+        let release!: () => void;
+        const gateA = new Promise<void>((res) => {
+            release = () => res();
+        });
+        apiMocks.createTimeEntry.mockImplementationOnce(async () => {
+            await gateA;
+            return { data: { id: 'a' } } as never;
+        });
+
+        const save = cellMutations.handleCellUpdate(row, 0, HOUR);
+        expect(cellMutations.cellStatus.value[key]).toBe('saving');
+        expect(cellMutations.cellPendingSeconds.value[key]).toBe(HOUR);
+
+        // The second commit would be planned from the same stale row, so it is ignored.
+        await cellMutations.handleCellUpdate(row, 0, 2 * HOUR);
+        expect(apiMocks.createTimeEntry).toHaveBeenCalledTimes(1);
+        expect(cellMutations.cellPendingSeconds.value[key]).toBe(HOUR);
+
+        release();
+        await save;
+        expect(cellMutations.cellStatus.value[key]).toBe('saved');
+        expect(cellMutations.cellPendingSeconds.value[key]).toBe(HOUR);
+    });
+
+    it('marks error and drops the optimistic value when the save fails', async () => {
+        const { cellMutations } = setup([]);
+        const row = buildEmptyRow('p-1');
+        const key = makeCellStatusKey(row.key, 0);
+
+        apiMocks.createTimeEntry.mockRejectedValueOnce(new Error('boom'));
+
+        await cellMutations.handleCellUpdate(row, 0, HOUR);
+
+        expect(cellMutations.cellStatus.value[key]).toBe('error');
+        expect(cellMutations.cellPendingSeconds.value[key]).toBeUndefined();
+        expect(addNotification).toHaveBeenCalledWith(
+            'error',
+            'Failed to update timesheet',
+            expect.any(String)
+        );
+    });
+
+    it('marks error and drops the optimistic value when the day is full', async () => {
+        // Block all but the last 2h, then ask for 3h → NoFreeWindowError.
+        const blocker = entry('2026-04-10T00:00:00Z', '2026-04-10T22:00:00Z', { id: 'blocker' });
+        const { cellMutations } = setup([blocker]);
+        const row = buildEmptyRow('p-1');
+        const key = makeCellStatusKey(row.key, 0);
+
+        await cellMutations.handleCellUpdate(row, 0, 3 * HOUR);
+
+        expect(cellMutations.cellStatus.value[key]).toBe('error');
+        expect(cellMutations.cellPendingSeconds.value[key]).toBeUndefined();
+        expect(addNotification).toHaveBeenCalledWith(
+            'error',
+            "This day can't fit any more work",
+            expect.any(String)
+        );
+    });
+
+    it('creates no status when the committed value is unchanged', async () => {
+        const cellEntry = entry('2026-04-10T09:00:00Z', '2026-04-10T10:00:00Z');
+        const { cellMutations } = setup([cellEntry]);
+        const row = buildRow('p-1', [cellEntry]);
+        const key = makeCellStatusKey(row.key, 0);
+
+        await cellMutations.handleCellUpdate(row, 0, HOUR);
+
+        expect(cellMutations.cellStatus.value[key]).toBeUndefined();
+        expect(cellMutations.cellPendingSeconds.value[key]).toBeUndefined();
+    });
+
+    it('tracks save status independently for each cell', async () => {
+        const { cellMutations } = setup([]);
+        const row = buildEmptyRow('p-1');
+        const mondayKey = makeCellStatusKey(row.key, 0);
+        const tuesdayKey = makeCellStatusKey(row.key, 1);
+
+        await cellMutations.handleCellUpdate(row, 0, HOUR);
+        await cellMutations.handleCellUpdate(row, 1, 2 * HOUR);
+
+        expect(cellMutations.cellStatus.value[mondayKey]).toBe('saved');
+        expect(cellMutations.cellStatus.value[tuesdayKey]).toBe('saved');
+        expect(cellMutations.cellPendingSeconds.value[mondayKey]).toBe(HOUR);
+        expect(cellMutations.cellPendingSeconds.value[tuesdayKey]).toBe(2 * HOUR);
+    });
+});

resources/js/utils/timesheet/useTimesheetCellMutations.ts

@@ -1,4 +1,4 @@
-import type { Ref } from 'vue';
+import { ref, type Ref } from 'vue';
 import { useQueryClient } from '@tanstack/vue-query';
 import { api, type CreateTimeEntryBody, type TimeEntry } from '@/packages/api/src';
 import { formatHumanReadableDuration, getDayJsInstance } from '@/packages/ui/src/utils/time';
@@ -19,6 +19,17 @@ import {
     type FreeWindow,
 } from './cellMath';
 
+export type CellSaveStatus = 'saving' | 'saved' | 'error';
+
+/** Map key for a cell's save state (row + day). */
+export function makeCellStatusKey(rowKey: TimesheetRowKey, dayIndex: number): string {
+    return `${rowKey}:${dayIndex}`;
+}
+
+/** How long the saved/error state stays visible before fading. */
+const SAVED_VISIBLE_MS = 2800;
+const ERROR_VISIBLE_MS = 2500;
+
 /**
  * Cell-level edit dispatcher. Picks one of four strategies based on
  * the diff between current and requested totals:
@@ -48,15 +59,58 @@ export function useTimesheetCellMutations(
     const queryClient = useQueryClient();
     const notifications = useNotificationsStore();
 
+    // Save status + the optimistic value shown while saving, so a saved cell
+    // doesn't flicker back to its old total before the refetch lands.
+    const cellStatus = ref<Record<string, CellSaveStatus>>({});
+    const cellPendingSeconds = ref<Record<string, number>>({});
+    const statusClearTimers: Record<string, ReturnType<typeof setTimeout>> = {};
+
+    function clearStatusTimer(key: string): void {
+        clearTimeout(statusClearTimers[key]);
+        delete statusClearTimers[key];
+    }
+
+    function beginSaving(key: string, seconds: number): void {
+        clearStatusTimer(key);
+        cellPendingSeconds.value[key] = seconds;
+        cellStatus.value[key] = 'saving';
+    }
+
+    function markSaved(key: string): void {
+        clearStatusTimer(key);
+        cellStatus.value[key] = 'saved';
+        statusClearTimers[key] = setTimeout(() => {
+            delete cellStatus.value[key];
+            delete cellPendingSeconds.value[key];
+            delete statusClearTimers[key];
+        }, SAVED_VISIBLE_MS);
+    }
+
+    function markError(key: string): void {
+        clearStatusTimer(key);
+        cellStatus.value[key] = 'error';
+        // Drop the optimistic value so the cell shows server truth after refetch.
+        delete cellPendingSeconds.value[key];
+        statusClearTimers[key] = setTimeout(() => {
+            delete cellStatus.value[key];
+            delete statusClearTimers[key];
+        }, ERROR_VISIBLE_MS);
+    }
+
     async function handleCellUpdate(
         row: TimesheetRow,
         dayIndex: number,
         newTotalSeconds: number
     ): Promise<void> {
+        const statusKey = makeCellStatusKey(row.key, dayIndex);
+        if (cellStatus.value[statusKey] === 'saving') return;
+
         const cell = row.cells.get(dayIndex);
         const existingSeconds = cell?.totalSeconds ?? 0;
         if (newTotalSeconds === existingSeconds) return;
 
+        beginSaving(statusKey, newTotalSeconds);
+
         // Capture row state before the mutation: a row that was empty
         // and shares identity with another slot collapses after the
         // first entry lands, so the entry naturally identity-routes to
@@ -74,7 +128,9 @@ export function useTimesheetCellMutations(
                     'Another row with the same project, task, billable status and tags already exists.'
                 );
             }
+            markSaved(statusKey);
         } catch (err) {
+            markError(statusKey);
             if (err instanceof NoFreeWindowError) {
                 const friendlyDuration = formatHumanReadableDuration(
                     err.requiredSeconds,
@@ -93,7 +149,6 @@ export function useTimesheetCellMutations(
                 'Failed to update timesheet',
                 'Please try again later.'
             );
-            throw err;
         } finally {
             queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
         }
@@ -316,5 +371,5 @@ export function useTimesheetCellMutations(
         return best;
     }
 
-    return { handleCellUpdate };
+    return { handleCellUpdate, cellStatus, cellPendingSeconds };
 }