flesh out settings menu

routes/_utils/mastodon/user.js

@@ -1,6 +1,6 @@
 import { get } from '../ajax'
 
-export function getCurrentUser(instanceName, accessToken) {
+export function getThisUserAccount(instanceName, accessToken) {
   let url = `https://${instanceName}/api/v1/accounts/verify_credentials`
   return get(url, {
     'Authorization': `Bearer ${accessToken}`

routes/settings/_components/SettingsListItem.html

@@ -1,4 +1,15 @@
-<li><a :href>{{label}}</a></li>
+<li>
+  <a :href>
+    {{#if icon}}
+    <svg>
+      <use xlink:href="{{icon}}" />
+    </svg>
+    {{/if}}
+    <span class="{{offsetForIcon ? 'offset-for-icon' : ''}}">
+      {{label}}
+    </span>
+  </a>
+</li>
 <style>
   li {
     border: 1px solid var(--settings-list-item-border);
@@ -6,10 +17,13 @@
     display: flex;
     flex-direction: column;
   }
+  a {
+    display: flex;
+    padding: 20px;
+    background: var(--settings-list-item-bg);
+  }
   a, a:visited {
     color: var(--settings-list-item-text);
-    background: var(--settings-list-item-bg);
-    padding: 20px;
   }
   a:hover {
     text-decoration: none;
@@ -19,4 +33,15 @@
   a:active {
     background: var(--settings-list-item-bg-active);
   }
+  svg {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+    margin-right: 20px;
+    fill: var(--svg-fill);
+  }
+  .offset-for-icon {
+    margin-left: 44px;
+  }
+
 </style>

routes/settings/instances/[instanceName].html

@@ -6,12 +6,12 @@
   <SettingsLayout page='settings/instances/{{params.instanceName}}' label="{{params.instanceName}}">
     <h1>{{params.instanceName}}</h1>
 
-    {{#if currentUser}}
+    {{#if instanceUserAccount}}
       <h2>Logged in as:</h2>
       <div class="current-user">
-        <img src="{{currentUser.avatar}}" />
-        <a rel="noopener" target="_blank" href="{{currentUser.url}}">@{{currentUser.acct}}</a>
-        <span class="acct-name">{{currentUser.display_name}}</span>
+        <img src="{{instanceUserAccount.avatar}}" />
+        <a rel="noopener" target="_blank" href="{{instanceUserAccount.url}}">@{{instanceUserAccount.acct}}</a>
+        <span class="acct-name">{{instanceUserAccount.display_name}}</span>
       </div>
       <h2>Theme:</h2>
       <form class="theme-chooser">
@@ -26,7 +26,8 @@
       </form>
 
       <form class="instance-actions">
-        <button class="primary" disabled="$currentInstance === params.instanceName">
+        <button class="primary" disabled="{{$currentInstance === params.instanceName}}"
+          on:click="onSwitchToThisInstance()">
           Switch to this instance
         </button>
         <button>Log out</button>
@@ -75,7 +76,7 @@
   import { store } from '../../_utils/store'
   import Layout from '../../_components/Layout.html'
   import SettingsLayout from '../_components/SettingsLayout.html'
-  import { getCurrentUser } from '../../_utils/mastodon/user'
+  import { getThisUserAccount } from '../../_utils/mastodon/user'
   import { themes } from '../../_static/themes'
   import { switchToTheme } from '../../_utils/themeEngine'
 
@@ -89,17 +90,20 @@
       themes: themes
     }),
     oncreate: async function () {
-      let currentInstanceData = this.store.get('currentInstanceData')
-      let currentUser = await getCurrentUser(currentInstanceData.name, currentInstanceData.access_token)
+      let instanceName = this.get('params').instanceName
+      let loggedInInstances = this.store.get('loggedInInstances')
+      let instanceThemes = this.store.get('instanceThemes')
+      let instanceData = loggedInInstances[instanceName]
+      let instanceUserAccount = await getThisUserAccount(instanceName, instanceData.access_token)
       this.set({
-        currentUser: currentUser,
-        selectedTheme: this.store.get('currentTheme')
+        instanceUserAccount: instanceUserAccount,
+        selectedTheme: instanceThemes[instanceName]
       })
     },
     methods: {
-      onThemeChange () {
+      onThemeChange() {
         let newTheme = this.get('selectedTheme')
-        let instanceName = this.store.get('currentInstance')
+        let instanceName = this.get('params').instanceName
         let instanceThemes = this.store.get('instanceThemes')
         instanceThemes[instanceName] = newTheme
         this.store.set({instanceThemes: instanceThemes})
@@ -107,6 +111,15 @@
         if (this.get('params').instanceName === this.store.get('currentInstance')) {
           switchToTheme(newTheme)
         }
+      },
+      onSwitchToThisInstance() {
+        let instanceName = this.get('params').instanceName
+        let instanceThemes = this.store.get('instanceThemes')
+        this.store.set({
+          currentInstance: instanceName
+        })
+        this.store.save()
+        switchToTheme(instanceThemes[instanceName])
       }
     }
   }

routes/settings/instances/add.html

@@ -105,6 +105,8 @@
         // TODO: handle error
         let loggedInInstances = this.store.get('loggedInInstances')
         let loggedInInstancesInOrder = this.store.get('loggedInInstancesInOrder')
+        let instanceThemes = this.store.get('instanceThemes')
+        instanceThemes[currentRegisteredInstanceName] = 'default'
         loggedInInstances[currentRegisteredInstanceName] = instanceData
         if (!loggedInInstancesInOrder.includes(currentRegisteredInstanceName)) {
           loggedInInstancesInOrder.push(currentRegisteredInstanceName)
@@ -115,7 +117,8 @@
           currentRegisteredInstance: null,
           loggedInInstances: loggedInInstances,
           currentInstance: currentRegisteredInstanceName,
-          loggedInInstancesInOrder: loggedInInstancesInOrder
+          loggedInInstancesInOrder: loggedInInstancesInOrder,
+          instanceThemes: instanceThemes
         })
         this.store.save()
         goto('/')

routes/settings/instances/index.html

@@ -10,7 +10,10 @@
     <p>Instances you've connected to:</p>
     <SettingsList>
       {{#each $loggedInInstancesAsList as instance}}
-        <SettingsListItem href="/settings/instances/{{instance.name}}" label="{{instance.name}}"/>
+        <SettingsListItem offsetForIcon="{{instance.name !== $currentInstance}}"
+                          icon="{{instance.name === $currentInstance ? '#fa-star' : ''}}"
+                          href="/settings/instances/{{instance.name}}"
+                          label="{{instance.name}}" />
       {{/each}}
     </SettingsList>
     <p><a href="/settings/instances/add">Add another instance</a></p>

scss/themes/_base.scss

@@ -17,6 +17,7 @@
   --body-bg: $body-bg-color;
   --body-text-color: $main-text-color;
   --main-border: $border-color;
+  --svg-fill: $main-theme-color;
 
   --form-bg: darken($main-bg-color, 3%);
   --form-border: darken($border-color, 10%);