flesh out settings more

routes/_components/NotLoggedInHome.html

@@ -7,7 +7,7 @@
   </div>
   <p>Pinafore is a web client for <a href="https://joinmastodon.org">Mastodon</a>, optimized for speed and simplicity.</p>
 
-  <p>To get started, <a href="/settings/instances">log in to an instance</a>.</p>
+  <p>To get started, <a href="/settings/instances/add">log in to an instance</a>.</p>
 
   <p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p>
 </FreeTextLayout>

routes/_utils/mastodon.js

@@ -1,5 +1,5 @@
 const WEBSITE = 'https://pinafore.social'
-const REDIRECT_URI = (typeof location !== 'undefined' ? location.origin : 'https://pinafore.social') + '/settings/instances'
+const REDIRECT_URI = (typeof location !== 'undefined' ? location.origin : 'https://pinafore.social') + '/settings/instances/add'
 const SCOPES = 'read write follow'
 const CLIENT_NAME = 'Pinafore'
 

routes/settings/_components/SettingsLayout.html

@@ -1,4 +1,4 @@
-<SettingsNav page={{page}} />
+<SettingsNav :page :label/>
 
 <div class="settings">
   <FreeTextLayout>

routes/settings/_components/SettingsList.html

@@ -0,0 +1,11 @@
+<ul>
+  <slot></slot>
+</ul>
+<style>
+  ul {
+    list-style: none;
+    width: 80%;
+    border: 1px solid var(--settings-list-item-border);
+    margin: 20px auto;
+  }
+</style>

routes/settings/_components/SettingsListItem.html

@@ -0,0 +1,22 @@
+<li><a :href>{{label}}</a></li>
+<style>
+  li {
+    border: 1px solid var(--settings-list-item-border);
+    font-size: 1.3em;
+    display: flex;
+    flex-direction: column;
+  }
+  a, a:visited {
+    color: var(--settings-list-item-text);
+    background: var(--settings-list-item-bg);
+    padding: 20px;
+  }
+  a:hover {
+    text-decoration: none;
+    background: var(--settings-list-item-bg-hover);
+    color: var(--settings-list-item-text-hover);
+  }
+  a:active {
+    background: var(--settings-list-item-bg-active);
+  }
+</style>

routes/settings/_components/SettingsNav.html

@@ -2,9 +2,12 @@
   <ul>
     {{#each navItems as navItem}}
     <li>
-      <SettingsNavItem :page name="{{navItem.name}}" href="{{navItem.href}}" label="{{navItem.label}}"/>
+      <SettingsNavItem :page name="{{navItem.name}}" href="{{navItem.href}}" label="{{navItem.label}}" />
     </li>
     {{/each}}
+    <li>
+      <SettingsNavItem :page name="{{page}}" href="/{{page}}" :label />
+    </li>
   </ul>
 </nav>
 
@@ -39,21 +42,10 @@
   import SettingsNavItem from './SettingsNavItem.html'
 
   const NAV_ITEMS = {
-    home: {
+    'settings': 'Settings',
-      name: 'home',
+    'settings/about': 'About Pinafore',
-      href: '/settings',
+    'settings/instances': 'Instances',
-      label: 'Settings'
+    'settings/instances/add': 'Add an instance',
-    },
-    about: {
-      name: 'about',
-      href: '/settings/about',
-      label: 'About Pinafore'
-    },
-    instances: {
-      name: 'instances',
-      href: '/settings/instances',
-      label: 'Instances'
-    }
   }
 
   export default {
@@ -62,11 +54,19 @@
     },
     computed: {
       navItems: page => {
-        let res = [NAV_ITEMS.home]
+        let res = []
-        if (page === 'home') {
+        let breadcrumbs = page.split('/')
-          return res
+        let path = ''
+        for (let i = 0; i < breadcrumbs.length - 1; i++) {
+          let currentPage = breadcrumbs[i]
+          path += currentPage
+          res.push({
+            label: NAV_ITEMS[path],
+            href: `/${path}`,
+            name: path
+          })
+          path += '/'
         }
-        res.push(NAV_ITEMS[page])
         return res
       }
     }

routes/settings/about.html

@@ -3,7 +3,7 @@
 </:Head>
 
 <Layout page='settings'>
-  <SettingsLayout page='about'>
+  <SettingsLayout page='settings/about' label="About Pinafore">
     <h1>About Pinafore</h1>
 
     <p>Pinafore is open-source software created by Nolan Lawson.</p>

routes/settings/index.html

@@ -3,51 +3,28 @@
 </:Head>
 
 <Layout page='settings'>
-  <SettingsLayout page='home'>
+  <SettingsLayout page='settings' label="Settings">
     <h1>Settings</h1>
 
-    <ul>
+    <SettingsList>
-      <li><a href="/settings/instances">Instances</a></li>
+      <SettingsListItem href="/settings/instances" label="Instances"/>
-      <li><a href="/settings/about">About Pinafore</a></li>
+      <SettingsListItem href="/settings/about" label="About Pinafore"/>
-    </ul>
+    </SettingsList>
 
   </SettingsLayout>
 </Layout>
 <script>
   import Layout from '../_components/Layout.html';
   import SettingsLayout from './_components/SettingsLayout.html'
+  import SettingsList from './_components/SettingsList.html'
+  import SettingsListItem from './_components/SettingsListItem.html'
 
   export default {
     components: {
       Layout,
-      SettingsLayout
+      SettingsLayout,
+      SettingsList,
+      SettingsListItem
     }
   };
-</script>
+</script>
-<style>
-  ul {
-    list-style: none;
-    width: 80%;
-    border: 1px solid var(--settings-list-item-border);
-    margin: 20px auto;
-  }
-  li {
-    border: 1px solid var(--settings-list-item-border);
-    font-size: 1.3em;
-    display: flex;
-    flex-direction: column;
-  }
-  a, a:visited {
-    color: var(--settings-list-item-text);
-    background: var(--settings-list-item-bg);
-    padding: 20px;
-  }
-  a:hover {
-    text-decoration: none;
-    background: var(--settings-list-item-bg-hover);
-    color: var(--settings-list-item-text-hover);
-  }
-  a:active {
-    background: var(--settings-list-item-bg-active);
-  }
-</style>

routes/settings/instances/[instanceName].html

@@ -0,0 +1,22 @@
+<:Head>
+  <title>{{params.instanceName}}</title>
+</:Head>
+
+<Layout page='settings'>
+  <SettingsLayout page='settings/instances/{{params.instanceName}}' label="{{params.instanceName}}">
+    <h1>{{params.instanceName}}</h1>
+  </SettingsLayout>
+</Layout>
+<script>
+  import { store } from '../../_utils/store'
+  import Layout from '../../_components/Layout.html'
+  import SettingsLayout from '../_components/SettingsLayout.html'
+
+  export default {
+    components: {
+      Layout,
+      SettingsLayout
+    },
+    store: () => store
+  }
+</script>

routes/settings/instances/add.html

@@ -1,33 +1,25 @@
 <:Head>
-  <title>Instances</title>
+  <title>Add an Instance</title>
 </:Head>
 
 <Layout page='settings'>
-  <SettingsLayout page='instances'>
+  <SettingsLayout page='settings/instances/add' label="Add an Instance">
-    <h1>Instances</h1>
+    <h1>Add an Instance</h1>
 
     {{#if $isUserLoggedIn}}
-      <ul class="instances-list">
+    <p>Connect to an instance to log in.</p>
-        {{#each $loggedInInstancesAsList as instance}}
-          <li class="instance-card">
-            <span>{{instance.name}}</span>
-          </li>
-        {{/each}}
-      </ul>
     {{else}}
-    <p>Connect to an instance to start using Pinafore.</p>
+    <p>Log in to an instance to start using Pinafore.</p>
     {{/if}}
 
-    {{#if !$isUserLoggedIn}}
+    <form class="add-new-instance" on:submit='onSubmit(event)'>
-      <form class="add-new-instance" on:submit='onSubmit(event)'>
+      <label for="instanceInput">Instance name:</label>
-        <label for="instanceInput">Instance name:</label>
+      <input type="text" id="instanceInput" bind:value='$instanceNameInSearch' placeholder=''>
-        <input type="text" id="instanceInput" bind:value='$instanceNameInSearch' placeholder=''>
+      <button class="primary" type="submit" id="submitButton">Add instance</button>
-        <button class="primary" type="submit" id="submitButton">Add instance</button>
+    </form>
-      </form>
-    {{/if}}
 
     {{#if !$isUserLoggedIn}}
-      <p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p>
+    <p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p>
     {{/if}}
   </SettingsLayout>
 </Layout>
@@ -55,11 +47,11 @@
   }
 </style>
 <script>
-  import Layout from '../_components/Layout.html';
+  import Layout from '../../_components/Layout.html';
-  import SettingsLayout from './_components/SettingsLayout.html'
+  import SettingsLayout from '../_components/SettingsLayout.html'
-  import { registerApplication, generateAuthLink, getAccessTokenFromAuthCode } from '../_utils/mastodon'
+  import { registerApplication, generateAuthLink, getAccessTokenFromAuthCode } from '../../_utils/mastodon'
-  import { databasePromise } from '../_utils/database'
+  import { databasePromise } from '../../_utils/database'
-  import { store } from '../_utils/store'
+  import { store } from '../../_utils/store'
   import { goto } from 'sapper/runtime.js'
 
   export default {

routes/settings/instances/index.html

@@ -0,0 +1,38 @@
+<:Head>
+  <title>Instances</title>
+</:Head>
+
+<Layout page='settings'>
+  <SettingsLayout page='settings/instances' label="Instances">
+    <h1>Instances</h1>
+
+    {{#if $isUserLoggedIn}}
+    <p>Instances you've connected to:</p>
+    <SettingsList>
+      {{#each $loggedInInstancesAsList as instance}}
+        <SettingsListItem href="/settings/instances/{{instance.name}}" label="{{instance.name}}"/>
+      {{/each}}
+    </SettingsList>
+    <p><a href="/settings/instances/add">Add an instance</a></p>
+    {{else}}
+    <p><a href="/settings/instances/add">Connect to an instance</a> to start using Pinafore.</p>
+    {{/if}}
+  </SettingsLayout>
+</Layout>
+<script>
+  import { store } from '../../_utils/store'
+  import Layout from '../../_components/Layout.html'
+  import SettingsLayout from '../_components/SettingsLayout.html'
+  import SettingsList from '../_components/SettingsList.html'
+  import SettingsListItem from '../_components/SettingsListItem.html'
+
+  export default {
+    components: {
+      Layout,
+      SettingsLayout,
+      SettingsList,
+      SettingsListItem
+    },
+    store: () => store
+  }
+</script>