Add svelte for ui

esbuild.config.mjs

@@ -1,6 +1,8 @@
 import esbuild from "esbuild";
 import process from "process";
 import builtins from "builtin-modules";
+import esbuildSvelte from "esbuild-svelte";
+import { sveltePreprocess } from "svelte-preprocess";
 
 const banner = `/*
 THIS IS A GENERATED/BUNDLED FILE BY ESBUILD
@@ -16,6 +18,15 @@ const context = await esbuild.context({
 	},
 	entryPoints: ["src/main.ts"],
 	bundle: true,
+	plugins: [
+		esbuildSvelte({
+			preprocess: sveltePreprocess(),
+			compilerOptions: {
+				css: "injected",
+				dev: !prod,
+			},
+		}),
+	],
 	external: [
 		"obsidian",
 		"electron",

package.json

@@ -4,13 +4,10 @@
 	"description": "This is a sample plugin for Obsidian (https://obsidian.md)",
 	"main": "main.js",
 	"scripts": {
-		"dev": "run-p dev-*",
+		"dev": "node esbuild.config.mjs",
-		"dev-js": "node esbuild.config.mjs",
+		"build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
-		"dev-css": "sass sass/styles.scss styles.css --watch --no-source-map",
+		"version": "node version-bump.mjs && git add manifest.json versions.json",
-		"build": "run-s build-*",
+    	"svelte-check": "svelte-check --tsconfig tsconfig.json"
-		"build-js": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
-		"build-css": "sass sass/styles.scss styles.css --no-source-map",
-		"version": "node version-bump.mjs && git add manifest.json versions.json"
 	},
 	"keywords": [],
 	"author": "",
@@ -22,11 +19,15 @@
 		"@typescript-eslint/parser": "5.29.0",
 		"builtin-modules": "3.3.0",
 		"esbuild": "0.17.3",
+		"esbuild-svelte": "^0.9.3",
 		"handlebars": "^4.7.8",
 		"npm-run-all": "^4.1.5",
 		"obsidian": "latest",
 		"sass": "^1.89.2",
+		"svelte": "^5.34.8",
+		"svelte-check": "^4.2.2",
+		"svelte-preprocess": "^6.0.3",
 		"tslib": "2.4.0",
-		"typescript": "4.7.4"
+		"typescript": "5.0.4"
 	}
 }

pnpm-lock.yaml

@@ -16,16 +16,19 @@ importers:
         version: 16.18.126
       '@typescript-eslint/eslint-plugin':
         specifier: 5.29.0
-        version: 5.29.0(@typescript-eslint/parser@5.29.0(eslint@8.57.1)(typescript@4.7.4))(eslint@8.57.1)(typescript@4.7.4)
+        version: 5.29.0(@typescript-eslint/parser@5.29.0(eslint@8.57.1)(typescript@5.0.4))(eslint@8.57.1)(typescript@5.0.4)
       '@typescript-eslint/parser':
         specifier: 5.29.0
-        version: 5.29.0(eslint@8.57.1)(typescript@4.7.4)
+        version: 5.29.0(eslint@8.57.1)(typescript@5.0.4)
       builtin-modules:
         specifier: 3.3.0
         version: 3.3.0
       esbuild:
         specifier: 0.17.3
         version: 0.17.3
+      esbuild-svelte:
+        specifier: ^0.9.3
+        version: 0.9.3(esbuild@0.17.3)(svelte@5.34.8)
       handlebars:
         specifier: ^4.7.8
         version: 4.7.8
@@ -38,15 +41,28 @@ importers:
       sass:
         specifier: ^1.89.2
         version: 1.89.2
+      svelte:
+        specifier: ^5.34.8
+        version: 5.34.8
+      svelte-check:
+        specifier: ^4.2.2
+        version: 4.2.2(svelte@5.34.8)(typescript@5.0.4)
+      svelte-preprocess:
+        specifier: ^6.0.3
+        version: 6.0.3(sass@1.89.2)(svelte@5.34.8)(typescript@5.0.4)
       tslib:
         specifier: 2.4.0
         version: 2.4.0
       typescript:
-        specifier: 4.7.4
+        specifier: 5.0.4
-        version: 4.7.4
+        version: 5.0.4
 
 packages:
 
+  '@ampproject/remapping@2.3.0':
+    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
+    engines: {node: '>=6.0.0'}
+
   '@codemirror/state@6.5.2':
     resolution: {integrity: sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==}
 
@@ -216,6 +232,24 @@ packages:
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
     deprecated: Use @eslint/object-schema instead
 
+  '@jridgewell/gen-mapping@0.3.8':
+    resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/set-array@1.2.1':
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.0':
+    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+
   '@marijn/find-cluster-break@1.0.2':
     resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
 
@@ -316,6 +350,11 @@ packages:
   '@popperjs/core@2.11.8':
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
 
+  '@sveltejs/acorn-typescript@1.0.5':
+    resolution: {integrity: sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==}
+    peerDependencies:
+      acorn: ^8.9.0
+
   '@types/codemirror@5.60.8':
     resolution: {integrity: sha512-VjFgDF/eB+Aklcy15TtOTLQeMjTo07k7KAjql8OK5Dirr7a6sJY4T1uVBDuTVG9VEmn1uUsohOpYnVfgC6/jyw==}
 
@@ -420,6 +459,10 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
+
   array-buffer-byte-length@1.0.2:
     resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
     engines: {node: '>= 0.4'}
@@ -440,6 +483,10 @@ packages:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
 
+  axobject-query@4.1.0:
+    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
+    engines: {node: '>= 0.4'}
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -482,6 +529,10 @@ packages:
     resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
     engines: {node: '>= 14.16.0'}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
 
@@ -585,6 +636,13 @@ packages:
     resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
     engines: {node: '>= 0.4'}
 
+  esbuild-svelte@0.9.3:
+    resolution: {integrity: sha512-CgEcGY1r/d16+aggec3czoFBEBaYIrFOnMxpsO6fWNaNEqHregPN5DLAPZDqrL7rXDNplW+WMu8s3GMq9FqgJA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      esbuild: '>=0.17.0'
+      svelte: '>=4.2.1 <6'
+
   esbuild@0.17.3:
     resolution: {integrity: sha512-9n3AsBRe6sIyOc6kmoXg2ypCLgf3eZSraWFRpnkto+svt8cZNuKTkb1bhQcitBcvIqjNiK7K0J3KPmwGSfkA8g==}
     engines: {node: '>=12'}
@@ -626,6 +684,9 @@ packages:
     deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
     hasBin: true
 
+  esm-env@1.2.2:
+    resolution: {integrity: sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==}
+
   espree@9.6.1:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -634,6 +695,9 @@ packages:
     resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
     engines: {node: '>=0.10'}
 
+  esrap@1.4.9:
+    resolution: {integrity: sha512-3OMlcd0a03UGuZpPeUC1HxR3nA23l+HEyCiZw3b3FumJIN9KphoGzDJKMXI1S72jVS1dsenDyQC0kJlO1U9E1g==}
+
   esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
     engines: {node: '>=4.0'}
@@ -666,6 +730,14 @@ packages:
   fastq@1.19.1:
     resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
 
+  fdir@6.4.6:
+    resolution: {integrity: sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
   file-entry-cache@6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -887,6 +959,9 @@ packages:
     resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
     engines: {node: '>=8'}
 
+  is-reference@3.0.3:
+    resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
+
   is-regex@1.2.1:
     resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
     engines: {node: '>= 0.4'}
@@ -956,6 +1031,9 @@ packages:
     resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==}
     engines: {node: '>=4'}
 
+  locate-character@3.0.0:
+    resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
+
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -963,6 +1041,9 @@ packages:
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
+  magic-string@0.30.17:
+    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -988,6 +1069,10 @@ packages:
   moment@2.29.4:
     resolution: {integrity: sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==}
 
+  mri@1.2.0:
+    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
+    engines: {node: '>=4'}
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -1083,6 +1168,9 @@ packages:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
   picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
@@ -1152,6 +1240,10 @@ packages:
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
+  sade@1.8.1:
+    resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
+    engines: {node: '>=6'}
+
   safe-array-concat@1.1.3:
     resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
     engines: {node: '>=0.4'}
@@ -1297,6 +1389,55 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  svelte-check@4.2.2:
+    resolution: {integrity: sha512-1+31EOYZ7NKN0YDMKusav2hhEoA51GD9Ws6o//0SphMT0ve9mBTsTUEX7OmDMadUP3KjNHsSKtJrqdSaD8CrGQ==}
+    engines: {node: '>= 18.0.0'}
+    hasBin: true
+    peerDependencies:
+      svelte: ^4.0.0 || ^5.0.0-next.0
+      typescript: '>=5.0.0'
+
+  svelte-preprocess@6.0.3:
+    resolution: {integrity: sha512-PLG2k05qHdhmRG7zR/dyo5qKvakhm8IJ+hD2eFRQmMLHp7X3eJnjeupUtvuRpbNiF31RjVw45W+abDwHEmP5OA==}
+    engines: {node: '>= 18.0.0'}
+    peerDependencies:
+      '@babel/core': ^7.10.2
+      coffeescript: ^2.5.1
+      less: ^3.11.3 || ^4.0.0
+      postcss: ^7 || ^8
+      postcss-load-config: '>=3'
+      pug: ^3.0.0
+      sass: ^1.26.8
+      stylus: '>=0.55'
+      sugarss: ^2.0.0 || ^3.0.0 || ^4.0.0
+      svelte: ^4.0.0 || ^5.0.0-next.100 || ^5.0.0
+      typescript: ^5.0.0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      coffeescript:
+        optional: true
+      less:
+        optional: true
+      postcss:
+        optional: true
+      postcss-load-config:
+        optional: true
+      pug:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      typescript:
+        optional: true
+
+  svelte@5.34.8:
+    resolution: {integrity: sha512-TF+8irl7rpj3+fpaLuPRX5BqReTAqckp0Fumxa/mCeK3fo0/MnBb9W/Z2bLwtqj3C3r5Lm6NKIAw7YrgIv1Fwg==}
+    engines: {node: '>=18'}
+
   text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
@@ -1340,9 +1481,9 @@ packages:
     resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
     engines: {node: '>= 0.4'}
 
-  typescript@4.7.4:
+  typescript@5.0.4:
-    resolution: {integrity: sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==}
+    resolution: {integrity: sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==}
-    engines: {node: '>=4.2.0'}
+    engines: {node: '>=12.20'}
     hasBin: true
 
   uglify-js@3.19.3:
@@ -1402,8 +1543,16 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  zimmerframe@1.1.2:
+    resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==}
+
 snapshots:
 
+  '@ampproject/remapping@2.3.0':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.8
+      '@jridgewell/trace-mapping': 0.3.25
+
   '@codemirror/state@6.5.2':
     dependencies:
       '@marijn/find-cluster-break': 1.0.2
@@ -1516,6 +1665,23 @@ snapshots:
 
   '@humanwhocodes/object-schema@2.0.3': {}
 
+  '@jridgewell/gen-mapping@0.3.8':
+    dependencies:
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/set-array@1.2.1': {}
+
+  '@jridgewell/sourcemap-codec@1.5.0': {}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
+
   '@marijn/find-cluster-break@1.0.2': {}
 
   '@nodelib/fs.scandir@2.1.5':
@@ -1593,6 +1759,10 @@ snapshots:
 
   '@popperjs/core@2.11.8': {}
 
+  '@sveltejs/acorn-typescript@1.0.5(acorn@8.15.0)':
+    dependencies:
+      acorn: 8.15.0
+
   '@types/codemirror@5.60.8':
     dependencies:
       '@types/tern': 0.23.9
@@ -1607,33 +1777,33 @@ snapshots:
     dependencies:
       '@types/estree': 1.0.8
 
-  '@typescript-eslint/eslint-plugin@5.29.0(@typescript-eslint/parser@5.29.0(eslint@8.57.1)(typescript@4.7.4))(eslint@8.57.1)(typescript@4.7.4)':
+  '@typescript-eslint/eslint-plugin@5.29.0(@typescript-eslint/parser@5.29.0(eslint@8.57.1)(typescript@5.0.4))(eslint@8.57.1)(typescript@5.0.4)':
     dependencies:
-      '@typescript-eslint/parser': 5.29.0(eslint@8.57.1)(typescript@4.7.4)
+      '@typescript-eslint/parser': 5.29.0(eslint@8.57.1)(typescript@5.0.4)
       '@typescript-eslint/scope-manager': 5.29.0
-      '@typescript-eslint/type-utils': 5.29.0(eslint@8.57.1)(typescript@4.7.4)
+      '@typescript-eslint/type-utils': 5.29.0(eslint@8.57.1)(typescript@5.0.4)
-      '@typescript-eslint/utils': 5.29.0(eslint@8.57.1)(typescript@4.7.4)
+      '@typescript-eslint/utils': 5.29.0(eslint@8.57.1)(typescript@5.0.4)
       debug: 4.4.1
       eslint: 8.57.1
       functional-red-black-tree: 1.0.1
       ignore: 5.3.2
       regexpp: 3.2.0
       semver: 7.7.2
-      tsutils: 3.21.0(typescript@4.7.4)
+      tsutils: 3.21.0(typescript@5.0.4)
     optionalDependencies:
-      typescript: 4.7.4
+      typescript: 5.0.4
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@5.29.0(eslint@8.57.1)(typescript@4.7.4)':
+  '@typescript-eslint/parser@5.29.0(eslint@8.57.1)(typescript@5.0.4)':
     dependencies:
       '@typescript-eslint/scope-manager': 5.29.0
       '@typescript-eslint/types': 5.29.0
-      '@typescript-eslint/typescript-estree': 5.29.0(typescript@4.7.4)
+      '@typescript-eslint/typescript-estree': 5.29.0(typescript@5.0.4)
       debug: 4.4.1
       eslint: 8.57.1
     optionalDependencies:
-      typescript: 4.7.4
+      typescript: 5.0.4
     transitivePeerDependencies:
       - supports-color
 
@@ -1642,20 +1812,20 @@ snapshots:
       '@typescript-eslint/types': 5.29.0
       '@typescript-eslint/visitor-keys': 5.29.0
 
-  '@typescript-eslint/type-utils@5.29.0(eslint@8.57.1)(typescript@4.7.4)':
+  '@typescript-eslint/type-utils@5.29.0(eslint@8.57.1)(typescript@5.0.4)':
     dependencies:
-      '@typescript-eslint/utils': 5.29.0(eslint@8.57.1)(typescript@4.7.4)
+      '@typescript-eslint/utils': 5.29.0(eslint@8.57.1)(typescript@5.0.4)
       debug: 4.4.1
       eslint: 8.57.1
-      tsutils: 3.21.0(typescript@4.7.4)
+      tsutils: 3.21.0(typescript@5.0.4)
     optionalDependencies:
-      typescript: 4.7.4
+      typescript: 5.0.4
     transitivePeerDependencies:
       - supports-color
 
   '@typescript-eslint/types@5.29.0': {}
 
-  '@typescript-eslint/typescript-estree@5.29.0(typescript@4.7.4)':
+  '@typescript-eslint/typescript-estree@5.29.0(typescript@5.0.4)':
     dependencies:
       '@typescript-eslint/types': 5.29.0
       '@typescript-eslint/visitor-keys': 5.29.0
@@ -1663,18 +1833,18 @@ snapshots:
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.7.2
-      tsutils: 3.21.0(typescript@4.7.4)
+      tsutils: 3.21.0(typescript@5.0.4)
     optionalDependencies:
-      typescript: 4.7.4
+      typescript: 5.0.4
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@5.29.0(eslint@8.57.1)(typescript@4.7.4)':
+  '@typescript-eslint/utils@5.29.0(eslint@8.57.1)(typescript@5.0.4)':
     dependencies:
       '@types/json-schema': 7.0.15
       '@typescript-eslint/scope-manager': 5.29.0
       '@typescript-eslint/types': 5.29.0
-      '@typescript-eslint/typescript-estree': 5.29.0(typescript@4.7.4)
+      '@typescript-eslint/typescript-estree': 5.29.0(typescript@5.0.4)
       eslint: 8.57.1
       eslint-scope: 5.1.1
       eslint-utils: 3.0.0(eslint@8.57.1)
@@ -1714,6 +1884,8 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  aria-query@5.3.2: {}
+
   array-buffer-byte-length@1.0.2:
     dependencies:
       call-bound: 1.0.4
@@ -1737,6 +1909,8 @@ snapshots:
     dependencies:
       possible-typed-array-names: 1.1.0
 
+  axobject-query@4.1.0: {}
+
   balanced-match@1.0.2: {}
 
   brace-expansion@1.1.12:
@@ -1784,6 +1958,8 @@ snapshots:
     dependencies:
       readdirp: 4.1.2
 
+  clsx@2.1.1: {}
+
   color-convert@1.9.3:
     dependencies:
       color-name: 1.1.3
@@ -1949,6 +2125,12 @@ snapshots:
       is-date-object: 1.1.0
       is-symbol: 1.1.1
 
+  esbuild-svelte@0.9.3(esbuild@0.17.3)(svelte@5.34.8):
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.25
+      esbuild: 0.17.3
+      svelte: 5.34.8
+
   esbuild@0.17.3:
     optionalDependencies:
       '@esbuild/android-arm': 0.17.3
@@ -2040,6 +2222,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  esm-env@1.2.2: {}
+
   espree@9.6.1:
     dependencies:
       acorn: 8.15.0
@@ -2050,6 +2234,10 @@ snapshots:
     dependencies:
       estraverse: 5.3.0
 
+  esrap@1.4.9:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
   esrecurse@4.3.0:
     dependencies:
       estraverse: 5.3.0
@@ -2078,6 +2266,8 @@ snapshots:
     dependencies:
       reusify: 1.1.0
 
+  fdir@6.4.6: {}
+
   file-entry-cache@6.0.1:
     dependencies:
       flat-cache: 3.2.0
@@ -2316,6 +2506,10 @@ snapshots:
 
   is-path-inside@3.0.3: {}
 
+  is-reference@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+
   is-regex@1.2.1:
     dependencies:
       call-bound: 1.0.4
@@ -2387,12 +2581,18 @@ snapshots:
       pify: 3.0.0
       strip-bom: 3.0.0
 
+  locate-character@3.0.0: {}
+
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
 
   lodash.merge@4.6.2: {}
 
+  magic-string@0.30.17:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
   math-intrinsics@1.1.0: {}
 
   memorystream@0.3.1: {}
@@ -2412,6 +2612,8 @@ snapshots:
 
   moment@2.29.4: {}
 
+  mri@1.2.0: {}
+
   ms@2.1.3: {}
 
   natural-compare@1.4.0: {}
@@ -2514,6 +2716,8 @@ snapshots:
 
   path-type@4.0.0: {}
 
+  picocolors@1.1.1: {}
+
   picomatch@2.3.1: {}
 
   pidtree@0.3.1: {}
@@ -2576,6 +2780,10 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
+  sade@1.8.1:
+    dependencies:
+      mri: 1.2.0
+
   safe-array-concat@1.1.3:
     dependencies:
       call-bind: 1.0.8
@@ -2746,6 +2954,42 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  svelte-check@4.2.2(svelte@5.34.8)(typescript@5.0.4):
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.25
+      chokidar: 4.0.3
+      fdir: 6.4.6
+      picocolors: 1.1.1
+      sade: 1.8.1
+      svelte: 5.34.8
+      typescript: 5.0.4
+    transitivePeerDependencies:
+      - picomatch
+
+  svelte-preprocess@6.0.3(sass@1.89.2)(svelte@5.34.8)(typescript@5.0.4):
+    dependencies:
+      svelte: 5.34.8
+    optionalDependencies:
+      sass: 1.89.2
+      typescript: 5.0.4
+
+  svelte@5.34.8:
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@sveltejs/acorn-typescript': 1.0.5(acorn@8.15.0)
+      '@types/estree': 1.0.8
+      acorn: 8.15.0
+      aria-query: 5.3.2
+      axobject-query: 4.1.0
+      clsx: 2.1.1
+      esm-env: 1.2.2
+      esrap: 1.4.9
+      is-reference: 3.0.3
+      locate-character: 3.0.0
+      magic-string: 0.30.17
+      zimmerframe: 1.1.2
+
   text-table@0.2.0: {}
 
   to-regex-range@5.0.1:
@@ -2756,10 +3000,10 @@ snapshots:
 
   tslib@2.4.0: {}
 
-  tsutils@3.21.0(typescript@4.7.4):
+  tsutils@3.21.0(typescript@5.0.4):
     dependencies:
       tslib: 1.14.1
-      typescript: 4.7.4
+      typescript: 5.0.4
 
   type-check@0.4.0:
     dependencies:
@@ -2800,7 +3044,7 @@ snapshots:
       possible-typed-array-names: 1.1.0
       reflect.getprototypeof: 1.0.10
 
-  typescript@4.7.4: {}
+  typescript@5.0.4: {}
 
   uglify-js@3.19.3:
     optional: true
@@ -2879,3 +3123,5 @@ snapshots:
   wrappy@1.0.2: {}
 
   yocto-queue@0.1.0: {}
+
+  zimmerframe@1.1.2: {}

sass/settings.scss

@@ -1,5 +0,0 @@
-.obt-settings {
-	.search-input-container {
-		width: 100%;
-	}
-}

sass/styles.scss

@@ -1,4 +0,0 @@
-@use "views/goodreads-search.scss";
-@use "views/goodreads-search-suggest.scss";
-@use "views/reading-progress.scss";
-@use "settings.scss";

sass/views/goodreads-search-suggest.scss

@@ -1,29 +0,0 @@
-.obt-goodreads-search-suggest {
-	&__item {
-		display: flex;
-		align-items: center;
-		margin-bottom: 10px;
-	}
-
-	&__cover {
-		max-width: 100px;
-		max-height: 100px;
-		margin-right: 10px;
-		object-fit: cover;
-		border-radius: 3px;
-	}
-
-	&__info {
-		flex-grow: 1;
-	}
-
-	&__title {
-		color: var(--text-normal);
-		font-size: var(--font-ui-medium);
-	}
-
-	&__subtitle {
-		color: var(--text-muted);
-		font-size: var(--font-ui-small);
-	}
-}

sass/views/goodreads-search.scss

@@ -1,9 +0,0 @@
-.obt-goodreads-search {
-	&__input {
-		padding-bottom: 18px;
-
-		input {
-			width: 100%;
-		}
-	}
-}

sass/views/reading-progress.scss

@@ -1,32 +0,0 @@
-.obt-reading-progress {
-	&__desc {
-		margin-bottom: 1rem;
-		font-size: var(--text-ui-smaller);
-		color: var(--text-muted);
-
-		p {
-			margin: 0;
-		}
-	}
-
-	&__input {
-		padding-bottom: 18px;
-
-		input {
-			width: 100%;
-		}
-	}
-
-	&__pct {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-		padding-bottom: 18px;
-	}
-
-	&__toggle {
-		display: flex;
-		align-items: center;
-		flex-grow: 1;
-	}
-}

src/components/GoodreadsSearch.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { searchBooks, type SearchResult } from "@data-sources/goodreads";
+
+    interface Props {
+        onSearch: (results: SearchResult[]) => void;
+        onError: (error: Error) => void;
+    }
+
+    let {
+        onSearch,
+        onError
+    }: Props = $props();
+
+    let query = $state("");
+
+    async function onkeydown(event: KeyboardEvent) {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            try {
+                const results = await searchBooks(query);
+                if (results.length === 0) {
+                    onError(new Error("No results found."));
+                    return;
+                }
+                onSearch(results);
+            } catch (error) {
+                onError(error as Error);
+            }
+        }
+    }
+</script>
+
+<div class="obt-goodreads-search">
+    <h2>Goodreads Search</h2>
+    <input type="text" placeholder="Search for books..." bind:value={query} {onkeydown} />
+</div>
+
+<style lang="scss">
+    .obt-goodreads-search {
+        padding-bottom: var(--size-4-4);
+        
+        input {
+            width: 100%;
+        }
+    }
+</style>

src/components/GoodreadsSearchSuggestion.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import type { SearchResult } from "@data-sources/goodreads";
+
+    interface Props {
+        searchResult: SearchResult;
+    }
+
+    let { searchResult }: Props = $props();
+</script>
+
+<div class="obt-goodreads-search-suggestion">
+    <img class="cover" src={searchResult.coverImageUrl} alt={searchResult.title} />
+    <div class="details">
+        <h3 class="title">{searchResult.title}</h3>
+        <p class="extra-details">
+            <span class="authors">{searchResult.authors.join(", ")}</span>
+            {#if searchResult.publicationYear > 0}
+            <span class="publicationYear">({searchResult.publicationYear})</span>
+            {/if}
+        </p>
+    </div>
+</div>
+
+<style lang="scss">
+    .obt-goodreads-search-suggestion {
+        display: flex;
+        align-items: center;
+
+        img.cover {
+            max-width: 100px;
+            max-height: 100px;
+            margin-right: var(--size-4-2);
+            object-fit: cover;
+            border-radius: var(--radius-s);
+        }
+
+        .details {
+            flex-grow: 1;
+
+            .title {
+                color: var(--text-normal);
+                font-size: var(--font-ui-medium);
+            }
+
+            .extra-details {
+                color: var(--text-muted);
+                font-size: var(--font-ui-small);
+                display: flex;
+                gap: var(--size-4-1);
+            }
+        }
+    }
+</style>

src/components/ReadingProgress.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { Notice } from "obsidian";
+
+    interface Props {
+        pageLength: number;
+        onSubmit: (pageNumber: number) => void;
+    }
+    let { pageLength, onSubmit }: Props = $props();
+
+    let value = $state(0);
+    let mode: "page-number" | "percentage" = $state("page-number");
+
+    const label = $derived(mode === "page-number" ? "Page Number" : "Percentage");
+    const placeholder = $derived(
+        mode === "page-number" ? "Enter page number" : "Enter percentage (0-100)"
+    );
+    const min = $derived(0);
+    const max = $derived(
+        mode === "page-number" ? pageLength : 100
+    );
+
+    function onsubmit(ev: SubmitEvent) {
+        ev.preventDefault();
+        if (value < min || value > max) {
+            new Notice(`Value must be between ${min} and ${max}.`);
+            return;
+        }
+
+        onSubmit(mode === "page-number" ? value : Math.round((value / 100) * pageLength));
+    }
+</script>
+
+<div class="obt-reading-progress">
+    <h2>Log Reading Progress</h2>
+    <form {onsubmit}>
+        <div class="value-field">
+            <label for="value">{label}</label>
+            <input id="value" type="number" {placeholder} {min} {max} bind:value />
+        </div>
+        <div class="mode-field">
+            <label class="mode-field-option page-number">
+                <span>Page Number</span>
+                <input name="mode" type="radio" value="page-number" bind:group={mode} />
+            </label>
+            <label class="mode-field-option percentage">
+                <span>Percentage</span>
+                <input name="mode" type="radio" value="percentage" bind:group={mode} />
+            </label>
+        </div>
+        <button type="submit">Submit</button>
+    </form>
+</div>
+
+<style lang="scss">
+    .obt-reading-progress {
+        padding-bottom: var(--size-4-4);
+
+        h2 {
+            margin-bottom: var(--size-4-6);
+        }
+
+        form {
+            display: flex;
+            flex-direction: column;
+            gap: var(--size-4-4);
+
+            .value-field {
+                display: flex;
+                flex-direction: column;
+                align-items: stretch;
+                gap: var(--size-4-2);
+                width: 100%;
+            }
+
+            .mode-field {
+                width: 100%;
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+
+                .mode-field-option {
+                    text-align: center;
+                    padding: var(--size-4-2);
+                    background-color: var(--interactive-normal);
+                    border: var(--border-width) solid var(--background-modifier-border);
+                    border-radius: var(--radius-m);
+
+                    &:has(input:checked) {
+                        background-color: var(--interactive-accent);
+                    }
+
+                    &:hover {
+                        background-color: var(--interactive-hover);
+                    }
+
+                    input {
+                        display: none;
+                    }
+
+                    &.page-number {
+                        border-top-right-radius: 0;
+                        border-bottom-right-radius: 0;
+                    }
+
+                    &.percentage {
+                        border-top-left-radius: 0;
+                        border-bottom-left-radius: 0;
+                    }
+                }
+            }
+        }
+    }
+</style>

src/main.ts

@@ -1,10 +1,10 @@
 import { Notice, Plugin, requestUrl } from "obsidian";
 import {
-	BookTrackerPluginSettings,
+	type BookTrackerPluginSettings,
 	BookTrackerSettingTab,
 	DEFAULT_SETTINGS,
 } from "./settings/settings";
-import { getBookByLegacyId } from "@data-sources/goodreads";
+import { getBookByLegacyId, type SearchResult } from "@data-sources/goodreads";
 import { Templater } from "./utils/templater";
 import { GoodreadsSearchModal } from "@views/goodreads-search-modal";
 import { GoodreadsSearchSuggestModal } from "@views/goodreads-search-suggest-modal";
@@ -154,7 +154,16 @@ export default class BookTrackerPlugin extends Plugin {
 	}
 
 	async searchGoodreads(): Promise<void> {
-		const results = await GoodreadsSearchModal.createAndOpen(this.app);
+		let results: SearchResult[];
+		try {
+			results = await GoodreadsSearchModal.createAndOpen(this.app);
+		} catch (error) {
+			console.error("Failed to search Goodreads:", error);
+			new Notice(
+				"Failed to search Goodreads. Check console for details."
+			);
+			return;
+		}
 		const selectedBook = await GoodreadsSearchSuggestModal.createAndOpen(
 			this.app,
 			results
@@ -230,7 +239,10 @@ export default class BookTrackerPlugin extends Plugin {
 			return;
 		}
 
-		const pageNumber = await ReadingProgressModal.createAndOpen(this.app);
+		const pageNumber = await ReadingProgressModal.createAndOpen(
+			this.app,
+			pageLength
+		);
 
 		if (pageNumber <= 0 || pageNumber > pageLength) {
 			new Notice(

src/views/goodreads-search-modal.ts

@@ -1,9 +1,10 @@
-import { searchBooks } from "@data-sources/goodreads";
+import GoodreadsSearch from "@components/GoodreadsSearch.svelte";
-import { SearchResult } from "@data-sources/goodreads";
+import { type SearchResult } from "@data-sources/goodreads";
-import { App, Modal, Notice, TextComponent } from "obsidian";
+import { App, Modal, Notice } from "obsidian";
+import { mount, unmount } from "svelte";
 
 export class GoodreadsSearchModal extends Modal {
-	private query: string;
+	private component: ReturnType<typeof GoodreadsSearch> | undefined;
 
 	constructor(
 		app: App,
@@ -12,48 +13,27 @@ export class GoodreadsSearchModal extends Modal {
 		super(app);
 	}
 
-	async doSearch(): Promise<void> {
+	onOpen() {
-		if (!this.query || this.query.trim() === "") {
+		this.component = mount(GoodreadsSearch, {
-			this.onSearch(new Error("Search query cannot be empty."), []);
+			target: this.contentEl,
-			this.close();
+			props: {
-			return;
+				onError(error) {
-		}
+					this.onSearch(error, []);
-
+					this.close();
-		try {
+				},
-			const results = await searchBooks(this.query);
+				onSearch: (results: SearchResult[]) => {
-			if (results.length === 0) {
+					this.onSearch(null, results);
-				this.onSearch(
+					this.close();
-					new Error("No results found for the given query."),
+				},
-					[]
+			},
-				);
+		});
-				return;
-			}
-
-			this.onSearch(null, results);
-		} catch (error) {
-			this.onSearch(error, []);
-		} finally {
-			this.close();
-		}
 	}
 
-	onOpen(): void {
+	onClose() {
-		const { contentEl } = this;
+		if (this.component) {
-		contentEl.createEl("h2", { text: "Goodreads Search" });
+			unmount(this.component);
-		contentEl.createDiv({ cls: "obt-goodreads-search__input" }, (el) => {
+			this.component = undefined;
-			new TextComponent(el)
+		}
-				.setValue(this.query || "")
-				.setPlaceholder("Search for books on Goodreads")
-				.onChange((value) => {
-					this.query = value;
-				})
-				.inputEl.addEventListener("keydown", (event) => {
-					if (event.key === "Enter" && !event.isComposing) {
-						event.preventDefault();
-						this.doSearch();
-					}
-				});
-		});
 	}
 
 	static createAndOpen(app: App): Promise<SearchResult[]> {

src/views/goodreads-search-suggest-modal.ts

@@ -1,5 +1,7 @@
-import { SearchResult } from "@data-sources/goodreads";
+import GoodreadsSearchSuggestion from "@components/GoodreadsSearchSuggestion.svelte";
+import { type SearchResult } from "@data-sources/goodreads";
 import { App, Notice, SuggestModal } from "obsidian";
+import { mount } from "svelte";
 
 export class GoodreadsSearchSuggestModal extends SuggestModal<SearchResult> {
 	constructor(
@@ -14,35 +16,11 @@ export class GoodreadsSearchSuggestModal extends SuggestModal<SearchResult> {
 		return this.results;
 	}
 
-	renderSuggestion(value: SearchResult, el: HTMLElement): void {
+	renderSuggestion(searchResult: SearchResult, el: HTMLElement): void {
-		el.addClass("obt-goodreads-search-suggest__item");
+		mount(GoodreadsSearchSuggestion, {
-		el.createEl("img", {
+			target: el,
-			cls: "obt-goodreads-search-suggest__cover",
+			props: { searchResult },
-			attr: {
-				src: value.coverImageUrl,
-				alt: `Cover of ${value.title}`,
-			},
 		});
-
-		el.createDiv(
-			{ cls: "obt-goodreads-search-suggest__info" },
-			(infoEl) => {
-				infoEl.createEl("h2", {
-					text: value.title,
-					cls: "obt-goodreads-search-suggest__title",
-				});
-
-				let subtitle = value.authors.join(", ");
-				if (value.publicationYear > 0) {
-					subtitle += ` (${value.publicationYear})`;
-				}
-
-				infoEl.createEl("h3", {
-					text: subtitle,
-					cls: "obt-goodreads-search-suggest__subtitle",
-				});
-			}
-		);
 	}
 
 	onChooseSuggestion(

src/views/reading-progress-modal.ts

@@ -1,91 +1,47 @@
-import { App, Modal, ToggleComponent } from "obsidian";
+import ReadingProgress from "@components/ReadingProgress.svelte";
+import { App, Modal } from "obsidian";
+import { mount, unmount } from "svelte";
 
 export class ReadingProgressModal extends Modal {
-	private value: number;
+	private component: ReturnType<typeof ReadingProgress> | undefined;
-	private percentage: boolean = false;
 
 	constructor(
 		app: App,
+		private readonly pageLength: number,
 		private readonly onSubmit: (pageNumber: number) => void
 	) {
 		super(app);
-		this.value = 0;
 	}
 
 	onOpen(): void {
-		const { contentEl } = this;
+		this.component = mount(ReadingProgress, {
-		contentEl.classList.add("obt-reading-progress");
+			target: this.contentEl,
-		contentEl.createEl("h2", { text: "Enter Reading Progress" });
+			props: {
-
+				pageLength: this.pageLength,
-		contentEl.createDiv({ cls: "obt-reading-progress__desc" }, (descEl) => {
+				onSubmit: (pageNumber) => {
-			descEl.createEl("p", {
+					this.onSubmit(pageNumber);
-				text: "Enter the page number or percentage of the book you have read.",
+					this.close();
-			});
+				},
-			descEl.createEl("p", {
+			},
-				text: "You can toggle between page number and percentage input.",
-			});
-		});
-
-		const inputDiv = contentEl.createDiv({
-			cls: "obt-reading-progress__input",
-		});
-
-		const inputEl = inputDiv.createEl("input", {
-			type: "number",
-			placeholder: "Page Number",
-		});
-
-		inputEl.addEventListener("change", (ev) => {
-			this.value = Math.max(1, parseInt(inputEl.value, 10));
-			(ev.target as HTMLInputElement).value = this.value.toString();
-		});
-
-		inputEl.addEventListener("keydown", (event) => {
-			if (event.key === "Enter") {
-				event.preventDefault();
-				this.onSubmit(this.value);
-				this.close();
-			}
-		});
-
-		contentEl.createDiv({ cls: "obt-reading-progress__pct" }, (pctDiv) => {
-			pctDiv.createEl("label", { text: "Percentage" });
-			pctDiv.createDiv(
-				{ cls: "obt-reading-progress__toggle" },
-				(toggleDiv) => {
-					new ToggleComponent(toggleDiv)
-						.setValue(this.percentage)
-						.onChange((value) => {
-							this.percentage = value;
-							if (value) {
-								inputEl.setAttribute(
-									"placeholder",
-									"Percentage (%)"
-								);
-								inputEl.setAttribute("max", "100");
-							} else {
-								inputEl.setAttribute(
-									"placeholder",
-									"Page Number"
-								);
-								inputEl.removeAttribute("max");
-							}
-						});
-				}
-			);
 		});
 	}
 
 	onClose(): void {
-		const { contentEl } = this;
+		if (this.component) {
-		contentEl.empty();
+			unmount(this.component);
+			this.component = undefined;
+		}
 	}
 
-	static createAndOpen(app: App): Promise<number> {
+	static createAndOpen(app: App, pageLength: number): Promise<number> {
 		return new Promise((resolve) => {
-			const modal = new ReadingProgressModal(app, (pageNumber) => {
+			const modal = new ReadingProgressModal(
-				resolve(pageNumber);
+				app,
-			});
+				pageLength,
+				(pageNumber) => {
+					resolve(pageNumber);
+				}
+			);
 			modal.open();
 		});
 	}

styles.css

@@ -1,60 +1,3 @@
-.obt-goodreads-search__input {
-  padding-bottom: 18px;
-}
-.obt-goodreads-search__input input {
-  width: 100%;
-}
-
-.obt-goodreads-search-suggest__item {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-}
-.obt-goodreads-search-suggest__cover {
-  max-width: 100px;
-  max-height: 100px;
-  margin-right: 10px;
-  object-fit: cover;
-  border-radius: 3px;
-}
-.obt-goodreads-search-suggest__info {
-  flex-grow: 1;
-}
-.obt-goodreads-search-suggest__title {
-  color: var(--text-normal);
-  font-size: var(--font-ui-medium);
-}
-.obt-goodreads-search-suggest__subtitle {
-  color: var(--text-muted);
-  font-size: var(--font-ui-small);
-}
-
-.obt-reading-progress__desc {
-  margin-bottom: 1rem;
-  font-size: var(--text-ui-smaller);
-  color: var(--text-muted);
-}
-.obt-reading-progress__desc p {
-  margin: 0;
-}
-.obt-reading-progress__input {
-  padding-bottom: 18px;
-}
-.obt-reading-progress__input input {
-  width: 100%;
-}
-.obt-reading-progress__pct {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding-bottom: 18px;
-}
-.obt-reading-progress__toggle {
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-}
-
 .obt-settings .search-input-container {
   width: 100%;
 }

tsconfig.json

@@ -11,6 +11,8 @@
     "importHelpers": true,
     "isolatedModules": true,
     "strictNullChecks": true,
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true,
     "lib": [
       "DOM",
       "ES5",
@@ -18,6 +20,7 @@
       "ES7"
     ],
     "paths": {
+      "@components/*": ["src/components/*"],
       "@data-sources/*": ["src/data-sources/*"],
       "@settings/*": ["src/settings/*"],
       "@utils/*": ["src/utils/*"],
@@ -26,6 +29,7 @@
     }
   },
   "include": [
-    "**/*.ts"
+    "**/*.ts",
+    "**/*.svelte"
   ]
 }