mirror of
https://github.com/Nystik-gh/ignis.git
synced 2026-06-17 04:35:53 +00:00
add svelte UI
This commit is contained in:
Nystik
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",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "obsidian-bridge",
|
||||
"name": "ignis",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"chokidar": "^3.6.0",
|
||||
@@ -15,7 +15,24 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"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": {
|
||||
@@ -409,6 +426,52 @@
|
||||
"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": {
|
||||
"version": "1.3.8",
|
||||
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
|
||||
@@ -422,6 +485,19 @@
|
||||
"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": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
|
||||
@@ -435,12 +511,32 @@
|
||||
"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": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
|
||||
"integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
|
||||
"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": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
|
||||
@@ -551,6 +647,20 @@
|
||||
"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": {
|
||||
"version": "0.5.4",
|
||||
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
|
||||
@@ -604,6 +714,20 @@
|
||||
"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": {
|
||||
"version": "2.6.9",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
|
||||
@@ -730,12 +854,39 @@
|
||||
"@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": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
|
||||
"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
|
||||
"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": {
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
|
||||
@@ -1036,6 +1187,43 @@
|
||||
"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": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||
@@ -1045,6 +1233,13 @@
|
||||
"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": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
||||
@@ -1184,6 +1379,18 @@
|
||||
"integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
|
||||
"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": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
|
||||
@@ -1409,6 +1616,16 @@
|
||||
"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": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
|
||||
@@ -1418,6 +1635,32 @@
|
||||
"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": {
|
||||
"version": "5.0.1",
|
||||
"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,
|
||||
"description": "An Electron shim and server bridge for running Obsidian in a browser.",
|
||||
"scripts": {
|
||||
"build:ui": "node build-ui.js",
|
||||
"build:shims": "node build.js",
|
||||
"build": "npm run build:ui && npm run build:shims",
|
||||
"dev:server": "node server/index.js",
|
||||
"dev": "npm run build:shims && npm run dev:server"
|
||||
"dev": "npm run build && npm run dev:server"
|
||||
},
|
||||
"dependencies": {
|
||||
"express": "^4.21.0",
|
||||
"ws": "^8.16.0",
|
||||
"chokidar": "^3.6.0",
|
||||
"cors": "^2.8.5"
|
||||
"cors": "^2.8.5",
|
||||
"express": "^4.21.0",
|
||||
"ws": "^8.16.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"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..."
|
||||
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/images/favicon.png "$OBSIDIAN_DIR/favicon.png"
|
||||
|
||||
|
||||
@@ -33,10 +33,11 @@ function patchHtml(filePath) {
|
||||
' <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(
|
||||
'<script type="text/javascript"',
|
||||
'<script type="text/javascript" src="shim-loader.js"></script>\n' +
|
||||
'<script type="text/javascript" src="ignis-ui.js"></script>\n' +
|
||||
'<script type="text/javascript" src="shim-loader.js"></script>\n' +
|
||||
'<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
|
||||
router.delete("/remove", async (req, res) => {
|
||||
const vaultId = req.query.vault;
|
||||
|
||||
@@ -1,158 +1,8 @@
|
||||
// Custom vault manager modal. will migrate to Svelte later
|
||||
|
||||
export function showVaultManager() {
|
||||
if (!document.querySelector(".workspace")) return;
|
||||
if (document.getElementById("ignis-starter-modal")) return;
|
||||
if (document.querySelector(".vault-manager-overlay")) return;
|
||||
|
||||
const overlay = document.createElement("div");
|
||||
overlay.id = "ignis-starter-modal";
|
||||
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();
|
||||
new window.IgnisUI.VaultManager({
|
||||
target: document.body,
|
||||
});
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user