2022-02-26 21:30:11 -05:00
< html >
< head >
< meta content = "width=device-width,initial-scale=1,minimal-ui" name = "viewport" >
< link rel = "stylesheet" href = "roboto.css" >
< link rel = "stylesheet" href = "material-icons.css" >
< link rel = "stylesheet" href = "vue-material.min.css" >
< link rel = "stylesheet" href = "vue-material-theme-default-dark.css" >
< script src = "vue.js" > < / script >
< script src = "vue-material.js" > < / script >
< script src = "commonmark.min.js" > < / script >
< script src = "tf-shared.js" > < / script >
< script src = "tf-user.js" > < / script >
< script src = "tf-message.js" > < / script >
< script src = "tf.js" > < / script >
2022-04-14 19:47:41 -04:00
< base target = "_top" >
2022-02-26 21:30:11 -05:00
< / head >
< body style = "color: #fff" >
< div id = "app" >
< md-dialog :md-active . sync = "show_connect_dialog" >
< md-dialog-title > Connect< / md-dialog-title >
< md-dialog-content >
< md-field >
< label > net:127.0.0.1:8008~shs:id< / label >
< md-input v-model = "connect" > < / md-input >
< / md-field >
< / md-dialog-content >
< md-dialog-actions >
< md-button class = "md-primary" @ click = "ssb_connect(connect); connect = null; show_connect_dialog = false" > Connect< / md-button >
< md-button @ click = "connect = null; show_connect_dialog = false" > Cancel< / md-button >
< / md-dialog-actions >
< / md-dialog >
< md-app style = "position: absolute; height: 100%; width: 100%" >
< md-app-toolbar class = "md-primary" >
< span class = "md-title" > Tilde Scuttlebutt< / span >
< / md-app-toolbar >
< md-app-content >
< 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]}}< / 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'" class = "md-elevation-4" style = "margin: 4px; max-width: 320px; max-height: 240px" >
< / 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-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] & & 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" >
2022-04-14 19:47:41 -04:00
< img v-if = "edit_profile_image" :src = "'/' + edit_profile_image + '/view'" >
2022-02-26 21:30:11 -05:00
< 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 >
2022-04-14 19:47:41 -04:00
< md-button class = "md-icon-button" @ click = "attach('profile')" >
< md-icon > attach_file< / md-icon >
< / md-button >
2022-02-26 21:30:11 -05:00
< 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] && users[whoami].blocking" >
< md-button @ click = "block(selected)" v-if = "!users[whoami].blocking[selected]" class = "md-raised md-secondary" > Block< / md-button >
< md-button @ click = "unblock(selected)" v-else class = "md-raised md-secondary" > Unblock< / md-button >
< / template >
< template v-if = "selected != whoami && users[whoami] && users[whoami].following" >
< 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 >
< / div >
< / div >
< / md-app-content >
< / md-app >
< / div >
< / body >
< / html >
