Mono

← All Skills Knowledge History

Move memo backup/import into a dedicated modal (follow-up to the FSA backup feature)

completed📦 my-memo👤 YCEJ9999🗓 2026-06-21 00:15:00

memobackup-restoreui-refactormono-modaluseFileSystemAccessux-grouping

Request

  • Move the import + backup buttons out of the list toolbar and into a modal.
  • Update Mono Skills.

Summary

Memo backup/import moved into a dedicated modal

Follow-up to 2026-06-20_memo-txt-backup-fsa. The useFileSystemAccess backup/restore logic is unchanged; only its presentation moved — out of the list toolbar and into its own modal.

Change

  • The list toolbar now has a single button — "Cadangan & Impor" (i-mdi-database-cog-outline) — that opens a dedicated mono-modal (backupOpen ref in the page).
  • The modal body shows the memo count and two action cards: Unduh cadangan (calls exportBackup()) and Impor .txt (calls importBackup()); footer has Tutup.
  • The modal closes after a successful import (both the FSA path and the fallback <input type=file> path set backupOpen.value = false), so the refreshed list is visible.
  • It reuses the same responsive trick as the edit modal: :width.prop/:height.prop = '100%' when useMediaQuery('(max-width: 640px)'), so it's full-screen on phones.

Why a dedicated modal (not the per-memo edit modal)

Backup/import operate on all memos, so they don't belong in the per-memo create/edit modal (which is scoped to one memo). A separate "feature modal" keeps the list toolbar clean and groups the two whole-list actions together. The underlying useFileSystemAccess + Blob/file-input fallback + AbortError-on-cancel handling from the prior session all stayed the same.

File

  • src/pages/memo/index.vue — added backupOpen ref; replaced the two toolbar buttons with one opener; added the mono-modal with the two action cards; close-on-import. No change to use-memo-utils.ts or the store.

Outcome

successvite module transform + UnoCSS icon check /memo and the page module transform 200 One toolbar button (i-mdi-database-cog-outline, 'Cadangan & Impor') opens backupOpen; the two actions live inside the modal UnoCSS generates i-mdi-database-cog-outline, i-mdi-file-import, i-mdi-content-save-outline

Decisions

Dedicated backup modal, not the per-memo edit modal

Put backup/import in their own 'Cadangan & Impor' modal opened by a single toolbar button, rather than inside the create/edit memo modal.

Why: Backup and import act on ALL memos; the edit modal is scoped to a single memo. A separate feature modal is the correct grouping and keeps the toolbar uncluttered.

Close the modal after a successful import

Set backupOpen = false after importMemos in both the useFileSystemAccess path and the fallback file-input handler.

Why: After importing, the user wants to see the updated list; leaving the modal open hides the result.

Files changed

FileOperationNote
src/pages/memo/index.vuemodifiedAdded backupOpen ref; replaced the two toolbar buttons with one 'Cadangan & Impor' opener; added a dedicated mono-modal with Unduh cadangan / Impor .txt action cards (responsive full-screen on small); close modal after successful import (FSA + fallback paths). FSA/serialize logic unchanged.

Commands

pnpm dev
curl /memo + page module (200)
MONO_SKILLS=true MONO_SKILLS_GITHUB_TOKEN=[REDACTED] pnpm exec mono skills save --app my-memo --dir .mono/skills/pending/<id>

Validation

Tests: not run Build: passed

← All Skills Knowledge History