chore: Card component, bills/household edits, layout, and turbo dev flag#135
Closed
jhechtf wants to merge 25 commits into
Closed
chore: Card component, bills/household edits, layout, and turbo dev flag#135jhechtf wants to merge 25 commits into
jhechtf wants to merge 25 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
Author
This stack of pull requests is managed by Graphite. Learn more about stacking. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 18
Note
Due to the large number of review comments, Critical, Major severity comments were prioritized as inline comments.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
apps/website/package.json (1)
27-34:⚠️ Potential issue | 🟠 MajorStorybook version mismatch detected.
There's a critical inconsistency in Storybook package versions. You have v9.x packages (
@storybook/svelte,@storybook/sveltekit,storybook,@storybook/addon-themes) mixed with v8.x packages (@storybook/addon-essentials,@storybook/addon-interactions,@storybook/blocks,@storybook/test). Mixing Storybook v8 and v9 packages causes runtime errors and is not supported—all Storybook packages must use the same major version. Runnpx storybook@9 upgradefrom the repository root to uniformly migrate to v9.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/package.json` around lines 27 - 34, The package.json shows mixed Storybook major versions (e.g., `@storybook/svelte`, `@storybook/sveltekit`, `@storybook/addon-themes` at v9 while `@storybook/addon-essentials`, `@storybook/addon-interactions`, `@storybook/blocks`, `@storybook/test` are at v8), which will cause runtime errors; update all Storybook packages to the same major version by running the Storybook upgrade (npx storybook@9 upgrade) or manually bumping the v8 packages to v9, ensuring package names like `@storybook/addon-essentials`, `@storybook/addon-interactions`, `@storybook/blocks`, `@storybook/test`, `@storybook/svelte`, `@storybook/sveltekit`, and `@storybook/addon-themes` are all on v9 and then reinstall dependencies and verify the storybook build.apps/website/src/routes/dashboard/payments/[id=ulid]/+page.svelte (1)
84-116:⚠️ Potential issue | 🟡 MinorDead code:
{:else}block will never render.The
{:else}clause on lines 114-115 is unreachable because the entire{#each}loop is wrapped in{#ifpayment.history.length > 0}. If history is empty, the outer{#if}prevents entry, so the{:else}never executes.🧹 Proposed fix: remove dead code or restructure
Option 1 - Remove the guard and rely on
{:else}:- {`#if` payment.history.length > 0} - <section class="mt-6"> - <Header tag="h2" class="my-4">Payment History</Header> - <div class="flex flex-col gap-3"> - {`#each` payment.history as pastPayment (pastPayment.id)} + <section class="mt-6"> + <Header tag="h2" class="my-4">Payment History</Header> + <div class="flex flex-col gap-3"> + {`#each` payment.history as pastPayment (pastPayment.id)} ... - {:else} - <p>No payment history for this bill</p> - {/each} - </div> - </section> - {/if} + {:else} + <p>No payment history for this bill</p> + {/each} + </div> + </section>Option 2 - Keep the guard and remove the
{:else}:{/each} - {:else} - <p>No payment history for this bill</p> </div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/src/routes/dashboard/payments/`[id=ulid]/+page.svelte around lines 84 - 116, The {:else} on the {`#each` payment.history as pastPayment (pastPayment.id)} loop is dead because the outer {`#if` payment.history.length > 0} prevents the each from running when history is empty; fix by either removing the outer guard ({`#if` payment.history.length > 0}) so the {`#each`} can handle empty-state via its {:else}, or keep the guard and delete the {:else} block and its "No payment history for this bill" text; the relevant symbols to change are the outer {`#if` payment.history.length > 0} and the inner {`#each` ...} / {:else} block in +page.svelte.
🟡 Minor comments (10)
apps/website/src/lib/components/card/card.stories.svelte-23-27 (1)
23-27:⚠️ Potential issue | 🟡 MinorReplace inappropriate placeholder text.
The story description
'your mother'appears to be debug/placeholder text that will be visible in Storybook's autodocs. Replace with a meaningful description.📝 Suggested fix
parameters={{ docs: { description: { - story: 'your mother', + story: 'A basic card with default content.', }, }, }}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/src/lib/components/card/card.stories.svelte` around lines 23 - 27, Replace the inappropriate placeholder string set on docs.description.story in card.stories.svelte (the docs: { description: { story: 'your mother' } } entry) with a concise, meaningful Storybook autodocs description of the Card story that explains what the story demonstrates (e.g., purpose, variant, or props highlighted).package.json-6-6 (1)
6-6:⚠️ Potential issue | 🟡 MinorPrettier check is currently failing in CI.
pnpm prettier:checkis red for multiple files; please runpnpm prettier:formatbefore merge.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@package.json` at line 6, Prettier formatting errors are failing CI; run the repository formatter and commit the results by executing the project formatting command (run "pnpm prettier:format" locally), review/accept the changes produced, stage and commit them, then push so `pnpm prettier:check` in CI passes; ensure any modified files (including package.json where the "dev" script appears) are included in the commit.apps/website/src/routes/dashboard/household/_components/householdSidebarInvite.svelte-20-21 (1)
20-21:⚠️ Potential issue | 🟡 MinorPotential race condition: both Accept and Reject can be submitted concurrently.
Creating two independent form state objects (
acceptFormandrejectForm) means theirpendingstates are tracked separately. A user could click "Accept" and then immediately click "Reject" before the first request completes, potentially causing race conditions on the server.Consider sharing state to disable both buttons when either action is pending:
🛡️ Suggested fix
- {`@const` acceptForm = respondToInvite.for(invite.id)} - {`@const` rejectForm = respondToInvite.for(invite.id)} + {`@const` inviteForm = respondToInvite.for(invite.id)} + {`@const` isPending = inviteForm.pending > 0} <div class="flex flex-col gap-3 variant-ghost p-2 rounded"> ... <div class="flex gap-2 justify-center"> - <form {...acceptForm}> + <form {...inviteForm}> <input type="hidden" name="invite-id" value={invite.id} /> - <Button name="action" value="accept" type="submit" disabled={acceptForm.pending > 0}>Accept</Button> + <Button name="action" value="accept" type="submit" disabled={isPending}>Accept</Button> </form> - <form {...rejectForm}> + <form {...inviteForm}> <input type="hidden" name="invite-id" value={invite.id} /> - <Button variant="destructive:ghost" name="action" value="delete" type="submit" disabled={rejectForm.pending > 0}>Reject</Button> + <Button variant="destructive:ghost" name="action" value="delete" type="submit" disabled={isPending}>Reject</Button> </form> </div> </div>Also applies to: 32-40
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/src/routes/dashboard/household/_components/householdSidebarInvite.svelte` around lines 20 - 21, Two separate form instances acceptForm and rejectForm created via respondToInvite.for(invite.id) allow independent pending states and can cause concurrent submissions; change to a single shared form instance (e.g., single variable respondForm = respondToInvite.for(invite.id)) and reuse it for both Accept and Reject handlers so that you can derive a single pending flag to disable both buttons while any request is in-flight (update usages of acceptForm.pending and rejectForm.pending to respondForm.pending and remove the duplicate respondToInvite.for(invite.id) creation); apply the same consolidation to the other duplicated block referenced around lines 32-40.apps/website/src/routes/dashboard/bills/create/+page.svelte-28-34 (1)
28-34:⚠️ Potential issue | 🟡 MinorURL-parsed bills are missing
amountandcurrencyproperties.Bills initialized from URL params (lines 31-32) only include
name,dueDate, andhousehold, but lackamountandcurrency. This causesbill.amount(line 153) andbill.currency(line 159) to beundefined, which may cause issues with theCurrencycomponent or form validation.🐛 Suggested fix
if (ids.length > 0) { - return ids.map((id) => ({ name: '', dueDate: 1, household: id })); + return ids.map((id) => ({ name: '', dueDate: 1, household: id, amount: 0, currency: 'USD' })); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/src/routes/dashboard/bills/create/`+page.svelte around lines 28 - 34, The URL-parsed bill objects created in the initialBillsFromUrl IIFE (type BillTmp, using page.url.searchParams.getAll) are missing amount and currency so bill.amount and bill.currency are undefined; update the mapping to include default amount (e.g., 0 or '') and a default currency (e.g., 'USD' or your app's default) for each returned object so the Currency component and validation always receive defined values.apps/website/src/routes/dashboard/+page.svelte-315-318 (1)
315-318:⚠️ Potential issue | 🟡 MinorQuery params may include
undefinedvalues.On line 317,
bill.payment?.idcould beundefinedifpaymentis null (despite the filter on line 316, TypeScript may not narrow properly). Similarly, line 329 doesn't filter for non-null payments, sobill.payment?.idwill definitely produceundefinedfor bills without payments, resulting in query strings likepayments[]=undefined.🛠️ Proposed fix for "Pay Overdue" button
onclick={() => { const ids = overdueBills + .filter((bill) => bill.payment !== null) .map((bill) => `payments[]=${bill.payment?.id}`) .join('&');Also applies to: 328-330
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/src/routes/dashboard/`+page.svelte around lines 315 - 318, The query string builder is including "undefined" because bill.payment?.id can be undefined; update the logic that constructs ids and the similar block at lines 328-330 to explicitly filter thisWeekBills for bills with a non-null payment (e.g., filter(bill => bill.payment != null)) before mapping, and then map to bill.payment.id (or otherwise safely assert the id) so the produced query params never include undefined; reference the thisWeekBills array, the ids variable, and the bill.payment?.id expression when making the change.apps/website/src/routes/dashboard/+page.svelte-279-279 (1)
279-279:⚠️ Potential issue | 🟡 MinorPotential malformed URL when
bill.paymentis null.If
bill.paymentisnull, the href becomes/dashboard/payments/create/undefined, which will likely cause a route mismatch or 404. Consider guarding against this or ensuring bills without payments aren't rendered with this link.🔍 Verification needed
Verify the expected behavior when a bill has no associated payment:
#!/bin/bash # Check how the create payment route handles undefined/invalid IDs rg -n "payments/create/\[id" --type svelte -A 5 # Check the ULID validator behavior ast-grep --pattern 'export const ulidValidator = $_'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/src/routes/dashboard/`+page.svelte at line 279, The href currently interpolates bill.payment?.id which yields "/dashboard/payments/create/undefined" when bill.payment is null; update the Svelte template to guard this link by either rendering the anchor only when bill.payment is truthy (check bill.payment or bill.payment.id) or by providing a safe fallback path (e.g., "/dashboard/payments/create" or a disabled button) so the route is never generated with "undefined"; locate the href usage in the component where bill.payment is referenced and apply the conditional rendering or fallback logic accordingly.apps/website/src/routes/dashboard/bills/+page.svelte-111-116 (1)
111-116:⚠️ Potential issue | 🟡 MinorMissing error handling on delete submission.
Similar to the bulk edit form, if
deleteBillsfails, the modal closes and selection clears anyway. Consider wrapping in try/catch to handle errors gracefully.🛠️ Proposed fix
<form {...deleteBills.enhance(async ({ submit }) => { - await submit(); - deleteModalOpen = false; - selectedBillIds = []; + try { + await submit(); + deleteModalOpen = false; + selectedBillIds = []; + } catch (err) { + console.error('Failed to delete bills:', err); + // Optionally show error toast/notification + } })} >🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/src/routes/dashboard/bills/`+page.svelte around lines 111 - 116, The delete form's enhance callback (deleteBills.enhance) currently awaits submit() then unconditionally closes the modal and clears selectedBillIds; wrap the await submit() in a try/catch so that on success you set deleteModalOpen = false and selectedBillIds = [], and on failure you leave the modal and selection intact and surface the error (e.g., rethrow or set an error state) so users can see the failure; update the enhance callback around deleteBills.enhance to perform this try/catch around submit() and handle errors appropriately.apps/website/src/routes/dashboard/bills/[id=ulid]/+page.svelte-133-136 (1)
133-136:⚠️ Potential issue | 🟡 Minor
?? nullhas no effect afterNumber().
Number(p.amount)never returnsnullorundefined—it returnsNaNfor invalid inputs. The?? nullfallback will never trigger. If the intent is to handle missing amounts, check before callingNumber().🛠️ Proposed fix
data: billData.payments .slice() .sort((a, b) => a.forMonthD.getTime() - b.forMonthD.getTime()) - .map((p) => Number(p.amount) ?? null), + .map((p) => (p.amount != null ? Number(p.amount) : null)), label: `${billData.billName} (Actual)`,🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/src/routes/dashboard/bills/`[id=ulid]/+page.svelte around lines 133 - 136, The map callback that builds amounts currently uses Number(p.amount) ?? null, but Number never yields null so the nullish fallback is ineffective; update the mapping in the payments pipeline (the .map((p) => ...) after .sort on billData.payments) to first check for missing amounts (e.g., p.amount == null) and return null in that case, otherwise convert to a Number and treat non-finite results as null (e.g., if Number(...) is NaN or not finite return null), so the result array contains numeric values or nulls as intended.apps/website/src/routes/dashboard/+page.svelte-272-279 (1)
272-279:⚠️ Potential issue | 🟡 MinorUse
e.currentTargetinstead ofe.targetfor the anchor element.When casting
e.target as HTMLAnchorElement, if the user clicks on a child element (like text or an icon inside the anchor),e.targetwill be that child element, not the anchor. Usee.currentTargetwhich always refers to the element the handler is attached to.🐛 Proposed fix
{`@attach` hijack({ onclick: (e) => { - const target = e.target as HTMLAnchorElement; - makeOrUpdatePayment.url = target.href; + const target = e.currentTarget as HTMLAnchorElement; + makeOrUpdatePayment.url = target.href; makeOrUpdatePayment.show = true; }, })} - href={`/dashboard/payments/create/${bill.payment?.id}`}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/src/routes/dashboard/`+page.svelte around lines 272 - 279, The click handler attached via hijack currently uses e.target cast to HTMLAnchorElement which can be a child element; change it to use e.currentTarget (cast to HTMLAnchorElement) inside the onclick function so makeOrUpdatePayment.url is set from the anchor element itself (update the onclick in the hijack call that references makeOrUpdatePayment.url and makeOrUpdatePayment.show).apps/website/src/routes/dashboard/bills/edit/[ids=ulids]/+page.svelte-37-42 (1)
37-42:⚠️ Potential issue | 🟡 MinorMissing error handling:
onclose()called even ifsubmit()fails.If the remote submission fails (e.g., network error or validation failure), the form still calls
onclose(), potentially closing the drawer before the user sees any error feedback. Other edit pages in this PR usetry/finallyto handle this pattern.🛠️ Proposed fix: wrap in try/finally or handle errors
{...updateBills.enhance(async ({ submit }) => { - await submit(); - getUserBills().refresh(); - onclose(); + try { + await submit(); + getUserBills().refresh(); + onclose(); + } catch (err) { + // Handle or surface the error to the user + console.error('Failed to update bills:', err); + } })}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/src/routes/dashboard/bills/edit/`[ids=ulids]/+page.svelte around lines 37 - 42, The form enhancement currently calls onclose() unconditionally after await submit(), which closes the drawer even when submission fails; update the updateBills.enhance callback to wrap the submit flow in a try/catch so that you only call getUserBills().refresh() and onclose() when await submit() succeeds (handle or rethrow errors in the catch so the UI can display them and the drawer stays open); reference updateBills.enhance, submit(), getUserBills().refresh(), and onclose() when making the change.
🧹 Nitpick comments (10)
.claude/settings.local.json (1)
3-6: Consider narrowing the scope of allowed commands if more precise control is needed.The wildcard patterns
gt branch:*andgt checkout:*allow any subcommands under these prefixes. If your use case requires stricter control, explicitly enumerate the specific allowed operations (e.g.,"Bash(gt branch:main)","Bash(gt checkout:develop)") rather than using wildcards.The settings schema and format are correct.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.claude/settings.local.json around lines 3 - 6, The current "allow" entries use broad wildcard patterns ("Bash(gt branch:*)" and "Bash(gt checkout:*)"); narrow the scope by replacing these wildcards with explicit, required subcommands or more restrictive patterns (for example enumerate exact allowed commands such as "Bash(gt branch:main)" or "Bash(gt checkout:develop)" or use tighter patterns that only match the needed branches), updating the "allow" array entries accordingly to list only the precise operations you intend to permit.apps/website/src/routes/dashboard/payments/create/[id=ulid]/+page.svelte (2)
111-118: Potential memory leak with blob URL.
URL.createObjectURL(file)creates a blob URL that persists until the page is unloaded or explicitly revoked. Whenfilechanges (user selects a different file or clears it), the previous blob URL should be revoked to free memory.♻️ Suggested fix using $effect for cleanup
+ let blobUrl: string | null = $state(null); + + $effect(() => { + if (file) { + blobUrl = URL.createObjectURL(file); + return () => { + if (blobUrl) URL.revokeObjectURL(blobUrl); + }; + } else { + blobUrl = null; + } + });Then in the template, replace
{@constblobUrl = URL.createObjectURL(file)}with just using the reactiveblobUrlstate variable.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/src/routes/dashboard/payments/create/`[id=ulid]/+page.svelte around lines 111 - 118, The template currently uses {`@const` blobUrl = URL.createObjectURL(file)} which leaks blob URLs; instead create a reactive blobUrl variable (e.g., blobUrl) and update it whenever file changes by calling URL.createObjectURL(file) and revoking the previous URL with URL.revokeObjectURL(prev) (use Svelte's $: reactive statement or $onDestroy/$effect to handle cleanup), and then replace the {`@const` ...} usage in the template with the reactive blobUrl; ensure you also revoke blobUrl on component destroy to avoid leaks.
25-35: Consider adding an error boundary for failed data fetches.The
svelte:boundaryhas apendingsnippet but nofailedsnippet. IfgetPayment(page.params.id)throws (e.g., network error, invalid ID, unauthorized), the user will see no feedback.♻️ Add a failed snippet
{`#snippet` pending()} <div class="p-6"> <div class="h-8 w-48 rounded animate-pulse bg-surface-300 mb-6"></div> <div class="grid grid-cols-3 gap-2"> {`#each` Array(4) as _} <div class="h-16 rounded animate-pulse bg-surface-300"></div> {/each} </div> </div> {/snippet} + {`#snippet` failed(error)} + <div class="p-6 text-error-500"> + Failed to load payment: {error.message} + </div> + {/snippet}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/src/routes/dashboard/payments/create/`[id=ulid]/+page.svelte around lines 25 - 35, The svelte:boundary currently only handles the pending state and lacks a failed state, so when getPayment(page.params.id) throws the UI shows nothing; add a failed snippet to the existing <svelte:boundary> that defines {`#snippet` failed(error)} and renders a user-friendly error message (using error.message or a localized string), optional details and a retry action that invokes the appropriate reload or navigation (e.g., call the same data-loading logic or dispatch an event), ensuring the failed snippet references the same page data loader (getPayment/page load) and provides clear feedback and a recovery option for network/authorization/invalid-id errors.apps/website/src/routes/dashboard/household/+page.svelte (1)
33-41: Consider adding error handling for the async boundary.The
svelte:boundaryhas apendingsnippet but nofailedsnippet. If any of the three remote calls fail, users won't see an error message.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/src/routes/dashboard/household/`+page.svelte around lines 33 - 41, The svelte:boundary currently only renders a pending() snippet and lacks a failed() fallback, so if any remote call inside the boundary errors users see nothing; add a failed() snippet to the <svelte:boundary> that renders a user-friendly error UI (message + optional retry button) and reference the same state used in the success renderer, updating the component containing <svelte:boundary> (the snippet blocks pending() and failed()) so the boundary displays the failed() block when an error occurs.apps/website/src/routes/dashboard/bills/create/+page.svelte (1)
60-64: Consider adding error handling for failed bill creation.The
createBill.enhancecallback callssubmit()but doesn't handle potential errors beyond console logging. If the submission fails,getUserBills().refresh()andonclose()are still called, which may leave the UI in an inconsistent state.♻️ Suggested improvement
{...createBill.enhance(async ({ submit }) => { - await submit(); - getUserBills().refresh(); - onclose(); + try { + await submit(); + getUserBills().refresh(); + onclose(); + } catch (e) { + console.error('Failed to create bill:', e); + // Optionally show toast notification + } })}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/src/routes/dashboard/bills/create/`+page.svelte around lines 60 - 64, The createBill.enhance callback currently calls submit() and then unconditionally calls getUserBills().refresh() and onclose(); wrap the submit call in a try/catch (or inspect the returned result) so you only call getUserBills().refresh() and onclose() on successful submission, and handle failures by logging and surfacing an error to the user (e.g., set an error state or call a toast) inside the catch; update the code paths around createBill.enhance, submit(), getUserBills().refresh(), and onclose() accordingly to prevent closing the UI or refreshing data when bill creation fails.apps/website/src/routes/dashboard/household/[id=ulid]/members/+page.svelte (1)
7-31: Consider adding error handling for fetch failures.Similar to other pages in this PR, the
svelte:boundarylacks afailedsnippet to handle cases wheregetHouseholdMembersthrows an error.♻️ Add error handling
{/snippet} + {`#snippet` failed(error)} + <div class="p-4 text-error-500"> + Failed to load members: {error.message} + </div> + {/snippet} {`@const` members = await getHouseholdMembers(page.params.id)}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/src/routes/dashboard/household/`[id=ulid]/members/+page.svelte around lines 7 - 31, The svelte:boundary around the members fetch has no failed snippet, so if getHouseholdMembers(page.params.id) throws the UI shows nothing; add a {`@snippet` failed(error)} block inside the existing svelte:boundary (paired with the pending snippet) to render an error UI (e.g., a user-friendly message and optional error details) and include a retry or navigation hint; specifically update the svelte:boundary that wraps the await getHouseholdMembers(...) to include a failed snippet that references the error parameter so failures are surfaced to the user.apps/website/src/routes/dashboard/+page.svelte (1)
196-196: EmptyButtonGroupappears to be placeholder code.
<ButtonGroup options={[]} />renders a button group with no options. If this is intentional placeholder code, consider adding a TODO comment or removing it if unused.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/src/routes/dashboard/`+page.svelte at line 196, The ButtonGroup component is being rendered with an empty options array (<ButtonGroup options={[]} />), which likely is leftover placeholder UI; either remove this unused render or replace it with meaningful options or a TODO explaining why it's empty. Update the JSX where ButtonGroup is used (the <ButtonGroup ... /> invocation) to pass a populated options array or add a clear TODO comment above it indicating it's intentionally empty and will be implemented later, or simply remove the component if it's not needed.apps/website/src/routes/dashboard/bills/[id=ulid]/edit/+page.svelte (1)
95-95: Unnecessary optional chaining onbill?.dueDate.Since
billis obtained fromawait getBill(page.params.id)and rendered within the same template block, it's guaranteed to be defined here. The?.is unnecessary (though harmless).✨ Minor cleanup
- value={bill?.dueDate} + value={bill.dueDate}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/src/routes/dashboard/bills/`[id=ulid]/edit/+page.svelte at line 95, Remove the unnecessary optional chaining on bill?.dueDate in the template: since bill is fetched via getBill(page.params.id) and guaranteed defined in this render path, replace bill?.dueDate with bill.dueDate (and similarly update any other occurrences of bill?.<prop> in the same component such as in the +page.svelte edit form to use bill.<prop>).apps/website/src/routes/dashboard/bills/edit/[ids=ulids]/+page.svelte (1)
91-98: Consider adding input constraints for the amount field.The
dueDateinput hasmin,max,step, andrequiredattributes for validation. Theamountfield lacks similar constraints. Consider addingmin="0"andstep="0.01"for monetary values.✨ Proposed enhancement
<FormLabel label="Amount"> <input class="input" type="number" name="bills[].amount" value={bill.amount || 0} + min="0" + step="0.01" /> </FormLabel>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/src/routes/dashboard/bills/edit/`[ids=ulids]/+page.svelte around lines 91 - 98, The amount input inside the FormLabel for "Amount" (name="bills[].amount", value={bill.amount}) needs HTML input constraints for monetary validation; update the <input> for amount to include attributes min="0" and step="0.01" (and add required if this field must be mandatory) so values cannot be negative and accept cents, ensuring client-side validation aligns with the dueDate input's pattern.apps/website/src/routes/dashboard/household/[id=ulid]/edit/+page.svelte (1)
25-26: Consider a dedicatedgetHouseholdByIdquery for efficiency.Currently fetching all households via
getUserHouseholdsWithBillCount()and filtering client-side. For a small number of households this is acceptable, but if household count grows, consider adding a dedicated query that fetches only the needed household.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/website/src/routes/dashboard/household/`[id=ulid]/edit/+page.svelte around lines 25 - 26, Currently the page fetches all households with getUserHouseholdsWithBillCount() and then finds the target with households.find(h => h.id === page.params.id); add a dedicated backend query/endpoint (e.g., getHouseholdById(id)) that returns a single household by ID and replace the client-side filtering with an await getHouseholdById(page.params.id) call in +page.svelte (or call it from the corresponding load function) so only the needed household is fetched; ensure the new function enforces the same permissions/joins (bill count, owner/membership checks) as the batched query.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.claude/settings.local.json:
- Around line 1-8: Remove .claude/settings.local.json from version control and
add it to .gitignore: stop tracking the file (e.g., git rm --cached
.claude/settings.local.json) and commit that change, then add an entry for
.claude/settings.local.json (or .claude/*.json) to .gitignore so personal
keys/overrides like the "permissions" / "allow" array are not committed; ensure
the file remains locally for developer-specific settings but is excluded from
future commits.
In `@apps/website/src/lib/attachments/command.svelte.ts`:
- Around line 29-33: The submit listener added with
form.addEventListener('submit', onSubmit, true) is removed without the matching
capture flag, so change the removal to use the same capture option; update the
cleanup to call form.removeEventListener('submit', onSubmit, true) (or
alternatively make both add/remove use false consistently) so the onSubmit
listener is actually detached.
- Around line 15-35: The useRemote attachment currently prevents default but
never invokes the provided remote command and computes FormData at mount time;
modify the onSubmit handler in useRemote to (a) create a new FormData(form) and
call formDataToObject(fd) inside onSubmit so data is fresh, (b) invoke the
passed-in arg (UseRemoteArgs) — e.g., call arg or arg.onSubmit/arg.command with
the object (await if it returns a Promise) and handle errors/logging, and (c)
ensure addEventListener/removeEventListener use the same capture flag (pass true
when removing) so the listener is properly cleaned up; reference the onSubmit
function, fd/formDataToObject usage, and the
form.addEventListener/removeEventListener calls when making the fixes.
- Around line 37-47: The function remote creates a Promise (b) and mutates it by
adding an undeclared property something, which breaks strict typing; explicitly
type the return and the promise to include that extra property instead of
relying on ad-hoc mutation. Update remote's signature to return Promise<number>
& { something: () => void } and declare b with that composite type (e.g., const
b = new Promise<number>(...) as Promise<number> & { something: () => void }),
then assign b.something = () => { ... } and return b so TypeScript knows the
promise carries the extra method; reference symbols: remote, b, and something.
In `@apps/website/src/lib/remotes/bills.remote.ts`:
- Around line 71-96: The payments query is not scoped to the caller's
households, so it can return history for a bill in another household; update the
db.query.payments.findMany call to also restrict payments to the same household
check used for the bill lookup (e.g., require the payment's bill to belong to
one of userHouseholds). Concretely, add a condition to the payments where clause
that ensures the payment's billId equals id AND that the associated
bill.householdId is in userHouseholds.map(h => h.id) (either by joining payments
to schema.bills in the query or by adding an additional filter that verifies the
bill's householdId), using the same helpers (eq, inArray) so payments are only
returned for bills in the user's households.
- Around line 214-226: The code currently uses Number(data['due-date']) and
Number(data['amount']) which allow NaN through (NaN fails both < and > checks)
and the batch update path does not validate the 1..28 constraint; fix by
explicitly validating parsed values: use Number() or parseInt/parseFloat then
check Number.isFinite(value) && Number.isInteger(dueDate) && dueDate >= 1 &&
dueDate <= 28 for dueDate before calling db.update(schema.bills), and for amount
ensure Number.isFinite(amount) (or allow undefined when missing) before setting
amount; apply the same exact validation logic to the batch update code path that
constructs updates so malformed payloads are rejected with a 400 instead of
persisted.
- Around line 144-180: Validate parsed due days from data['due-date[]'] (the
dueDates array) before starting the transaction: ensure each value is a finite
integer between 1 and 28 (use Number.isInteger and bounds checks) and throw a
clear Error if any value is invalid so createBill cannot accept 0, 31, NaN,
etc.; perform this check right after computing const dueDates =
data['due-date[]'].map(Number) and before using dueDates in the tx.insert and
the subsequent newBills -> forMonthD logic.
In `@apps/website/src/lib/remotes/households.remote.ts`:
- Around line 87-105: The query in getPendingInvites overcounts because the two
LEFT JOINs multiply rows; change the counts to use distinct counts or replace
the joined counts with pre-aggregated subqueries: compute bills and members as
separate subselects (or use countDistinct on schema.bills.id and
schema.usersToHouseholds.id) and select those aggregated results into the
household object instead of the current
count(schema.bills.id)/count(schema.usersToHouseholds.id) with the joined
tables; keep the existing joins for retrieving household fields but remove the
joined tables from the group-by/aggregation that produce the counts.
- Around line 389-399: claimHousehold currently blindly sets ownerId for any
household; fix by verifying server-side that the calling user is a member and
the household is ownerless before updating. In the claimHousehold handler (using
getUser(), schema.households and db.update), first confirm membership (check the
household_memberships or equivalent table for a row matching user.id and
data['household-id']) and that schema.households.ownerId IS NULL; perform the
update only when both conditions hold (either via a transaction with a
select-then-update or a conditional update with a where(ownerId, null) and a
join/subselect to ensure membership), then check returned/rowCount and
throw/return an error if no row was updated. After successful claim, still call
getUserHouseholdsWithBillCount().refresh().
- Around line 323-361: The inviteUsers handler currently trusts
data['household-id'] and proceeds to invite emails; before starting the
db.transaction or calling locals.supabase.admin.inviteUserByEmail, verify the
current user (from getUser()) is a member/owner of that household by querying
the household/membership table (e.g., schema.households or
schema.household_members) for a record matching household id and user.id; if the
membership check fails, abort early (return an error or throw) so no invites are
sent or inserts into schema.invites occur, and perform this check near the top
of inviteUsers (before the tx loop) to protect both the invite API and the
subsequent tx and getHouseholdDetail refresh.
- Around line 156-170: The getHouseholdMembers query currently returns members
for any householdId passed in; restrict it to households the caller belongs to
by verifying membership first. Update getHouseholdMembers to receive the
caller's user id or session, then either (a) call getUserHouseholds(...) to
ensure the requested householdId is in the caller's households before running
the member query, or (b) add an extra predicate to the query that joins/filters
on schema.usersToHouseholds.userId = <callerUserId> so the WHERE enforces both
eq(schema.households.id, householdId) AND eq(schema.usersToHouseholds.userId,
callerUserId). Reference getHouseholdMembers, getUserHouseholds, and
schema.usersToHouseholds.userId when making the change.
- Around line 285-295: The findUser handler is unscoped and returns full user
rows; call getUser() at the start of findUser to obtain the current session user
(throw/return unauthorized if missing), add a where clause to restrict results
to the current user's scope (e.g., match householdId or other session-scoping
field via eq(schema.users.householdId, currentUser.householdId)), and replace
select().from(schema.users) with a projection that only selects the
invite-search fields (only id, email and the name from userMetadata or the
existing "invite-search" field set) instead of the full user row; keep the
existing search predicates (or/like/ilike/eq) but apply them to this scoped,
least-privilege query (references: findUser, getUser, schema.users).
- Around line 250-255: The authorization query destructures without checking for
a result, so if the household doesn't exist the line "const [{ isOwner }]" will
throw; update the transaction block that runs the tx.select from
schema.households (the query using sql<boolean>`${schema.households.ownerId} =
${user.id}` and where(eq(schema.households.id, data['household-id'])) ) to first
retrieve the row safely (e.g., assign to a variable like ownerRow or use a safe
getter) and check for null/undefined before destructuring; if no row is found
return the appropriate not-found/unauthorized response instead of letting the
destructuring throw.
In `@apps/website/src/routes/actions/`+server.ts:
- Around line 25-31: The join is comparing schema.payments.forMonthD to the
current month/year via sql`extract(... from now())` but forMonthD was computed
using the 5-day lookahead (now() + interval '5 days'), causing month/year
mismatches at boundaries; update the two comparisons that use now() (the
sql`extract('month' from now())` and sql`extract(YEAR from now())`) to use now()
+ interval '5 days' instead so they match schema.payments.forMonthD (i.e.,
replace now() with now() + interval '5 days' in the month and year extract
calls).
In `@apps/website/src/routes/dashboard/household/`[id=ulid]/+page.svelte:
- Around line 131-135: The drawer currently bound to showMembersDrawer only
renders a Header and empties the members UI; restore the original members view
by importing and rendering the component/markup that provides the in-place
member list and controls (e.g., MemberList / MembersPanel /
MembersDrawerContent) inside the Drawer (replace the standalone <Header> with
the full members content), ensure it receives the same props/handlers (household
id, members, onEdit/onRemove callbacks) used by the trigger that opens the
drawer, and keep the Drawer bound to showMembersDrawer so the existing trigger
continues to open the restored members panel.
- Around line 153-183: The form submitted via uploadImage.enhance is missing the
required proofFile field expected by uploadImage (see uploadImage.enhance and
uploadImage.for(payment.id).pending), causing validation to fail; add a file
input named "proofFile" (type="file", accept appropriate MIME types) into the
form (alongside the existing textarea name="proof") or update uploadImage to
make proofFile optional in payments.remote.ts; additionally, after submit() call
ensure you refresh the page data source used to render this route by calling
getHouseholdDetail(page.params.id).refresh() (in addition to
getUserBills().refresh()) so the household detail view updates to reflect the
paid bill.
In `@apps/website/src/routes/dashboard/household/`+page.svelte:
- Around line 47-53: The reduction computing upcoming treats bill.dueDate as a
Date string but it is an integer day-of-month; update the logic in the upcoming
calculation (the reducer using billsMap and bill.dueDate) to build a proper Date
for the next occurrence of that day: create a Date with the current year and
month and day = bill.dueDate, and if that date is before or equal to today, roll
it to the next month; then compare that constructed dueDate.getTime() to today
(midnight) to count upcoming bills. Ensure you handle month/year rollover and
normalize times to 00:00:00 when comparing.
In `@apps/website/src/routes/dashboard/payments/create/`+page.svelte:
- Around line 57-63: The form's enhance handler (uploadImage.enhance) calls
submit() but doesn't refresh the payments query or prevent duplicate
submissions; update the enhance callback to await submit(), then call
SvelteKit's invalidate (or otherwise re-run getPaymentsForIds(paymentIds)) to
refresh the payments data, and also set/clear a local submitting flag (or use
the enhance pending param) to disable the submit button while awaiting submit so
double-submits are blocked; locate the logic in the form using
uploadImage.enhance and adjust both the post-submit refresh and the UI disable
behavior (same change needed for the other enhance usage around the create
flow).
---
Outside diff comments:
In `@apps/website/package.json`:
- Around line 27-34: The package.json shows mixed Storybook major versions
(e.g., `@storybook/svelte`, `@storybook/sveltekit`, `@storybook/addon-themes` at v9
while `@storybook/addon-essentials`, `@storybook/addon-interactions`,
`@storybook/blocks`, `@storybook/test` are at v8), which will cause runtime errors;
update all Storybook packages to the same major version by running the Storybook
upgrade (npx storybook@9 upgrade) or manually bumping the v8 packages to v9,
ensuring package names like `@storybook/addon-essentials`,
`@storybook/addon-interactions`, `@storybook/blocks`, `@storybook/test`,
`@storybook/svelte`, `@storybook/sveltekit`, and `@storybook/addon-themes` are all on
v9 and then reinstall dependencies and verify the storybook build.
In `@apps/website/src/routes/dashboard/payments/`[id=ulid]/+page.svelte:
- Around line 84-116: The {:else} on the {`#each` payment.history as pastPayment
(pastPayment.id)} loop is dead because the outer {`#if` payment.history.length >
0} prevents the each from running when history is empty; fix by either removing
the outer guard ({`#if` payment.history.length > 0}) so the {`#each`} can handle
empty-state via its {:else}, or keep the guard and delete the {:else} block and
its "No payment history for this bill" text; the relevant symbols to change are
the outer {`#if` payment.history.length > 0} and the inner {`#each` ...} / {:else}
block in +page.svelte.
---
Minor comments:
In `@apps/website/src/lib/components/card/card.stories.svelte`:
- Around line 23-27: Replace the inappropriate placeholder string set on
docs.description.story in card.stories.svelte (the docs: { description: { story:
'your mother' } } entry) with a concise, meaningful Storybook autodocs
description of the Card story that explains what the story demonstrates (e.g.,
purpose, variant, or props highlighted).
In `@apps/website/src/routes/dashboard/`+page.svelte:
- Around line 315-318: The query string builder is including "undefined" because
bill.payment?.id can be undefined; update the logic that constructs ids and the
similar block at lines 328-330 to explicitly filter thisWeekBills for bills with
a non-null payment (e.g., filter(bill => bill.payment != null)) before mapping,
and then map to bill.payment.id (or otherwise safely assert the id) so the
produced query params never include undefined; reference the thisWeekBills
array, the ids variable, and the bill.payment?.id expression when making the
change.
- Line 279: The href currently interpolates bill.payment?.id which yields
"/dashboard/payments/create/undefined" when bill.payment is null; update the
Svelte template to guard this link by either rendering the anchor only when
bill.payment is truthy (check bill.payment or bill.payment.id) or by providing a
safe fallback path (e.g., "/dashboard/payments/create" or a disabled button) so
the route is never generated with "undefined"; locate the href usage in the
component where bill.payment is referenced and apply the conditional rendering
or fallback logic accordingly.
- Around line 272-279: The click handler attached via hijack currently uses
e.target cast to HTMLAnchorElement which can be a child element; change it to
use e.currentTarget (cast to HTMLAnchorElement) inside the onclick function so
makeOrUpdatePayment.url is set from the anchor element itself (update the
onclick in the hijack call that references makeOrUpdatePayment.url and
makeOrUpdatePayment.show).
In `@apps/website/src/routes/dashboard/bills/`[id=ulid]/+page.svelte:
- Around line 133-136: The map callback that builds amounts currently uses
Number(p.amount) ?? null, but Number never yields null so the nullish fallback
is ineffective; update the mapping in the payments pipeline (the .map((p) =>
...) after .sort on billData.payments) to first check for missing amounts (e.g.,
p.amount == null) and return null in that case, otherwise convert to a Number
and treat non-finite results as null (e.g., if Number(...) is NaN or not finite
return null), so the result array contains numeric values or nulls as intended.
In `@apps/website/src/routes/dashboard/bills/`+page.svelte:
- Around line 111-116: The delete form's enhance callback (deleteBills.enhance)
currently awaits submit() then unconditionally closes the modal and clears
selectedBillIds; wrap the await submit() in a try/catch so that on success you
set deleteModalOpen = false and selectedBillIds = [], and on failure you leave
the modal and selection intact and surface the error (e.g., rethrow or set an
error state) so users can see the failure; update the enhance callback around
deleteBills.enhance to perform this try/catch around submit() and handle errors
appropriately.
In `@apps/website/src/routes/dashboard/bills/create/`+page.svelte:
- Around line 28-34: The URL-parsed bill objects created in the
initialBillsFromUrl IIFE (type BillTmp, using page.url.searchParams.getAll) are
missing amount and currency so bill.amount and bill.currency are undefined;
update the mapping to include default amount (e.g., 0 or '') and a default
currency (e.g., 'USD' or your app's default) for each returned object so the
Currency component and validation always receive defined values.
In `@apps/website/src/routes/dashboard/bills/edit/`[ids=ulids]/+page.svelte:
- Around line 37-42: The form enhancement currently calls onclose()
unconditionally after await submit(), which closes the drawer even when
submission fails; update the updateBills.enhance callback to wrap the submit
flow in a try/catch so that you only call getUserBills().refresh() and onclose()
when await submit() succeeds (handle or rethrow errors in the catch so the UI
can display them and the drawer stays open); reference updateBills.enhance,
submit(), getUserBills().refresh(), and onclose() when making the change.
In
`@apps/website/src/routes/dashboard/household/_components/householdSidebarInvite.svelte`:
- Around line 20-21: Two separate form instances acceptForm and rejectForm
created via respondToInvite.for(invite.id) allow independent pending states and
can cause concurrent submissions; change to a single shared form instance (e.g.,
single variable respondForm = respondToInvite.for(invite.id)) and reuse it for
both Accept and Reject handlers so that you can derive a single pending flag to
disable both buttons while any request is in-flight (update usages of
acceptForm.pending and rejectForm.pending to respondForm.pending and remove the
duplicate respondToInvite.for(invite.id) creation); apply the same consolidation
to the other duplicated block referenced around lines 32-40.
In `@package.json`:
- Line 6: Prettier formatting errors are failing CI; run the repository
formatter and commit the results by executing the project formatting command
(run "pnpm prettier:format" locally), review/accept the changes produced, stage
and commit them, then push so `pnpm prettier:check` in CI passes; ensure any
modified files (including package.json where the "dev" script appears) are
included in the commit.
---
Nitpick comments:
In @.claude/settings.local.json:
- Around line 3-6: The current "allow" entries use broad wildcard patterns
("Bash(gt branch:*)" and "Bash(gt checkout:*)"); narrow the scope by replacing
these wildcards with explicit, required subcommands or more restrictive patterns
(for example enumerate exact allowed commands such as "Bash(gt branch:main)" or
"Bash(gt checkout:develop)" or use tighter patterns that only match the needed
branches), updating the "allow" array entries accordingly to list only the
precise operations you intend to permit.
In `@apps/website/src/routes/dashboard/`+page.svelte:
- Line 196: The ButtonGroup component is being rendered with an empty options
array (<ButtonGroup options={[]} />), which likely is leftover placeholder UI;
either remove this unused render or replace it with meaningful options or a TODO
explaining why it's empty. Update the JSX where ButtonGroup is used (the
<ButtonGroup ... /> invocation) to pass a populated options array or add a clear
TODO comment above it indicating it's intentionally empty and will be
implemented later, or simply remove the component if it's not needed.
In `@apps/website/src/routes/dashboard/bills/`[id=ulid]/edit/+page.svelte:
- Line 95: Remove the unnecessary optional chaining on bill?.dueDate in the
template: since bill is fetched via getBill(page.params.id) and guaranteed
defined in this render path, replace bill?.dueDate with bill.dueDate (and
similarly update any other occurrences of bill?.<prop> in the same component
such as in the +page.svelte edit form to use bill.<prop>).
In `@apps/website/src/routes/dashboard/bills/create/`+page.svelte:
- Around line 60-64: The createBill.enhance callback currently calls submit()
and then unconditionally calls getUserBills().refresh() and onclose(); wrap the
submit call in a try/catch (or inspect the returned result) so you only call
getUserBills().refresh() and onclose() on successful submission, and handle
failures by logging and surfacing an error to the user (e.g., set an error state
or call a toast) inside the catch; update the code paths around
createBill.enhance, submit(), getUserBills().refresh(), and onclose()
accordingly to prevent closing the UI or refreshing data when bill creation
fails.
In `@apps/website/src/routes/dashboard/bills/edit/`[ids=ulids]/+page.svelte:
- Around line 91-98: The amount input inside the FormLabel for "Amount"
(name="bills[].amount", value={bill.amount}) needs HTML input constraints for
monetary validation; update the <input> for amount to include attributes min="0"
and step="0.01" (and add required if this field must be mandatory) so values
cannot be negative and accept cents, ensuring client-side validation aligns with
the dueDate input's pattern.
In `@apps/website/src/routes/dashboard/household/`[id=ulid]/edit/+page.svelte:
- Around line 25-26: Currently the page fetches all households with
getUserHouseholdsWithBillCount() and then finds the target with
households.find(h => h.id === page.params.id); add a dedicated backend
query/endpoint (e.g., getHouseholdById(id)) that returns a single household by
ID and replace the client-side filtering with an await
getHouseholdById(page.params.id) call in +page.svelte (or call it from the
corresponding load function) so only the needed household is fetched; ensure the
new function enforces the same permissions/joins (bill count, owner/membership
checks) as the batched query.
In `@apps/website/src/routes/dashboard/household/`[id=ulid]/members/+page.svelte:
- Around line 7-31: The svelte:boundary around the members fetch has no failed
snippet, so if getHouseholdMembers(page.params.id) throws the UI shows nothing;
add a {`@snippet` failed(error)} block inside the existing svelte:boundary (paired
with the pending snippet) to render an error UI (e.g., a user-friendly message
and optional error details) and include a retry or navigation hint; specifically
update the svelte:boundary that wraps the await getHouseholdMembers(...) to
include a failed snippet that references the error parameter so failures are
surfaced to the user.
In `@apps/website/src/routes/dashboard/household/`+page.svelte:
- Around line 33-41: The svelte:boundary currently only renders a pending()
snippet and lacks a failed() fallback, so if any remote call inside the boundary
errors users see nothing; add a failed() snippet to the <svelte:boundary> that
renders a user-friendly error UI (message + optional retry button) and reference
the same state used in the success renderer, updating the component containing
<svelte:boundary> (the snippet blocks pending() and failed()) so the boundary
displays the failed() block when an error occurs.
In `@apps/website/src/routes/dashboard/payments/create/`[id=ulid]/+page.svelte:
- Around line 111-118: The template currently uses {`@const` blobUrl =
URL.createObjectURL(file)} which leaks blob URLs; instead create a reactive
blobUrl variable (e.g., blobUrl) and update it whenever file changes by calling
URL.createObjectURL(file) and revoking the previous URL with
URL.revokeObjectURL(prev) (use Svelte's $: reactive statement or
$onDestroy/$effect to handle cleanup), and then replace the {`@const` ...} usage
in the template with the reactive blobUrl; ensure you also revoke blobUrl on
component destroy to avoid leaks.
- Around line 25-35: The svelte:boundary currently only handles the pending
state and lacks a failed state, so when getPayment(page.params.id) throws the UI
shows nothing; add a failed snippet to the existing <svelte:boundary> that
defines {`#snippet` failed(error)} and renders a user-friendly error message
(using error.message or a localized string), optional details and a retry action
that invokes the appropriate reload or navigation (e.g., call the same
data-loading logic or dispatch an event), ensuring the failed snippet references
the same page data loader (getPayment/page load) and provides clear feedback and
a recovery option for network/authorization/invalid-id errors.
Comment on lines
+1
to
+8
| { | ||
| "permissions": { | ||
| "allow": [ | ||
| "Bash(gt branch:*)", | ||
| "Bash(gt checkout:*)" | ||
| ] | ||
| } | ||
| } |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check if .local files are in .gitignore and if other .local files exist in the repo
echo "=== Checking .gitignore for .local patterns ==="
if [ -f .gitignore ]; then
rg '\.local' .gitignore -n
else
echo ".gitignore not found"
fi
echo -e "\n=== Finding other .local files in the repository ==="
fd -H '\.local\.' -t f
echo -e "\n=== Checking for Claude settings documentation ==="
fd -H 'claude' -t f --glob '*.md'Repository: sungmanito/mono
Length of output: 349
🏁 Script executed:
#!/bin/bash
# Read the .gitignore file to see what's actually ignored
echo "=== Content of .gitignore ==="
cat .gitignore
echo -e "\n=== Looking for .claude directory and related files ==="
find .claude -type f 2>/dev/null || echo "No .claude directory or search failed"
echo -e "\n=== Checking for any claude/settings references in codebase ==="
rg 'claude.*settings|settings.*claude' -i --type md --type json --type txt 2>/dev/null | head -20 || echo "No matches found"
echo -e "\n=== Checking for other config files in .claude ==="
fd -H '' '.claude' -t f 2>/dev/nullRepository: sungmanito/mono
Length of output: 375
🏁 Script executed:
#!/bin/bash
# Check for example or template config files
echo "=== Looking for example/template config patterns ==="
fd -H 'example|template|sample|\.example\.|\.template\.' -t f | head -20
echo -e "\n=== Checking if .claude/settings.json (non-local) exists ==="
ls -la .claude/ 2>/dev/null || echo "Directory listing failed"
echo -e "\n=== Looking for any comments or documentation in the file ==="
cat -n .claude/settings.local.jsonRepository: sungmanito/mono
Length of output: 598
🌐 Web query:
Claude AI code editor settings.local.json format configuration
💡 Result:
The settings.local.json file is part of Anthropic's Claude Code configuration system, used for local, project-specific overrides that are gitignored and not shared with teams. It follows the same JSON format and schema as other settings.json files. Location: .claude/settings.local.json in the project root. Purpose: Personal tweaks within a project, such as API keys, experimental settings, or overrides for permissions, models, etc. Highest precedence after managed/command-line settings. Recommended to include: { "$schema": "https://json.schemastore.org/claude-code-settings.json" } Example configuration: { "$schema": "https://json.schemastore.org/claude-code-settings.json", "permissions": { "allow": ["Bash(npm run lint)", "Bash(npm run test )"], "deny": ["Read(./.env)", "Read(./.env.)"] }, "model": "claude-sonnet-4-5-20250929", "env": { "NODE_ENV": "development" } } Key sections include permissions (allow/deny/ask for tools/files), model override, env vars, hooks, sandbox, etc. Use /config in Claude Code REPL to edit visually. Schema enables editor autocomplete/validation.
Citations:
- 1: https://claudefa.st/blog/guide/settings-reference
- 2: https://code.claude.com/docs/en/settings
- 3: https://docs.claude.com/en/docs/claude-code/settings
- 4: https://www.thecaio.ai/blog/claude-code-settings-guide
Remove this file from version control and add to .gitignore.
.claude/settings.local.json is designed for personal, local-only configuration and should not be committed to the repository. According to Claude's settings documentation, settings.local.json is for project-specific overrides containing personal tweaks, API keys, and permission overrides—items that vary per developer and should be gitignored.
Add settings.local.json to .gitignore or remove this file from the commit.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.claude/settings.local.json around lines 1 - 8, Remove
.claude/settings.local.json from version control and add it to .gitignore: stop
tracking the file (e.g., git rm --cached .claude/settings.local.json) and commit
that change, then add an entry for .claude/settings.local.json (or
.claude/*.json) to .gitignore so personal keys/overrides like the "permissions"
/ "allow" array are not committed; ensure the file remains locally for
developer-specific settings but is excluded from future commits.
Comment on lines
+15
to
+35
| export const useRemote: <T, U>( | ||
| arg: UseRemoteArgs<T, U>, | ||
| ) => Attachment<HTMLFormElement> = (arg) => (form) => { | ||
| const onSubmit = (e: SubmitEvent) => { | ||
| e.preventDefault(); | ||
| }; | ||
|
|
||
| // Adds the submit function handler | ||
| // Generates a form data object | ||
| const fd = new FormData(form); | ||
|
|
||
| // turn the form data into an object | ||
| const obj = formDataToObject(fd); | ||
|
|
||
| form.addEventListener('submit', onSubmit, true); | ||
|
|
||
| return () => { | ||
| // Removes the listener if the item is unmounted | ||
| form.removeEventListener('submit', onSubmit); | ||
| }; | ||
| }; |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE="$(fd 'command.svelte.ts$' | head -n1)"
echo "Inspecting $FILE"
nl -ba "$FILE" | sed -n '15,40p'
echo "---- command invocation checks ----"
ast-grep --pattern 'arg.fn($$$)' "$FILE" || true
ast-grep --pattern 'arg($$$)' "$FILE" || true
rg -n "onSubmit|preventDefault|formDataToObject|new FormData" "$FILE"Repository: sungmanito/mono
Length of output: 180
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE="$(fd 'command.svelte.ts$' | head -n1)"
if [ -z "$FILE" ]; then
echo "File not found"
exit 1
fi
echo "=== File inspection (lines 15-40) ==="
cat -n "$FILE" | sed -n '15,40p'
echo ""
echo "=== Full file content ==="
wc -l "$FILE"
cat -n "$FILE"
echo ""
echo "=== Search for arg invocations ==="
rg -n "arg\(" "$FILE" || echo "No arg() invocations found"
echo ""
echo "=== Search for command execution patterns ==="
rg -n "await|command|\.fn\(" "$FILE" || echo "No matches"
echo ""
echo "=== Listener patterns ==="
rg -n "addEventListener|removeEventListener" "$FILE"Repository: sungmanito/mono
Length of output: 2770
useRemote never executes the remote command and form data is computed at mount-time.
The arg parameter is never invoked (lines 15–35). The onSubmit handler only prevents default without calling any command. Additionally, FormData and formDataToObject are computed outside the submit handler (lines 24–27), capturing stale data at mount-time instead of on each submission.
Listener cleanup fails due to capture flag mismatch. Line 29 adds the listener with capture: true, but line 33 removes it without specifying the capture flag, leaving the listener attached and causing duplicate event interception on remount.
Proposed fix
export const useRemote: <T, U>(
arg: UseRemoteArgs<T, U>,
) => Attachment<HTMLFormElement> = (arg) => (form) => {
- const onSubmit = (e: SubmitEvent) => {
- e.preventDefault();
- };
-
- // Adds the submit function handler
- // Generates a form data object
- const fd = new FormData(form);
-
- // turn the form data into an object
- const obj = formDataToObject(fd);
+ const command = typeof arg === 'function' ? arg : arg.fn;
+ const validator = typeof arg === 'function' ? undefined : arg.validator;
+ const invalidator = typeof arg === 'function' ? undefined : arg.invalidator;
+
+ const onSubmit = async (e: SubmitEvent) => {
+ if (e.defaultPrevented) return;
+ e.preventDefault();
+
+ const rawFd = new FormData(form);
+ const fd = validator ? validator(rawFd) : rawFd;
+ const obj = formDataToObject(fd) as T;
+
+ await command(obj);
+ await invalidator?.();
+ };
- form.addEventListener('submit', onSubmit, true);
+ form.addEventListener('submit', onSubmit, true);
return () => {
- form.removeEventListener('submit', onSubmit);
+ form.removeEventListener('submit', onSubmit, true);
};
};🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/website/src/lib/attachments/command.svelte.ts` around lines 15 - 35, The
useRemote attachment currently prevents default but never invokes the provided
remote command and computes FormData at mount time; modify the onSubmit handler
in useRemote to (a) create a new FormData(form) and call formDataToObject(fd)
inside onSubmit so data is fresh, (b) invoke the passed-in arg (UseRemoteArgs) —
e.g., call arg or arg.onSubmit/arg.command with the object (await if it returns
a Promise) and handle errors/logging, and (c) ensure
addEventListener/removeEventListener use the same capture flag (pass true when
removing) so the listener is properly cleaned up; reference the onSubmit
function, fd/formDataToObject usage, and the
form.addEventListener/removeEventListener calls when making the fixes.
Comment on lines
+29
to
+33
| form.addEventListener('submit', onSubmit, true); | ||
|
|
||
| return () => { | ||
| // Removes the listener if the item is unmounted | ||
| form.removeEventListener('submit', onSubmit); |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE="$(fd 'command.svelte.ts$' | head -n1)"
rg -n "addEventListener\('submit'|removeEventListener\('submit'" "$FILE"Repository: sungmanito/mono
Length of output: 165
Capture option mismatch prevents listener removal.
The submit listener is added with capture true on line 29 but removed without the capture option on line 33. According to the DOM specification, removeEventListener must use the same useCapture value as the corresponding addEventListener call, or the listener will not be removed.
Proposed fix
- form.addEventListener('submit', onSubmit, true);
+ const useCapture = true;
+ form.addEventListener('submit', onSubmit, useCapture);
return () => {
// Removes the listener if the item is unmounted
- form.removeEventListener('submit', onSubmit);
+ form.removeEventListener('submit', onSubmit, useCapture);
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| form.addEventListener('submit', onSubmit, true); | |
| return () => { | |
| // Removes the listener if the item is unmounted | |
| form.removeEventListener('submit', onSubmit); | |
| const useCapture = true; | |
| form.addEventListener('submit', onSubmit, useCapture); | |
| return () => { | |
| // Removes the listener if the item is unmounted | |
| form.removeEventListener('submit', onSubmit, useCapture); | |
| }; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/website/src/lib/attachments/command.svelte.ts` around lines 29 - 33, The
submit listener added with form.addEventListener('submit', onSubmit, true) is
removed without the matching capture flag, so change the removal to use the same
capture option; update the cleanup to call form.removeEventListener('submit',
onSubmit, true) (or alternatively make both add/remove use false consistently)
so the onSubmit listener is actually detached.
Comment on lines
+37
to
+47
| export const remote = () => { | ||
| const b = new Promise((res) => { | ||
| setTimeout(() => { | ||
| res(1); | ||
| }, 4000); | ||
| }); | ||
| b.something = () => { | ||
| console.info('hi jim'); | ||
| }; | ||
| return b; | ||
| }; |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE="$(fd 'command.svelte.ts$' | head -n1)"
nl -ba "$FILE" | sed -n '37,60p'
rg -n "new Promise|\\.something\\s*=|return b|remote\\s*=\\s*\\(" "$FILE"Repository: sungmanito/mono
Length of output: 101
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Find the file
FILE="$(fd 'command.svelte.ts$')"
echo "=== FILE FOUND ==="
echo "$FILE"
# Read lines 37-47 using sed
echo "=== LINES 37-47 ==="
sed -n '37,47p' "$FILE" | cat -n
# Search for the remote function and related patterns
echo "=== SEARCH RESULTS ==="
rg -n "new Promise|something|remote" "$FILE"Repository: sungmanito/mono
Length of output: 540
🏁 Script executed:
#!/bin/bash
# Search for usages of the remote function
echo "=== USAGES OF remote() ==="
rg -n "remote\(\)" apps/website/src
# Search for uses of .something property/method
echo -e "\n=== USAGES OF .something ==="
rg -n "\.something" apps/website/src
# Check if there's a tsconfig.json and strictNullChecks/strict mode
echo -e "\n=== TSCONFIG.JSON (if exists) ==="
if [ -f "tsconfig.json" ]; then
rg -A 10 -B 2 '"strict":|"strictNullChecks":|"declaration":|"declarationMap":' tsconfig.json
fi
# Check for any type errors or declarations in the file
echo -e "\n=== TYPE ANNOTATIONS IN FILE ==="
rg -n "type |interface |Promise<" apps/website/src/lib/attachments/command.svelte.tsRepository: sungmanito/mono
Length of output: 693
🏁 Script executed:
#!/bin/bash
# Get full tsconfig.json
echo "=== FULL TSCONFIG.JSON ==="
cat tsconfig.json 2>/dev/null || echo "No tsconfig.json at root"
# View broader context of the file
echo -e "\n=== FULL command.svelte.ts FILE ==="
wc -l apps/website/src/lib/attachments/command.svelte.ts
echo "---"
cat -n apps/website/src/lib/attachments/command.svelte.ts
# Check if there's a test file
echo -e "\n=== LOOK FOR TEST FILES ==="
fd 'command.*test|command.*spec' apps/website/srcRepository: sungmanito/mono
Length of output: 1738
🏁 Script executed:
#!/bin/bash
# Look for tsconfig files in apps/website
echo "=== TSCONFIG FILES IN APPS/WEBSITE ==="
fd 'tsconfig' apps/website
# If found, check strict settings
if [ -f "apps/website/tsconfig.json" ]; then
echo -e "\n=== APPS/WEBSITE TSCONFIG.JSON ==="
cat apps/website/tsconfig.json
fi
# Also check for svelte.config
echo -e "\n=== SVELTE CONFIG IN APPS/WEBSITE ==="
fd 'svelte.config' apps/website && cat apps/website/svelte.config.js 2>/dev/null || echo "No svelte.config found"Repository: sungmanito/mono
Length of output: 2348
Fix Promise typing and remove ad-hoc property mutation.
Lines 38–47 mutate a Promise with an undeclared property without explicit typing. With "strict": true enabled in TypeScript config, the implicit Promise type and property assignment violate type safety. Assign the Promise with proper structural typing instead of mutating the instance.
Suggested fix
-export const remote = () => {
- const b = new Promise((res) => {
- setTimeout(() => {
- res(1);
- }, 4000);
- });
- b.something = () => {
- console.info('hi jim');
- };
- return b;
-};
+type RemoteResult = Promise<number> & { something: () => void };
+
+export const remote = (): RemoteResult => {
+ return Object.assign(
+ new Promise<number>((resolve) => {
+ setTimeout(() => resolve(1), 4000);
+ }),
+ {
+ something: () => {
+ console.info('hi jim');
+ },
+ },
+ );
+};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| export const remote = () => { | |
| const b = new Promise((res) => { | |
| setTimeout(() => { | |
| res(1); | |
| }, 4000); | |
| }); | |
| b.something = () => { | |
| console.info('hi jim'); | |
| }; | |
| return b; | |
| }; | |
| type RemoteResult = Promise<number> & { something: () => void }; | |
| export const remote = (): RemoteResult => { | |
| return Object.assign( | |
| new Promise<number>((resolve) => { | |
| setTimeout(() => resolve(1), 4000); | |
| }), | |
| { | |
| something: () => { | |
| console.info('hi jim'); | |
| }, | |
| }, | |
| ); | |
| }; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/website/src/lib/attachments/command.svelte.ts` around lines 37 - 47, The
function remote creates a Promise (b) and mutates it by adding an undeclared
property something, which breaks strict typing; explicitly type the return and
the promise to include that extra property instead of relying on ad-hoc
mutation. Update remote's signature to return Promise<number> & { something: ()
=> void } and declare b with that composite type (e.g., const b = new
Promise<number>(...) as Promise<number> & { something: () => void }), then
assign b.something = () => { ... } and return b so TypeScript knows the promise
carries the extra method; reference symbols: remote, b, and something.
Comment on lines
+71
to
+96
| const [bill, payments] = await Promise.all([ | ||
| db | ||
| .select({ ...getTableColumns(schema.bills), household: schema.households }) | ||
| .from(schema.bills) | ||
| .innerJoin( | ||
| schema.households, | ||
| eq(schema.bills.householdId, schema.households.id), | ||
| ) | ||
| .where( | ||
| and( | ||
| eq(schema.bills.id, id), | ||
| inArray( | ||
| schema.bills.householdId, | ||
| userHouseholds.map((h) => h.id), | ||
| ), | ||
| ), | ||
| ) | ||
| .limit(1) | ||
| .then((r) => r[0]), | ||
|
|
||
| db.query.payments.findMany({ | ||
| where: (fields, { eq }) => eq(fields.billId, id), | ||
| orderBy: (fields, { desc }) => desc(fields.forMonthD), | ||
| limit: 12, | ||
| }), | ||
| ]); |
Contributor
There was a problem hiding this comment.
Authorize the payments query before returning history.
The bill lookup is scoped to getUserHouseholds(), but Lines 91-95 fetch payments by billId only. If a caller passes an ID from another household, this function still returns that bill's payment history even when the bill row itself is inaccessible.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/website/src/lib/remotes/bills.remote.ts` around lines 71 - 96, The
payments query is not scoped to the caller's households, so it can return
history for a bill in another household; update the db.query.payments.findMany
call to also restrict payments to the same household check used for the bill
lookup (e.g., require the payment's bill to belong to one of userHouseholds).
Concretely, add a condition to the payments where clause that ensures the
payment's billId equals id AND that the associated bill.householdId is in
userHouseholds.map(h => h.id) (either by joining payments to schema.bills in the
query or by adding an additional filter that verifies the bill's householdId),
using the same helpers (eq, inArray) so payments are only returned for bills in
the user's households.
Comment on lines
25
to
+31
| sql`extract('month' from ${schema.payments.forMonthD})`, | ||
| sql`extract('month' from now())`, | ||
| ), | ||
| eq( | ||
| sql`extract(YEAR from ${schema.payments.forMonthD})`, | ||
| sql`extract(YEAR from now())`, | ||
| ), |
Contributor
There was a problem hiding this comment.
Align join period with the insert period (now() + interval '5 days').
Line 25/Line 26 and Line 29/Line 30 currently join payments for the current month/year, but forMonthD is created from nextMonth/nextYear (5-day lookahead). Around month/year boundaries this can match the wrong payment row.
Suggested fix
eq(
sql`extract('month' from ${schema.payments.forMonthD})`,
- sql`extract('month' from now())`,
+ sql`extract('month' from now() + interval '5 days')`,
),
eq(
- sql`extract(YEAR from ${schema.payments.forMonthD})`,
- sql`extract(YEAR from now())`,
+ sql`extract('year' from ${schema.payments.forMonthD})`,
+ sql`extract('year' from now() + interval '5 days')`,
),📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| sql`extract('month' from ${schema.payments.forMonthD})`, | |
| sql`extract('month' from now())`, | |
| ), | |
| eq( | |
| sql`extract(YEAR from ${schema.payments.forMonthD})`, | |
| sql`extract(YEAR from now())`, | |
| ), | |
| sql`extract('month' from ${schema.payments.forMonthD})`, | |
| sql`extract('month' from now() + interval '5 days')`, | |
| ), | |
| eq( | |
| sql`extract('year' from ${schema.payments.forMonthD})`, | |
| sql`extract('year' from now() + interval '5 days')`, | |
| ), |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/website/src/routes/actions/`+server.ts around lines 25 - 31, The join is
comparing schema.payments.forMonthD to the current month/year via
sql`extract(... from now())` but forMonthD was computed using the 5-day
lookahead (now() + interval '5 days'), causing month/year mismatches at
boundaries; update the two comparisons that use now() (the sql`extract('month'
from now())` and sql`extract(YEAR from now())`) to use now() + interval '5 days'
instead so they match schema.payments.forMonthD (i.e., replace now() with now()
+ interval '5 days' in the month and year extract calls).
Comment on lines
+131
to
+135
| <Drawer bind:open={showMembersDrawer} onclose={() => (showMembersDrawer = false)}> | ||
| <div class="p-4"> | ||
| <Header tag="h1">Members</Header> | ||
| </div> | ||
| </Drawer> |
Contributor
There was a problem hiding this comment.
Restore real members content in this drawer.
The trigger at Lines 232-242 still opens a “Members” panel, but this drawer now renders only a heading. That regresses the in-place member view and leaves the interaction effectively blank.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/website/src/routes/dashboard/household/`[id=ulid]/+page.svelte around
lines 131 - 135, The drawer currently bound to showMembersDrawer only renders a
Header and empties the members UI; restore the original members view by
importing and rendering the component/markup that provides the in-place member
list and controls (e.g., MemberList / MembersPanel / MembersDrawerContent)
inside the Drawer (replace the standalone <Header> with the full members
content), ensure it receives the same props/handlers (household id, members,
onEdit/onRemove callbacks) used by the trigger that opens the drawer, and keep
the Drawer bound to showMembersDrawer so the existing trigger continues to open
the restored members panel.
Comment on lines
+153
to
+183
| <form | ||
| enctype="multipart/form-data" | ||
| {...uploadImage.enhance(async ({ submit }) => { | ||
| await submit(); | ||
| getUserBills().refresh(); | ||
| })} | ||
| > | ||
| <fieldset class="border p-4 rounded"> | ||
| <legend class="px-3 text-lg font-semibold">{payment.billName}</legend> | ||
| <input type="hidden" name="paymentId" value={payment.id} /> | ||
| <input type="hidden" name="householdId" value={payment.householdId} /> | ||
| <div class="grid grid-cols-2 gap-4"> | ||
| <FormLabel label="Amount (optional)"> | ||
| <input | ||
| class="input" | ||
| name="amount" | ||
| type="number" | ||
| step="0.01" | ||
| min="0" | ||
| placeholder={payment.billAmount?.toLocaleString(undefined, { | ||
| style: 'currency', | ||
| currency: payment.billCurrency ?? 'USD', | ||
| }) ?? '0.00'} | ||
| /> | ||
| </FormLabel> | ||
| <FormLabel label="Notes (optional)"> | ||
| <textarea class="textarea" name="proof" placeholder="Notes about this payment"></textarea> | ||
| </FormLabel> | ||
| </div> | ||
| <div class="flex justify-end mt-2"> | ||
| <Button type="submit" disabled={uploadImage.for(payment.id).pending > 0}>Pay</Button> |
Contributor
There was a problem hiding this comment.
The multi-pay form no longer matches uploadImage, and the page stays stale after submit.
uploadImage in apps/website/src/lib/remotes/payments.remote.ts still requires a proofFile field, but this form no longer renders any file input, so submit() will fail validation. Even after that is fixed, Line 157 only refreshes getUserBills(), while this page renders from getHouseholdDetail(page.params.id), so just-paid bills stay visible/selected here.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/website/src/routes/dashboard/household/`[id=ulid]/+page.svelte around
lines 153 - 183, The form submitted via uploadImage.enhance is missing the
required proofFile field expected by uploadImage (see uploadImage.enhance and
uploadImage.for(payment.id).pending), causing validation to fail; add a file
input named "proofFile" (type="file", accept appropriate MIME types) into the
form (alongside the existing textarea name="proof") or update uploadImage to
make proofFile optional in payments.remote.ts; additionally, after submit() call
ensure you refresh the page data source used to render this route by calling
getHouseholdDetail(page.params.id).refresh() (in addition to
getUserBills().refresh()) so the household detail view updates to reflect the
paid bill.
Comment on lines
+47
to
+53
| {@const upcoming = Object.values(billsMap).reduce((all, cur) => { | ||
| const today = new Date().setHours(0, 0, 0, 0); | ||
| for (const bill of cur) { | ||
| if (new Date(bill.dueDate).getTime() > today) all += 1; | ||
| } | ||
| return all; | ||
| }, 0)} |
Contributor
There was a problem hiding this comment.
Bug: bill.dueDate is an integer (day of month), not a Date.
The upcoming calculation treats bill.dueDate as a date string, but according to packages/db/src/tables/bills.table.ts, dueDate is an integer (1-28) representing the day of the month when the bill is due. new Date(16) creates 1970-01-01T00:00:00.016Z, which will never be greater than today.
This logic appears to always result in upcoming = 0.
🐛 Suggested fix
{`@const` upcoming = Object.values(billsMap).reduce((all, cur) => {
- const today = new Date().setHours(0, 0, 0, 0);
+ const todayDate = new Date();
+ const currentDayOfMonth = todayDate.getDate();
for (const bill of cur) {
- if (new Date(bill.dueDate).getTime() > today) all += 1;
+ // Bill is upcoming if its due day hasn't passed this month
+ if (bill.dueDate > currentDayOfMonth) all += 1;
}
return all;
}, 0)}Note: This simplified fix assumes "upcoming" means due later this month. Adjust based on actual business requirements.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| {@const upcoming = Object.values(billsMap).reduce((all, cur) => { | |
| const today = new Date().setHours(0, 0, 0, 0); | |
| for (const bill of cur) { | |
| if (new Date(bill.dueDate).getTime() > today) all += 1; | |
| } | |
| return all; | |
| }, 0)} | |
| {`@const` upcoming = Object.values(billsMap).reduce((all, cur) => { | |
| const todayDate = new Date(); | |
| const currentDayOfMonth = todayDate.getDate(); | |
| for (const bill of cur) { | |
| // Bill is upcoming if its due day hasn't passed this month | |
| if (bill.dueDate > currentDayOfMonth) all += 1; | |
| } | |
| return all; | |
| }, 0)} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/website/src/routes/dashboard/household/`+page.svelte around lines 47 -
53, The reduction computing upcoming treats bill.dueDate as a Date string but it
is an integer day-of-month; update the logic in the upcoming calculation (the
reducer using billsMap and bill.dueDate) to build a proper Date for the next
occurrence of that day: create a Date with the current year and month and day =
bill.dueDate, and if that date is before or equal to today, roll it to the next
month; then compare that constructed dueDate.getTime() to today (midnight) to
count upcoming bills. Ensure you handle month/year rollover and normalize times
to 00:00:00 when comparing.
Comment on lines
+57
to
63
| <form | ||
| enctype="multipart/form-data" | ||
| out:fade | ||
| {...uploadImage.enhance(async ({ submit }) => { | ||
| await submit(); | ||
| })} | ||
| > |
Contributor
There was a problem hiding this comment.
Refresh the current query and block double-submits.
This page is driven by getPaymentsForIds(paymentIds), but the enhance handler never refreshes that query after submit(). The paid form therefore stays on screen, and because the button is never disabled while pending, the same upload can be sent more than once.
Possible fix
- {...uploadImage.enhance(async ({ submit }) => {
+ {...uploadImage.for(payment.id).enhance(async ({ submit }) => {
await submit();
+ getPaymentsForIds(paymentIds).refresh();
})}
@@
- <Button type="submit">Pay</Button>
+ <Button type="submit" disabled={uploadImage.for(payment.id).pending > 0}>
+ Pay
+ </Button>Also applies to: 115-116
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/website/src/routes/dashboard/payments/create/`+page.svelte around lines
57 - 63, The form's enhance handler (uploadImage.enhance) calls submit() but
doesn't refresh the payments query or prevent duplicate submissions; update the
enhance callback to await submit(), then call SvelteKit's invalidate (or
otherwise re-run getPaymentsForIds(paymentIds)) to refresh the payments data,
and also set/clear a local submitting flag (or use the enhance pending param) to
disable the submit button while awaiting submit so double-submits are blocked;
locate the logic in the form using uploadImage.enhance and adjust both the
post-submit refresh and the UI disable behavior (same change needed for the
other enhance usage around the create flow).
jhechtf
force-pushed
the
chore/misc-improvements
branch
from
March 24, 2026 19:23
765d59b to
d1842ad
Compare
- @sveltejs/kit: ^2.47.0 → ^2.55.0 - svelte: ^5.36.5 → ^5.54.1 - vite: ^7.1.10 → ^8.0.1 - @sveltejs/vite-plugin-svelte: ^6.2.1 → ^7.0.0 (requires vite 8) - @sveltejs/adapter-vercel: ^4.0.5 → ^6.3.3 - vitest: ^1.6.1 → ^4.1.0 (required for vite 8 compatibility) Fix CookieSerializeOptions breaking change in hooks.server.ts: @supabase/ssr now requires path to be explicitly set on cookies.set/delete. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace data props and TanStack Query with async Svelte pattern. The existing getUserHouseholdBills() and getUserHouseholds() remotes provide all data needed; no new remotes required. - Delete dashboard/+page.server.ts - Wrap dashboard content in <svelte:boundary> with pending skeleton - Derive paidBills/overdueBills/thisWeekBills inside boundary - Replace data.groupings.* with inline-derived filtered arrays - Replace createQuery + billsWithStatus with await getUserHouseholdBills() - Quick Actions use thisWeekBills/overdueBills directly - Add refresh button calling getUserHouseholdBills().refresh() - Fix e.target type cast in hijack attachment Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace all bills +page.server.ts files with remote functions in
bills.remote.ts. All bills pages now use async Svelte with
<svelte:boundary> and {#snippet pending()} skeleton loading states.
- Add getBill, getBillsByIds, getBillWithPayments query remotes
- Add createBill, updateBill, updateBills, deleteBills form remotes
- Delete bills +page.server.ts, create, edit, and [id=ulid] server files
- Delete src/lib/server/actions/bills.actions.ts (absorbed into remotes)
- Rewrite bills list, create, detail, single edit, and bulk edit pages
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add getPaymentWithDetails and getPaymentsForIds query remotes to payments.remote.ts. Rewrite all payments pages to use async Svelte with <svelte:boundary> and skeleton loading states. - Add getPaymentWithDetails: fetches payment + Supabase image URL + history - Add getPaymentsForIds: fetches bulk payments by IDs for create page - Delete all 4 payments +page.server.ts files - Delete src/lib/server/actions/payments.actions.ts - Rewrite payments list (improved skeleton), detail, bulk create pages - Rewrite create/[id=ulid] page to use getPayment remote - Replace massPay server action with per-payment uploadImage.enhance forms - Fix svelte:head-inside-svelte:boundary errors in bill and payment detail pages - Fix selectOptions snippet passed as boundary prop in bulk bill edit page Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add households.remote.ts with query/form remotes for all household operations - Replace +layout.server.ts with self-fetching HouseholdSidebar component - Migrate household list, detail, edit, and members pages to async Svelte - Replace TanStack Query (createQuery/createQueries) with remote functions - Replace preloadData + bulkPay with per-payment uploadImage.enhance() forms - Delete 5 +page.server.ts files and invites.action.ts Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…tions migration - Remove userHouseholds from App.Locals and hooks.server.ts (no longer pre-fetched per request) - Delete households.actions.ts, images.actions.ts, users.actions.ts (all replaced by remotes) - Export Household type from households.remote.ts; update delete.svelte import - Remove unused households property from getUser() remote return value Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Run prettier across all files - Remove unused imports: command, ulid (bills.remote), form (common.remote), type (common.remote), getUserBills (bill edit page) - Remove dead code: showModal, showMakePaymentModal, CreatePaymentPage import in payments page - Remove unused state: previewUrls in household detail, invites destructuring - Fix unused txResult variable in payments.remote Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
jhechtf
force-pushed
the
feat/begin-move-to-remote-functions
branch
from
April 4, 2026 19:42
f4d4c90 to
71435de
Compare
jhechtf
force-pushed
the
chore/misc-improvements
branch
from
April 4, 2026 19:42
d1842ad to
1c0c09c
Compare
This was referenced Apr 4, 2026
jhechtf
changed the base branch from
feat/begin-move-to-remote-functions
to
graphite-base/135
April 5, 2026 07:58
<!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added server-backed bill and payment endpoints and client flows, including payment toggles and uploads. * **Improvements** * Dashboard data now loads via remote helpers with improved caching, loading skeletons, and explicit empty-state messaging. * Month labels fixed for consistent date generation. * **Tests** * Added ULID validator unit tests. * **Chores** * Upgraded SvelteKit toolchain and several runtime libraries; minor package.json config added. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
…s bar (#140) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Month selector added to view historical payments for different time periods * Payments now grouped by household for improved organization * Monthly Progress section introduced with visual payment status indicators * Visual overdue indicators and "Due by" dates added to payment items * **Bug Fixes** * Fixed payment filtering to correctly account for both month and year <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixed 3 file(s) based on 6 unresolved review comments. Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: CodeRabbit <noreply@coderabbit.ai>
- @sveltejs/kit: ^2.47.0 → ^2.55.0 - svelte: ^5.36.5 → ^5.54.1 - vite: ^7.1.10 → ^8.0.1 - @sveltejs/vite-plugin-svelte: ^6.2.1 → ^7.0.0 (requires vite 8) - @sveltejs/adapter-vercel: ^4.0.5 → ^6.3.3 - vitest: ^1.6.1 → ^4.1.0 (required for vite 8 compatibility) Fix CookieSerializeOptions breaking change in hooks.server.ts: @supabase/ssr now requires path to be explicitly set on cookies.set/delete. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace data props and TanStack Query with async Svelte pattern. The existing getUserHouseholdBills() and getUserHouseholds() remotes provide all data needed; no new remotes required. - Delete dashboard/+page.server.ts - Wrap dashboard content in <svelte:boundary> with pending skeleton - Derive paidBills/overdueBills/thisWeekBills inside boundary - Replace data.groupings.* with inline-derived filtered arrays - Replace createQuery + billsWithStatus with await getUserHouseholdBills() - Quick Actions use thisWeekBills/overdueBills directly - Add refresh button calling getUserHouseholdBills().refresh() - Fix e.target type cast in hijack attachment Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace all bills +page.server.ts files with remote functions in
bills.remote.ts. All bills pages now use async Svelte with
<svelte:boundary> and {#snippet pending()} skeleton loading states.
- Add getBill, getBillsByIds, getBillWithPayments query remotes
- Add createBill, updateBill, updateBills, deleteBills form remotes
- Delete bills +page.server.ts, create, edit, and [id=ulid] server files
- Delete src/lib/server/actions/bills.actions.ts (absorbed into remotes)
- Rewrite bills list, create, detail, single edit, and bulk edit pages
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add getPaymentWithDetails and getPaymentsForIds query remotes to payments.remote.ts. Rewrite all payments pages to use async Svelte with <svelte:boundary> and skeleton loading states. - Add getPaymentWithDetails: fetches payment + Supabase image URL + history - Add getPaymentsForIds: fetches bulk payments by IDs for create page - Delete all 4 payments +page.server.ts files - Delete src/lib/server/actions/payments.actions.ts - Rewrite payments list (improved skeleton), detail, bulk create pages - Rewrite create/[id=ulid] page to use getPayment remote - Replace massPay server action with per-payment uploadImage.enhance forms - Fix svelte:head-inside-svelte:boundary errors in bill and payment detail pages - Fix selectOptions snippet passed as boundary prop in bulk bill edit page Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add households.remote.ts with query/form remotes for all household operations - Replace +layout.server.ts with self-fetching HouseholdSidebar component - Migrate household list, detail, edit, and members pages to async Svelte - Replace TanStack Query (createQuery/createQueries) with remote functions - Replace preloadData + bulkPay with per-payment uploadImage.enhance() forms - Delete 5 +page.server.ts files and invites.action.ts Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…tions migration - Remove userHouseholds from App.Locals and hooks.server.ts (no longer pre-fetched per request) - Delete households.actions.ts, images.actions.ts, users.actions.ts (all replaced by remotes) - Export Household type from households.remote.ts; update delete.svelte import - Remove unused households property from getUser() remote return value Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Run prettier across all files - Remove unused imports: command, ulid (bills.remote), form (common.remote), type (common.remote), getUserBills (bill edit page) - Remove dead code: showModal, showMakePaymentModal, CreatePaymentPage import in payments page - Remove unused state: previewUrls in household detail, invites destructuring - Fix unused txResult variable in payments.remote Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…into chore/misc-improvements
jhechtf
force-pushed
the
chore/misc-improvements
branch
from
May 24, 2026 14:49
c4d580a to
4096bd0
Compare
jhechtf
force-pushed
the
chore/misc-improvements
branch
from
May 26, 2026 23:47
9119aee to
4fa0097
Compare
jhechtf
force-pushed
the
chore/misc-improvements
branch
from
May 28, 2026 02:53
f13ac87 to
3225d0f
Compare
jhechtf
force-pushed
the
chore/misc-improvements
branch
from
May 28, 2026 16:45
3225d0f to
b3364f4
Compare
jhechtf
force-pushed
the
chore/misc-improvements
branch
from
May 28, 2026 16:45
b3364f4 to
81b750a
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
TL;DR
Added a new Card component with Storybook stories, created a remote command attachment utility, and fixed payment filtering to include year-based filtering alongside existing month filtering.
What changed?
card.sveltewith configurable header, footer, and content sections, plus comprehensive Storybook stories showcasing default, summary, and image card variantscommand.svelte.tswithuseRemoteattachment for handling form submissions and remote commands/actions/+server.tsand household page to filter by both month and year instead of just monthHow to test?
Why make this change?
The Card component provides a reusable UI building block for the application. The payment filtering bug fix ensures users only see relevant current payments instead of payments from the same month in previous years. The remote command utility sets up infrastructure for better form handling, and the improved error handling aids in debugging during development.
Summary by CodeRabbit
Release Notes
New Features
Bug Fixes
Refactor
Dependencies