add svelte UI
This commit is contained in:
Nystik
parent
4cba51f562
commit
408eb7fb54
16 changed files with 1403 additions and 163 deletions
17
build-ui.js
Normal file
17
build-ui.js
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
const esbuild = require("esbuild");
|
||||||
|
const sveltePlugin = require("esbuild-svelte");
|
||||||
|
const path = require("path");
|
||||||
|
|
||||||
|
esbuild.build({
|
||||||
|
entryPoints: [path.join(__dirname, "ui", "index.js")],
|
||||||
|
bundle: true,
|
||||||
|
outfile: path.join(__dirname, "dist", "ignis-ui.js"),
|
||||||
|
format: "iife",
|
||||||
|
globalName: "IgnisUI",
|
||||||
|
platform: "browser",
|
||||||
|
target: ["chrome90"],
|
||||||
|
mainFields: ["svelte", "browser", "module", "main"],
|
||||||
|
conditions: ["svelte", "browser"],
|
||||||
|
plugins: [sveltePlugin({ compilerOptions: { css: "injected" } })],
|
||||||
|
logLevel: "info",
|
||||||
|
}).catch(() => process.exit(1));
|
||||||
249
package-lock.json
generated
249
package-lock.json
generated
|
|
@ -1,11 +1,11 @@
|
||||||
{
|
{
|
||||||
"name": "obsidian-bridge",
|
"name": "ignis",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "obsidian-bridge",
|
"name": "ignis",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"chokidar": "^3.6.0",
|
"chokidar": "^3.6.0",
|
||||||
|
|
@ -15,7 +15,24 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"esbuild": "^0.20.0",
|
"esbuild": "^0.20.0",
|
||||||
"path-browserify": "^1.0.1"
|
"esbuild-svelte": "^0.9.4",
|
||||||
|
"lucide-svelte": "^0.577.0",
|
||||||
|
"path-browserify": "^1.0.1",
|
||||||
|
"svelte": "^4.2.20"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@ampproject/remapping": {
|
||||||
|
"version": "2.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
|
||||||
|
"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"@jridgewell/gen-mapping": "^0.3.5",
|
||||||
|
"@jridgewell/trace-mapping": "^0.3.24"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/aix-ppc64": {
|
"node_modules/@esbuild/aix-ppc64": {
|
||||||
|
|
@ -409,6 +426,52 @@
|
||||||
"node": ">=12"
|
"node": ">=12"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@jridgewell/gen-mapping": {
|
||||||
|
"version": "0.3.13",
|
||||||
|
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
|
||||||
|
"integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@jridgewell/sourcemap-codec": "^1.5.0",
|
||||||
|
"@jridgewell/trace-mapping": "^0.3.24"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@jridgewell/resolve-uri": {
|
||||||
|
"version": "3.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
|
||||||
|
"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@jridgewell/sourcemap-codec": {
|
||||||
|
"version": "1.5.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
|
||||||
|
"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/@jridgewell/trace-mapping": {
|
||||||
|
"version": "0.3.31",
|
||||||
|
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
|
||||||
|
"integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@jridgewell/resolve-uri": "^3.1.0",
|
||||||
|
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@types/estree": {
|
||||||
|
"version": "1.0.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
|
||||||
|
"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/accepts": {
|
"node_modules/accepts": {
|
||||||
"version": "1.3.8",
|
"version": "1.3.8",
|
||||||
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
|
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
|
||||||
|
|
@ -422,6 +485,19 @@
|
||||||
"node": ">= 0.6"
|
"node": ">= 0.6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/acorn": {
|
||||||
|
"version": "8.16.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
|
||||||
|
"integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"bin": {
|
||||||
|
"acorn": "bin/acorn"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.4.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/anymatch": {
|
"node_modules/anymatch": {
|
||||||
"version": "3.1.3",
|
"version": "3.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
|
||||||
|
|
@ -435,12 +511,32 @@
|
||||||
"node": ">= 8"
|
"node": ">= 8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/aria-query": {
|
||||||
|
"version": "5.3.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
|
||||||
|
"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/array-flatten": {
|
"node_modules/array-flatten": {
|
||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
|
||||||
"integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
|
"integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/axobject-query": {
|
||||||
|
"version": "4.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
|
||||||
|
"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/binary-extensions": {
|
"node_modules/binary-extensions": {
|
||||||
"version": "2.3.0",
|
"version": "2.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
|
||||||
|
|
@ -551,6 +647,20 @@
|
||||||
"fsevents": "~2.3.2"
|
"fsevents": "~2.3.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/code-red": {
|
||||||
|
"version": "1.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
|
||||||
|
"integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@jridgewell/sourcemap-codec": "^1.4.15",
|
||||||
|
"@types/estree": "^1.0.1",
|
||||||
|
"acorn": "^8.10.0",
|
||||||
|
"estree-walker": "^3.0.3",
|
||||||
|
"periscopic": "^3.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/content-disposition": {
|
"node_modules/content-disposition": {
|
||||||
"version": "0.5.4",
|
"version": "0.5.4",
|
||||||
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
|
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
|
||||||
|
|
@ -604,6 +714,20 @@
|
||||||
"url": "https://opencollective.com/express"
|
"url": "https://opencollective.com/express"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/css-tree": {
|
||||||
|
"version": "2.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
|
||||||
|
"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"mdn-data": "2.0.30",
|
||||||
|
"source-map-js": "^1.0.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/debug": {
|
"node_modules/debug": {
|
||||||
"version": "2.6.9",
|
"version": "2.6.9",
|
||||||
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
|
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
|
||||||
|
|
@ -730,12 +854,39 @@
|
||||||
"@esbuild/win32-x64": "0.20.2"
|
"@esbuild/win32-x64": "0.20.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/esbuild-svelte": {
|
||||||
|
"version": "0.9.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/esbuild-svelte/-/esbuild-svelte-0.9.4.tgz",
|
||||||
|
"integrity": "sha512-v/a0GjkKN06nal2QLluxjk2GXsei3fdtjIuHRa6pVnri5rQBZ6pj4a2WwjLfRojgRsLwDHl4xSeZ1BeUHsqQrw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@jridgewell/trace-mapping": "^0.3.19"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"esbuild": ">=0.17.0",
|
||||||
|
"svelte": ">=4.2.1 <6"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/escape-html": {
|
"node_modules/escape-html": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
|
||||||
"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
|
"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/estree-walker": {
|
||||||
|
"version": "3.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
|
||||||
|
"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/estree": "^1.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/etag": {
|
"node_modules/etag": {
|
||||||
"version": "1.8.1",
|
"version": "1.8.1",
|
||||||
"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
|
"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
|
||||||
|
|
@ -1036,6 +1187,43 @@
|
||||||
"node": ">=0.12.0"
|
"node": ">=0.12.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/is-reference": {
|
||||||
|
"version": "3.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
|
||||||
|
"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/estree": "^1.0.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/locate-character": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
|
||||||
|
"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/lucide-svelte": {
|
||||||
|
"version": "0.577.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lucide-svelte/-/lucide-svelte-0.577.0.tgz",
|
||||||
|
"integrity": "sha512-0i88o57KsaHWnc80J57fY99CWzlZsSdtH5kKjLUJa7z8dum/9/AbINNLzJ7NiRFUdOgMnfAmJt8jFbW2zeC5qQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "ISC",
|
||||||
|
"peerDependencies": {
|
||||||
|
"svelte": "^3 || ^4 || ^5.0.0-next.42"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/magic-string": {
|
||||||
|
"version": "0.30.21",
|
||||||
|
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
|
||||||
|
"integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@jridgewell/sourcemap-codec": "^1.5.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/math-intrinsics": {
|
"node_modules/math-intrinsics": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||||
|
|
@ -1045,6 +1233,13 @@
|
||||||
"node": ">= 0.4"
|
"node": ">= 0.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/mdn-data": {
|
||||||
|
"version": "2.0.30",
|
||||||
|
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
|
||||||
|
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "CC0-1.0"
|
||||||
|
},
|
||||||
"node_modules/media-typer": {
|
"node_modules/media-typer": {
|
||||||
"version": "0.3.0",
|
"version": "0.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
||||||
|
|
@ -1184,6 +1379,18 @@
|
||||||
"integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
|
"integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/periscopic": {
|
||||||
|
"version": "3.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
|
||||||
|
"integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/estree": "^1.0.0",
|
||||||
|
"estree-walker": "^3.0.0",
|
||||||
|
"is-reference": "^3.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/picomatch": {
|
"node_modules/picomatch": {
|
||||||
"version": "2.3.1",
|
"version": "2.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
|
||||||
|
|
@ -1409,6 +1616,16 @@
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/source-map-js": {
|
||||||
|
"version": "1.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||||
|
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "BSD-3-Clause",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/statuses": {
|
"node_modules/statuses": {
|
||||||
"version": "2.0.2",
|
"version": "2.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
|
||||||
|
|
@ -1418,6 +1635,32 @@
|
||||||
"node": ">= 0.8"
|
"node": ">= 0.8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/svelte": {
|
||||||
|
"version": "4.2.20",
|
||||||
|
"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.20.tgz",
|
||||||
|
"integrity": "sha512-eeEgGc2DtiUil5ANdtd8vPwt9AgaMdnuUFnPft9F5oMvU/FHu5IHFic+p1dR/UOB7XU2mX2yHW+NcTch4DCh5Q==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@ampproject/remapping": "^2.2.1",
|
||||||
|
"@jridgewell/sourcemap-codec": "^1.4.15",
|
||||||
|
"@jridgewell/trace-mapping": "^0.3.18",
|
||||||
|
"@types/estree": "^1.0.1",
|
||||||
|
"acorn": "^8.9.0",
|
||||||
|
"aria-query": "^5.3.0",
|
||||||
|
"axobject-query": "^4.0.0",
|
||||||
|
"code-red": "^1.0.3",
|
||||||
|
"css-tree": "^2.3.1",
|
||||||
|
"estree-walker": "^3.0.3",
|
||||||
|
"is-reference": "^3.0.1",
|
||||||
|
"locate-character": "^3.0.0",
|
||||||
|
"magic-string": "^0.30.4",
|
||||||
|
"periscopic": "^3.1.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=16"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/to-regex-range": {
|
"node_modules/to-regex-range": {
|
||||||
"version": "5.0.1",
|
"version": "5.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
|
||||||
|
|
|
||||||
15
package.json
15
package.json
|
|
@ -4,18 +4,23 @@
|
||||||
"private": true,
|
"private": true,
|
||||||
"description": "An Electron shim and server bridge for running Obsidian in a browser.",
|
"description": "An Electron shim and server bridge for running Obsidian in a browser.",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
"build:ui": "node build-ui.js",
|
||||||
"build:shims": "node build.js",
|
"build:shims": "node build.js",
|
||||||
|
"build": "npm run build:ui && npm run build:shims",
|
||||||
"dev:server": "node server/index.js",
|
"dev:server": "node server/index.js",
|
||||||
"dev": "npm run build:shims && npm run dev:server"
|
"dev": "npm run build && npm run dev:server"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"express": "^4.21.0",
|
|
||||||
"ws": "^8.16.0",
|
|
||||||
"chokidar": "^3.6.0",
|
"chokidar": "^3.6.0",
|
||||||
"cors": "^2.8.5"
|
"cors": "^2.8.5",
|
||||||
|
"express": "^4.21.0",
|
||||||
|
"ws": "^8.16.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"esbuild": "^0.20.0",
|
"esbuild": "^0.20.0",
|
||||||
"path-browserify": "^1.0.1"
|
"esbuild-svelte": "^0.9.4",
|
||||||
|
"lucide-svelte": "^0.577.0",
|
||||||
|
"path-browserify": "^1.0.1",
|
||||||
|
"svelte": "^4.2.20"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,7 @@ if [ ! -f "$OBSIDIAN_DIR/index.html" ]; then
|
||||||
echo "[ignis] Patching..."
|
echo "[ignis] Patching..."
|
||||||
node /app/scripts/patch-obsidian.js "$OBSIDIAN_DIR"
|
node /app/scripts/patch-obsidian.js "$OBSIDIAN_DIR"
|
||||||
|
|
||||||
|
cp /app/dist/ignis-ui.js "$OBSIDIAN_DIR/ignis-ui.js"
|
||||||
cp /app/dist/shim-loader.js "$OBSIDIAN_DIR/shim-loader.js"
|
cp /app/dist/shim-loader.js "$OBSIDIAN_DIR/shim-loader.js"
|
||||||
cp /app/images/favicon.png "$OBSIDIAN_DIR/favicon.png"
|
cp /app/images/favicon.png "$OBSIDIAN_DIR/favicon.png"
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -33,9 +33,10 @@ function patchHtml(filePath) {
|
||||||
' <link rel="icon" type="image/png" href="favicon.png">\n</head>',
|
' <link rel="icon" type="image/png" href="favicon.png">\n</head>',
|
||||||
);
|
);
|
||||||
|
|
||||||
// Inject shim-loader before the first <script> tag
|
// Inject ignis-ui and shim-loader before the first <script> tag
|
||||||
html = html.replace(
|
html = html.replace(
|
||||||
'<script type="text/javascript"',
|
'<script type="text/javascript"',
|
||||||
|
'<script type="text/javascript" src="ignis-ui.js"></script>\n' +
|
||||||
'<script type="text/javascript" src="shim-loader.js"></script>\n' +
|
'<script type="text/javascript" src="shim-loader.js"></script>\n' +
|
||||||
'<script type="text/javascript"',
|
'<script type="text/javascript"',
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -89,6 +89,40 @@ router.post("/create", async (req, res) => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// POST /api/vault/rename { vault, name } - rename a vault
|
||||||
|
router.post("/rename", async (req, res) => {
|
||||||
|
const vaultId = req.body?.vault;
|
||||||
|
const newName = req.body?.name;
|
||||||
|
|
||||||
|
if (!newName || /[\/\\:*?"<>|]/.test(newName)) {
|
||||||
|
return res.status(400).json({ error: "Invalid vault name" });
|
||||||
|
}
|
||||||
|
|
||||||
|
const vaultPath = config.getVaultPath(vaultId);
|
||||||
|
|
||||||
|
if (!vaultPath) {
|
||||||
|
return res.status(404).json({ error: "Vault not found" });
|
||||||
|
}
|
||||||
|
|
||||||
|
const newPath = path.join(config.vaultRoot, newName);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await fs.promises.rename(vaultPath, newPath);
|
||||||
|
|
||||||
|
config.refreshVaults();
|
||||||
|
|
||||||
|
res.json({ ok: true, id: newName, path: newPath });
|
||||||
|
} catch (e) {
|
||||||
|
if (e.code === "ENOTEMPTY" || e.code === "EEXIST") {
|
||||||
|
return res
|
||||||
|
.status(409)
|
||||||
|
.json({ error: "A vault with that name already exists" });
|
||||||
|
}
|
||||||
|
|
||||||
|
res.status(500).json({ error: e.message, code: e.code });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// DELETE /api/vault/remove?vault=<id> - remove a vault from disk
|
// DELETE /api/vault/remove?vault=<id> - remove a vault from disk
|
||||||
router.delete("/remove", async (req, res) => {
|
router.delete("/remove", async (req, res) => {
|
||||||
const vaultId = req.query.vault;
|
const vaultId = req.query.vault;
|
||||||
|
|
|
||||||
|
|
@ -1,158 +1,8 @@
|
||||||
// Custom vault manager modal. will migrate to Svelte later
|
|
||||||
|
|
||||||
export function showVaultManager() {
|
export function showVaultManager() {
|
||||||
if (!document.querySelector(".workspace")) return;
|
if (!document.querySelector(".workspace")) return;
|
||||||
if (document.getElementById("ignis-starter-modal")) return;
|
if (document.querySelector(".vault-manager-overlay")) return;
|
||||||
|
|
||||||
const overlay = document.createElement("div");
|
new window.IgnisUI.VaultManager({
|
||||||
overlay.id = "ignis-starter-modal";
|
target: document.body,
|
||||||
overlay.style.cssText =
|
|
||||||
"position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,0.6);" +
|
|
||||||
"display:flex;align-items:center;justify-content:center;font-family:var(--font-interface);";
|
|
||||||
|
|
||||||
const modal = document.createElement("div");
|
|
||||||
modal.style.cssText =
|
|
||||||
"background:var(--background-primary);color:var(--text-normal);border-radius:12px;" +
|
|
||||||
"padding:24px;width:min(480px,90vw);max-height:80vh;overflow-y:auto;box-shadow:0 16px 48px rgba(0,0,0,0.4);";
|
|
||||||
|
|
||||||
const title = document.createElement("h2");
|
|
||||||
title.textContent = "Vaults";
|
|
||||||
title.style.cssText = "margin:0 0 16px 0;font-size:18px;font-weight:600;";
|
|
||||||
modal.appendChild(title);
|
|
||||||
|
|
||||||
const listEl = document.createElement("div");
|
|
||||||
listEl.style.cssText =
|
|
||||||
"display:flex;flex-direction:column;gap:4px;margin-bottom:16px;";
|
|
||||||
modal.appendChild(listEl);
|
|
||||||
|
|
||||||
function renderList() {
|
|
||||||
const xhr = new XMLHttpRequest();
|
|
||||||
xhr.open("GET", "/api/vault/list", false);
|
|
||||||
xhr.send();
|
|
||||||
const vaults = xhr.status === 200 ? JSON.parse(xhr.responseText) : [];
|
|
||||||
listEl.innerHTML = "";
|
|
||||||
if (vaults.length === 0) {
|
|
||||||
const empty = document.createElement("div");
|
|
||||||
empty.textContent = "No vaults yet. Create one below.";
|
|
||||||
empty.style.cssText = "color:var(--text-muted);padding:12px 0;";
|
|
||||||
listEl.appendChild(empty);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
for (const v of vaults) {
|
|
||||||
const isCurrent = v.id === (window.__currentVaultId || "");
|
|
||||||
|
|
||||||
const row = document.createElement("div");
|
|
||||||
row.style.cssText =
|
|
||||||
"display:flex;align-items:center;justify-content:space-between;" +
|
|
||||||
"padding:8px 12px;border-radius:6px;cursor:pointer;" +
|
|
||||||
"background:var(--background-secondary);";
|
|
||||||
row.addEventListener(
|
|
||||||
"mouseenter",
|
|
||||||
() => (row.style.background = "var(--background-modifier-hover)"),
|
|
||||||
);
|
|
||||||
row.addEventListener(
|
|
||||||
"mouseleave",
|
|
||||||
() => (row.style.background = "var(--background-secondary)"),
|
|
||||||
);
|
|
||||||
|
|
||||||
const name = document.createElement("span");
|
|
||||||
name.textContent = v.name;
|
|
||||||
name.style.cssText = "font-weight:500;flex:1;";
|
|
||||||
if (isCurrent) {
|
|
||||||
const badge = document.createElement("span");
|
|
||||||
badge.textContent = " current";
|
|
||||||
badge.style.cssText =
|
|
||||||
"font-size:11px;color:var(--text-muted);font-weight:400;";
|
|
||||||
name.appendChild(badge);
|
|
||||||
}
|
|
||||||
|
|
||||||
const del = document.createElement("button");
|
|
||||||
del.textContent = "Delete";
|
|
||||||
del.style.cssText =
|
|
||||||
"background:none;border:1px solid var(--background-modifier-border);" +
|
|
||||||
"color:var(--text-muted);border-radius:4px;padding:2px 8px;font-size:12px;cursor:pointer;";
|
|
||||||
del.addEventListener("click", (e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
if (!confirm('Delete vault "' + v.name + '"? This removes all files.'))
|
|
||||||
return;
|
|
||||||
const xhr2 = new XMLHttpRequest();
|
|
||||||
xhr2.open(
|
|
||||||
"DELETE",
|
|
||||||
"/api/vault/remove?vault=" + encodeURIComponent(v.id),
|
|
||||||
false,
|
|
||||||
);
|
|
||||||
xhr2.send();
|
|
||||||
renderList();
|
|
||||||
if (isCurrent) window.location.href = "/";
|
|
||||||
});
|
});
|
||||||
|
|
||||||
row.addEventListener("click", () => {
|
|
||||||
if (isCurrent) {
|
|
||||||
overlay.remove();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
window.location.href = "/?vault=" + encodeURIComponent(v.id);
|
|
||||||
});
|
|
||||||
|
|
||||||
row.appendChild(name);
|
|
||||||
row.appendChild(del);
|
|
||||||
listEl.appendChild(row);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
renderList();
|
|
||||||
|
|
||||||
const form = document.createElement("div");
|
|
||||||
form.style.cssText = "display:flex;gap:8px;";
|
|
||||||
|
|
||||||
const input = document.createElement("input");
|
|
||||||
input.type = "text";
|
|
||||||
input.placeholder = "New vault name...";
|
|
||||||
input.style.cssText =
|
|
||||||
"flex:1;padding:6px 10px;border-radius:6px;border:1px solid var(--background-modifier-border);" +
|
|
||||||
"background:var(--background-secondary);color:var(--text-normal);font-size:14px;outline:none;";
|
|
||||||
|
|
||||||
const btn = document.createElement("button");
|
|
||||||
btn.textContent = "Create";
|
|
||||||
btn.style.cssText =
|
|
||||||
"padding:6px 16px;border-radius:6px;border:none;" +
|
|
||||||
"background:var(--interactive-accent);color:var(--text-on-accent);font-size:14px;cursor:pointer;font-weight:500;";
|
|
||||||
|
|
||||||
function createVault() {
|
|
||||||
const name = input.value.trim();
|
|
||||||
if (!name) return;
|
|
||||||
const xhr3 = new XMLHttpRequest();
|
|
||||||
xhr3.open("POST", "/api/vault/create", false);
|
|
||||||
xhr3.setRequestHeader("Content-Type", "application/json");
|
|
||||||
xhr3.send(JSON.stringify({ name }));
|
|
||||||
if (xhr3.status >= 400) {
|
|
||||||
alert(
|
|
||||||
"Failed to create vault: " +
|
|
||||||
(JSON.parse(xhr3.responseText).error || "Unknown error"),
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
input.value = "";
|
|
||||||
window.location.href = "/?vault=" + encodeURIComponent(name);
|
|
||||||
}
|
|
||||||
|
|
||||||
btn.addEventListener("click", createVault);
|
|
||||||
input.addEventListener("keydown", (e) => {
|
|
||||||
if (e.key === "Enter") createVault();
|
|
||||||
});
|
|
||||||
|
|
||||||
form.appendChild(input);
|
|
||||||
form.appendChild(btn);
|
|
||||||
modal.appendChild(form);
|
|
||||||
|
|
||||||
overlay.addEventListener("click", (e) => {
|
|
||||||
if (e.target === overlay) overlay.remove();
|
|
||||||
});
|
|
||||||
overlay.addEventListener("keydown", (e) => {
|
|
||||||
if (e.key === "Escape") overlay.remove();
|
|
||||||
});
|
|
||||||
|
|
||||||
overlay.appendChild(modal);
|
|
||||||
document.body.appendChild(overlay);
|
|
||||||
input.focus();
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
104
ui/components/display/ListItem.svelte
Normal file
104
ui/components/display/ListItem.svelte
Normal file
|
|
@ -0,0 +1,104 @@
|
||||||
|
<script>
|
||||||
|
import { createEventDispatcher } from "svelte";
|
||||||
|
|
||||||
|
export let primary = "";
|
||||||
|
export let secondary = "";
|
||||||
|
export let active = false;
|
||||||
|
export let clickable = true;
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
function onClick() {
|
||||||
|
if (clickable) {
|
||||||
|
dispatch("click");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||||
|
<div class="list-item" class:active class:clickable on:click={onClick}>
|
||||||
|
{#if $$slots.icon}
|
||||||
|
<div class="item-icon">
|
||||||
|
<slot name="icon" />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="item-content">
|
||||||
|
{#if $$slots.default}
|
||||||
|
<slot />
|
||||||
|
{:else}
|
||||||
|
<span class="item-primary">{primary}</span>
|
||||||
|
{#if secondary}
|
||||||
|
<span class="item-secondary">{secondary}</span>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if $$slots.action}
|
||||||
|
<div class="item-action">
|
||||||
|
<slot name="action" />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.list-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 0.5rem 0.4rem 0.5rem 1rem;
|
||||||
|
margin: 0 0.2rem;
|
||||||
|
background: var(--background-primary);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
transition:
|
||||||
|
background 0.1s,
|
||||||
|
border-color 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item.clickable {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item.clickable:hover {
|
||||||
|
background: var(--background-modifier-hover);
|
||||||
|
border-color: var(--background-modifier-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: var(--text-muted);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-content {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-primary {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-secondary {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-action {
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
94
ui/components/input/Button.svelte
Normal file
94
ui/components/input/Button.svelte
Normal file
|
|
@ -0,0 +1,94 @@
|
||||||
|
<script>
|
||||||
|
import { createEventDispatcher } from "svelte";
|
||||||
|
|
||||||
|
export let variant = "primary";
|
||||||
|
export let disabled = false;
|
||||||
|
export let title = "";
|
||||||
|
export let type = "button";
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
function onClick(e) {
|
||||||
|
if (!disabled) {
|
||||||
|
dispatch("click", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button class="btn {variant}" {type} {disabled} {title} on:click={onClick}>
|
||||||
|
{#if $$slots.icon}
|
||||||
|
<span class="btn-icon">
|
||||||
|
<slot name="icon" />
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
<slot />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.375rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
box-shadow: none;
|
||||||
|
transition: background 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary {
|
||||||
|
padding: 0.375rem 1rem;
|
||||||
|
border: none;
|
||||||
|
background: var(--interactive-accent);
|
||||||
|
color: var(--text-on-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary:hover:not(:disabled) {
|
||||||
|
filter: brightness(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary {
|
||||||
|
padding: 0.375rem 0.75rem;
|
||||||
|
border: 1px solid var(--background-modifier-border);
|
||||||
|
background: none;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary:hover:not(:disabled) {
|
||||||
|
color: var(--text-normal);
|
||||||
|
background: var(--background-modifier-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ghost {
|
||||||
|
padding: 0.375rem 0.5rem;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
color: var(--interactive-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ghost:hover:not(:disabled) {
|
||||||
|
background: var(--background-modifier-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.danger {
|
||||||
|
padding: 0.375rem 1rem;
|
||||||
|
border: none;
|
||||||
|
background: var(--text-error, #e93147);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.danger:hover:not(:disabled) {
|
||||||
|
filter: brightness(1.1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
64
ui/components/input/SearchInput.svelte
Normal file
64
ui/components/input/SearchInput.svelte
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
<script>
|
||||||
|
import { createEventDispatcher } from "svelte";
|
||||||
|
import { Search } from "lucide-svelte";
|
||||||
|
|
||||||
|
export let value = "";
|
||||||
|
export let placeholder = "Search";
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
function onInput(e) {
|
||||||
|
dispatch("input", e.target.value);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="search-input">
|
||||||
|
<span class="search-icon">
|
||||||
|
<Search size="0.875rem" />
|
||||||
|
</span>
|
||||||
|
<input type="text" {placeholder} {value} on:input={onInput} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.search-input {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
position: absolute;
|
||||||
|
left: 0.625rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
pointer-events: none;
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.375rem 0.625rem 0.375rem 1.875rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
border: 1px solid var(--background-primary);
|
||||||
|
background: var(--background-primary);
|
||||||
|
color: var(--text-normal);
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
outline: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:hover {
|
||||||
|
background: var(--background-modifier-form-field);
|
||||||
|
}
|
||||||
|
|
||||||
|
input::placeholder {
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus {
|
||||||
|
border-color: var(--interactive-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus:hover {
|
||||||
|
background: var(--background-primary);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
85
ui/components/layout/ConfirmDialog.svelte
Normal file
85
ui/components/layout/ConfirmDialog.svelte
Normal file
|
|
@ -0,0 +1,85 @@
|
||||||
|
<script>
|
||||||
|
import { createEventDispatcher } from "svelte";
|
||||||
|
import Modal from "./Modal.svelte";
|
||||||
|
import Button from "../input/Button.svelte";
|
||||||
|
|
||||||
|
export let title = "";
|
||||||
|
export let message = "";
|
||||||
|
export let description = "";
|
||||||
|
export let confirmText = "Confirm";
|
||||||
|
export let confirmVariant = "primary";
|
||||||
|
export let width = "500px";
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
let modalRef;
|
||||||
|
|
||||||
|
function onConfirm() {
|
||||||
|
dispatch("confirm");
|
||||||
|
}
|
||||||
|
|
||||||
|
function onCancel() {
|
||||||
|
modalRef.dismiss();
|
||||||
|
dispatch("cancel");
|
||||||
|
}
|
||||||
|
|
||||||
|
function onEscape() {
|
||||||
|
onCancel();
|
||||||
|
}
|
||||||
|
|
||||||
|
export function dismiss() {
|
||||||
|
modalRef.dismiss();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Modal {title} {width} bind:this={modalRef} on:escape={onEscape} closeOnOverlayClick={false}>
|
||||||
|
<svelte:fragment slot="icon">
|
||||||
|
<slot name="icon" />
|
||||||
|
</svelte:fragment>
|
||||||
|
|
||||||
|
<div class="confirm-body">
|
||||||
|
<p class="confirm-message">{message}</p>
|
||||||
|
{#if description}
|
||||||
|
<p class="confirm-description">{description}</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<svelte:fragment slot="footer">
|
||||||
|
<div class="confirm-footer">
|
||||||
|
<Button variant="secondary" on:click={onCancel}>Cancel</Button>
|
||||||
|
<Button variant={confirmVariant} on:click={onConfirm}>
|
||||||
|
<svelte:fragment slot="icon">
|
||||||
|
<slot name="confirmIcon" />
|
||||||
|
</svelte:fragment>
|
||||||
|
{confirmText}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</svelte:fragment>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.confirm-body {
|
||||||
|
padding: 1.25rem 1.5rem;
|
||||||
|
border-bottom: 1px solid var(--background-modifier-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-message {
|
||||||
|
margin: 0 0 0.5rem;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-description {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
130
ui/components/layout/Modal.svelte
Normal file
130
ui/components/layout/Modal.svelte
Normal file
|
|
@ -0,0 +1,130 @@
|
||||||
|
<script>
|
||||||
|
import { createEventDispatcher } from "svelte";
|
||||||
|
import { X } from "lucide-svelte";
|
||||||
|
|
||||||
|
export let title = "";
|
||||||
|
export let width = "600px";
|
||||||
|
export let closeOnOverlayClick = true;
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
let overlayEl;
|
||||||
|
|
||||||
|
function close() {
|
||||||
|
if (overlayEl) {
|
||||||
|
overlayEl.remove();
|
||||||
|
}
|
||||||
|
dispatch("close");
|
||||||
|
}
|
||||||
|
|
||||||
|
function onOverlayClick(e) {
|
||||||
|
if (e.target === overlayEl && closeOnOverlayClick) {
|
||||||
|
close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onKeydown(e) {
|
||||||
|
if (e.key === "Escape") {
|
||||||
|
dispatch("escape");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function dismiss() {
|
||||||
|
close();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||||
|
<div
|
||||||
|
class="modal-overlay"
|
||||||
|
bind:this={overlayEl}
|
||||||
|
on:click={onOverlayClick}
|
||||||
|
on:keydown={onKeydown}
|
||||||
|
>
|
||||||
|
<div class="modal-shell" style="width: min({width}, 90vw);">
|
||||||
|
<div class="modal-header">
|
||||||
|
<div class="header-left">
|
||||||
|
<slot name="icon" />
|
||||||
|
<span class="header-title">{title}</span>
|
||||||
|
</div>
|
||||||
|
<button class="close-btn" on:click={close} title="Close">
|
||||||
|
<X size="1.125rem" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<slot />
|
||||||
|
|
||||||
|
{#if $$slots.footer}
|
||||||
|
<div class="modal-footer">
|
||||||
|
<slot name="footer" />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.modal-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 99999;
|
||||||
|
background: rgba(0, 0, 0, 0.4);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: var(--font-interface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-shell {
|
||||||
|
background: var(--background-secondary);
|
||||||
|
color: var(--text-normal);
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
max-height: 80vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.5rem 1rem 0.5rem 1.5rem;
|
||||||
|
background: var(--background-primary);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.625rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
color: var(--text-muted);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.25rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn:hover {
|
||||||
|
color: var(--text-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-footer {
|
||||||
|
padding: 0.8rem 1.5rem 0.8rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
115
ui/components/layout/PromptDialog.svelte
Normal file
115
ui/components/layout/PromptDialog.svelte
Normal file
|
|
@ -0,0 +1,115 @@
|
||||||
|
<script>
|
||||||
|
import { createEventDispatcher } from "svelte";
|
||||||
|
import Modal from "./Modal.svelte";
|
||||||
|
import Button from "../input/Button.svelte";
|
||||||
|
|
||||||
|
export let title = "";
|
||||||
|
export let label = "";
|
||||||
|
export let value = "";
|
||||||
|
export let placeholder = "";
|
||||||
|
export let confirmText = "Confirm";
|
||||||
|
export let width = "500px";
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
let modalRef;
|
||||||
|
|
||||||
|
function onConfirm() {
|
||||||
|
dispatch("confirm", value);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onCancel() {
|
||||||
|
modalRef.dismiss();
|
||||||
|
dispatch("cancel");
|
||||||
|
}
|
||||||
|
|
||||||
|
function onEscape() {
|
||||||
|
onCancel();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onKeydown(e) {
|
||||||
|
if (e.key === "Enter") {
|
||||||
|
onConfirm();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function dismiss() {
|
||||||
|
modalRef.dismiss();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
{title}
|
||||||
|
{width}
|
||||||
|
bind:this={modalRef}
|
||||||
|
on:escape={onEscape}
|
||||||
|
closeOnOverlayClick={false}
|
||||||
|
>
|
||||||
|
<svelte:fragment slot="icon">
|
||||||
|
<slot name="icon" />
|
||||||
|
</svelte:fragment>
|
||||||
|
|
||||||
|
<div class="prompt-body">
|
||||||
|
<label class="prompt-label" for="prompt-input">{label}</label>
|
||||||
|
<!-- svelte-ignore a11y-autofocus -->
|
||||||
|
<input
|
||||||
|
id="prompt-input"
|
||||||
|
class="prompt-input"
|
||||||
|
type="text"
|
||||||
|
{placeholder}
|
||||||
|
bind:value
|
||||||
|
on:keydown={onKeydown}
|
||||||
|
autofocus
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<svelte:fragment slot="footer">
|
||||||
|
<div class="prompt-footer">
|
||||||
|
<Button variant="secondary" on:click={onCancel}>Cancel</Button>
|
||||||
|
<Button variant="primary" on:click={onConfirm}>
|
||||||
|
<svelte:fragment slot="icon">
|
||||||
|
<slot name="confirmIcon" />
|
||||||
|
</svelte:fragment>
|
||||||
|
{confirmText}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</svelte:fragment>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.prompt-body {
|
||||||
|
padding: 1.25rem 1.5rem;
|
||||||
|
border-bottom: 1px solid var(--background-modifier-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.prompt-label {
|
||||||
|
display: block;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-normal);
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prompt-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.625rem 0.75rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
border: 1px solid var(--background-modifier-border);
|
||||||
|
background: var(--background-primary);
|
||||||
|
color: var(--text-normal);
|
||||||
|
font-size: 1rem;
|
||||||
|
outline: none;
|
||||||
|
box-shadow: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prompt-input:focus {
|
||||||
|
border-color: var(--interactive-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.prompt-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
101
ui/components/menu/PopoverMenu.svelte
Normal file
101
ui/components/menu/PopoverMenu.svelte
Normal file
|
|
@ -0,0 +1,101 @@
|
||||||
|
<script>
|
||||||
|
import { createEventDispatcher } from "svelte";
|
||||||
|
import { EllipsisVertical } from "lucide-svelte";
|
||||||
|
|
||||||
|
export let open = false;
|
||||||
|
export let items = [];
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
function onTriggerClick(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
dispatch("toggle");
|
||||||
|
}
|
||||||
|
|
||||||
|
function onItemClick(e, item) {
|
||||||
|
e.stopPropagation();
|
||||||
|
dispatch("select", item);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="popover-wrapper">
|
||||||
|
<button class="popover-trigger" on:click={onTriggerClick} title="Options">
|
||||||
|
<EllipsisVertical size="1rem" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{#if open}
|
||||||
|
<div class="popover-panel">
|
||||||
|
{#each items as item}
|
||||||
|
<button
|
||||||
|
class="popover-item"
|
||||||
|
class:danger={item.danger}
|
||||||
|
on:click={(e) => onItemClick(e, item)}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</button>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.popover-wrapper {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover-trigger {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
color: var(--text-muted);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.375rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover-trigger:hover {
|
||||||
|
color: var(--text-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover-panel {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 100%;
|
||||||
|
z-index: 10;
|
||||||
|
background: var(--background-primary);
|
||||||
|
border: 1px solid var(--background-modifier-border);
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
padding: 0.25rem;
|
||||||
|
min-width: 7.5rem;
|
||||||
|
box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover-item {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.375rem 0.75rem;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
box-shadow: none;
|
||||||
|
color: var(--text-normal);
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover-item:hover {
|
||||||
|
background: var(--background-modifier-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover-item.danger {
|
||||||
|
color: var(--text-error, #e93147);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover-item.danger:hover {
|
||||||
|
background: rgba(233, 49, 71, 0.1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
1
ui/index.js
Normal file
1
ui/index.js
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export { default as VaultManager } from "./views/VaultManager.svelte";
|
||||||
395
ui/views/VaultManager.svelte
Normal file
395
ui/views/VaultManager.svelte
Normal file
|
|
@ -0,0 +1,395 @@
|
||||||
|
<script>
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
import {
|
||||||
|
Vault,
|
||||||
|
Folder,
|
||||||
|
Plus,
|
||||||
|
SquarePlus,
|
||||||
|
PenLine,
|
||||||
|
Trash2,
|
||||||
|
Check,
|
||||||
|
} from "lucide-svelte";
|
||||||
|
import Modal from "../components/layout/Modal.svelte";
|
||||||
|
import PromptDialog from "../components/layout/PromptDialog.svelte";
|
||||||
|
import ConfirmDialog from "../components/layout/ConfirmDialog.svelte";
|
||||||
|
import SearchInput from "../components/input/SearchInput.svelte";
|
||||||
|
import Button from "../components/input/Button.svelte";
|
||||||
|
import ListItem from "../components/display/ListItem.svelte";
|
||||||
|
import PopoverMenu from "../components/menu/PopoverMenu.svelte";
|
||||||
|
|
||||||
|
let vaults = [];
|
||||||
|
let searchQuery = "";
|
||||||
|
let openMenuId = null;
|
||||||
|
let modalRef;
|
||||||
|
|
||||||
|
let activeDialog = null;
|
||||||
|
let targetVault = null;
|
||||||
|
let dialogValue = "";
|
||||||
|
|
||||||
|
const menuItems = [
|
||||||
|
{ id: "rename", label: "Rename" },
|
||||||
|
{ id: "delete", label: "Delete", danger: true },
|
||||||
|
];
|
||||||
|
|
||||||
|
$: currentVaultId = window.__currentVaultId || "";
|
||||||
|
$: deleteMessage = targetVault
|
||||||
|
? 'Are you sure you want to delete "' + targetVault.name + '"?'
|
||||||
|
: "";
|
||||||
|
$: filteredVaults = searchQuery
|
||||||
|
? vaults.filter((v) =>
|
||||||
|
v.name.toLowerCase().includes(searchQuery.toLowerCase()),
|
||||||
|
)
|
||||||
|
: vaults;
|
||||||
|
|
||||||
|
async function fetchVaults() {
|
||||||
|
try {
|
||||||
|
const res = await fetch("/api/vault/list");
|
||||||
|
vaults = res.ok ? await res.json() : [];
|
||||||
|
} catch {
|
||||||
|
vaults = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function openVault(vault) {
|
||||||
|
if (vault.id === currentVaultId) {
|
||||||
|
modalRef.dismiss();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
window.location.href = "/?vault=" + encodeURIComponent(vault.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleMenu(vaultId) {
|
||||||
|
if (openMenuId === vaultId) {
|
||||||
|
openMenuId = null;
|
||||||
|
} else {
|
||||||
|
openMenuId = vaultId;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onMenuSelect(vault, item) {
|
||||||
|
openMenuId = null;
|
||||||
|
if (item.id === "rename") {
|
||||||
|
showRenameDialog(vault);
|
||||||
|
} else if (item.id === "delete") {
|
||||||
|
showDeleteDialog(vault);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showCreateDialog() {
|
||||||
|
dialogValue = "";
|
||||||
|
activeDialog = "create";
|
||||||
|
}
|
||||||
|
|
||||||
|
function showRenameDialog(vault) {
|
||||||
|
targetVault = vault;
|
||||||
|
dialogValue = vault.name;
|
||||||
|
activeDialog = "rename";
|
||||||
|
}
|
||||||
|
|
||||||
|
function showDeleteDialog(vault) {
|
||||||
|
targetVault = vault;
|
||||||
|
activeDialog = "delete";
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeDialog() {
|
||||||
|
activeDialog = null;
|
||||||
|
targetVault = null;
|
||||||
|
dialogValue = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onCreateConfirm(e) {
|
||||||
|
const name = e.detail.trim();
|
||||||
|
|
||||||
|
if (!name) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await fetch("/api/vault/create", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ name }),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
const data = await res.json();
|
||||||
|
alert("Failed to create vault: " + (data.error || "Unknown error"));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
closeDialog();
|
||||||
|
|
||||||
|
window.location.href = "/?vault=" + encodeURIComponent(name);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onRenameConfirm(e) {
|
||||||
|
const trimmed = e.detail.trim();
|
||||||
|
|
||||||
|
if (!trimmed || trimmed === targetVault.name) {
|
||||||
|
closeDialog();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await fetch("/api/vault/rename", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ vault: targetVault.id, name: trimmed }),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
const data = await res.json();
|
||||||
|
alert("Failed to rename vault: " + (data.error || "Unknown error"));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
closeDialog();
|
||||||
|
|
||||||
|
if (targetVault.id === currentVaultId) {
|
||||||
|
window.location.href = "/?vault=" + encodeURIComponent(trimmed);
|
||||||
|
} else {
|
||||||
|
await fetchVaults();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onDeleteConfirm() {
|
||||||
|
const wasCurrentVault = targetVault.id === currentVaultId;
|
||||||
|
|
||||||
|
await fetch(
|
||||||
|
"/api/vault/remove?vault=" + encodeURIComponent(targetVault.id),
|
||||||
|
{ method: "DELETE" },
|
||||||
|
);
|
||||||
|
|
||||||
|
closeDialog();
|
||||||
|
|
||||||
|
await fetchVaults();
|
||||||
|
|
||||||
|
if (wasCurrentVault) {
|
||||||
|
window.location.href = "/";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onEscape() {
|
||||||
|
if (openMenuId) {
|
||||||
|
openMenuId = null;
|
||||||
|
} else {
|
||||||
|
modalRef.dismiss();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
fetchVaults();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
title="Vault Manager"
|
||||||
|
width="600px"
|
||||||
|
bind:this={modalRef}
|
||||||
|
on:escape={onEscape}
|
||||||
|
closeOnOverlayClick={false}
|
||||||
|
>
|
||||||
|
<svelte:fragment slot="icon">
|
||||||
|
<Vault size="1.25rem" />
|
||||||
|
</svelte:fragment>
|
||||||
|
|
||||||
|
<div class="section-header">
|
||||||
|
<h3>Vaults</h3>
|
||||||
|
<div class="search-wrapper">
|
||||||
|
<SearchInput
|
||||||
|
value={searchQuery}
|
||||||
|
on:input={(e) => {
|
||||||
|
searchQuery = e.detail;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-body">
|
||||||
|
<div class="vault-list">
|
||||||
|
{#if vaults.length === 0}
|
||||||
|
<div class="empty">No vaults yet. Create one below.</div>
|
||||||
|
{:else if filteredVaults.length === 0}
|
||||||
|
<div class="empty">No vaults match your search.</div>
|
||||||
|
{:else}
|
||||||
|
{#each filteredVaults as vault (vault.id)}
|
||||||
|
<ListItem
|
||||||
|
primary={vault.name}
|
||||||
|
secondary={vault.path}
|
||||||
|
active={vault.id === currentVaultId}
|
||||||
|
on:click={() => openVault(vault)}
|
||||||
|
>
|
||||||
|
<svelte:fragment slot="icon">
|
||||||
|
<Folder size="1.5rem" />
|
||||||
|
</svelte:fragment>
|
||||||
|
<svelte:fragment slot="default">
|
||||||
|
<span class="vault-name">
|
||||||
|
{vault.name}
|
||||||
|
{#if vault.id === currentVaultId}
|
||||||
|
<span class="active-label">(active)</span>
|
||||||
|
<span class="active-check">✓</span>
|
||||||
|
{/if}
|
||||||
|
</span>
|
||||||
|
<span class="vault-path">{vault.path}</span>
|
||||||
|
</svelte:fragment>
|
||||||
|
<svelte:fragment slot="action">
|
||||||
|
<PopoverMenu
|
||||||
|
open={openMenuId === vault.id}
|
||||||
|
items={menuItems}
|
||||||
|
on:toggle={() => toggleMenu(vault.id)}
|
||||||
|
on:select={(e) => onMenuSelect(vault, e.detail)}
|
||||||
|
/>
|
||||||
|
</svelte:fragment>
|
||||||
|
</ListItem>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<svelte:fragment slot="footer">
|
||||||
|
<div class="footer-right">
|
||||||
|
<Button variant="ghost" on:click={showCreateDialog}>
|
||||||
|
<svelte:fragment slot="icon">
|
||||||
|
<Plus size="1rem" />
|
||||||
|
</svelte:fragment>
|
||||||
|
Create New Vault
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</svelte:fragment>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
{#if activeDialog === "create"}
|
||||||
|
<PromptDialog
|
||||||
|
title="Create Vault"
|
||||||
|
label="Vault Name:"
|
||||||
|
placeholder="My New Vault"
|
||||||
|
confirmText="Create Vault"
|
||||||
|
bind:value={dialogValue}
|
||||||
|
on:confirm={onCreateConfirm}
|
||||||
|
on:cancel={closeDialog}
|
||||||
|
>
|
||||||
|
<svelte:fragment slot="icon">
|
||||||
|
<SquarePlus size="1.25rem" />
|
||||||
|
</svelte:fragment>
|
||||||
|
<svelte:fragment slot="confirmIcon">
|
||||||
|
<Plus size="0.875rem" />
|
||||||
|
</svelte:fragment>
|
||||||
|
</PromptDialog>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if activeDialog === "rename"}
|
||||||
|
<PromptDialog
|
||||||
|
title="Rename Item"
|
||||||
|
label="New Name:"
|
||||||
|
confirmText="Save Name"
|
||||||
|
bind:value={dialogValue}
|
||||||
|
on:confirm={onRenameConfirm}
|
||||||
|
on:cancel={closeDialog}
|
||||||
|
>
|
||||||
|
<svelte:fragment slot="icon">
|
||||||
|
<PenLine size="1.25rem" />
|
||||||
|
</svelte:fragment>
|
||||||
|
<svelte:fragment slot="confirmIcon">
|
||||||
|
<Check size="0.875rem" />
|
||||||
|
</svelte:fragment>
|
||||||
|
</PromptDialog>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if activeDialog === "delete" && targetVault}
|
||||||
|
<ConfirmDialog
|
||||||
|
title="Delete Confirmation"
|
||||||
|
message={deleteMessage}
|
||||||
|
description="This action cannot be undone. All notes and linked files within this vault will be permanently removed from your system."
|
||||||
|
confirmText="Confirm Delete"
|
||||||
|
confirmVariant="danger"
|
||||||
|
on:confirm={onDeleteConfirm}
|
||||||
|
on:cancel={closeDialog}
|
||||||
|
>
|
||||||
|
<svelte:fragment slot="icon">
|
||||||
|
<Trash2 size="1.25rem" />
|
||||||
|
</svelte:fragment>
|
||||||
|
<svelte:fragment slot="confirmIcon">
|
||||||
|
<Check size="0.875rem" />
|
||||||
|
</svelte:fragment>
|
||||||
|
</ConfirmDialog>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.5rem 2rem 0rem 1.5rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-wrapper {
|
||||||
|
width: 11rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-body {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 1rem 1.1rem 0rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vault-list {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
scrollbar-gutter: stable;
|
||||||
|
min-height: 300px;
|
||||||
|
max-height: 300px;
|
||||||
|
padding: 0rem 0 1rem 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.375rem;
|
||||||
|
border-bottom: 1px solid var(--background-modifier-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
color: var(--text-muted);
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vault-name {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active-label {
|
||||||
|
color: var(--interactive-accent);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-left: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active-check {
|
||||||
|
color: var(--interactive-accent);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-left: 0.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vault-path {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-right {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Add table
Reference in a new issue