mirror of
https://github.com/Nystik-gh/ignis.git
synced 2026-06-17 04:35:53 +00:00
move UI code into new package
This commit is contained in:
Nystik
17
packages/ui/build.js
Normal file
17
packages/ui/build.js
Normal file
@@ -0,0 +1,17 @@
|
||||
const esbuild = require("esbuild");
|
||||
const sveltePlugin = require("esbuild-svelte");
|
||||
const path = require("path");
|
||||
|
||||
module.exports = esbuild.build({
|
||||
entryPoints: [path.join(__dirname, "src", "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",
|
||||
});
|
||||
@@ -1,5 +1,17 @@
|
||||
{
|
||||
"name": "@ignis/ui",
|
||||
"version": "0.0.0-internal",
|
||||
"private": true
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "node build.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ignis/services": "*",
|
||||
"lucide-svelte": "^0.577.0",
|
||||
"svelte": "^4.2.20"
|
||||
},
|
||||
"devDependencies": {
|
||||
"esbuild": "^0.20.0",
|
||||
"esbuild-svelte": "^0.9.4"
|
||||
}
|
||||
}
|
||||
|
||||
123
packages/ui/src/bootstrap.js
vendored
Normal file
123
packages/ui/src/bootstrap.js
vendored
Normal file
@@ -0,0 +1,123 @@
|
||||
import { vaultService } from "@ignis/services";
|
||||
|
||||
function showVaultManager() {
|
||||
if (document.querySelector(".vault-manager-overlay")) return;
|
||||
|
||||
new window.IgnisUI.VaultManager({
|
||||
target: document.body,
|
||||
props: { vaultService },
|
||||
});
|
||||
}
|
||||
|
||||
function showMessageDialog(title, message) {
|
||||
return new Promise((resolve) => {
|
||||
const dialog = new window.IgnisUI.MessageDialog({
|
||||
target: document.body,
|
||||
props: { title, message },
|
||||
});
|
||||
|
||||
dialog.$on("confirm", () => {
|
||||
dialog.$destroy();
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function showConfirmDialog(
|
||||
title,
|
||||
message,
|
||||
description,
|
||||
confirmText = "OK",
|
||||
) {
|
||||
return new Promise((resolve) => {
|
||||
const dialog = new window.IgnisUI.ConfirmDialog({
|
||||
target: document.body,
|
||||
props: { title, message, description, confirmText },
|
||||
});
|
||||
|
||||
dialog.$on("confirm", () => {
|
||||
dialog.$destroy();
|
||||
resolve(true);
|
||||
});
|
||||
|
||||
dialog.$on("cancel", () => {
|
||||
dialog.$destroy();
|
||||
resolve(false);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function showPluginInstallDialog(vaultId) {
|
||||
return new Promise((resolve) => {
|
||||
const dialog = new window.IgnisUI.PluginInstallDialog({
|
||||
target: document.body,
|
||||
});
|
||||
|
||||
dialog.$on("install", async () => {
|
||||
try {
|
||||
await fetch("/api/vault/install-plugin", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ vault: vaultId }),
|
||||
});
|
||||
} catch (e) {
|
||||
console.error("[ignis] Failed to install plugin:", e);
|
||||
}
|
||||
dialog.$destroy();
|
||||
resolve("install");
|
||||
});
|
||||
|
||||
dialog.$on("dismiss", async () => {
|
||||
try {
|
||||
await fetch("/api/vault/install-plugin", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ vault: vaultId, dismiss: true }),
|
||||
});
|
||||
} catch (e) {
|
||||
console.error("[ignis] Failed to dismiss plugin prompt:", e);
|
||||
}
|
||||
dialog.$destroy();
|
||||
resolve("dismiss");
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function showPromptDialog(
|
||||
title,
|
||||
label,
|
||||
placeholder = "",
|
||||
value = "",
|
||||
confirmText = "OK",
|
||||
) {
|
||||
return new Promise((resolve) => {
|
||||
const dialog = new window.IgnisUI.PromptDialog({
|
||||
target: document.body,
|
||||
props: { title, label, placeholder, value, confirmText },
|
||||
});
|
||||
|
||||
dialog.$on("confirm", (event) => {
|
||||
dialog.$destroy();
|
||||
resolve(event.detail);
|
||||
});
|
||||
|
||||
dialog.$on("cancel", () => {
|
||||
dialog.$destroy();
|
||||
resolve(null);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (typeof window !== "undefined" && window.__ignis_registerUI) {
|
||||
window.__ignis_registerUI({
|
||||
showVaultManager,
|
||||
showMessageDialog,
|
||||
showConfirmDialog,
|
||||
showPluginInstallDialog,
|
||||
showPromptDialog,
|
||||
});
|
||||
} else if (typeof window !== "undefined") {
|
||||
console.warn(
|
||||
"[ignis] __ignis_registerUI not available; UI handlers not registered",
|
||||
);
|
||||
}
|
||||
104
packages/ui/src/components/display/ListItem.svelte
Normal file
104
packages/ui/src/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
packages/ui/src/components/input/Button.svelte
Normal file
94
packages/ui/src/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
packages/ui/src/components/input/SearchInput.svelte
Normal file
64
packages/ui/src/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
packages/ui/src/components/layout/ConfirmDialog.svelte
Normal file
85
packages/ui/src/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>
|
||||
69
packages/ui/src/components/layout/MessageDialog.svelte
Normal file
69
packages/ui/src/components/layout/MessageDialog.svelte
Normal file
@@ -0,0 +1,69 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import Modal from "./Modal.svelte";
|
||||
import Button from "../input/Button.svelte";
|
||||
import { CircleAlert } from "lucide-svelte";
|
||||
|
||||
export let title = "Message";
|
||||
export let message = "";
|
||||
export let width = "500px";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let modalRef;
|
||||
|
||||
function onConfirm() {
|
||||
modalRef.dismiss();
|
||||
dispatch("confirm");
|
||||
}
|
||||
|
||||
function onEscape() {
|
||||
onConfirm();
|
||||
}
|
||||
|
||||
export function dismiss() {
|
||||
modalRef.dismiss();
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal
|
||||
{title}
|
||||
{width}
|
||||
bind:this={modalRef}
|
||||
on:escape={onEscape}
|
||||
closeOnOverlayClick={false}
|
||||
>
|
||||
<svelte:fragment slot="icon">
|
||||
<CircleAlert size="1.25rem" />
|
||||
</svelte:fragment>
|
||||
|
||||
<div class="message-body">
|
||||
<p class="message-text">{message}</p>
|
||||
</div>
|
||||
|
||||
<svelte:fragment slot="footer">
|
||||
<div class="message-footer">
|
||||
<Button variant="primary" on:click={onConfirm}>OK</Button>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.message-body {
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-bottom: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
.message-text {
|
||||
margin: 0;
|
||||
font-size: 0.9375rem;
|
||||
color: var(--text-normal);
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.message-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
130
packages/ui/src/components/layout/Modal.svelte
Normal file
130
packages/ui/src/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>
|
||||
89
packages/ui/src/components/layout/PluginInstallDialog.svelte
Normal file
89
packages/ui/src/components/layout/PluginInstallDialog.svelte
Normal file
@@ -0,0 +1,89 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import Modal from "./Modal.svelte";
|
||||
import Button from "../input/Button.svelte";
|
||||
import { Puzzle, Download, X } from "lucide-svelte";
|
||||
|
||||
export let width = "500px";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let modalRef;
|
||||
let installing = false;
|
||||
|
||||
function onInstall() {
|
||||
installing = true;
|
||||
dispatch("install");
|
||||
}
|
||||
|
||||
function onDismiss() {
|
||||
modalRef.dismiss();
|
||||
dispatch("dismiss");
|
||||
}
|
||||
|
||||
function onEscape() {
|
||||
onDismiss();
|
||||
}
|
||||
|
||||
export function dismiss() {
|
||||
modalRef.dismiss();
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal title="Ignis Bridge Plugin" {width} bind:this={modalRef} on:escape={onEscape} closeOnOverlayClick={false}>
|
||||
<svelte:fragment slot="icon">
|
||||
<Puzzle size="1.25rem" />
|
||||
</svelte:fragment>
|
||||
|
||||
<div class="dialog-body">
|
||||
<p class="dialog-message">This vault doesn't have the Ignis Bridge plugin installed.</p>
|
||||
<p class="dialog-description">
|
||||
The plugin adds additional functionality such as file uploads.
|
||||
Obsidian will work without it, but some features will be unavailable.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<svelte:fragment slot="footer">
|
||||
<div class="dialog-footer">
|
||||
<Button variant="secondary" on:click={onDismiss}>
|
||||
<svelte:fragment slot="icon">
|
||||
<X size="0.875rem" />
|
||||
</svelte:fragment>
|
||||
Not Now
|
||||
</Button>
|
||||
<Button variant="primary" on:click={onInstall} disabled={installing}>
|
||||
<svelte:fragment slot="icon">
|
||||
<Download size="0.875rem" />
|
||||
</svelte:fragment>
|
||||
{installing ? "Installing..." : "Install Plugin"}
|
||||
</Button>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.dialog-body {
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-bottom: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
.dialog-message {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.dialog-description {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
115
packages/ui/src/components/layout/PromptDialog.svelte
Normal file
115
packages/ui/src/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
packages/ui/src/components/menu/PopoverMenu.svelte
Normal file
101
packages/ui/src/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>
|
||||
8
packages/ui/src/index.js
Normal file
8
packages/ui/src/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import "./bootstrap.js";
|
||||
|
||||
export { default as VaultManager } from "./views/VaultManager.svelte";
|
||||
export { default as MessageDialog } from "./components/layout/MessageDialog.svelte";
|
||||
export { default as ConfirmDialog } from "./components/layout/ConfirmDialog.svelte";
|
||||
export { default as PromptDialog } from "./components/layout/PromptDialog.svelte";
|
||||
export { default as PluginInstallDialog } from "./components/layout/PluginInstallDialog.svelte";
|
||||
export { default as SyncSetupModal } from "./views/SyncSetupModal.svelte";
|
||||
154
packages/ui/src/views/SyncSetupModal.svelte
Normal file
154
packages/ui/src/views/SyncSetupModal.svelte
Normal file
@@ -0,0 +1,154 @@
|
||||
<script>
|
||||
import { createEventDispatcher, onMount } from "svelte";
|
||||
import Modal from "../components/layout/Modal.svelte";
|
||||
import VaultList from "./sync/VaultList.svelte";
|
||||
import CreateVaultForm from "./sync/CreateVaultForm.svelte";
|
||||
|
||||
export let vaultId;
|
||||
export let onSuccess = null;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let modalRef;
|
||||
let view = "list";
|
||||
let vaults = [];
|
||||
let loading = true;
|
||||
let error = "";
|
||||
|
||||
onMount(() => {
|
||||
fetchVaults();
|
||||
});
|
||||
|
||||
async function fetchVaults() {
|
||||
loading = true;
|
||||
error = "";
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/ext/headless-sync/remote-vaults");
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error || `Request failed: ${res.status}`);
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
vaults = data.vaults;
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
}
|
||||
|
||||
loading = false;
|
||||
}
|
||||
|
||||
async function onLink(e) {
|
||||
const { vault, vaultPassword, deviceName, mode } = e.detail;
|
||||
error = "";
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/ext/headless-sync/setup", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
vaultId,
|
||||
remoteVault: vault.id,
|
||||
remoteVaultName: vault.name,
|
||||
vaultPassword,
|
||||
deviceName,
|
||||
mode,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error || `Request failed: ${res.status}`);
|
||||
}
|
||||
|
||||
if (onSuccess) {
|
||||
onSuccess();
|
||||
}
|
||||
|
||||
modalRef.dismiss();
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
function onCreated() {
|
||||
view = "list";
|
||||
fetchVaults();
|
||||
}
|
||||
|
||||
function onClose() {
|
||||
dispatch("close");
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal
|
||||
title={view === "list" ? "Set up Headless Sync" : "Create new remote vault"}
|
||||
width="550px"
|
||||
bind:this={modalRef}
|
||||
on:close={onClose}
|
||||
on:escape={onClose}
|
||||
>
|
||||
<div class="sync-setup-body">
|
||||
{#if view === "list"}
|
||||
<p class="sync-setup-desc">
|
||||
Link this vault to an Obsidian Sync remote vault for server-side synchronization.
|
||||
</p>
|
||||
|
||||
{#if error}
|
||||
<div class="sync-setup-error">
|
||||
<p>Failed to load remote vaults: {error}</p>
|
||||
<button class="retry-btn" on:click={fetchVaults}>Retry</button>
|
||||
</div>
|
||||
{:else}
|
||||
<VaultList {vaults} {loading} on:link={onLink} on:create={() => (view = "create")} />
|
||||
{/if}
|
||||
{:else}
|
||||
<p class="sync-setup-desc">
|
||||
Create a new remote vault on Obsidian Sync.
|
||||
</p>
|
||||
|
||||
<CreateVaultForm on:created={onCreated} on:back={() => (view = "list")} />
|
||||
{/if}
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.sync-setup-body {
|
||||
padding: 1.25rem 1.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sync-setup-desc {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
margin: 0 0 1rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.sync-setup-error {
|
||||
color: var(--text-error);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.sync-setup-error p {
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
font-family: var(--font-interface);
|
||||
font-size: 0.8125rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: 0.375rem;
|
||||
background: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.retry-btn:hover {
|
||||
color: var(--text-normal);
|
||||
background: var(--background-modifier-hover);
|
||||
}
|
||||
</style>
|
||||
435
packages/ui/src/views/VaultManager.svelte
Normal file
435
packages/ui/src/views/VaultManager.svelte
Normal file
@@ -0,0 +1,435 @@
|
||||
<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 MessageDialog from "../components/layout/MessageDialog.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";
|
||||
|
||||
export let vaultService;
|
||||
|
||||
let vaults = [];
|
||||
let searchQuery = "";
|
||||
let openMenuId = null;
|
||||
let modalRef;
|
||||
|
||||
let activeDialog = null;
|
||||
let targetVault = null;
|
||||
let dialogValue = "";
|
||||
let errorMessage = "";
|
||||
let pendingReload = false;
|
||||
let version = "";
|
||||
|
||||
const menuItems = [
|
||||
{ id: "rename", label: "Rename" },
|
||||
{ id: "delete", label: "Delete", danger: true },
|
||||
];
|
||||
|
||||
let currentVaultId = vaultService.getCurrentVaultId();
|
||||
|
||||
$: 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 fetchVersion() {
|
||||
try {
|
||||
const res = await fetch("/api/version");
|
||||
const data = await res.json();
|
||||
version = data.version;
|
||||
} catch (e) {
|
||||
console.warn("[VaultManager] Failed to fetch version:", e);
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshVaults() {
|
||||
try {
|
||||
vaults = await vaultService.listVaults();
|
||||
} catch {
|
||||
vaults = [];
|
||||
}
|
||||
}
|
||||
|
||||
function openVault(vault) {
|
||||
if (vault.id === currentVaultId) {
|
||||
modalRef.dismiss();
|
||||
return;
|
||||
}
|
||||
vaultService.openVault(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;
|
||||
}
|
||||
|
||||
try {
|
||||
vaults = await vaultService.createVault(name);
|
||||
closeDialog();
|
||||
} catch (err) {
|
||||
errorMessage = "Failed to create vault: " + err.message;
|
||||
activeDialog = "error";
|
||||
}
|
||||
}
|
||||
|
||||
async function onRenameConfirm(e) {
|
||||
const trimmed = e.detail.trim();
|
||||
|
||||
if (!trimmed || trimmed === targetVault.name) {
|
||||
closeDialog();
|
||||
return;
|
||||
}
|
||||
|
||||
const wasCurrentVault = targetVault.id === currentVaultId;
|
||||
|
||||
try {
|
||||
vaults = await vaultService.renameVault(targetVault.id, trimmed);
|
||||
closeDialog();
|
||||
|
||||
if (wasCurrentVault) {
|
||||
currentVaultId = vaultService.getCurrentVaultId();
|
||||
pendingReload = true;
|
||||
}
|
||||
} catch (err) {
|
||||
errorMessage = "Failed to rename vault: " + err.message;
|
||||
activeDialog = "error";
|
||||
}
|
||||
}
|
||||
|
||||
async function onDeleteConfirm() {
|
||||
try {
|
||||
const { wasCurrentVault } = await vaultService.deleteVault(
|
||||
targetVault.id,
|
||||
);
|
||||
|
||||
closeDialog();
|
||||
|
||||
vaults = await vaultService.listVaults();
|
||||
|
||||
if (wasCurrentVault) {
|
||||
vaultService.openVault("");
|
||||
}
|
||||
} catch (err) {
|
||||
errorMessage = "Failed to delete vault: " + err.message;
|
||||
activeDialog = "error";
|
||||
}
|
||||
}
|
||||
|
||||
function onModalClose() {
|
||||
if (pendingReload) {
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
|
||||
function onEscape() {
|
||||
if (openMenuId) {
|
||||
openMenuId = null;
|
||||
} else {
|
||||
modalRef.dismiss();
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
refreshVaults();
|
||||
fetchVersion();
|
||||
});
|
||||
</script>
|
||||
|
||||
<Modal
|
||||
title="Vault Manager"
|
||||
width="600px"
|
||||
bind:this={modalRef}
|
||||
on:escape={onEscape}
|
||||
on:close={onModalClose}
|
||||
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-left">
|
||||
{#if version}
|
||||
<span class="version-info">Ignis v{version}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<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"
|
||||
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}
|
||||
|
||||
{#if activeDialog === "error"}
|
||||
<MessageDialog
|
||||
title="Error"
|
||||
message={errorMessage}
|
||||
on:confirm={() => {
|
||||
activeDialog = null;
|
||||
errorMessage = "";
|
||||
}}
|
||||
/>
|
||||
{/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-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.version-info {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
185
packages/ui/src/views/sync/CreateVaultForm.svelte
Normal file
185
packages/ui/src/views/sync/CreateVaultForm.svelte
Normal file
@@ -0,0 +1,185 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import Button from "../../components/input/Button.svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let name = "";
|
||||
let region = "";
|
||||
let encryption = "e2ee";
|
||||
let password = "";
|
||||
let creating = false;
|
||||
let error = "";
|
||||
|
||||
async function onSubmit() {
|
||||
error = "";
|
||||
|
||||
if (!name.trim()) {
|
||||
error = "Vault name is required";
|
||||
return;
|
||||
}
|
||||
|
||||
if (encryption === "e2ee" && !password) {
|
||||
error = "Encryption password is required for end-to-end encryption";
|
||||
return;
|
||||
}
|
||||
|
||||
creating = true;
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/ext/headless-sync/create-remote-vault", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
name: name.trim(),
|
||||
encryption,
|
||||
password: password || undefined,
|
||||
region: region || undefined,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error || `Request failed: ${res.status}`);
|
||||
}
|
||||
|
||||
dispatch("created");
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
creating = false;
|
||||
}
|
||||
}
|
||||
|
||||
function onBack() {
|
||||
dispatch("back");
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="create-form">
|
||||
<div class="form-row">
|
||||
<div class="form-label">
|
||||
<div class="form-name">Vault name</div>
|
||||
<div class="form-desc">Helps you remember what this vault is for</div>
|
||||
</div>
|
||||
<input type="text" placeholder="My awesome vault" bind:value={name} />
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-label">
|
||||
<div class="form-name">Region</div>
|
||||
<div class="form-desc">Select the server region closest to you</div>
|
||||
</div>
|
||||
<select bind:value={region}>
|
||||
<option value="">Automatic</option>
|
||||
<option value="europe">Europe</option>
|
||||
<option value="north-america">North America</option>
|
||||
<option value="asia">Asia</option>
|
||||
<option value="oceania">Oceania</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-label">
|
||||
<div class="form-name">Encryption</div>
|
||||
<div class="form-desc">
|
||||
End-to-end encryption requires a password you must remember.
|
||||
<span class="form-warning">This cannot be changed later.</span>
|
||||
</div>
|
||||
</div>
|
||||
<select bind:value={encryption}>
|
||||
<option value="e2ee">End-to-end encryption</option>
|
||||
<option value="standard">Standard encryption</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{#if encryption === "e2ee"}
|
||||
<div class="form-row">
|
||||
<div class="form-label">
|
||||
<div class="form-name">Encryption password</div>
|
||||
<div class="form-desc">
|
||||
<span class="form-warning">If you forget this password, any remote data will remain unusable forever.</span>
|
||||
This does not affect your local data.
|
||||
</div>
|
||||
</div>
|
||||
<input type="password" placeholder="Your password" bind:value={password} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if error}
|
||||
<div class="form-error">{error}</div>
|
||||
{/if}
|
||||
|
||||
<div class="form-footer">
|
||||
<Button variant="secondary" on:click={onBack}>Back</Button>
|
||||
<Button variant="primary" disabled={creating} on:click={onSubmit}>
|
||||
{creating ? "Creating..." : "Create"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.form-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
.form-row + .form-row {
|
||||
border-top: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
.form-label {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.form-name {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.form-desc {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 0.25rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.form-warning {
|
||||
color: var(--text-error);
|
||||
}
|
||||
|
||||
input, select {
|
||||
font-family: var(--font-interface);
|
||||
font-size: 0.875rem;
|
||||
padding: 0.375rem 0.625rem;
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: 0.375rem;
|
||||
background: var(--background-primary);
|
||||
color: var(--text-normal);
|
||||
min-width: 200px;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
input:focus, select:focus {
|
||||
outline: none;
|
||||
border-color: var(--interactive-accent);
|
||||
}
|
||||
|
||||
.form-error {
|
||||
color: var(--text-error);
|
||||
font-size: 0.8125rem;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.form-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
</style>
|
||||
94
packages/ui/src/views/sync/VaultList.svelte
Normal file
94
packages/ui/src/views/sync/VaultList.svelte
Normal file
@@ -0,0 +1,94 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import VaultRow from "./VaultRow.svelte";
|
||||
import Button from "../../components/input/Button.svelte";
|
||||
|
||||
export let vaults = [];
|
||||
export let loading = false;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function onLink(e) {
|
||||
dispatch("link", e.detail);
|
||||
}
|
||||
|
||||
function onCreate() {
|
||||
dispatch("create");
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="vault-list">
|
||||
<h3 class="vault-list-heading">Your remote vaults</h3>
|
||||
|
||||
<div class="vault-list-items">
|
||||
{#if loading}
|
||||
<div class="vault-list-spinner-area">
|
||||
<div class="vault-list-spinner"></div>
|
||||
</div>
|
||||
{:else if vaults.length === 0}
|
||||
<p class="vault-list-empty">No remote vaults found. Create one to get started.</p>
|
||||
{:else}
|
||||
{#each vaults as vault (vault.id)}
|
||||
<VaultRow {vault} on:link={onLink} />
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="vault-list-footer">
|
||||
<Button variant="primary" disabled={loading} on:click={onCreate}>
|
||||
Create new vault
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.vault-list-heading {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-normal);
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
.vault-list-empty {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
margin: 0;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.vault-list-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
min-height: 180px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.vault-list-spinner-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.vault-list-spinner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 2px solid var(--background-modifier-border);
|
||||
border-top-color: var(--text-muted);
|
||||
border-radius: 50%;
|
||||
animation: ignis-vault-spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes ignis-vault-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.vault-list-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
229
packages/ui/src/views/sync/VaultRow.svelte
Normal file
229
packages/ui/src/views/sync/VaultRow.svelte
Normal file
@@ -0,0 +1,229 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { Pencil } from "lucide-svelte";
|
||||
import Button from "../../components/input/Button.svelte";
|
||||
|
||||
export let vault;
|
||||
export let linked = false;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let expanded = false;
|
||||
let vaultPassword = "";
|
||||
let deviceName = "ignis-headless";
|
||||
let mode = "bidirectional";
|
||||
let linking = false;
|
||||
|
||||
function toggleExpand() {
|
||||
expanded = !expanded;
|
||||
}
|
||||
|
||||
async function onLink() {
|
||||
linking = true;
|
||||
|
||||
dispatch("link", {
|
||||
vault,
|
||||
vaultPassword: vaultPassword || undefined,
|
||||
deviceName,
|
||||
mode,
|
||||
});
|
||||
}
|
||||
|
||||
export function setLinking(val) {
|
||||
linking = val;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="vault-row" class:expanded>
|
||||
<div class="vault-row-main">
|
||||
<div class="vault-row-info">
|
||||
<div class="vault-row-name">{vault.name}</div>
|
||||
<div class="vault-row-region">{vault.region || "Unknown region"}</div>
|
||||
</div>
|
||||
<div class="vault-row-actions">
|
||||
{#if linked}
|
||||
<button class="icon-btn" title="Edit sync config" on:click={toggleExpand}>
|
||||
<Pencil size="14" />
|
||||
</button>
|
||||
{:else}
|
||||
<Button
|
||||
variant="secondary"
|
||||
on:click={toggleExpand}
|
||||
>
|
||||
{expanded ? "Cancel" : "Connect"}
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if expanded}
|
||||
<div class="vault-row-options">
|
||||
<div class="option-row">
|
||||
<div class="option-label">
|
||||
<div class="option-name">Vault password</div>
|
||||
<div class="option-desc">Required if the vault uses end-to-end encryption</div>
|
||||
</div>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Leave empty if not encrypted"
|
||||
bind:value={vaultPassword}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="option-row">
|
||||
<div class="option-label">
|
||||
<div class="option-name">Device name</div>
|
||||
<div class="option-desc">Identifies this server in sync version history</div>
|
||||
</div>
|
||||
<input type="text" bind:value={deviceName} />
|
||||
</div>
|
||||
|
||||
<div class="option-row">
|
||||
<div class="option-label">
|
||||
<div class="option-name">Sync mode</div>
|
||||
</div>
|
||||
<select bind:value={mode}>
|
||||
<option value="bidirectional">Bidirectional</option>
|
||||
<option value="pull-only">Pull only (remote to server)</option>
|
||||
<option value="mirror-remote">Mirror remote (exact copy)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="option-footer">
|
||||
{#if expanded && !linked}
|
||||
<Button variant="secondary" on:click={toggleExpand}>Cancel</Button>
|
||||
{/if}
|
||||
<Button variant="primary" disabled={linking} on:click={onLink}>
|
||||
{linking ? "Linking..." : "Link Vault"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.vault-row {
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: 0.375rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vault-row-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.vault-row-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.vault-row-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.9375rem;
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.vault-row-region {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.vault-row-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.vault-row-actions :global(.btn.secondary) {
|
||||
padding: 4px 12px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
background: var(--interactive-normal);
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.vault-row-actions :global(.btn.secondary:hover:not(:disabled)) {
|
||||
background: var(--interactive-hover);
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
background: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
color: var(--text-normal);
|
||||
background: var(--background-modifier-hover);
|
||||
}
|
||||
|
||||
.vault-row-options {
|
||||
padding: 0.5rem 1rem 1rem;
|
||||
border-top: 1px solid var(--background-modifier-border);
|
||||
background: var(--background-primary-alt);
|
||||
}
|
||||
|
||||
.option-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.625rem 0;
|
||||
}
|
||||
|
||||
.option-row + .option-row {
|
||||
border-top: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
.option-label {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.option-name {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.option-desc {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
input, select {
|
||||
font-family: var(--font-interface);
|
||||
font-size: 0.875rem;
|
||||
padding: 0.375rem 0.625rem;
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: 0.375rem;
|
||||
background: var(--background-primary);
|
||||
color: var(--text-normal);
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
input:focus, select:focus {
|
||||
outline: none;
|
||||
border-color: var(--interactive-accent);
|
||||
}
|
||||
|
||||
.option-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user