feat: tag clean-up converters, saved searches, quick entry subscriptions and foreign amounts

Tag clean-up lists tags named like a category, account or subscription,
tags used once and unused ones; s c and s s move a tag's transactions
to a category or subscription, Enter again deletes the tag. P pins a
search, pins and built-ins show in the palette. Quick entry takes
%subscription and =520 UAH. The transaction page compares the amount
with the usual one at the same place.
This commit is contained in:
hh committed 2026-10-16 15:10:47 +00:00
1 parent 6f39343e07
commit 01c53d982d
13 files changed
+1079 -88

No files matched your search

+17 -6
View File
@@ -26,6 +26,7 @@
tagsOf,
} from "#lib/components/editor/quick.js";
import type { Option } from "#lib/components/inputs/AutocompleteInput.svelte";
import { evalAmount } from "#lib/components/inputs/parse.js";
import { LIST } from "#lib/components/inputs/styles.js";
import { today } from "#lib/dates.js";
import { formatDate, formatMoney } from "#lib/format.js";
@@ -35,7 +36,7 @@
const SUGGESTIONS = 6;
const HINT =
"12.50 lunch @payee ^account !category $budget #tag ~yesterday · + in front for a deposit · >account for a transfer";
"12.50 lunch @payee ^account !category $budget %subscription #tag ~yesterday · + in front for a deposit · >account for a transfer · 12.50 USD =520 UAH for another currency";
const catalog = new Catalog();
let input = $state<HTMLInputElement | null>(null);
@@ -61,6 +62,7 @@
"!": () => catalog.categoryOptions(query),
"@": () => catalog.accountOptions(KINDS[quick.type][other], query),
"#": () => catalog.tagOptions(query, tagsOf(quick)),
"%": () => catalog.billOptions(query),
"^": () => catalog.accountOptions(KINDS[quick.type][own], query),
">": () => catalog.accountOptions(KINDS.transfer.destination, query),
"~": () => [],
@@ -107,12 +109,18 @@
function money(form: Form) {
const [split] = form.splits;
return formatMoney({
amount: quick.amount ?? 0,
code: split.currency?.code,
decimals: split.currency?.decimals,
symbol: split.currency?.symbol,
const main = formatMoney({
...split.currency,
amount: evalAmount(split.amount) ?? 0,
});
if (!split.foreignCurrency) {
return main;
}
const foreign = formatMoney({
...split.foreignCurrency,
amount: evalAmount(split.foreignAmount) ?? 0,
});
return `${main} (${foreign})`;
}
function syncCaret() {
@@ -252,6 +260,9 @@
text: `category ${split.category}${fresh}${last(fromPast.category)}`,
});
}
if (split.bill.id) {
parts.push({ text: `subscription ${split.bill.name}` });
}
if (split.budget.id) {
parts.push({
text: `budget ${split.budget.name}${last(fromPast.budget)}`,
+198 -39
View File
@@ -1,8 +1,11 @@
import type { Split } from "#lib/api/types.js";
import { evalAmount, parseDate } from "#lib/components/inputs/parse.js";
import { today } from "#lib/dates.js";
import { session } from "#lib/session.svelte.js";
import type { Catalog } from "./catalog.svelte.js";
import {
type AccountRef,
type Cur,
emptyForm,
KINDS,
OWN_SIDE,
@@ -13,9 +16,9 @@ import {
toAccountRef,
} from "./model.js";
export type Marker = "@" | "^" | ">" | "!" | "$" | "#" | "~";
export type Marker = "@" | "^" | ">" | "!" | "$" | "%" | "#" | "~";
const MULTI = new Set<string>(["@", "^", ">", "!", "$"]);
const MULTI = new Set<string>(["@", "^", ">", "!", "$", "%"]);
const MARKERS = new Set<string>([...MULTI, "#", "~"]);
const WORD = /\S+/g;
const NUMERIC = /^[\d(]/;
@@ -27,21 +30,109 @@ export interface Segment {
value: string;
}
export interface Equal {
code: string;
text: string;
}
export interface Quick {
amount: number | null;
amountText: string;
currency: string;
description: string;
equal: Equal | null;
segments: Segment[];
type: TxType;
}
export function parseQuick(input: string): Quick {
const segments: Segment[] = [];
const words: string[] = [];
let amount: number | null = null;
let amountText = "";
const enabledCodes = () =>
new Set(
session.currencies
.filter((item) => item.attributes.enabled)
.map((item) => item.attributes.code)
);
interface Parse {
amount: number | null;
amountText: string;
coded: "amount" | "equal" | null;
currency: string;
current: Segment | null;
equal: Equal | null;
segments: Segment[];
words: string[];
}
function takeCode(state: Parse, word: string, codes: Set<string>) {
const { coded } = state;
const code = word.toUpperCase();
state.coded = null;
if (!(coded && codes.has(code))) {
return false;
}
if (coded === "amount") {
state.currency = code;
} else if (state.equal) {
state.equal.code = code;
}
return true;
}
function takeEqual(state: Parse, word: string) {
if (!word.startsWith("=") || state.equal) {
return false;
}
state.equal = { code: "", text: word.slice(1) };
state.coded = "equal";
state.current = null;
return true;
}
function takeMarker(state: Parse, word: string, start: number) {
const { current } = state;
if (MARKERS.has(word[0])) {
const segment = {
end: start + word.length,
marker: word[0] as Marker,
start,
value: word.slice(1),
};
state.segments.push(segment);
state.current = MULTI.has(segment.marker) ? segment : null;
return true;
}
if (current) {
current.value = `${current.value} ${word}`;
current.end = start + word.length;
return true;
}
return false;
}
function takeAmount(state: Parse, word: string) {
const value =
state.amount === null && NUMERIC.test(word) ? evalAmount(word) : null;
if (value === null) {
return false;
}
state.amount = value;
state.amountText = word;
state.coded = "amount";
return true;
}
export function parseQuick(input: string, codes = enabledCodes()): Quick {
const state: Parse = {
amount: null,
amountText: "",
coded: null,
currency: "",
current: null,
equal: null,
segments: [],
words: [],
};
let deposit = false;
let current: Segment | null = null;
let first = true;
for (const match of input.matchAll(WORD)) {
let [word] = match;
@@ -52,42 +143,32 @@ export function parseQuick(input: string): Quick {
start += 1;
}
first = false;
if (!word) {
continue;
const taken =
!word ||
takeCode(state, word, codes) ||
takeEqual(state, word) ||
takeMarker(state, word, start) ||
takeAmount(state, word);
if (!taken) {
state.words.push(word);
}
if (MARKERS.has(word[0])) {
const segment = {
end: start + word.length,
marker: word[0] as Marker,
start,
value: word.slice(1),
};
segments.push(segment);
current = MULTI.has(segment.marker) ? segment : null;
continue;
}
if (current) {
current.value = `${current.value} ${word}`;
current.end = start + word.length;
continue;
}
const value: number | null =
amount === null && NUMERIC.test(word) ? evalAmount(word) : null;
if (value !== null) {
amount = value;
amountText = word;
continue;
}
words.push(word);
}
const hasTarget = segments.some((segment) => segment.marker === ">");
const hasTarget = state.segments.some((segment) => segment.marker === ">");
let type: TxType = "withdrawal";
if (hasTarget) {
type = "transfer";
} else if (deposit) {
type = "deposit";
}
return { amount, amountText, description: words.join(" "), segments, type };
return {
amount: state.amount,
amountText: state.amountText,
currency: state.currency,
description: state.words.join(" "),
equal: state.equal,
segments: state.segments,
type,
};
}
export const markerValue = (quick: Quick, marker: Marker) =>
@@ -158,6 +239,77 @@ function resolveAccounts(quick: Quick, catalog: Catalog, split: SplitForm) {
: [`No asset account or liability called "${ownName}"`];
}
function curOf(code: string | undefined): Cur | null {
const found = session.currencies.find(
(item) => item.attributes.code === code
);
return found
? {
code: found.attributes.code,
decimals: found.attributes.decimal_places ?? 2,
symbol: found.attributes.symbol,
}
: null;
}
function resolveMoney(
quick: Quick,
split: SplitForm,
own: AccountRef,
target: AccountRef | null
): string[] {
const native = own.currency?.code;
const { equal } = quick;
split.currency = own.currency;
split.amount = quick.amountText;
const first = quick.currency || native;
if (!native) {
return [];
}
if (!equal) {
return first === native
? []
: [`${own.name} is in ${native}: add =amount ${native}`];
}
const second =
equal.code || (first === native ? target?.currency?.code : native);
if (first === native && second && second !== native) {
split.foreignAmount = equal.text;
split.foreignCurrency = curOf(second);
return [];
}
if (second === native && first !== native) {
split.amount = equal.text;
split.foreignAmount = quick.amountText;
split.foreignCurrency = curOf(first);
return [];
}
const example =
session.currencies.find(
(item) => item.attributes.enabled && item.attributes.code !== native
)?.attributes.code ?? "USD";
return [`Name the other currency, like =${equal.text || "520"} ${example}`];
}
function resolveBill(quick: Quick, catalog: Catalog, split: SplitForm) {
const name = markerValue(quick, "%");
if (!name) {
return [];
}
if (quick.type !== "withdrawal") {
return ["Only a withdrawal can pay a subscription"];
}
const wanted = name.toLowerCase();
const bill = (catalog.bills.data ?? []).find(
(item) => item.attributes.name?.toLowerCase() === wanted
);
if (!bill) {
return [`No subscription called "${name}"`];
}
split.bill = { id: bill.id, name: bill.attributes.name ?? name };
return [];
}
function resolveLinks(
quick: Quick,
catalog: Catalog,
@@ -199,10 +351,17 @@ export function resolveQuick(
split,
counterparty ? recent[counterparty] : null
);
problems.push(...links.problems);
problems.push(
...links.problems,
...resolveBill(quick, catalog, split),
...resolveMoney(
quick,
split,
split[own],
quick.type === "transfer" ? split[other] : null
)
);
split.tags = tagsOf(quick);
split.amount = quick.amountText;
split.currency = split[own].currency;
split.description =
quick.description ||
split[other].name ||
+14
View File
@@ -5,6 +5,7 @@
import { fuzzyFilter } from "#lib/fuzzy.js";
import { keys, prettyKeys } from "#lib/keys.svelte.js";
import { allLinks, CREATE_LINKS } from "#lib/nav.js";
import { searches } from "#lib/transactions/searches.svelte.js";
import { ui } from "#lib/ui.svelte.js";
import { goto } from "$app/navigation";
@@ -214,8 +215,21 @@
),
]);
const searchEntries = $derived<Entry[]>(
ui.palette
? searches.list().map((saved) => ({
group: "Searches",
hint: saved.pinned ? "pinned" : undefined,
id: `saved:${saved.query}`,
label: saved.label,
run: () => searches.open(saved),
}))
: []
);
const entries = $derived([
...pageEntries,
...searchEntries,
...staticEntries,
...commandEntries,
...entityEntries,
+226
View File
@@ -0,0 +1,226 @@
<script lang="ts">
import { untrack } from "svelte";
import { invalidate } from "#lib/api/lists.js";
import type { Item, Split, Tag } from "#lib/api/types.js";
import { fuzzyFilter } from "#lib/fuzzy.js";
import { convertTag, deleteTag } from "./actions.js";
export interface Choice {
id: string;
name: string;
}
const SUGGESTIONS = 6;
const NOUN = { bill: "subscription", category: "category" } as const;
let {
tag,
kind,
choices,
initial,
ondone,
}: {
tag: Item<Tag>;
kind: "bill" | "category";
choices: Choice[];
initial: string;
ondone: (status?: string) => void;
} = $props();
let value = $state(untrack(() => initial));
let active = $state(-1);
let busy = $state("");
let fresh = $state("");
let done = $state("");
let problem = $state("");
const lower = (text: string | null | undefined) =>
(text ?? "").trim().toLowerCase();
const exact = $derived(
choices.find((choice) => lower(choice.name) === lower(value))
);
const options = $derived(
done || busy || exact
? []
: fuzzyFilter(choices, value, (choice) => choice.name, SUGGESTIONS)
);
function focus(input: HTMLInputElement) {
input.focus();
input.select();
}
function failed(failure: unknown) {
problem = failure instanceof Error ? failure.message : String(failure);
}
function summary(name: string, splits: Split[]) {
if (kind === "bill") {
const others = splits.filter((s) => s.type !== "withdrawal").length;
const linked = `${splits.length - others} linked to ${name}`;
return others
? `${linked}, ${others} not withdrawals keep only the tag`
: linked;
}
const before = [
...new Set(
splits
.map((s) => s.category_name ?? "")
.filter((c) => c && lower(c) !== lower(name))
),
];
const moved = `${splits.length} in ${name} now`;
return before.length ? `${moved}, before: ${before.join(", ")}` : moved;
}
function patchFor(choice: Choice | undefined, name: string) {
if (kind === "bill") {
return (split: Split) =>
split.type === "withdrawal" && split.bill_id !== choice?.id
? { bill_id: choice?.id }
: null;
}
return (split: Split) =>
lower(split.category_name) === lower(name)
? null
: { category_name: name };
}
async function run(choice: Choice | undefined) {
const name = choice?.name ?? value.trim();
if (busy) {
return;
}
if (!name) {
problem = `Type a ${NOUN[kind]}`;
return;
}
if (kind === "bill" && !choice) {
problem = `No subscription called "${name}"`;
return;
}
if (!choice && fresh !== name) {
fresh = name;
return;
}
busy = "Finding transactions";
problem = "";
try {
const { outcome, splits } = await convertTag(
tag,
patchFor(choice, name),
(o) => (busy = `Moving ${o.done} of ${o.total}`)
);
await invalidate();
if (outcome.errors.length > 0) {
problem = `${outcome.errors.length} failed: ${outcome.errors[0]}`;
return;
}
done = summary(name, splits);
} catch (failure) {
failed(failure);
} finally {
busy = "";
}
}
async function remove() {
busy = "Deleting the tag";
try {
await deleteTag(tag);
await invalidate();
ondone();
} catch (failure) {
failed(failure);
busy = "";
}
}
function step(down: boolean) {
const count = options.length;
active =
(Math.max(active, down ? -1 : 0) + (down ? 1 : -1) + count) % count;
}
function onkeydown(event: KeyboardEvent) {
const arrow = event.key === "ArrowDown" || event.key === "ArrowUp";
if (arrow && options.length > 0) {
event.preventDefault();
step(event.key === "ArrowDown");
} else if (event.key === "Tab" && options.length > 0 && !event.shiftKey) {
event.preventDefault();
value = options[Math.max(active, 0)].name;
active = -1;
} else if (event.key === "Enter") {
event.preventDefault();
if (done) {
remove();
} else {
run(active >= 0 ? options[active] : exact);
}
} else if (event.key === "Escape") {
event.preventDefault();
ondone(done || undefined);
}
}
</script>
<div class="flex flex-wrap items-center gap-2 py-0.5">
<span class="text-[12px] text-cladd-fg-soft">To {NOUN[kind]}</span>
<input
aria-label="Move {tag.attributes.tag} to a {NOUN[kind]}"
class="cladd-cut cladd-focusable-input h-6 w-56 rounded-cladd-sm px-1.5 text-[13px]"
oninput={() => {
active = -1;
fresh = "";
problem = "";
}}
{onkeydown}
readonly={Boolean(busy || done)}
bind:value
{@attach focus}
>
{#if options.length > 0}
<span
aria-label="Suggestions"
class="flex flex-wrap items-baseline gap-x-2.5 text-[12px]"
role="listbox"
>
<span class="kbd">Tab</span>
{#each options as option, i (option.id)}
<span
aria-selected={i === Math.max(active, 0)}
class="cursor-pointer {i === Math.max(active, 0)
? "font-semibold text-cladd-fg"
: "text-cladd-fg-soft hover:text-cladd-fg"}"
onmousedown={(event) => {
event.preventDefault();
run(option);
}}
role="option"
tabindex="-1"
>
{option.name}
</span>
{/each}
</span>
{/if}
<span class="text-[12px] text-cladd-fg-soft" role="status">
{#if busy}
{busy}
{:else if done}
<span class="text-cladd-fg">{done}.</span>
<span class="kbd">↵</span>
delete the tag <span class="kbd">Esc</span> keep it
{:else if fresh}
No {NOUN[kind]} called "{fresh}" yet. <span class="kbd">↵</span>
again creates it
{:else}
<span class="kbd">↵</span>
move its transactions <span class="kbd">Esc</span> cancel
{/if}
</span>
{#if problem}
<span class="basis-full text-[12px] text-expense">{problem}</span>
{/if}
</div>
+26 -26
View File
@@ -71,18 +71,42 @@
}
</script>
<div class="relative flex flex-wrap items-center gap-2 py-0.5">
<div class="flex flex-wrap items-center gap-2 py-0.5">
<span class="text-[12px] text-cladd-fg-soft">Merge into</span>
<input
aria-label="Merge {tag.attributes.tag} into"
class="cladd-cut cladd-focusable-input h-6 w-60 rounded-cladd-sm px-1.5 text-[13px]"
disabled={busy}
oninput={() => (cursor = 0)}
{onkeydown}
placeholder="tag name"
readonly={busy}
bind:value
{@attach focus}
>
{#if !busy && options.length > 0}
<span
aria-label="Suggestions"
class="flex flex-wrap items-baseline gap-x-2.5 text-[12px]"
role="listbox"
>
{#each options as option, i (option.id)}
<span
aria-selected={i === cursor}
class="cursor-pointer {i === cursor
? "font-semibold text-cladd-fg"
: "text-cladd-fg-soft hover:text-cladd-fg"}"
onmousedown={(event) => {
event.preventDefault();
run(option.attributes.tag);
}}
role="option"
tabindex="-1"
>
{option.attributes.tag}
</span>
{/each}
</span>
{/if}
<span class="text-[12px] text-cladd-fg-soft">
{#if busy && outcome}
Moving {outcome.done} of {outcome.total} transactions
@@ -96,28 +120,4 @@
{#if problem}
<span class="basis-full text-[12px] text-expense">{problem}</span>
{/if}
{#if !busy && options.length > 0}
<div
class="cladd-surface cladd-outline cladd-level-1 absolute top-full left-[4.6rem] z-20 mt-1 w-60 rounded-cladd-md p-1 shadow-cladd-popover"
role="listbox"
>
{#each options as option, i (option.id)}
<div
aria-selected={i === cursor}
class="cursor-default truncate rounded-cladd-sm px-2 py-1 text-[13px] {i ===
cursor
? "bg-row-cursor"
: "hover:bg-row-hover"}"
onmousedown={(event) => {
event.preventDefault();
run(option.attributes.tag);
}}
role="option"
tabindex="-1"
>
{option.attributes.tag}
</div>
{/each}
</div>
{/if}
</div>
+49 -4
View File
@@ -1,12 +1,24 @@
import { api } from "#lib/api/client.js";
import { all } from "#lib/api/lists.js";
import type { Item, Page, Tag, TransactionGroup } from "#lib/api/types.js";
import type {
Item,
Page,
Split,
Tag,
TransactionGroup,
} from "#lib/api/types.js";
import {
type Outcome,
type Patch,
type Targets,
updateGroups,
} from "#lib/transactions/mass.js";
export interface Usage {
counts: Map<string, number>;
samples: Map<string, Item<TransactionGroup>>;
}
const lower = (tag: Item<Tag>) => tag.attributes.tag.toLowerCase();
const tagged = (groups: Item<TransactionGroup>[], name: string) =>
@@ -61,7 +73,31 @@ export async function mergeTag(
return outcome;
}
export async function usage(tags: Item<Tag>[]): Promise<Map<string, number>> {
export async function convertTag(
tag: Item<Tag>,
patch: (split: Split) => Patch | null,
progress: (outcome: Outcome) => void
): Promise<{ outcome: Outcome; splits: Split[] }> {
const name = tag.attributes.tag;
const groups = tagged(
await all<TransactionGroup>(`/v1/tags/${tag.id}/transactions`, {
type: "all",
}),
name
);
const has = (split: Split) => split.tags?.includes(name) ?? false;
const outcome = await updateGroups(
new Map(groups.map((group) => [group.id, null])),
(split) => (has(split) ? patch(split) : null),
progress
);
const splits = groups.flatMap((group) =>
group.attributes.transactions.filter(has)
);
return { outcome, splits };
}
export async function usage(tags: Item<Tag>[]): Promise<Usage> {
const keys = tags.map(lower);
const clash = new Set(keys.filter((key, i) => keys.indexOf(key) !== i));
const plain = tags.filter((tag) => !clash.has(lower(tag)));
@@ -75,6 +111,11 @@ export async function usage(tags: Item<Tag>[]): Promise<Map<string, number>> {
const counts = new Map(
plain.map((tag, i) => [tag.id, pages[i].meta.pagination?.total ?? 0])
);
const samples = new Map(
plain.flatMap((tag, i) =>
pages[i].data[0] ? [[tag.id, pages[i].data[0]] as const] : []
)
);
await Promise.all(
[...clash].map(async (key) => {
const variants = tags.filter((tag) => lower(tag) === key);
@@ -83,11 +124,15 @@ export async function usage(tags: Item<Tag>[]): Promise<Map<string, number>> {
{ type: "all" }
);
for (const variant of variants) {
counts.set(variant.id, tagged(groups, variant.attributes.tag).length);
const own = tagged(groups, variant.attributes.tag);
counts.set(variant.id, own.length);
if (own[0]) {
samples.set(variant.id, own[0]);
}
}
})
);
return counts;
return { counts, samples };
}
export function sequence<T>(items: T[], run: (item: T) => Promise<void>) {
+80
View File
@@ -0,0 +1,80 @@
import type {
Account,
Bill,
Category,
Item,
Tag,
TransactionGroup,
} from "#lib/api/types.js";
import type { Usage } from "./actions.js";
import { squash } from "./tree.js";
export type Section = "same" | "once" | "unused" | "rest";
export interface Finding {
account?: Item<Account>;
bill?: Item<Bill>;
category?: Item<Category>;
sample?: Item<TransactionGroup>;
section: Section;
}
export const SECTIONS: Record<Section, string> = {
once: "Used once",
rest: "Other tags",
same: "Same name as a category, account or subscription",
unused: "Not used",
};
const ORDER: Section[] = ["same", "once", "unused", "rest"];
const MIN_PREFIX = 3;
export const leafOf = (tag: string) => tag.slice(tag.lastIndexOf("/") + 1);
export const rankOf = (finding: Finding | undefined) =>
ORDER.indexOf(finding?.section ?? "rest");
function sectionOf(finding: Omit<Finding, "section">, count?: number) {
if (finding.account || finding.bill || finding.category) {
return "same";
}
if (count === 1) {
return "once";
}
return count === 0 ? "unused" : "rest";
}
function index<T>(items: Item<T>[], name: (item: T) => string) {
return new Map(items.map((item) => [squash(name(item.attributes)), item]));
}
export function findings(
tags: Item<Tag>[],
lists: {
accounts: Item<Account>[];
bills: Item<Bill>[];
categories: Item<Category>[];
usage?: Usage;
}
): Map<string, Finding> {
const accounts = index(lists.accounts, (a) => a.name);
const categories = index(lists.categories, (c) => c.name);
return new Map(
tags.map((tag) => {
const leaf = squash(leafOf(tag.attributes.tag));
const count = lists.usage?.counts.get(tag.id);
const found = {
account: accounts.get(leaf),
bill:
leaf.length < MIN_PREFIX
? undefined
: lists.bills.find((bill) =>
squash(bill.attributes.name ?? "").startsWith(leaf)
),
category: categories.get(leaf),
sample: count === 1 ? lists.usage?.samples.get(tag.id) : undefined,
};
return [tag.id, { ...found, section: sectionOf(found, count) }];
})
);
}
+1 -1
View File
@@ -134,7 +134,7 @@ export function tagStats(items: Row[], rollup: boolean): Map<string, Stats> {
const normal = (value: string) =>
value.normalize("NFKD").replace(DIACRITICS, "").toLowerCase();
const squash = (value: string) => normal(value).replace(NOT_WORD, "");
export const squash = (value: string) => normal(value).replace(NOT_WORD, "");
function distance(a: string, b: string): number {
const rows = a.length + 1;
+79
View File
@@ -0,0 +1,79 @@
import { addDays, periodOf, today } from "#lib/dates.js";
import { formatDate } from "#lib/format.js";
import { goto } from "$app/navigation";
const KEY = "ffui.searches";
const SEEN_KEY = "ffui.searches.seen";
const FIRST_LOOK_DAYS = 7;
export interface SavedSearch {
label: string;
pinned: boolean;
query: string;
since?: boolean;
}
function load(): string[] {
try {
const value = JSON.parse(localStorage.getItem(KEY) ?? "[]");
return Array.isArray(value)
? value.filter((item) => typeof item === "string")
: [];
} catch {
return [];
}
}
const seen = () =>
localStorage.getItem(SEEN_KEY) ?? addDays(today(), -FIRST_LOOK_DAYS);
class Searches {
pinned = $state<string[]>(typeof localStorage === "undefined" ? [] : load());
has(query: string) {
return this.pinned.includes(query);
}
toggle(query: string): boolean {
const pin = !this.has(query);
this.pinned = pin
? [...this.pinned, query]
: this.pinned.filter((item) => item !== query);
localStorage.setItem(KEY, JSON.stringify(this.pinned));
return pin;
}
list(): SavedSearch[] {
const month = periodOf(today(), "1M");
const range = `date_after:${month.start} date_before:${month.end}`;
const builtins = [
{
label: `Since I last looked, ${formatDate(seen(), "short")}`,
query: `created_at_after:${seen()}`,
since: true,
},
{
label: "No budget this month",
query: `type:withdrawal has_no_budget:true ${range}`,
},
{
label: "No category this month",
query: `has_no_category:true ${range}`,
},
{ label: "Has notes", query: "has_notes:true" },
];
return [
...builtins.map((item) => ({ ...item, pinned: false })),
...this.pinned.map((query) => ({ label: query, pinned: true, query })),
];
}
open(saved: SavedSearch) {
if (saved.since) {
localStorage.setItem(SEEN_KEY, today());
}
return goto(`/search?search=${encodeURIComponent(saved.query)}`);
}
}
export const searches = new Searches();
+43
View File
@@ -13,6 +13,7 @@
import { useKeys } from "#lib/keys.svelte.js";
import { session } from "#lib/session.svelte.js";
import { explain, operatorsQuery } from "#lib/transactions/query.js";
import { searches } from "#lib/transactions/searches.svelte.js";
import { goto } from "$app/navigation";
import { page } from "$app/state";
@@ -30,6 +31,7 @@
let input = $state<HTMLInputElement>();
let seconds = $state(0);
let pinNote = $state({ query: "", text: "" });
const query = $derived(page.url.searchParams.get("search")?.trim() ?? "");
const pageNo = $derived(
@@ -58,6 +60,7 @@
}));
const pagination = $derived(results.data?.meta.pagination);
const pinned = $derived(searches.has(query));
const explanation = $derived(explain(query, operators.data ?? []));
function submit(text: string) {
@@ -83,6 +86,18 @@
focus();
}
function togglePin() {
if (!query) {
focus();
return;
}
const pin = searches.toggle(query);
pinNote = {
query,
text: pin ? "Pinned, it is in the palette under Searches" : "Unpinned",
};
}
$effect(() => {
if (input && query === "") {
input.focus();
@@ -91,6 +106,12 @@
useKeys(() => [
{ group: "Global", keys: "/", label: "Focus search", run: focus },
{
group: "Search",
keys: "P",
label: pinned ? "Unpin this search" : "Pin this search",
run: togglePin,
},
]);
</script>
@@ -118,6 +139,14 @@
/>
<Button size="sm" type="submit"><Search />Search</Button>
{#if query}
<Button onclick={togglePin} size="sm" variant="outline">
{pinned ? "Unpin" : "Pin"} <span class="kbd max-sm:hidden">P</span>
</Button>
{#if pinNote.query === query && pinNote.text}
<span class="text-[12px] text-cladd-fg-soft" role="status"
>{pinNote.text}</span
>
{/if}
<a
class="text-[12px] text-brand hover:underline"
data-sveltekit-reload
@@ -144,6 +173,20 @@
{/each}
<span>Tab or Enter accepts a suggestion.</span>
</p>
<p class="mt-2 flex flex-wrap items-baseline gap-x-3 gap-y-1">
<span class="text-cladd-fg-soft">Saved:</span>
{#each searches.list() as saved (saved.query)}
<a
class="text-brand hover:underline"
href="/search?search={encodeURIComponent(saved.query)}"
onclick={(event) => {
event.preventDefault();
searches.open(saved);
}}
>{saved.label}</a
>
{/each}
</p>
{/if}
</Box>
+210 -12
View File
@@ -1,9 +1,10 @@
<script lang="ts">
import Plus from "@lucide/svelte/icons/plus";
import { createQuery } from "@tanstack/svelte-query";
import { createQuery, keepPreviousData } from "@tanstack/svelte-query";
import { api } from "#lib/api/client.js";
import { all, invalidate, lists } from "#lib/api/lists.js";
import type { TransactionGroup } from "#lib/api/types.js";
import type { Item, Tag, TransactionGroup } from "#lib/api/types.js";
import Amount from "#lib/components/Amount.svelte";
import Box from "#lib/components/Box.svelte";
import { periodPath } from "#lib/components/budgets/period-path.svelte.js";
import ListMenu from "#lib/components/categories/ListMenu.svelte";
@@ -12,7 +13,15 @@
import { setParam } from "#lib/components/categories/url.js";
import PageHeader from "#lib/components/shell/PageHeader.svelte";
import { deleteTag, usage } from "#lib/components/tags/actions.js";
import ConvertField from "#lib/components/tags/ConvertField.svelte";
import Duplicates from "#lib/components/tags/Duplicates.svelte";
import {
type Finding,
findings,
leafOf,
rankOf,
SECTIONS,
} from "#lib/components/tags/findings.js";
import MergeField from "#lib/components/tags/MergeField.svelte";
import RenameField from "#lib/components/tags/RenameField.svelte";
import {
@@ -30,6 +39,7 @@
import { ListNav } from "#lib/list-nav.svelte.js";
import { period } from "#lib/period.svelte.js";
import { oldUiUrl } from "#lib/spa-paths.js";
import { signedAmount } from "#lib/transactions/split.js";
import { goto } from "$app/navigation";
import { page } from "$app/state";
@@ -53,24 +63,57 @@
const counts = createQuery(() => ({
enabled: cleanup && Boolean(tags.data),
placeholderData: keepPreviousData,
queryFn: () => usage(tags.data ?? []),
queryKey: ["tags-usage", (tags.data ?? []).map((t) => t.id).join(",")],
}));
const categories = createQuery(() => lists.categories());
const bills = createQuery(() => lists.bills());
const expenses = createQuery(() => ({
...lists.accounts("expense"),
enabled: cleanup,
}));
const found = $derived(
cleanup
? findings(tags.data ?? [], {
accounts: expenses.data ?? [],
bills: bills.data ?? [],
categories: categories.data ?? [],
usage: counts.data,
})
: new Map<string, Finding>()
);
const items = $derived(splitRows(groups.data ?? []));
const stats = $derived(tagStats(items, !(flat || filter)));
const rank = (node: TagNode) => rankOf(found.get(node.tag?.id ?? ""));
const nodes = $derived.by(() => {
const source = tags.data ?? [];
if (filter) {
return flatNodes(
fuzzyFilter(source, filter, (t) => t.attributes.tag, source.length)
);
const matched = filter
? fuzzyFilter(source, filter, (t) => t.attributes.tag, source.length)
: source;
if (cleanup) {
return flatNodes(matched).sort((a, b) => rank(a) - rank(b));
}
return flat ? flatNodes(source) : flatten(buildTree(source));
if (filter || flat) {
return flatNodes(matched);
}
return flatten(buildTree(source));
});
const sectionOf = (i: number) =>
found.get(nodes[i]?.tag?.id ?? "")?.section ?? "rest";
const sectionSize = $derived(
nodes.reduce<Record<string, number>>((sizes, _, i) => {
sizes[sectionOf(i)] = (sizes[sectionOf(i)] ?? 0) + 1;
return sizes;
}, {})
);
const clusters = $derived(cleanup ? duplicates(tags.data ?? []) : []);
let editing = $state<{ path: string; mode: "rename" | "merge" } | null>(null);
let editing = $state<{
path: string;
mode: "rename" | "merge" | "category" | "bill";
} | null>(null);
let armed = $state<string | null>(null);
let armTimer: ReturnType<typeof setTimeout> | undefined;
let rowStatus = $state<Record<string, string>>({});
@@ -99,6 +142,55 @@
}
}
function convert(node: TagNode | undefined, mode: "category" | "bill") {
if (node?.tag) {
armed = null;
editing = { mode, path: node.path };
}
}
function choicesFor(mode: "category" | "bill") {
if (mode === "category") {
return (categories.data ?? []).map((c) => ({
id: c.id,
name: c.attributes.name,
}));
}
return (bills.data ?? []).map((b) => ({
id: b.id,
name: b.attributes.name ?? "",
}));
}
function matches(finding: Finding | undefined) {
return [
finding?.category && {
href: `/categories/show/${finding.category.id}`,
kind: "category",
name: finding.category.attributes.name,
},
finding?.account && {
href: `/accounts/show/${finding.account.id}`,
kind: "account",
name: finding.account.attributes.name,
},
finding?.bill && {
href: `/subscriptions/show/${finding.bill.id}`,
kind: "subscription",
name: finding.bill.attributes.name,
},
].filter((match) => match !== undefined);
}
function initialFor(tag: Item<Tag>, mode: "category" | "bill") {
const finding = found.get(tag.id);
const match =
mode === "bill"
? finding?.bill?.attributes.name
: finding?.category?.attributes.name;
return match ?? leafOf(tag.attributes.tag);
}
async function remove(node: TagNode) {
if (!node.tag) {
return;
@@ -166,6 +258,18 @@
label: "Merge tag into another",
run: () => merge(nav.current),
},
{
group: "Tags",
keys: "s c",
label: "Move tag's transactions to a category",
run: () => convert(nav.current, "category"),
},
{
group: "Tags",
keys: "s s",
label: "Link tag's transactions to a subscription",
run: () => convert(nav.current, "bill"),
},
{
group: "Tags",
keys: "d d",
@@ -205,6 +309,38 @@
nav.use();
</script>
{#snippet reason(
finding: Finding | undefined
)}
<span class="flex flex-wrap items-baseline gap-x-2">
{#each matches(finding) as match (match.kind)}
<span
>{match.kind}
<a class="text-brand hover:underline" href={match.href}
>{match.name}</a
></span
>
{/each}
{#if finding?.sample}
{@const split = finding.sample.attributes.transactions[0]}
{@const money = signedAmount(split)}
<a
class="max-w-64 truncate text-cladd-fg hover:underline"
href="/transactions/show/{finding.sample.id}"
>{split.description}</a
>
<Amount
amount={money.amount}
code={money.code}
decimals={money.decimals}
symbol={money.symbol}
tone={money.tone}
/>
<span class="num">{formatDate(split.date.slice(0, 10))}</span>
{/if}
</span>
{/snippet}
<PageHeader crumbs={[{ label: "Tags" }]} title="Tags">
{#snippet actions()}
<Button href="/tags/create" size="sm" variant="outline">
@@ -219,19 +355,21 @@
<div class="flex flex-col gap-4">
{#if cleanup}
<Duplicates {clusters} counts={counts.data ?? new Map()} />
<Duplicates {clusters} counts={counts.data?.counts ?? new Map()} />
{/if}
<Box body="p-0" title="Tags">
{#snippet tools()}
<div class="flex flex-wrap items-center gap-2">
{#if !(flat || filter)}
{#if !(flat || filter || cleanup)}
<span class="hidden text-[12px] text-cladd-fg-soft md:inline"
>parent rows include sub-tags</span
>
{/if}
<div
class="flex rounded-cladd-sm bg-cladd-surface-next p-0.5 text-[12px]"
class="flex rounded-cladd-sm bg-cladd-surface-next p-0.5 text-[12px] {cleanup
? "hidden"
: ""}"
>
<button
aria-pressed={!flat}
@@ -299,8 +437,12 @@
{counts.isFetching ? "Counting" : "All time"}
</th>
{/if}
{#if cleanup}
<th class="px-3 font-medium">Reason</th>
{:else}
<th class="hidden px-3 font-medium md:table-cell">Date</th>
<th class="hidden px-3 font-medium lg:table-cell">Description</th>
{/if}
</tr>
</thead>
<ListMenu
@@ -323,6 +465,16 @@
label: "Merge into another tag",
run: () => merge(nav.current),
},
{
keys: "s c",
label: "Move to a category",
run: () => convert(nav.current, "category"),
},
{
keys: "s s",
label: "Link to a subscription",
run: () => convert(nav.current, "bill"),
},
{
label: "Open in old UI",
run: () =>
@@ -341,8 +493,24 @@
{#each nodes as node, i (node.path)}
{@const stat = stats.get(node.path)}
{@const total = node.tag
? counts.data?.get(node.tag.id)
? counts.data?.counts.get(node.tag.id)
: undefined}
{@const finding = found.get(node.tag?.id ?? "")}
{#if cleanup && (i === 0 || sectionOf(i - 1) !== sectionOf(i))}
<tr
class="h-7 border-cladd-outline border-b bg-cladd-surface-next"
>
<td
class="px-3 font-semibold text-[12px] text-cladd-fg-soft"
colspan="7"
>
{SECTIONS[sectionOf(i)]}
<span class="num ml-1 font-normal"
>{sectionSize[sectionOf(i)]}</span
>
</td>
</tr>
{/if}
<tr
class="h-7 border-cladd-outline border-b last:border-b-0 {nav.cursor ===
i
@@ -371,6 +539,22 @@
tag={node.tag}
tags={tags.data ?? []}
/>
{:else if editing?.path === node.path &&
(editing.mode === "category" ||
editing.mode === "bill") &&
node.tag}
<ConvertField
choices={choicesFor(editing.mode)}
initial={initialFor(node.tag, editing.mode)}
kind={editing.mode}
ondone={(status) => {
editing = null;
if (status) {
rowStatus[node.path] = status;
}
}}
tag={node.tag}
/>
{:else}
<a
class="hover:underline {node.tag
@@ -419,6 +603,11 @@
{/if}
</td>
{/if}
{#if cleanup}
<td class="px-3 text-[12px] text-cladd-fg-soft">
{@render reason(finding)}
</td>
{:else}
<td
class="num hidden px-3 text-[12px] text-cladd-fg-soft md:table-cell"
>
@@ -431,6 +620,7 @@
>
{node.tag?.attributes.description ?? ""}
</td>
{/if}
</tr>
{:else}
{#if !tags.isPending}
@@ -465,6 +655,14 @@
>
<span><span class="kbd">r</span> rename</span>
<span><span class="kbd">m</span> merge</span>
<span
><span class="kbd">s</span><span class="kbd">c</span>
to category</span
>
<span
><span class="kbd">s</span><span class="kbd">s</span>
to subscription</span
>
<span
><span class="kbd">d</span><span class="kbd">d</span>
delete</span
@@ -49,6 +49,7 @@
} from "#lib/transactions/split.js";
import { goto } from "$app/navigation";
import { page } from "$app/state";
import { loadPast, placesOf, usualOf, verdict } from "./usual.js";
interface Linked {
amount: Signed | null;
@@ -166,6 +167,14 @@
return result;
}
const places = $derived(placesOf(splits));
const groupDay = $derived(splits[0]?.date.slice(0, 10) ?? "");
const pastQuery = createQuery(() => ({
enabled: places.length > 0,
queryFn: () => loadPast(places, id, groupDay),
queryKey: ["transaction-usual", id, places.join(","), groupDay],
}));
const linksQuery = createQuery(() => ({
enabled: journals.length > 0,
queryFn: () => loadLinks(journals),
@@ -495,6 +504,7 @@
{@const files = attachmentsFor(split)}
{@const events = eventsFor(split)}
{@const links = linksQuery.data?.[journalId(split)] ?? []}
{@const usual = usualOf(split, pastQuery.data)}
<div class="flex min-w-0 flex-col gap-4">
<Box body="p-0">
{#snippet tools()}
@@ -539,6 +549,35 @@
</div>
</td>
</tr>
{#if usual}
{@const said = verdict(usual.change)}
<tr>
{@render row("Usual here")}
<td class="px-3 py-1.5">
<span class="flex flex-wrap items-baseline gap-x-1.5">
<Amount
amount={-usual.median}
code={split.currency_code}
decimals={split.currency_decimal_places}
symbol={split.currency_symbol}
/>
<span class="text-cladd-fg-soft">median of the</span>
<a
class="text-brand hover:underline"
href="/search?search={encodeURIComponent(usual.query)}"
>last {usual.count}</a
>
<span
class="whitespace-nowrap {said.warn
? "text-warn"
: "text-cladd-fg-soft"}"
><span class="text-cladd-fg-softer">·</span>
{said.text}</span
>
</span>
</td>
</tr>
{/if}
<tr>
{@render row("Transaction journal ID")}
<td class="num px-3 py-1.5">#{journalId(split)}</td>
@@ -0,0 +1,97 @@
import { api } from "#lib/api/client.js";
import type { Page, Split, TransactionGroup } from "#lib/api/types.js";
import { addMonths } from "#lib/dates.js";
import { isCash } from "#lib/transactions/split.js";
const COUNT = 10;
const MIN_COUNT = 3;
const LOOKBACK_MONTHS = 60;
const PERCENT = 100;
export interface Usual {
change: number;
count: number;
median: number;
query: string;
}
export const placesOf = (splits: Split[]) => [
...new Set(
splits
.filter(
(split) =>
split.type === "withdrawal" &&
split.destination_id &&
!isCash(split.destination_type)
)
.map((split) => split.destination_id ?? "")
),
];
export async function loadPast(
places: string[],
groupId: string,
end: string
): Promise<Record<string, Split[]>> {
const pages = await Promise.all(
places.map((place) =>
api<Page<TransactionGroup>>(`/v1/accounts/${place}/transactions`, {
query: {
end,
limit: COUNT + 1,
start: addMonths(end, -LOOKBACK_MONTHS),
type: "withdrawal",
},
})
)
);
return Object.fromEntries(
places.map((place, i) => [
place,
pages[i].data
.filter((group) => group.id !== groupId)
.flatMap((group) =>
group.attributes.transactions.filter(
(split) => split.destination_id === place
)
),
])
);
}
function median(values: number[]) {
const sorted = [...values].sort((a, b) => a - b);
const mid = Math.floor(sorted.length / 2);
return sorted.length % 2 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2;
}
export function usualOf(
split: Split,
past: Record<string, Split[]> | undefined
): Usual | null {
const same = (past?.[split.destination_id ?? ""] ?? [])
.filter((item) => item.currency_code === split.currency_code)
.slice(0, COUNT);
if (same.length < MIN_COUNT) {
return null;
}
const typical = median(same.map((item) => Math.abs(Number(item.amount))));
return {
change: Math.round((Number(split.amount) / typical - 1) * PERCENT),
count: same.length,
median: typical,
query: `destination_account_id:${split.destination_id} currency_is:${split.currency_code} date_before:${split.date.slice(0, 10)}`,
};
}
const ABOUT = 5;
const NOTABLE = 15;
export function verdict(change: number) {
if (Math.abs(change) < ABOUT) {
return { text: "about usual", warn: false };
}
return change > 0
? { text: `+${change}% above usual`, warn: change >= NOTABLE }
: { text: `${-change}% below usual`, warn: false };
}