From fbb61581c649fe848fe5f9dbe021e6d75006df9c Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sun, 6 Feb 2022 01:17:32 +0000
Subject: [PATCH] Messing with layout in the ui.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3827 ed5197a5-7fde-0310-b194-c3ffbd925b24
---
 apps/cory/index.json       |   2 +-
 apps/cory/index/index.html | 244 +++++++++++++++++++------------------
 apps/cory/index/tf.js      |   8 --
 3 files changed, 125 insertions(+), 129 deletions(-)

diff --git a/apps/cory/index.json b/apps/cory/index.json
index d3b1dfd4..7d373217 100644
--- a/apps/cory/index.json
+++ b/apps/cory/index.json
@@ -1 +1 @@
-{"type":"tildefriends-app","files":{"app.js":"&iqkvaTLEbxeintzHb07jiFncdg3N1aS8h8ZNUzy7MZI=.sha256","index.html":"&ko7qv1Ihzmw8ibXr0RinyzNBc2xNzcGDQDPO9X3JAAQ=.sha256","vue-material.js":"&K5cdLqXYCENPak/TCINHQhyJhpS4G9DlZHGwoh/LF2g=.sha256","tf-user.js":"&DdJwZYEo7AqFyutYMvEjykoVXxdHVog0UXye6Sbo0TU=.sha256","tf-message.js":"&xh9sTfqUYVDDJItr4Gxwvu0dVLt+zJAr3rftcsHSIyM=.sha256","tf.js":"&XAGSA200wKbWaBG+aMWgoC+c2mleeAFiNbzaypDc6vU=.sha256","commonmark.min.js":"&EP0OeR9zyLwZannz+0ga4s9AGES2RLvvIIQYHqqV6+k=.sha256","vue.js":"&g1wvA+yHl1sVC+eufTsg9If7ZeVyMTBU+h0tks7ZNzE=.sha256","vue-material-theme-default-dark.css":"&RP2nr+2CR18BpHHw5ST9a5GJUCOG9n0G2kuGkcQioWE=.sha256","vue-material.min.css":"&kGbUM2QgFSyHZRzqQb0b+0S3EVIlZ0AXpdiAVjIhou8=.sha256","roboto.css":"&jJv43Om673mQO5JK0jj7714s5E+5Yrf82H6LcDx7wUs=.sha256","material-icons.css":"&a28PdcVvgq/DxyIvJAx/e+ZOEtOuHnr3kjLWKyzH11M=.sha256","tf-shared.js":"&+qPP3g4CAUlkt8K4iBCZ+F5Fy6N7fu6MggvSVss2juE=.sha256"}}
\ No newline at end of file
+{"type":"tildefriends-app","files":{"app.js":"&iqkvaTLEbxeintzHb07jiFncdg3N1aS8h8ZNUzy7MZI=.sha256","index.html":"&kn310FcYDditgpHMtdXQlfDIAT8LALCWDQxiGScB2dA=.sha256","vue-material.js":"&K5cdLqXYCENPak/TCINHQhyJhpS4G9DlZHGwoh/LF2g=.sha256","tf-user.js":"&DdJwZYEo7AqFyutYMvEjykoVXxdHVog0UXye6Sbo0TU=.sha256","tf-message.js":"&xh9sTfqUYVDDJItr4Gxwvu0dVLt+zJAr3rftcsHSIyM=.sha256","tf.js":"&3h1OE7OouH5n7ChITRDxAASYnIvK6mYHatGFjtbv4V8=.sha256","commonmark.min.js":"&EP0OeR9zyLwZannz+0ga4s9AGES2RLvvIIQYHqqV6+k=.sha256","vue.js":"&g1wvA+yHl1sVC+eufTsg9If7ZeVyMTBU+h0tks7ZNzE=.sha256","vue-material-theme-default-dark.css":"&RP2nr+2CR18BpHHw5ST9a5GJUCOG9n0G2kuGkcQioWE=.sha256","vue-material.min.css":"&kGbUM2QgFSyHZRzqQb0b+0S3EVIlZ0AXpdiAVjIhou8=.sha256","roboto.css":"&jJv43Om673mQO5JK0jj7714s5E+5Yrf82H6LcDx7wUs=.sha256","material-icons.css":"&a28PdcVvgq/DxyIvJAx/e+ZOEtOuHnr3kjLWKyzH11M=.sha256","tf-shared.js":"&+qPP3g4CAUlkt8K4iBCZ+F5Fy6N7fu6MggvSVss2juE=.sha256"}}
\ No newline at end of file
diff --git a/apps/cory/index/index.html b/apps/cory/index/index.html
index 6c2a9086..c989b34d 100644
--- a/apps/cory/index/index.html
+++ b/apps/cory/index/index.html
@@ -30,132 +30,136 @@
 			</md-dialog>
 			<md-app style="position: absolute; height: 100%; width: 100%">
 				<md-app-toolbar class="md-primary">
-					<span class="md-title">Tilde Friends Secure Scuttlebutt Test</span>
-				</md-app-toolbar>
-				<md-app-drawer md-permanent="full">
-					<md-list>
-						<md-subheader>Broadcasts</md-subheader>
-						<md-list-item v-for="broadcast in broadcasts" v-bind:key="JSON.stringify(broadcast)" @click="ssb_connect(broadcast)">{{broadcast.address}}:{{broadcast.port}} <tf-user :id="broadcast.pubkey"></tf-user></md-list-item>
-						<md-subheader>Connections</md-subheader>
-						<md-list-item v-for="connection in connections" v-bind:key="'connection-' + JSON.stringify(connection)"><tf-user :id="connection"></tf-user></md-list-item>
-						<md-list-item @click="show_connect_dialog = true">Connect</md-list-item>
-					</md-list>
-				</md-app-drawer>
-				<md-app-toolbar class="md-secondary" v-show="unread > 0">
-					<md-button @click="refresh()" class="md-raised md-primary">Refresh</md-button>
-					<span class="md-title">{{unread}} unread item{{unread == 1 ? '' : 's'}}</span>
+					<span class="md-title">Tilde Scuttlebutt</span>
 				</md-app-toolbar>
 				<md-app-content>
-					Welcome, <tf-user :id="whoami"></tf-user>.
-					<span v-if="load_time" style="float: right">
-						Loaded in {{load_time}} seconds.
-						<md-tooltip v-if="Object.keys(times).length" style="height: auto">
-							<div v-for="key in Object.keys(times)">{{key}}: {{times[key] / 1000.0}} s</div>
-						</md-tooltip>
-					</span>
-					<md-card class="md-elevation-8">
-						<md-card-header>
-							<div class="md-title">What's up?</div>
-						</md-card-header>
-						<md-card-content>
-							<md-chip v-if="reply_root || reply_branch" md-deletable @md-delete="reply_root = null; reply_branch = null">Replying in thread {{reply_root}} to message {{reply_branch}}</md-chip>
-							<md-chip v-for="link in Object.keys(mentions)" v-bind:key="link" md-deletable @md-delete="remove_from_mentions(link)">
-								{{mentions[link].name}}: {{link}}
-							</md-chip>
-							<div class="md-layout">
-								<md-field class="md-layout-item">
-									<label>Post a message</label>
-									<md-textarea id="post_text" v-model="post_text" v-on:paste="paste" md-autogrow></md-textarea>
-								</md-field>
-								<md-card class="md-layout-item" v-if="post_text && post_text.length">
-									<md-card-content v-html="markdown(post_text)"></md-card-content>
-									<md-card-content>
-										<md-card-media v-for="link in Object.keys(mentions)" v-bind:key="link">
-											<img v-if="(mentions[link].type || '').startsWith('image/')" :src="'/' + link + '/view'">
-										</md-card-media>
-									</md-card-content>
-								</md-card>
-							</div>
-						</md-card-content>
-						<md-card-actions>
-							<md-button class="md-icon-button" @click="attach">
-								<md-icon>attach_file</md-icon>
+					<div class="md-layout">
+						<div class="md-layout-item md-size-20">
+							<md-list>
+								<md-subheader>Broadcasts</md-subheader>
+								<md-list-item v-for="broadcast in broadcasts" v-bind:key="JSON.stringify(broadcast)" @click="ssb_connect(broadcast)">{{broadcast.address}}:{{broadcast.port}} <tf-user :id="broadcast.pubkey"></tf-user></md-list-item>
+								<md-subheader>Connections</md-subheader>
+								<md-list-item v-for="connection in connections" v-bind:key="'connection-' + JSON.stringify(connection)"><tf-user :id="connection"></tf-user></md-list-item>
+								<md-list-item @click="show_connect_dialog = true">Connect</md-list-item>
+							</md-list>
+						</div>
+						<div class="md-layout-item md-size-80">
+							<md-app-toolbar class="md-secondary" v-show="unread > 0">
+								<md-button @click="refresh()" class="md-raised md-primary">Refresh</md-button>
+								<span class="md-title">{{unread}} unread item{{unread == 1 ? '' : 's'}}</span>
+							</md-app-toolbar>
+							Welcome, <tf-user :id="whoami"></tf-user>.
+							<span v-if="load_time" style="float: right">
+								Loaded in {{load_time}} seconds.
+								<md-tooltip v-if="Object.keys(times).length" style="height: auto">
+									<div v-for="key in Object.keys(times)">{{key}}: {{times[key] / 1000.0}} s</div>
+								</md-tooltip>
+							</span>
+							<md-card class="md-elevation-8">
+								<md-card-header>
+									<div class="md-title">What's up?</div>
+								</md-card-header>
+								<md-card-content>
+									<md-chip v-if="reply_root || reply_branch" md-deletable @md-delete="reply_root = null; reply_branch = null">Replying in thread {{reply_root}} to message {{reply_branch}}</md-chip>
+									<md-chip v-for="link in Object.keys(mentions)" v-bind:key="link" md-deletable @md-delete="remove_from_mentions(link)">
+										{{mentions[link].name}}: {{link}}
+									</md-chip>
+									<div class="md-layout">
+										<md-field class="md-layout-item">
+											<label>Post a message</label>
+											<md-textarea id="post_text" v-model="post_text" v-on:paste="paste" md-autogrow></md-textarea>
+										</md-field>
+										<md-card class="md-layout-item" v-if="post_text && post_text.length">
+											<md-card-content v-html="markdown(post_text)"></md-card-content>
+											<md-card-content>
+												<md-card-media v-for="link in Object.keys(mentions)" v-bind:key="link">
+													<img v-if="(mentions[link].type || '').startsWith('image/')" :src="'/' + link + '/view'">
+												</md-card-media>
+											</md-card-content>
+										</md-card>
+									</div>
+								</md-card-content>
+								<md-card-actions>
+									<md-button class="md-icon-button" @click="attach">
+										<md-icon>attach_file</md-icon>
+									</md-button>
+									<md-menu>
+										<md-button md-menu-trigger>Share App</md-button>
+										<md-menu-content>
+											<md-menu-item v-for="app in Object.keys(apps)" v-bind:key="app" @click="add_app_to_mentions(app)">
+												{{app}}
+											</md-menu-item>
+										</md-menu-content>
+									</md-menu>
+									<md-button class="md-raised md-primary" v-on:click="post_message()">Submit Post</md-button>
+								</md-card-actions>
+							</md-card>
+
+							<md-button v-if="selected" class="md-raised md-primary" style="margin: 1em" @click="set_hash(null)">
+								<md-icon>home</md-icon> Home
 							</md-button>
-							<md-menu>
-								<md-button md-menu-trigger>Share App</md-button>
-								<md-menu-content>
-									<md-menu-item v-for="app in Object.keys(apps)" v-bind:key="app" @click="add_app_to_mentions(app)">
-										{{app}}
-									</md-menu-item>
-								</md-menu-content>
-							</md-menu>
-							<md-button class="md-raised md-primary" v-on:click="post_message()">Submit Post</md-button>
-						</md-card-actions>
-					</md-card>
 
-					<md-button v-if="selected" class="md-raised md-primary" style="margin: 1em" @click="set_hash(null)">
-						<md-icon>home</md-icon> Home
-					</md-button>
+							<md-card v-if="selected && selected.charAt(0) == '@'" class="md-raised md-elevation-8" style="margin: 1em">
+								<md-card-header>
+									<md-card-header-text>
+										<div class="md-title">{{users[selected] &amp;&amp; users[selected].name ? users[selected].name : selected}}</div>
+										<div class="md-subhead" v-if="users[selected] && users[selected].name">{{selected}}</div>
+									</md-card-header-text>
+									<md-card-media v-if="users[selected] && users[selected].image" class="md-medium">
+										<div><img :src="'/' + (typeof(users[selected].image) == 'string' ? users[selected].image : users[selected].image.link) + '/view'"></div>
+									</md-card-media>
+								</md-card-header>
+								<md-card-content>
+									<div v-if="selected == whoami">
+										<md-field>
+											<label>Name</label>
+											<md-input v-model="edit_profile_name"></md-input>
+										</md-field>
+										<md-field>
+											<label>Description</label>
+											<md-textarea v-model="edit_profile_description"></md-textarea>
+										</md-field>
+									</div>
+									<template v-if="users[selected]">
+										<div v-if="users[selected].name">{{selected}}</div>
+										<div v-html="markdown(users[selected].description)"></div>
+									</template>
+									<md-card-actions>
+										<md-menu md-size="small" v-if="users[selected] && users[selected].followers">
+											<md-button md-menu-trigger>{{Object.keys(users[selected].followers).length}} followers</md-button>
+											<md-menu-content>
+												<md-menu-item v-for="id of Object.keys(users[selected].followers)" v-bind:key="id"><tf-user :id="id"></tf-user></md-menu-item>
+											</md-menu-content>
+										</md-menu>
+										<md-menu md-size="small" v-if="users[selected] && users[selected].following">
+											<md-button md-menu-trigger>{{Object.keys(users[selected].following).length}} following</md-button>
+											<md-menu-content>
+												<md-menu-item v-for="id of Object.keys(users[selected].following)" v-bind:key="id"><tf-user :id="id"></tf-user></md-menu-item>
+											</md-menu-content>
+										</md-menu>
+										<template v-if="selected != whoami && users[whoami]">
+											<md-button @click="follow(selected)" v-if="!users[whoami].following[selected]" class="md-raised md-secondary">Follow</md-button>
+											<md-button @click="unfollow(selected)" v-else class="md-raised md-secondary">Unfollow</md-button>
+										</template>
+										<md-button @click="save_profile" v-if="selected == whoami" class="md-primary md-raised">Save Profile</md-button>
+									</md-card-actions>
+								</md-card-content>
+							</md-card>
 
-					<md-card v-if="selected && selected.charAt(0) == '@'" class="md-raised md-elevation-8" style="margin: 1em">
-						<md-card-header>
-							<md-card-header-text>
-								<div class="md-title">{{users[selected] &amp;&amp; users[selected].name ? users[selected].name : selected}}</div>
-								<div class="md-subhead" v-if="users[selected] && users[selected].name">{{selected}}</div>
-							</md-card-header-text>
-							<md-card-media v-if="users[selected] && users[selected].image" class="md-medium">
-								<div><img :src="'/' + (typeof(users[selected].image) == 'string' ? users[selected].image : users[selected].image.link) + '/view'"></div>
-							</md-card-media>
-						</md-card-header>
-						<md-card-content>
-							<div v-if="selected == whoami">
-								<md-field>
-									<label>Name</label>
-									<md-input v-model="edit_profile_name"></md-input>
-								</md-field>
-								<md-field>
-									<label>Description</label>
-									<md-textarea v-model="edit_profile_description"></md-textarea>
-								</md-field>
-							</div>
-							<template v-if="users[selected]">
-								<div v-if="users[selected].name">{{selected}}</div>
-								<div v-html="markdown(users[selected].description)"></div>
+							<template v-if="messages.length">
+								<tf-message
+											v-for="message in messages"
+											v-bind:message="message"
+											v-bind:messages="messages"
+											v-bind:key="message.id"
+											v-bind:votes="votes"></tf-message>
 							</template>
-							<md-card-actions>
-								<md-menu md-size="small" v-if="users[selected] && users[selected].followers">
-									<md-button md-menu-trigger>{{Object.keys(users[selected].followers).length}} followers</md-button>
-									<md-menu-content>
-										<md-menu-item v-for="id of Object.keys(users[selected].followers)" v-bind:key="id"><tf-user :id="id"></tf-user></md-menu-item>
-									</md-menu-content>
-								</md-menu>
-								<md-menu md-size="small" v-if="users[selected] && users[selected].following">
-									<md-button md-menu-trigger>{{Object.keys(users[selected].following).length}} following</md-button>
-									<md-menu-content>
-										<md-menu-item v-for="id of Object.keys(users[selected].following)" v-bind:key="id"><tf-user :id="id"></tf-user></md-menu-item>
-									</md-menu-content>
-								</md-menu>
-								<template v-if="selected != whoami && users[whoami]">
-									<md-button @click="follow(selected)" v-if="!users[whoami].following[selected]" class="md-raised md-secondary">Follow</md-button>
-									<md-button @click="unfollow(selected)" v-else class="md-raised md-secondary">Unfollow</md-button>
-								</template>
-								<md-button @click="save_profile" v-if="selected == whoami" class="md-primary md-raised">Save Profile</md-button>
-							</md-card-actions>
-						</md-card-content>
-					</md-card>
-
-					<template v-if="messages.length">
-						<tf-message
-							v-for="message in messages"
-							v-bind:message="message"
-							v-bind:messages="messages"
-							v-bind:key="message.id"
-							v-bind:votes="votes"></tf-message>
-					</template>
-					<md-empty-state v-else-if="loading" md-label="Loading...">
-						<md-progress-spinner md-mode="indeterminate"></md-progress-spinner>
-					</md-empty-state>
-					<md-empty-state v-else md-label="Nothing to see here."></md-empty-state>
+							<md-empty-state v-else-if="loading" md-label="Loading...">
+								<md-progress-spinner md-mode="indeterminate"></md-progress-spinner>
+							</md-empty-state>
+							<md-empty-state v-else md-label="Nothing to see here."></md-empty-state>
+						</div>
+					</div>
 				</md-app-content>
 			</md-app>
 		</div>
diff --git a/apps/cory/index/tf.js b/apps/cory/index/tf.js
index f2e712da..c500961e 100644
--- a/apps/cory/index/tf.js
+++ b/apps/cory/index/tf.js
@@ -135,14 +135,6 @@ function processMessages() {
 			g_data.load_time = (new Date() - g_load_start) / 1000;
 			g_data.loading = false;
 			g_data.times = event.data.times;
-
-			function dump(messages, indent) {
-				for (let m of messages) {
-					console.log(indent + m.id);
-					dump(m.children, indent + '  ');
-				}
-			}
-			dump(g_data.messages, '');
 		} else if (key == 'unread') {
 			g_data.unread += event.data.unread;
 		} else if (key == 'hash') {