@aerogel/plugin-local-first 0.0.0 → 0.1.0

package/package.json

@@ -1,10 +1,11 @@
 {
     "name": "@aerogel/plugin-local-first",
-    "version": "0.0.0",
+    "version": "0.1.0",
     "type": "module",
     "sideEffects": false,
     "exports": {
         "types": "./dist/aerogel-plugin-local-first.d.ts",
+        "style": "./src/index.css",
         "default": "./dist/aerogel-plugin-local-first.js"
     },
     "files": [
@@ -29,10 +30,9 @@
         "soukai-solid": "*"
     },
     "dependencies": {
-        "@noeldemartin/solid-utils": "0.6.0-next.cfba421315c47e4aa5a72990714376d9dcd1ffff",
-        "@noeldemartin/utils": "0.7.0-next.928e77e4d67adf7b9e4e1c5387f321ecfe3b11ca",
-        "idb": "^8.0.2",
-        "vue": "^3.3.0"
+        "@noeldemartin/solid-utils": "^0.6.1",
+        "@noeldemartin/utils": "^0.7.1",
+        "idb": "^8.0.2"
     },
     "devDependencies": {
         "@aerogel/core": "*",

package/src/components/Account.vue

@@ -0,0 +1,9 @@
+<template>
+    <AccountLoggedIn v-if="$solid.hasLoggedIn()" />
+    <AccountLoggedOut v-else />
+</template>
+
+<script setup lang="ts">
+import AccountLoggedIn from './AccountLoggedIn.vue';
+import AccountLoggedOut from './AccountLoggedOut.vue';
+</script>

package/src/components/AccountLoggedIn.vue

@@ -0,0 +1,85 @@
+<template>
+    <div class="relative size-12">
+        <button
+            class="clickable focus-visible:outline-primary-600 flex size-full rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+            type="button"
+            :aria-label="$td('account.open', 'Open account')"
+            :title="$td('account.open', 'Open account')"
+            @click="$ui.modal(AccountModal)"
+        >
+            <SolidAvatar class="size-full" />
+            <div
+                v-if="accountStatus.loading"
+                class="absolute -inset-1 animate-spin rounded-full border-2 border-[currentColor_transparent] text-green-500"
+            />
+        </button>
+        <div
+            class="pointer-events-none absolute right-0 bottom-0 size-3 rounded-full border-2 border-white"
+            :class="accountStatus.classes"
+        >
+            <span class="sr-only">{{ accountStatus.message }}</span>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Solid, SolidAvatar } from '@aerogel/plugin-solid';
+import { translateWithDefault } from '@aerogel/core';
+
+import Cloud from '@aerogel/plugin-local-first/services/Cloud';
+import { CloudStatus } from '@aerogel/plugin-local-first/services/Cloud.state';
+
+import AccountModal from './AccountModal.vue';
+
+interface AccountStatus {
+    classes: string;
+    message: string;
+    loading?: boolean;
+}
+
+const accountStatus = computed((): AccountStatus => {
+    if (Cloud.syncing || Solid.loginOngoing) {
+        return {
+            loading: true,
+            classes: 'bg-green-500 sr-only',
+            message: getAccountStatusMessage() ?? '',
+        };
+    }
+
+    if (Solid.error || Cloud.syncError) {
+        return {
+            classes: 'bg-red-500',
+            message: translateWithDefault('account.error', 'There has been an error connecting with your account.'),
+        };
+    }
+
+    if (!Solid.isLoggedIn() || Cloud.dirty || !Cloud.ready) {
+        return {
+            classes: 'bg-yellow-500',
+            message: translateWithDefault(
+                'account.dirty',
+                'There are local changes that haven\'t been synchronized yet.',
+            ),
+        };
+    }
+
+    return {
+        classes: 'bg-green-500',
+        message: getAccountStatusMessage() ?? '',
+    };
+});
+
+function getAccountStatusMessage(): string | undefined {
+    switch (Cloud.status) {
+        case CloudStatus.Syncing:
+            return translateWithDefault('cloud.status.syncing', 'Synchronization in progress');
+        case CloudStatus.Migrating:
+            return translateWithDefault('cloud.status.migrating', 'Migration in progress');
+        case CloudStatus.Online:
+            return translateWithDefault('cloud.status.online', 'Online');
+        case CloudStatus.Disconnected:
+            return translateWithDefault('cloud.status.disconnected', 'Disconnected');
+    }
+}
+</script>

package/src/components/AccountLoggedOut.vue

@@ -0,0 +1,26 @@
+<template>
+    <DropdownMenu
+        align="start"
+        :options="[
+            { label: $td('user.logIn', 'Connect account'), click: () => $ui.modal(AccountLoginModal) },
+            { label: $td('user.settings', 'Settings'), click: () => $ui.modal(SettingsModal) },
+        ]"
+    >
+        <Button
+            size="icon"
+            variant="ghost"
+            :aria-label="$td('user.menu', 'Configuration')"
+            :title="$td('user.menu', 'Configuration')"
+        >
+            <IconCog class="size-5" />
+        </Button>
+    </DropdownMenu>
+</template>
+
+<script setup lang="ts">
+import IconCog from '~icons/zondicons/cog';
+
+import { Button, DropdownMenu, SettingsModal } from '@aerogel/core';
+
+import AccountLoginModal from './AccountLoginModal.vue';
+</script>

package/src/components/AccountLoginModal.vue

@@ -0,0 +1,36 @@
+<template>
+    <Modal :title="$td('cloud.logIn.title', 'Connect account')">
+        <Markdown
+            lang-key="cloud.logIn.info"
+            lang-default="Log in to your [Solid account](https://solidproject.org) to keep data safe across devices."
+        />
+        <Link
+            class="text-sm"
+            @click="
+                $ui.alert(
+                    $td('cloud.logIn.learnMore', 'What is Solid?'),
+                    $td(
+                        'cloud.logIn.learnMoreMessage',
+                        'Solid is a decentralized storage protocol built on top of web standards. ' +
+                            'If you want to use this app across devices, ' +
+                            'you can use Solid to keep changes in sync. ' +
+                            'Even if you use it in a single device, ' +
+                            'this will also keep your data secure in case your device is lost.\n\n' +
+                            'In any case, Focus works 100% offline and you can connect your Solid POD later on. ' +
+                            'If you\'ve never heard of Solid and you\'re just trying things out, ' +
+                            'you can keep using it without an account.\n\n' +
+                            '[Learn more](https://solidproject.org)'
+                    )
+                )
+            "
+        >
+            {{ $td('cloud.logIn.learnMore', 'What is Solid?') }}
+        </Link>
+        <SolidLogin no-loading class="mt-4" />
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import { Link, Markdown, Modal } from '@aerogel/core';
+import { SolidLogin } from '@aerogel/plugin-solid';
+</script>

package/src/components/AccountModal.vue

@@ -0,0 +1,206 @@
+<template>
+    <Modal
+        ref="$modalRef"
+        title-hidden
+        close-hidden
+        :title="$td('account.title', 'Account')"
+    >
+        <div class="relative flex items-center rounded-md bg-gray-100 p-4 pr-12">
+            <SolidAvatar class="mr-2 size-16 shrink-0" />
+            <div class="flex flex-col overflow-hidden">
+                <span class="font-semibold">{{ $solid.user?.name ?? $td('user.anonymous', 'Anonymous') }}</span>
+                <Link :href="$solid.user?.webId" class="mt-0.5 truncate text-sm font-light text-gray-500">
+                    {{ $solid.user?.webId }}
+                </Link>
+            </div>
+            <Button
+                size="icon"
+                variant="ghost"
+                class="absolute top-1 right-1 hover:bg-gray-200"
+                :aria-label="$td('user.settings', 'Settings')"
+                :title="$td('user.settings', 'Settings')"
+                @click="$ui.modal(SettingsModal)"
+            >
+                <IconCog class="size-5" />
+            </Button>
+        </div>
+
+        <div class="px-2">
+            <div v-if="$cloud.syncing" class="mt-4 flex items-center gap-2">
+                <IconRefresh class="mt-0.5 size-6 shrink-0 animate-spin self-start text-green-500" />
+                <div class="flex w-full flex-col">
+                    <Markdown lang-key="cloud.info.syncing" lang-default="Synchronizing..." />
+                    <ProgressBar v-if="$cloud.syncJob" :job="$cloud.syncJob" filled-class="bg-green-500" />
+                </div>
+            </div>
+            <div v-else-if="$solid.loginOngoing" class="mt-4 flex items-center gap-2">
+                <IconRefresh class="mt-0.5 size-6 shrink-0 animate-spin self-start text-green-500" />
+                <Markdown lang-key="cloud.info.reconnecting" lang-default="Reconnecting..." />
+            </div>
+            <div v-else-if="error" class="mt-4 flex items-center gap-2">
+                <IconWarning class="mt-0.5 size-6 shrink-0 self-start text-red-500" />
+                <div>
+                    <Markdown :text="errorDescription" />
+                    <Link
+                        v-if="showErrorDetails"
+                        class="text-sm text-red-700 opacity-50 hover:opacity-75 focus-visible:opacity-75"
+                        @click="$errors.inspect(error)"
+                    >
+                        {{ $td('errors.viewDetails', 'View details') }}
+                    </Link>
+                </div>
+            </div>
+            <div v-else-if="!$cloud.ready" class="mt-4 flex items-center gap-2">
+                <IconWarning class="mt-0.5 size-6 shrink-0 self-start text-yellow-500" />
+                <Markdown lang-key="cloud.info.setup" lang-default="Your data is not backed up yet." />
+            </div>
+            <div v-else-if="$cloud.dirty" class="mt-4 flex items-center gap-2">
+                <IconWarning class="mt-0.5 size-6 shrink-0 self-start text-yellow-500" />
+                <Markdown
+                    lang-key="cloud.info.changes"
+                    lang-default="Everything is up to date. | There is one local change. | There are {n} local changes."
+                    :lang-params="$cloud.localChanges"
+                />
+            </div>
+            <div v-else-if="$cloud.online" class="mt-4 flex items-center gap-2">
+                <IconCheckmarkOutline class="mt-0.5 size-6 shrink-0 self-start text-green-500" />
+                <Markdown lang-key="cloud.info.changes" lang-default="Everything is up to date." :lang-params="0" />
+            </div>
+            <div v-else class="mt-4 flex items-center gap-2">
+                <IconWarning class="mt-0.5 size-6 shrink-0 self-start text-yellow-500" />
+                <Markdown
+                    lang-key="cloud.info.disconnected"
+                    lang-default="You are disconnected from your Solid account, all the changes you make will remain in your device."
+                />
+            </div>
+            <AdvancedOptions class="mt-2">
+                <ul class="flex flex-col gap-2">
+                    <li>
+                        <Checkbox
+                            v-model="$solid.autoReconnect"
+                            label-class="text-base"
+                            :label="$td('cloud.advanced.reconnect', 'Reconnect on startup')"
+                        />
+                    </li>
+                    <li>
+                        <Checkbox
+                            v-model="$cloud.startupSync"
+                            label-class="text-base"
+                            :label="$td('cloud.advanced.startupSync', 'Synchronize on startup')"
+                        />
+                    </li>
+                    <li>
+                        <Checkbox v-model="$cloud.pollingEnabled" label-class="text-base">
+                            <div class="flex items-center">
+                                <span aria-hidden="true">{{ pollingText[0] }}</span>
+                                <EditableContent
+                                    type="number"
+                                    :text="`${$cloud.pollingMinutes}`"
+                                    :aria-label="
+                                        $td('cloud.advanced.pollingMinutes', 'Synchronization interval (in minutes)')
+                                    "
+                                    class="focus-within:border-primary-600 mx-1 -mb-px border-b"
+                                    @update="$cloud.pollingMinutes = $event as number"
+                                >
+                                    {{ $cloud.pollingMinutes }}
+                                </EditableContent>
+                                <span v-if="pollingText.length > 1" aria-hidden="true">{{ pollingText[1] }}</span>
+                            </div>
+                        </Checkbox>
+                    </li>
+                </ul>
+            </AdvancedOptions>
+        </div>
+
+        <div v-if="!$solid.loginOngoing" class="mt-4 flex flex-row-reverse justify-start gap-2">
+            <Button
+                v-if="$cloud.syncing"
+                variant="secondary"
+                :disabled="cancellingSync"
+                @click="cancelSync()"
+            >
+                <IconStop class="size-5" />
+                <span>{{
+                    cancellingSync ? $td('cloud.stopping', 'Stopping...') : $td('cloud.stop', 'Stop synchronization')
+                }}</span>
+            </Button>
+            <Button v-else-if="!$solid.isLoggedIn()" @click="$solid.reconnect({ force: true })">
+                <IconRefresh class="size-5" />
+                <span>{{ $td('cloud.reconnect', 'Reconnect') }}</span>
+            </Button>
+            <Button v-else-if="$cloud.ready" @click="$cloud.sync({ refreshUserProfile: true })">
+                <IconRefresh class="size-5" />
+                <span>{{ $td('cloud.sync', 'Synchronize') }}</span>
+            </Button>
+            <Button v-else @click="(($cloud.setupDismissed = false), $modal?.close())">
+                <IconCloudUpload class="size-5" />
+                <span>{{ $td('cloud.setup.submit', 'Back up now') }}</span>
+            </Button>
+            <Button v-if="!$cloud.syncing" variant="secondary" @click="$solid.logout()">
+                <IconLogout class="size-5" />
+                <span>{{ $cloud.ready ? $td('cloud.logOut', 'Log out') : $td('cloud.disconnect', 'Disconnect') }}</span>
+            </Button>
+        </div>
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import IconCheckmarkOutline from '~icons/zondicons/checkmark-outline';
+import IconCloudUpload from '~icons/ic/sharp-cloud-upload';
+import IconCog from '~icons/zondicons/cog';
+import IconLogout from '~icons/material-symbols/logout-rounded';
+import IconRefresh from '~icons/zondicons/refresh';
+import IconStop from '~icons/ic/baseline-stop';
+import IconWarning from '~icons/ion/warning';
+
+import {
+    AdvancedOptions,
+    Button,
+    Checkbox,
+    EditableContent,
+    Link,
+    Markdown,
+    Modal,
+    ProgressBar,
+    SettingsModal,
+    translateWithDefault,
+    useEvent,
+} from '@aerogel/core';
+import { computed, ref, useTemplateRef } from 'vue';
+import { Solid, SolidAvatar } from '@aerogel/plugin-solid';
+
+import Cloud from '@aerogel/plugin-local-first/services/Cloud';
+
+const $modal = useTemplateRef('$modalRef');
+const cancellingSync = ref(false);
+const pollingText = translateWithDefault('cloud.advanced.polling', 'Synchronize every {minutes} minutes', {
+    minutes: '%%separator%%',
+}).split('%%separator%%');
+const error = computed(() => Solid.error ?? Cloud.syncError);
+const errorDescription = computed(() => {
+    if (!error.value) {
+        return;
+    }
+
+    if (typeof error.value === 'string') {
+        return error.value;
+    }
+
+    return translateWithDefault('cloud.info.error', 'There has been an error connecting.');
+});
+const showErrorDetails = computed(() => error.value && typeof error.value !== 'string');
+
+async function cancelSync() {
+    if (!Cloud.syncJob) {
+        return;
+    }
+
+    cancellingSync.value = true;
+
+    await Promise.race([Cloud.syncJob.cancel(), Cloud.syncJob.completed]);
+
+    cancellingSync.value = false;
+}
+
+useEvent('auth:logout', () => $modal.value?.close());
+</script>

package/src/components/index.ts

@@ -1,3 +1,5 @@
-import AGCloudStatus from './AGCloudStatus.vue';
-
-export { AGCloudStatus };
+export { default as Account } from './Account.vue';
+export { default as AccountLoggedIn } from './AccountLoggedIn.vue';
+export { default as AccountLoggedOut } from './AccountLoggedOut.vue';
+export { default as AccountLoginModal } from './AccountLoginModal.vue';
+export { default as AccountModal } from './AccountModal.vue';

package/src/components/settings/PurgeData.vue

@@ -0,0 +1,43 @@
+<template>
+    <details v-if="!$solid.hasLoggedIn()" class="mt-4">
+        <summary>
+            <span class="text-base font-semibold">{{ $td('settings.dangerZone', 'Danger zone') }}</span>
+        </summary>
+        <Button variant="danger" class="mt-4" @click="purgeData()">
+            <IconTrash class="size-4" />
+            <span class="ml-1">{{ $td('settings.purge', 'Purge data') }}</span>
+        </Button>
+    </details>
+</template>
+
+<script setup lang="ts">
+import IconTrash from '~icons/zondicons/trash';
+
+import { Button, Storage, UI, translateWithDefault } from '@aerogel/core';
+
+import AccountLoginModal from '@aerogel/plugin-local-first/components/AccountLoginModal.vue';
+
+async function purgeData(): Promise<void> {
+    const confirmed = await UI.confirm(
+        translateWithDefault('settings.purgeConfirmTitle', 'Delete everything?'),
+        translateWithDefault(
+            'settings.purgeConfirmMessage',
+            'If you proceed, all your data will be deleted forever. ' +
+                'If you want to save it before wiping this device, ' +
+                'you can [connect to your Solid account](#action:connect) first.',
+        ),
+        {
+            acceptVariant: 'danger',
+            acceptText: translateWithDefault('settings.purgeConfirmAccept', 'Purge data'),
+            actions: { connect: () => UI.modal(AccountLoginModal) },
+        },
+    );
+
+    if (!confirmed) {
+        return;
+    }
+
+    await UI.closeAllModals();
+    await Storage.purge();
+}
+</script>

package/src/components/settings/index.ts

@@ -0,0 +1,10 @@
+import { defineSettings } from '@aerogel/core';
+
+import PurgeData from './PurgeData.vue';
+
+export default defineSettings([
+    {
+        priority: 0,
+        component: PurgeData,
+    },
+]);

package/src/index.css

@@ -0,0 +1 @@
+@source './';

package/src/index.ts

@@ -1,9 +1,11 @@
-import { bootServices } from '@aerogel/core';
+import { App, bootServices } from '@aerogel/core';
 import type { Plugin } from '@aerogel/core';
 
 import Cloud from '@aerogel/plugin-local-first/services/Cloud';
 import DocumentsCache from '@aerogel/plugin-local-first/services/DocumentsCache';
 
+import settings from './components/settings';
+
 const services = { $cloud: Cloud };
 
 export { Cloud };
@@ -16,6 +18,8 @@ export default function localFirst(): Plugin {
     return {
         name: '@aerogel/local-first',
         async install(app) {
+            settings.forEach((setting) => App.addSetting(setting));
+
             await bootServices(app, {
                 ...services,
                 $_documentsCache: DocumentsCache,

package/src/jobs/Migrate.test.ts

@@ -168,7 +168,7 @@ describe('Migrate', () => {
 
 async function setupMigration(count: number = 1) {
     // Arrange - Mint urls
-    const parentContainerUrl = Solid.requireUser().storageUrls[0];
+    const parentContainerUrl = Solid.requireUser().storageUrls[0] + 'tasks/';
     const containerUrl = fakeContainerUrl({ baseUrl: parentContainerUrl });
     const documentUrls = range(count).map(() => fakeDocumentUrl({ containerUrl })) as [string, ...string[]];
 

package/src/jobs/Migrate.ts

@@ -36,6 +36,12 @@ export default class Migrate extends mixed(BaseJob, [LoadsChildren, LoadsTypeInd
         });
     }
 
+    constructor() {
+        super();
+
+        this.localModels = map([], 'url');
+    }
+
     protected _models?: SolidModel[];
 
     public get models(): SolidModel[] | undefined {
@@ -45,7 +51,8 @@ export default class Migrate extends mixed(BaseJob, [LoadsChildren, LoadsTypeInd
     public set models(models: SolidModel[] | undefined) {
         if (!models) {
             delete this._models;
-            delete this.localModels;
+
+            this.localModels = map([], 'url');
 
             return;
         }