From af8cf63caadb99dbe4e2083f577c26bd954162a7 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 13 Jan 2018 11:11:35 -0800
Subject: [PATCH] work on list of instances settings page

---
 routes/_components/Status.html |  2 +-
 routes/_utils/store.js         | 13 +++++++++++++
 routes/settings/instances.html | 30 ++++++++++++++++++++++--------
 3 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/routes/_components/Status.html b/routes/_components/Status.html
index 87c0cc4..8e77ac7 100644
--- a/routes/_components/Status.html
+++ b/routes/_components/Status.html
@@ -38,7 +38,7 @@
     max-width: 600px;
     margin: 0 auto;
     padding: 10px 0;
-    border-bottom: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--main-border);
     display: grid;
     width: 100%;
     grid-template-areas:
diff --git a/routes/_utils/store.js b/routes/_utils/store.js
index 2a4c6d0..c11961c 100644
--- a/routes/_utils/store.js
+++ b/routes/_utils/store.js
@@ -52,6 +52,19 @@ store.compute(
   (currentInstance, loggedInInstances) => !!(currentInstance && Object.keys(loggedInInstances).includes(currentInstance))
 )
 
+store.compute(
+  'loggedInInstancesAsList',
+  ['currentInstance', 'loggedInInstances', 'loggedInInstancesInOrder'],
+  (currentInstance, loggedInInstances, loggedInInstancesInOrder) => {
+    return loggedInInstancesInOrder.map(instanceName => {
+      return Object.assign({
+        current: currentInstance === instanceName,
+        name: instanceName
+      }, loggedInInstances[instanceName])
+    })
+  }
+)
+
 if (process.browser && process.env.NODE_ENV !== 'production') {
   window.store = store // for debugging
 }
diff --git a/routes/settings/instances.html b/routes/settings/instances.html
index 812abb5..87dd738 100644
--- a/routes/settings/instances.html
+++ b/routes/settings/instances.html
@@ -6,15 +6,29 @@
   <SettingsLayout page='instances'>
     <h1>Instances</h1>
 
+    {{#if $isUserLoggedIn}}
+      <ul class="instances-list">
+        {{#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>
+    {{/if}}
 
-    <form on:submit='onSubmit(event)'>
-      <label for="instanceInput">Instance name:</label>
-      <input type="text" id="instanceInput" bind:value='$instanceNameInSearch' placeholder=''>
-      <button class="primary" type="submit" id="submitButton">Add instance</button>
-    </form>
+    {{#if !$isUserLoggedIn}}
+      <form class="add-new-instance" on:submit='onSubmit(event)'>
+        <label for="instanceInput">Instance name:</label>
+        <input type="text" id="instanceInput" bind:value='$instanceNameInSearch' placeholder=''>
+        <button class="primary" type="submit" id="submitButton">Add instance</button>
+      </form>
+    {{/if}}
 
-    <p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p>
+    {{#if !$isUserLoggedIn}}
+      <p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p>
+    {{/if}}
   </SettingsLayout>
 </Layout>
 <style>
@@ -28,14 +42,14 @@
     width: 250px;
   }
 
-  form {
+  form.add-new-instance {
     background: var(--form-bg);
     padding: 5px 10px 15px;
     margin: 20px auto;
     border: 1px solid var(--form-border);
   }
 
-  form label, form input, form button {
+  form.add-new-instance label, form.add-new-instance input, form.add-new-instance button {
     display: block;
     margin: 20px 5px;
   }