feat: adds links to import / export settings page

projects/mastolists/src/app/sync/sync/sync.component.html

@@ -37,6 +37,17 @@
                     </button>
                 </div>
 
+                <div class="divider"></div>
+
+                <div style="display:flex; flex-direction: column;">
+                    <a [href]="'https://' + instanceName + '/settings/export'" rel="noreferrer" target="_blank">
+                        Export lists using your account settings page
+                    </a>
+                    <a [href]="'https://' + instanceName + '/settings/import'" rel="noreferrer" target="_blank">
+                        Import lists using your account settings page
+                    </a>
+                </div>
+
                 <div *ngIf="(lists$ | async) && (followings$ | async)">
                     <p>Now you can:</p>
                     <ul>

projects/mastolists/src/app/sync/sync/sync.component.ts

@@ -4,6 +4,7 @@ import {MastodonApiActions} from "../../shared/state/store/actions";
 import {selectFollowings, selectLists, selectListsWithAccounts, selectLoading} from "../../shared/state/store/selectors";
 import {Observable, tap} from "rxjs";
 import {Account, List} from 'projects/mastodon-api/src/public-api';
+import {PersistentStore} from "../../shared/state/persistent/persistent-store.service";
 
 @Component({
     selector: 'app-sync',
@@ -14,8 +15,10 @@ export class SyncComponent {
     loading$: Observable<boolean>;
     followings$: Observable<ReadonlyArray<Account>>;
     lists$: Observable<ReadonlyArray<List>>;
+    instanceName: string;
 
-    constructor(private store: Store) {
+    constructor(private store: Store, private persistentStore: PersistentStore) {
+        this.instanceName = persistentStore.value.currentInstance.instanceName;
         this.followings$ = this.store.pipe(select(selectFollowings))
         this.lists$ = this.store.pipe(select(selectListsWithAccounts));
         this.loading$ = this.store.pipe(select(selectLoading));