From df5e7d93963f0256285b13ddf750761930797e78 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 28 Feb 2026 22:53:24 +0000 Subject: Fix star/read buttons: _id string vs number type mismatch The Go API returns _id as a JSON string (due to the `json:",string"` tag on Item.Id), but the frontend compared it with === against numbers from parseInt(). String "5" === number 5 is always false in JS, so toggleStar, mark-as-read, and keyboard shortcuts silently did nothing. Fix: - Coerce _id to Number() when items are loaded from the API - Use Number() coercion in all store.items.find() comparisons as defense - Revert the CSS touch-target changes (the issue was never about size) - Add a regression test with string _id to prevent reintroduction https://claude.ai/code/session_012CNdRhGhU3hxjrwvZt2BHZ --- frontend-vanilla/src/main.test.ts | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) (limited to 'frontend-vanilla/src/main.test.ts') diff --git a/frontend-vanilla/src/main.test.ts b/frontend-vanilla/src/main.test.ts index 2715b5c..2d74ea5 100644 --- a/frontend-vanilla/src/main.test.ts +++ b/frontend-vanilla/src/main.test.ts @@ -188,6 +188,27 @@ describe('main application logic', () => { })); }); + it('should handle star toggle when _id is a string (API returns string)', async () => { + renderLayout(); + // The Go API returns _id as a string due to json:",string" tag. + // fetchItems normalizes this, but verify the flow works end-to-end. + const mockItem = { _id: "5" as any, title: 'String ID Item', starred: true, publish_date: '2023-01-01' } as any; + store.setItems([mockItem]); + renderItems(); + + vi.mocked(apiFetch).mockResolvedValue({ ok: true } as Response); + + const starBtn = document.querySelector('[data-action="toggle-star"]') as HTMLElement; + starBtn.click(); + + // parseInt in the click handler produces number 5, but store has string "5". + // This should still work because toggleStar finds the item. + expect(apiFetch).toHaveBeenCalledWith(expect.stringContaining('/api/item/5'), expect.objectContaining({ + method: 'PUT', + body: expect.stringContaining('"starred":false') + })); + }); + it('should handle theme change in settings', () => { renderLayout(); renderSettings(); -- cgit v1.2.3