@@ -71,13 +71,50 @@ $profile.addEventListener('click', async (event) => {
value="${web.escape(registry.profileName)}"
pattern="/^[A-Za-z0-9_-]+$/"
>`,
+ $export = web.html`
`,
+ $import = web.html`
`,
$save = web.html`
`,
$delete = web.html`
`,
$error = web.html`
`;
+ $export.addEventListener('click', async (event) => {
+ const now = new Date(),
+ $a = web.html`
`;
+ web.render(document.body, $a);
+ $a.click();
+ $a.remove();
+ });
+ $import.addEventListener('change', (event) => {
+ const file = event.target.files[0],
+ reader = new FileReader();
+ reader.onload = async (progress) => {
+ try {
+ const profileUpload = JSON.parse(progress.currentTarget.result);
+ if (!profileUpload) throw Error;
+ await storage.set(['profiles', $select.value], profileUpload);
+ location.reload();
+ } catch {
+ web.render(web.empty($error), 'Invalid JSON uploaded.');
+ }
+ };
+ reader.readAsText(file);
+ });
$select.addEventListener('change', async (event) => {
if ($select.value === '--') {
$edit.value = '';
@@ -91,6 +128,10 @@ $profile.addEventListener('click', async (event) => {
);
return false;
}
+ if (!$edit.value) {
+ web.render(web.empty($error), 'Profile names cannot be empty.');
+ return false;
+ }
if (!$edit.value.match(/^[A-Za-z0-9_-]+$/)) {
web.render(
web.empty($error),
@@ -139,7 +180,7 @@ $profile.addEventListener('click', async (event) => {
$edit,
web.html`${web.icon('type', { class: 'input-icon' })}`
),
- web.render(web.html`
`, $save, $delete),
+ web.render(web.html`
`, $export, $import, $save, $delete),
$error
);
}
diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/styles.mjs b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/styles.mjs
index ea6f353..de8337f 100644
--- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/styles.mjs
+++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/styles.mjs
@@ -59,14 +59,18 @@ const customClasses = {
'mod-author': apply`flex items-center mb-2`,
'mod-author-avatar': apply`inline object-cover w-5 h-5 rounded-full mr-2`,
'sidebar': apply`h-full w-96 px-4 pt-3 pb-32 flex flex-col bg-notion-secondary border-l border-divider`,
- 'profile-button': apply`block px-4 py-3 mb-2 rounded-md text-sm text-left font-semibold shadow-inner
+ 'profile-trigger': apply`block px-4 py-3 mb-2 rounded-md text-sm text-left font-semibold shadow-inner
bg-accent-red-hover border border-accent-red text-accent-red focus:(outline-none ring ring-inset ring-accent-red)`,
- 'profile-save': apply`text-sm px-3 py-2 font-medium mt-2 bg-accent-blue text-accent-blue-text rounded-md
- hover:bg-accent-blue-hover focus:(bg-accent-blue-focus outline-none)`,
- 'profile-delete': apply`text-sm px-3 py-2 font-medium ml-3 mt-3 bg-red-tag text-red-tag-text rounded-md
- border border-red-text hover:bg-red-text focus:(outline-none bg-red-text)`,
+ 'profile-actions': apply`flex`,
+ 'profile-save': apply`text-sm px-3 py-2 font-medium mt-2 bg-accent-blue text-accent-blue-text rounded-md flex-grow
+ hover:bg-accent-blue-hover focus:(bg-accent-blue-focus outline-none) text-center`,
+ 'profile-delete': apply`text-sm px-3 py-2 font-medium ml-3 mt-2 bg-red-tag text-red-tag-text rounded-md flex-grow
+ border border-red-text hover:bg-red-text focus:(outline-none bg-red-text) text-center`,
+ 'profile-export': apply`profile-save mr-2`,
+ 'profile-import': apply`profile-save mr-2`,
'profile-error': apply`text-xs mt-2 text-red-text`,
- 'button-icon': apply`w-4 h-4 -mt-1 inline-block mr-1`,
+ 'profile-icon-action': apply`w-4 h-4 -mt-1 inline-block`,
+ 'profile-icon-text': apply`w-4 h-4 -mt-1 inline-block mr-1`,
'options-container': apply`px-4 py-3 shadow-inner rounded-lg bg-notion border border-divider space-y-3`,
'options-placeholder': apply`text-sm text-foreground-secondary`,
'toggle-box': apply`w-9 h-5 p-0.5 flex items-center bg-toggle-off rounded-full duration-300 ease-in-out cursor-pointer`,