From b10cfd31c082463a3dfe27d73dbbe8d12f34159d Mon Sep 17 00:00:00 2001
From: glyph <glyph@mycelial.technology>
Date: Mon, 15 Nov 2021 17:29:42 +0200
Subject: [PATCH] add scuttlebutt templates

---
 .../templates/scuttlebutt/messages.html.tera  | 12 +++++++
 .../templates/scuttlebutt/peers.html.tera     | 15 +++++++++
 .../scuttlebutt/peers_list.html.tera          | 16 +++++++++
 .../templates/scuttlebutt/profile.html.tera   | 33 +++++++++++++++++++
 4 files changed, 76 insertions(+)
 create mode 100644 peach-web/templates/scuttlebutt/messages.html.tera
 create mode 100644 peach-web/templates/scuttlebutt/peers.html.tera
 create mode 100644 peach-web/templates/scuttlebutt/peers_list.html.tera
 create mode 100644 peach-web/templates/scuttlebutt/profile.html.tera

diff --git a/peach-web/templates/scuttlebutt/messages.html.tera b/peach-web/templates/scuttlebutt/messages.html.tera
new file mode 100644
index 0000000..394f0b0
--- /dev/null
+++ b/peach-web/templates/scuttlebutt/messages.html.tera
@@ -0,0 +1,12 @@
+{%- extends "nav" -%}
+{%- block card %}
+      <!-- SCUTTLEBUTT MESSAGES -->
+      <div class="card center">
+        <div class="card-container">
+          <!-- FLASH MESSAGE -->
+          {% include "snippets/flash_message" %}
+          <!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
+          {% include "snippets/noscript" %}
+        </div>
+      </div>
+{%- endblock card -%}
diff --git a/peach-web/templates/scuttlebutt/peers.html.tera b/peach-web/templates/scuttlebutt/peers.html.tera
new file mode 100644
index 0000000..b78906f
--- /dev/null
+++ b/peach-web/templates/scuttlebutt/peers.html.tera
@@ -0,0 +1,15 @@
+{%- extends "nav" -%}
+{%- block card %}
+      <!-- SCUTTLEBUTT PEERS -->
+      <div class="card center">
+        <div class="card-container">
+          <!-- BUTTONS -->
+          <div id="buttons">
+            <a id="friends" class="button button-primary center" href="/scuttlebutt/friends" title="List Friends">Friends</a>
+            <a id="follows" class="button button-primary center" href="/scuttlebutt/follows" title="List Follows">Follows</a>
+            <a id="followers" class="button button-primary center" href="/scuttlebutt/followers" title="List Followers">Followers</a>
+            <a id="blocks" class="button button-primary center" href="/scuttlebutt/blocks" title="List Blocks">Blocks</a>
+          </div>
+        </div>
+      </div>
+{%- endblock card -%}
diff --git a/peach-web/templates/scuttlebutt/peers_list.html.tera b/peach-web/templates/scuttlebutt/peers_list.html.tera
new file mode 100644
index 0000000..2b61d78
--- /dev/null
+++ b/peach-web/templates/scuttlebutt/peers_list.html.tera
@@ -0,0 +1,16 @@
+{%- extends "nav" -%}
+{%- block card %}
+      <div class="card center">
+        <ul class="list">
+          <!-- for peer in peers -->
+          <li>
+            <a class="list-item link light-bg" href="/scuttlebutt/profile?public_key=pub_key">
+              <img id="peerImage" class="icon list-icon" src="{ image_path }" alt="{ peer_name }'s profile image">
+              <p id="peerName" class="list-text">{ name }</p>
+              <label class="label-small label-ellipsis list-label font-gray" for="peerName" title="{ peer_name }'s Public Key">{ public_key }</label>
+            </a>
+          </li>
+          <!-- end for loop -->
+        </ul>
+      </div>
+{%- endblock card -%}
diff --git a/peach-web/templates/scuttlebutt/profile.html.tera b/peach-web/templates/scuttlebutt/profile.html.tera
new file mode 100644
index 0000000..a34a37a
--- /dev/null
+++ b/peach-web/templates/scuttlebutt/profile.html.tera
@@ -0,0 +1,33 @@
+{%- extends "nav" -%}
+{%- block card %}
+      <!-- USER PROFILE -->
+      <div class="card center">
+        <!-- PROFILE INFO BOX -->
+        <div class="capsule capsule-profile" title="Scuttlebutt account profile information">
+          <!-- edit profile button -->
+          <img id="editProfile" class="icon-small nav-icon-right" src="/icons/pencil.svg" alt="Profile picture">
+          <!-- PROFILE BIO -->
+          <!-- profile picture -->
+          <img id="profilePicture" class="icon-large" src="{ image_path }" alt="Profile picture">
+          <!-- name, public key & description -->
+          <p id="profileName" class="card-text" title="Name">{ name }</p>
+          <label class="label-small label-ellipsis font-gray" style="user-select: all;" for="profileName" title="Public Key">{ public_key }</label>
+          <p id="profileDescription" style="margin-top: 1rem" class="card-text" title="Description">{ description }</p>
+        </div>
+        <!-- PUBLIC POST FORM -->
+        <form id="postForm" action="/scuttlebutt/post" method="post">
+          <!-- input for message contents -->
+          <textarea id="publicPost" class="center input message-input" title="Compose Public Post"></textarea>
+          <input id="publishPost" class="button button-primary center" title="Publish" type="submit" value="Publish">
+        </form>
+        <!-- BUTTONS -->
+        <!-- TODO: each of these buttons needs to be a form with a public key -->
+        <div id="buttons">
+          <a id="followPeer" class="button button-primary center" href="/scuttlebutt/follow" title="Follow Peer">Follow</a>
+          <a id="blockPeer" class="button button-warning center" href="/scuttlebutt/block" title="Block Peer">Block</a>
+          <a id="privateMessage" class="button button-primary center" href="/scuttlebutt/private_message" title="Private Message">Private Message</a>
+        </div>
+        <!-- FLASH MESSAGE -->
+        {% include "snippets/flash_message" %}
+      </div>
+{%- endblock card -%}