From e9bb32578496af86221a7f39c992d87610a0adbd Mon Sep 17 00:00:00 2001 From: Ken-ichi Ueda Date: Wed, 4 Feb 2026 12:39:56 -0800 Subject: [PATCH] feat: add autocomplete for filters in iNat download Co-authored-by: Claude (claude-opus-4-5-20251101) --- package-lock.json | 310 ++++++++++++++++++++ package.json | 1 + playwright.config.ts | 4 +- scripts/bump-version.js | 2 +- src/lib/components/InatPlaceChooser.svelte | 67 +++++ src/lib/components/InatSearchChooser.svelte | 187 ++++++++++++ src/lib/components/InatTaxonChooser.svelte | 74 +++++ src/lib/components/InatTaxonName.svelte | 83 ++++++ src/lib/components/InatUserChooser.svelte | 85 ++++++ src/lib/composables/useInatSearch.svelte.ts | 130 ++++++++ src/lib/types/inaturalist.ts | 62 ++++ src/lib/types/inaturalistjs.d.ts | 34 +++ src/routes/+layout.svelte | 11 +- src/routes/inat-download/+page.svelte | 95 ++---- tests/inat-download.spec.ts | 151 ++++++++-- 15 files changed, 1185 insertions(+), 111 deletions(-) create mode 100644 src/lib/components/InatPlaceChooser.svelte create mode 100644 src/lib/components/InatSearchChooser.svelte create mode 100644 src/lib/components/InatTaxonChooser.svelte create mode 100644 src/lib/components/InatTaxonName.svelte create mode 100644 src/lib/components/InatUserChooser.svelte create mode 100644 src/lib/composables/useInatSearch.svelte.ts create mode 100644 src/lib/types/inaturalist.ts create mode 100644 src/lib/types/inaturalistjs.d.ts diff --git a/package-lock.json b/package-lock.json index 9c6028c..787aeac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@tauri-apps/plugin-dialog": "^2.4.0", "@tauri-apps/plugin-opener": "^2", "dompurify": "^3.3.0", + "inaturalistjs": "github:inaturalist/inaturalistjs", "lightningcss": "^1.30.2", "lucide-svelte": "^0.546.0", "maplibre-gl": "^5.9.0", @@ -3085,6 +3086,12 @@ "node": ">=12" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", + "license": "MIT" + }, "node_modules/axobject-query": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz", @@ -3104,6 +3111,19 @@ "require-from-string": "^2.0.2" } }, + "node_modules/call-bind-apply-helpers": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz", + "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/chai": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.0.tgz", @@ -3148,6 +3168,18 @@ "node": ">=6" } }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "license": "MIT", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/cookie": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz", @@ -3158,6 +3190,15 @@ "node": ">= 0.6" } }, + "node_modules/cross-fetch": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.1.0.tgz", + "integrity": "sha512-uKm5PU+MHTootlWEY+mZ4vvXoCn4fLQxT9dSc1sXVMSFkINTJVN8cAQROpwcKm8bJ/c7rgZVIBWzH5T78sNZZw==", + "license": "MIT", + "dependencies": { + "node-fetch": "^2.7.0" + } + }, "node_modules/css-tree": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.1.0.tgz", @@ -3243,6 +3284,15 @@ "node": ">=0.10.0" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "license": "MIT", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/detect-libc": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", @@ -3267,6 +3317,20 @@ "@types/trusted-types": "^2.0.7" } }, + "node_modules/dunder-proto": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", + "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==", + "license": "MIT", + "dependencies": { + "call-bind-apply-helpers": "^1.0.1", + "es-errors": "^1.3.0", + "gopd": "^1.2.0" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/earcut": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.0.2.tgz", @@ -3298,6 +3362,24 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, + "node_modules/es-define-property": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz", + "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-errors": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", + "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, "node_modules/es-module-lexer": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz", @@ -3305,6 +3387,33 @@ "dev": true, "license": "MIT" }, + "node_modules/es-object-atoms": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz", + "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-set-tostringtag": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz", + "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.6", + "has-tostringtag": "^1.0.2", + "hasown": "^2.0.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/esbuild": { "version": "0.25.10", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.10.tgz", @@ -3400,6 +3509,22 @@ } } }, + "node_modules/form-data": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz", + "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==", + "license": "MIT", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "es-set-tostringtag": "^2.1.0", + "hasown": "^2.0.2", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -3415,11 +3540,57 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, + "node_modules/function-bind": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/geojson-vt": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-4.0.2.tgz", "integrity": "sha512-AV9ROqlNqoZEIJGfm1ncNjEXfkz2hdFlZf0qkVfmkwdKa8vj7H16YUOT81rJw1rdFhyEDlN2Tds91p/glzbl5A==" }, + "node_modules/get-intrinsic": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz", + "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==", + "license": "MIT", + "dependencies": { + "call-bind-apply-helpers": "^1.0.2", + "es-define-property": "^1.0.1", + "es-errors": "^1.3.0", + "es-object-atoms": "^1.1.1", + "function-bind": "^1.1.2", + "get-proto": "^1.0.1", + "gopd": "^1.2.0", + "has-symbols": "^1.1.0", + "hasown": "^2.0.2", + "math-intrinsics": "^1.1.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/get-proto": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz", + "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==", + "license": "MIT", + "dependencies": { + "dunder-proto": "^1.0.1", + "es-object-atoms": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/get-stream": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz", @@ -3436,12 +3607,63 @@ "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.4.tgz", "integrity": "sha512-latSnyDNt/8zYUB6VIJ6PCh2jBjJX6gnDsoCZ7LyW7GkqrD51EWwa9qCoGixj8YqBtETQK/xY7OmpTF8xz1DdQ==" }, + "node_modules/gopd": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz", + "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/graceful-fs": { "version": "4.2.11", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", "dev": true }, + "node_modules/has-symbols": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz", + "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-tostringtag": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz", + "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==", + "license": "MIT", + "dependencies": { + "has-symbols": "^1.0.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/hasown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "license": "MIT", + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/html-encoding-sniffer": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz", @@ -3496,6 +3718,16 @@ "node": ">=0.10.0" } }, + "node_modules/inaturalistjs": { + "version": "2.18.2", + "resolved": "git+ssh://git@github.com/inaturalist/inaturalistjs.git#c739c2c164b04515fa3ef20e4aeceed65a6afa37", + "license": "MIT", + "dependencies": { + "cross-fetch": "^4.0.0", + "form-data": "^4.0.0", + "rison-node": "^2.1.1" + } + }, "node_modules/is-potential-custom-element-name": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz", @@ -4100,6 +4332,15 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, + "node_modules/math-intrinsics": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", + "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, "node_modules/mdn-data": { "version": "2.12.2", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz", @@ -4113,6 +4354,27 @@ "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==", "license": "MIT" }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "license": "MIT", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/mini-svg-data-uri": { "version": "1.4.4", "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz", @@ -4202,6 +4464,48 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/node-fetch": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", + "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==", + "license": "MIT", + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + }, + "peerDependencies": { + "encoding": "^0.1.0" + }, + "peerDependenciesMeta": { + "encoding": { + "optional": true + } + } + }, + "node_modules/node-fetch/node_modules/tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==", + "license": "MIT" + }, + "node_modules/node-fetch/node_modules/webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", + "license": "BSD-2-Clause" + }, + "node_modules/node-fetch/node_modules/whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", + "license": "MIT", + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, "node_modules/parse5": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.0.tgz", @@ -4392,6 +4696,12 @@ "protocol-buffers-schema": "^3.3.1" } }, + "node_modules/rison-node": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/rison-node/-/rison-node-2.1.1.tgz", + "integrity": "sha512-GuV0OnSL2erZJ0j/9YUsrAdfSh3mGcrq+4wM4PqRftOYT7+TRhxbMrpVZaGC5YIPwncIoOM7PPnskDku5Ywg1Q==", + "license": "Apache-2.0" + }, "node_modules/rollup": { "version": "4.52.4", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.4.tgz", diff --git a/package.json b/package.json index 8ea6011..32debe5 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "@tauri-apps/plugin-dialog": "^2.4.0", "@tauri-apps/plugin-opener": "^2", "dompurify": "^3.3.0", + "inaturalistjs": "github:inaturalist/inaturalistjs", "lightningcss": "^1.30.2", "lucide-svelte": "^0.546.0", "maplibre-gl": "^5.9.0", diff --git a/playwright.config.ts b/playwright.config.ts index 668e827..bd2dad4 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -35,10 +35,10 @@ export default defineConfig({ name: 'integration-windows', use: { ...devices['Desktop Edge'], - channel: 'msedge' + channel: 'msedge', }, testIgnore: '**/performance.spec.ts', - retries: 2 + retries: 2, }, ], diff --git a/scripts/bump-version.js b/scripts/bump-version.js index 80e43cf..78169a7 100644 --- a/scripts/bump-version.js +++ b/scripts/bump-version.js @@ -1,7 +1,7 @@ #!/usr/bin/env node -import { readFileSync, writeFileSync } from 'fs'; import { execSync } from 'child_process'; +import { readFileSync, writeFileSync } from 'fs'; const args = process.argv.slice(2); const DRY_RUN = args.includes('--dry-run'); diff --git a/src/lib/components/InatPlaceChooser.svelte b/src/lib/components/InatPlaceChooser.svelte new file mode 100644 index 0000000..eb66764 --- /dev/null +++ b/src/lib/components/InatPlaceChooser.svelte @@ -0,0 +1,67 @@ + + + + {#snippet thumbnail({ selectedItem })} + {#if selectedItem} +
+ +
+ {:else} +
+ +
+ {/if} + {/snippet} + + {#snippet itemContent({ item })} + {@const place = item.item as Place} +
+
+ +
+
+
+ {place?.display_name || item.label} +
+ {#if place?.place_type} +
+ {place.place_type} +
+ {/if} +
+
+ {/snippet} + diff --git a/src/lib/components/InatSearchChooser.svelte b/src/lib/components/InatSearchChooser.svelte new file mode 100644 index 0000000..b6f7c0e --- /dev/null +++ b/src/lib/components/InatSearchChooser.svelte @@ -0,0 +1,187 @@ + + +
+ {#if label} + + {/if} +
+ {@render thumbnail({ selectedItem: search.selectedItem })} +
+ + + + {#if search.selectedItem} + + {/if} + + + + + {#if search.loading} +
Loading...
+ {:else if search.comboboxData.length === 0 && inputValue.length >= 2} +
No matches found
+ {:else} + {#each search.comboboxData as item (item.value)} + + {@render itemContent({ item })} + + {/each} + {/if} + + + + +
+
+
diff --git a/src/lib/components/InatTaxonChooser.svelte b/src/lib/components/InatTaxonChooser.svelte new file mode 100644 index 0000000..b7e744f --- /dev/null +++ b/src/lib/components/InatTaxonChooser.svelte @@ -0,0 +1,74 @@ + + + + {#snippet thumbnail({ selectedItem })} + {@const taxon = selectedItem as Taxon | null} + {#if taxon} + {#if taxon.default_photo} + {taxon.name} + {:else} +
+ +
+ {/if} + {:else} +
+ +
+ {/if} + {/snippet} + + {#snippet itemContent({ item })} + {@const taxon = item.item as Taxon} +
+ {#if taxon?.default_photo} + {taxon.name} + {:else} +
+ {/if} +
+ +
+
+ {/snippet} + diff --git a/src/lib/components/InatTaxonName.svelte b/src/lib/components/InatTaxonName.svelte new file mode 100644 index 0000000..3590e99 --- /dev/null +++ b/src/lib/components/InatTaxonName.svelte @@ -0,0 +1,83 @@ + + +{#snippet scientificName(t: Taxon)} + {#if t.rank_level && t.rank_level > 10} + {t.rank} + {/if} + {#if t.rank_level && t.rank_level <= 20} + {t.name} + {:else} + {t.name} + {/if} +{/snippet} + +
+ {#if taxon} + {#if taxon.preferred_common_name && taxon.preferred_common_name.length > 0} +
+ {#if sciFirst} + {@render scientificName(taxon)} + {:else} + {taxon.preferred_common_name} + {/if} +
+
+ {#if sciFirst} + {taxon.preferred_common_name} + {:else} + {@render scientificName(taxon)} + {/if} +
+ {:else} +
+ {@render scientificName(taxon)} +
+ {/if} + {:else if numLines > 1} +
Unknown
+ {/if} +
diff --git a/src/lib/components/InatUserChooser.svelte b/src/lib/components/InatUserChooser.svelte new file mode 100644 index 0000000..1ca8b60 --- /dev/null +++ b/src/lib/components/InatUserChooser.svelte @@ -0,0 +1,85 @@ + + + + {#snippet thumbnail({ selectedItem })} + {@const user = selectedItem as User | null} + {#if user} + {#if user.icon} + {user.login} + {:else} +
+ +
+ {/if} + {:else} +
+ +
+ {/if} + {/snippet} + + {#snippet itemContent({ item })} + {@const user = item.item as User} +
+ {#if user?.icon} + {user.login} + {:else} +
+ +
+ {/if} +
+
+ {user?.login || item.label} +
+ {#if user?.name} +
+ {user.name} +
+ {/if} +
+
+ {/snippet} + diff --git a/src/lib/composables/useInatSearch.svelte.ts b/src/lib/composables/useInatSearch.svelte.ts new file mode 100644 index 0000000..ada7e4c --- /dev/null +++ b/src/lib/composables/useInatSearch.svelte.ts @@ -0,0 +1,130 @@ +import inatjs from 'inaturalistjs'; +import type { + ApiResponse, + ComboboxItem, + InatItem, + Place, + SearchResult, + SourceType, + Taxon, + User, +} from '$lib/types/inaturalist'; + +type MapResultFn = (result: SearchResult) => ComboboxItem; + +export function useInatSearch(source: SourceType, mapResultFn: MapResultFn) { + let comboboxData = $state([]); + let selectedValue = $state([]); + let selectedItem = $state(null); + let loading = $state(false); + let debounceTimer: ReturnType; + + async function search(query: string) { + if (!query || !query.trim()) { + comboboxData = []; + return; + } + + try { + loading = true; + const response = (await inatjs.search({ + q: query, + sources: source, + per_page: 10, + })) as ApiResponse; + + comboboxData = response.results.map(mapResultFn); + } catch (e) { + console.error('Search error:', e); + comboboxData = []; + } finally { + loading = false; + } + } + + // Loads an item by ID and populates the combobox with it. This is needed + // when initializing from URL hash state - we have the ID but need to fetch + // the full item details to display the name, photo, etc. + async function loadById(id: number | string) { + try { + loading = true; + let response: ApiResponse | undefined; + if (source === 'taxa') { + response = (await inatjs.taxa.fetch(id)) as ApiResponse; + } else if (source === 'places') { + response = (await inatjs.places.fetch(id)) as ApiResponse; + } else if (source === 'users') { + response = (await inatjs.users.fetch(id)) as ApiResponse; + } + + if (response?.results?.[0]) { + const item = response.results[0]; + selectedItem = item; + const mapped = mapResultFn({ taxon: item as Taxon, record: item }); + comboboxData = [mapped]; + selectedValue = [mapped.value]; + } + } catch (e) { + console.error('Error loading item by ID:', e); + } finally { + loading = false; + } + } + + function handleInputValueChange(e: { inputValue: string }) { + const query = e.inputValue; + clearTimeout(debounceTimer); + debounceTimer = setTimeout(() => { + search(query); + }, 300); + } + + function handleValueChange( + e: { value: string[] }, + onChangeFn?: (item: InatItem | null) => void, + ) { + selectedValue = e.value; + if (e.value.length > 0) { + const selected = comboboxData.find((item) => item.value === e.value[0]); + if (selected) { + selectedItem = selected.item; + if (onChangeFn) { + onChangeFn(selected.item); + } + } + } else { + selectedItem = null; + if (onChangeFn) { + onChangeFn(null); + } + } + } + + function clearSelection() { + selectedValue = []; + selectedItem = null; + comboboxData = []; + } + + return { + get comboboxData() { + return comboboxData; + }, + get selectedValue() { + return selectedValue; + }, + get selectedItem() { + return selectedItem; + }, + set selectedItem(value) { + selectedItem = value; + }, + get loading() { + return loading; + }, + handleInputValueChange, + handleValueChange, + clearSelection, + loadById, + }; +} diff --git a/src/lib/types/inaturalist.ts b/src/lib/types/inaturalist.ts new file mode 100644 index 0000000..172b9c1 --- /dev/null +++ b/src/lib/types/inaturalist.ts @@ -0,0 +1,62 @@ +// Type definitions for iNaturalist API responses + +export interface Taxon { + id: number; + name: string; + rank: string; + rank_level: number; + iconic_taxon_name?: string; + preferred_common_name?: string; + default_photo?: { + square_url: string; + medium_url: string; + url: string; + }; + ancestor_ids?: number[]; + is_active?: boolean; + observations_count?: number; +} + +export interface Place { + id: number; + name: string; + display_name: string; + place_type: number; + bbox_area?: number; + location?: string; +} + +export interface User { + id: number; + login: string; + name?: string; + icon?: string; + icon_url?: string; +} + +export interface SearchResult { + taxon?: Taxon; + place?: Place; + user?: User; + record?: Place | User | Taxon; + type?: string; + matches?: string[]; + score?: number; +} + +export interface ApiResponse { + total_results: number; + page: number; + per_page: number; + results: T[]; +} + +export type SourceType = 'taxa' | 'places' | 'users'; + +export type InatItem = Taxon | Place | User; + +export interface ComboboxItem { + value: string; + label: string; + item: InatItem; +} diff --git a/src/lib/types/inaturalistjs.d.ts b/src/lib/types/inaturalistjs.d.ts new file mode 100644 index 0000000..321c4d8 --- /dev/null +++ b/src/lib/types/inaturalistjs.d.ts @@ -0,0 +1,34 @@ +declare module 'inaturalistjs' { + interface SearchParams { + q: string; + sources: string; + per_page?: number; + } + + interface SearchResponse { + results: unknown[]; + total_results: number; + page: number; + per_page: number; + } + + interface FetchResponse { + results: unknown[]; + total_results: number; + page: number; + per_page: number; + } + + interface Endpoint { + fetch(id: number | string): Promise; + } + + const inatjs: { + search(params: SearchParams): Promise; + taxa: Endpoint; + places: Endpoint; + users: Endpoint; + }; + + export default inatjs; +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 64c63fc..7eeb4ef 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -9,8 +9,15 @@ const { children } = $props(); // that are necessary, so... this is a way to test CSP config in dev with // the huge caveat that prodCsp here must be manually kept in sync with the // `csp` config from tauri.conf.json -const connectSrc = - "'self' tiles: http://tiles.localhost ipc: http://ipc.localhost https://tile.openstreetmap.org:*"; +const connectSrc = [ + "'self'", + 'tiles:', + 'http://tiles.localhost', + 'ipc:', + 'http://ipc.localhost', + 'https://tile.openstreetmap.org:*', + 'https://api.inaturalist.org:*', +].join(' '); const devCsp = { 'script-src': "'self' 'unsafe-inline' http://localhost:*", 'style-src': "'self' 'unsafe-inline' http://localhost:*", diff --git a/src/routes/inat-download/+page.svelte b/src/routes/inat-download/+page.svelte index 8d31046..8f2796a 100644 --- a/src/routes/inat-download/+page.svelte +++ b/src/routes/inat-download/+page.svelte @@ -1,6 +1,9 @@