feat(web): componentize frontend and replace native delete confirm
- Split monolithic app.js/style.css into Alpine.js components (icons, store, fileSection, confirm)
- Add central Alpine.store('files') as single source of truth for file lists and actions
- Replace duplicated Inbox/Outbox markup with reusable fileSection component (props: dir, canShare)
- Add shared window.Icons module to remove duplicated inline SVGs
- Replace browser-native confirm() for file deletion with a styled, accessible modal dialog
- Split CSS into design tokens, base, and component layers; modernize visuals
- Update web.go embed and server static routes for the new component/style dirs
This commit is contained in:
@@ -0,0 +1,85 @@
|
||||
/**
|
||||
* Confirmation dialog (a promise-based modal store + UI component).
|
||||
*
|
||||
* Replaces the browser-native `confirm()` with a styled, accessible modal.
|
||||
* Components request confirmation via `Alpine.store('confirm').show(opts)`,
|
||||
* which resolves `true`/`false` when the user acts — mirroring a UI-library
|
||||
* dialog API.
|
||||
*/
|
||||
(function () {
|
||||
function register() {
|
||||
Alpine.store('confirm', {
|
||||
open: false,
|
||||
title: '',
|
||||
message: '',
|
||||
danger: false,
|
||||
_resolve: null,
|
||||
|
||||
show(opts) {
|
||||
this.title = opts.title || 'Confirm';
|
||||
this.message = opts.message || '';
|
||||
this.danger = opts.danger || false;
|
||||
this.open = true;
|
||||
return new Promise((resolve) => {
|
||||
this._resolve = resolve;
|
||||
});
|
||||
},
|
||||
|
||||
accept() {
|
||||
this._close(true);
|
||||
},
|
||||
|
||||
cancel() {
|
||||
this._close(false);
|
||||
},
|
||||
|
||||
_close(result) {
|
||||
this.open = false;
|
||||
const resolve = this._resolve;
|
||||
this._resolve = null;
|
||||
if (resolve) resolve(result);
|
||||
},
|
||||
});
|
||||
|
||||
Alpine.data('confirmDialog', () => ({
|
||||
get store() {
|
||||
return Alpine.store('confirm');
|
||||
},
|
||||
get open() {
|
||||
return this.store.open;
|
||||
},
|
||||
get title() {
|
||||
return this.store.title;
|
||||
},
|
||||
get message() {
|
||||
return this.store.message;
|
||||
},
|
||||
get danger() {
|
||||
return this.store.danger;
|
||||
},
|
||||
|
||||
accept() {
|
||||
this.store.accept();
|
||||
},
|
||||
cancel() {
|
||||
this.store.cancel();
|
||||
},
|
||||
onEscape() {
|
||||
if (this.open) this.cancel();
|
||||
},
|
||||
|
||||
init() {
|
||||
this.$watch('open', (visible) => {
|
||||
if (visible) {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.accept) this.$refs.accept.focus();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
}));
|
||||
}
|
||||
|
||||
if (window.Alpine) register();
|
||||
else document.addEventListener('alpine:init', register);
|
||||
})();
|
||||
@@ -0,0 +1,44 @@
|
||||
/**
|
||||
* fileSection component.
|
||||
*
|
||||
* A single reusable component parametrized by `dir` and `canShare`. Both the
|
||||
* Inbox and Outbox on the page are the same component instance with different
|
||||
* props, replacing the previously copy-pasted <section> blocks.
|
||||
*
|
||||
* Usage:
|
||||
* <section x-data="fileSection('inbox', { canShare: true })"> ... </section>
|
||||
*/
|
||||
(function () {
|
||||
function register() {
|
||||
Alpine.data('fileSection', (dir, opts = {}) => ({
|
||||
dir,
|
||||
canShare: opts.canShare ?? false,
|
||||
dragover: false,
|
||||
|
||||
get files() {
|
||||
return Alpine.store('files').files[dir];
|
||||
},
|
||||
get count() {
|
||||
return this.files.length;
|
||||
},
|
||||
get title() {
|
||||
return dir === 'inbox' ? 'Inbox' : 'Outbox';
|
||||
},
|
||||
get icon() {
|
||||
return dir === 'inbox' ? window.Icons.inbox : window.Icons.outbox;
|
||||
},
|
||||
|
||||
async onSelect(e) {
|
||||
await Alpine.store('files').upload(this.dir, e.target.files);
|
||||
e.target.value = '';
|
||||
},
|
||||
|
||||
async onDrop(e) {
|
||||
await Alpine.store('files').upload(this.dir, e.dataTransfer.files);
|
||||
},
|
||||
}));
|
||||
}
|
||||
|
||||
if (window.Alpine) register();
|
||||
else document.addEventListener('alpine:init', register);
|
||||
})();
|
||||
@@ -0,0 +1,33 @@
|
||||
/**
|
||||
* Central icon set. Each entry is an inline SVG string (currentColor aware)
|
||||
* injected via Alpine's x-html. Keeping icons here prevents the duplicated
|
||||
* markup that previously littered every list row and header.
|
||||
*/
|
||||
window.Icons = {
|
||||
logout:
|
||||
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>',
|
||||
|
||||
inbox:
|
||||
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>',
|
||||
|
||||
outbox:
|
||||
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>',
|
||||
|
||||
file:
|
||||
'<svg viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>',
|
||||
|
||||
download:
|
||||
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>',
|
||||
|
||||
share:
|
||||
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>',
|
||||
|
||||
trash:
|
||||
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>',
|
||||
|
||||
upload:
|
||||
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 13v8"/><path d="m8 17 4-4 4 4"/><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 4 16.3"/><path d="m8 17 4-4 4 4"/></svg>',
|
||||
|
||||
empty:
|
||||
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 3-4-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>',
|
||||
};
|
||||
@@ -0,0 +1,88 @@
|
||||
/**
|
||||
* Global state store (Alpine.store).
|
||||
*
|
||||
* Single source of truth for the file lists and shared actions, analogous to a
|
||||
* Pinia/Redux store in a framework app. Components read reactive getters and
|
||||
* dispatch actions here instead of owning their own duplicate state.
|
||||
*/
|
||||
(function () {
|
||||
function register() {
|
||||
Alpine.store('files', {
|
||||
files: { inbox: [], outbox: [] },
|
||||
toast: { show: false, message: '', _timer: null },
|
||||
|
||||
async init() {
|
||||
await this.loadFiles();
|
||||
},
|
||||
|
||||
async loadFiles() {
|
||||
try {
|
||||
const [inbox, outbox] = await Promise.all([
|
||||
fetch('/api/files?dir=inbox').then((r) => r.json()),
|
||||
fetch('/api/files?dir=outbox').then((r) => r.json()),
|
||||
]);
|
||||
this.files.inbox = inbox.files || [];
|
||||
this.files.outbox = outbox.files || [];
|
||||
} catch (e) {
|
||||
this.showToast('Failed to load files');
|
||||
}
|
||||
},
|
||||
|
||||
showToast(message) {
|
||||
this.toast.message = message;
|
||||
this.toast.show = true;
|
||||
if (this.toast._timer) clearTimeout(this.toast._timer);
|
||||
this.toast._timer = setTimeout(() => {
|
||||
this.toast.show = false;
|
||||
}, 2500);
|
||||
},
|
||||
|
||||
async upload(dir, fileList) {
|
||||
if (!fileList || !fileList.length) return;
|
||||
for (const file of fileList) {
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
form.append('dir', dir);
|
||||
await fetch('/api/upload', { method: 'POST', body: form });
|
||||
}
|
||||
this.showToast('File uploaded');
|
||||
await this.loadFiles();
|
||||
},
|
||||
|
||||
download(id) {
|
||||
window.location.href = '/api/files/' + id + '/download';
|
||||
},
|
||||
|
||||
async deleteFile(id) {
|
||||
const confirmed = await Alpine.store('confirm').show({
|
||||
title: 'Delete file',
|
||||
message: 'This file will be permanently removed. Continue?',
|
||||
danger: true,
|
||||
});
|
||||
if (!confirmed) return;
|
||||
await fetch('/api/files/' + id, { method: 'DELETE' });
|
||||
this.showToast('File deleted');
|
||||
await this.loadFiles();
|
||||
},
|
||||
|
||||
async share(id) {
|
||||
const res = await fetch('/api/files/' + id + '/share', { method: 'POST' });
|
||||
const data = await res.json();
|
||||
try {
|
||||
await navigator.clipboard.writeText(data.url);
|
||||
this.showToast('Share link copied to clipboard');
|
||||
} catch (_) {
|
||||
window.prompt('Share URL:', data.url);
|
||||
}
|
||||
},
|
||||
|
||||
async logout() {
|
||||
await fetch('/api/logout', { method: 'POST' });
|
||||
window.location.href = '/login';
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (window.Alpine) register();
|
||||
else document.addEventListener('alpine:init', register);
|
||||
})();
|
||||
Reference in New Issue
Block a user