Social features / ActivityPub federation (#1629)

* Support webfinger requests for the live account. Closes https://github.com/owncast/owncast/issues/1193 * Support for actor requests. Returns response for live actor. Closes https://github.com/owncast/owncast/issues/1203 * Handle follow and unfollow requests. Closes https://github.com/owncast/owncast/issues/1191 and https://github.com/owncast/owncast/issues/1205 and https://github.com/owncast/owncast/issues/1206 and https://github.com/owncast/owncast/issues/1194 * Add basic support for sending out text activities. For https://github.com/owncast/owncast/issues/1192 * Some error handling and passing of dynamic local account names. * Add hardcoded example image attachment to test post * Centralize the map of accounts and inboxes * No longer disable the preview generator based on YP toggle * Send a federated message to followers when stream starts. For https://github.com/owncast/owncast/issues/1192 * Placeholder for attaching tags * Add image description * Save and get to outbox persistence. Return using outbox endpoint for actor * Pass payloads to be handled through the gochan * Handle undo follow requests explitly, not all undo requests * Add API for manually sending simple federated messages. Closes #1215 * Verify inbox requests. Closes #1321 * Add route to fetch a single AP object by ID. For #1329 * Add responses to fediverse nodeinfo requests * Set and get federation config values for admin * Handle host-meta requests * Do not send out message if disabled. Use saved go live message. * Require AP-compatible content types for AP-related requests * Rename ap models to apmodels for clarity * Change how content type matching takes place. * io -> ioutil * Add stub delete activity callback * Handle likes and announces to surface engagement in chat. Part of #1229 * Append url to go live posts * Do not require specific content types for nodeinfo requests * Add follow engagement chat message via AP * add owncast user-agent to requests * Set note visibility to public (for now) * Fix saving/fetching a single object * Add support for x-nodeinfo2 responses * Point to the dev admin branch for ap * Bundle in dev admin for testing * Add error logging * Add AP middleware back * Point to the new external compatible logo endpoint * Clean up more AP logging to help testing * Tweak go live text and link hashtags * Fix bug in fetching init time * Send update actor activities when server details/profile is updated * Add federation config overview to web client config * Add additional actor properties * Make the AP middleware checking more flexible when looking at types * First pass at remote fediverse follow flow. For #1371 * Added a basic AP actor followers endpoint * WIP client followers API * Add profile-page reference to webfinger response * Add aliases to webfinger response * Fix content-type returned to be expected activitypub+json * First pass at followers api * Point at local dev copy of go-fed/activity * Add custom toot Hashtag objects to posts * Store additional user details to followers table * Fix AP followers endpoint. Closes #1204 * Add owncast hashtag as an invisible tag to go live posts * Reject AP requests when it is disabled * Add actor util for generating full account user from person object * Verify inbox requests before performing any other work * Accept actor update requests * Fix linter errors in federation branch * Migrate AP SQL to sqlc for type safe queries * Use the @unclearParadigm REST parameter helper * Fix verifying post ID on AP engagement * WIP privacy/request approval * Style the remote follow modal * First pass at a followers list component w/ mock data. #1370 * Revert "Use the @unclearParadigm REST parameter helper" This reverts commit c8af8a413f6f53e7d1a15a7d823ff28be2db3c23. * Fix get followers API * Add support for requiring approval. Closes https://github.com/owncast/owncast/issues/1208 * Handle Applications as Actors partly for PeerTube support * add temp todo list * check route on load, this might change later * style followers * account for just 1 tab case * Remove mock data. Allow showing follow button even when there are no external actions defined * Point to actual followers API * Support fallback img for follower views * Remove duplicate verification. Add some additional verbose logging * Bundle dev admin * Add type to host-meta webfinger template response * Tweak remote follow modal content * WIP federation followers refactor * Do not send pointer to middleware * Update admin * Add setting for toggling displaying fediverse engagement. Closes #1404 * Add in-development admin * Do not enable cors on admin followers api * Add db migration for updating messages table * Enable empty string go live messages to disable * Remove debug messages * Rework some ActivityPub handling. Create new Actor->Person handling. Create new Actor->Service handling. Add engagement handlers to send chat events and store event objects. Store inbound activities to new ap_inbound_activities table. * Support federated engagement events. Store them in the messages table and surface them via chat events. * Support federated event engatement in the chat * Tweak web UI followers handling * Point go.mod at remote fork instead of local * Update admin * Merged in develop. Couple fixes * Update dev admin * Update fedi engagement posts. - Fix incorrect action text. - Add action icons. * Set public as to instead of cc for ap msg * Updated styling for federated actions in chat * Add support for blocking federated domains. Closes #1209 * Force checking of https in verify step * Update dev admin * Return user scopes in chat history api. Closes #1586 * Update dev admin * Add AP outbound request worker pool. Closes #1571 * Disable (temporarily?) owncast tag on AP posts * Consolidate creating activity+notes in outbound AP messages * Add inbox worker pool. Closes #1570 * Update dev admin bundle * Clean up some logs * Re-enable inbound verfication * Save full IRI to outbox instead of path * Reject if full IRI is not found in outbox * Use full ActivityPub user account in chat event * Fix and expand follower APIs - Add missing IDs to AP follower endpoints - Split AP follower endpoints into initial request and pages. - Support pagination in AP requests. * Include IRI in error message * Hide chat toggle when chat is hidden. Closes #1606 * Updates to followers pagination * Set default go live message * Remove log * indirect -> direct import * Updates for inbound federated event handling. - Keep track of existing events and reject duplicates. - Change what is sent to chat for surfing federated engagement. - Keep track if outbound events are automated "go live" events or not. * Update chat federated engagement. * Update dev admin. * Move from being a person to a bot (service). Closes #1619 * Only set server init date if not already set * Only save notes to outbox able * Rework private-mode followers/approvals * API for returning a list of federated actions for #1573 * Fix too-small follower cells and jumpy tabs. Closes #1616 and closes #1516 * Fix shortcuts getting fired on inputs. Fixes #1489 and #1201 * Add spinner, autoclose + other fixes to follow modal. Fixes #1593 * Fix fetching a single object by IRI * SendFederationMessage -> SendFederatedMessage * Autolink and create tag objects from manual posts. Closes #1620 * Update dev admin bundle * Handle engagement from non-automated/live posts * Reject federated engagement actions if they do not match a local post * Update dev admin bundle * A bunch of cleanup * Fix unused assignments and logic * Remove unused function * Add content warning and sentive content flag if stream is NSFW. Closes #1624 * Disable fetching objects by IRI when in private mode. Closes #1623 * Update the error message of the remote follow dialog. closes #1622 * Update dev admin * Fix NREs throwing in test content * Fix query that wasn't properly filtering out hidden messages * Test against user being disabled instead of message visibility * Fix automated test NRE * Update comment * Adjust federated engagement chat views. Closes #1617 * Add additional index to users table * Add support for removing followers/requests. Closes #1630 * Reject federated actions from blocked actors. #1631 * Use fallback avatar if it fails to load. Closes #1635 * Fix styling of follower list. Closes #1636 * Add basic blurb stating they should follow the server. Closes #1641 * Update dev admin * Set default go live message in migration. Closes #1642 * Reset the messages table on 0.0.11 schema migration * Fix js error with moderation actions. Closes #1621 * Add a bit more clarification on follow modal. Closes #1599 * Remove todos * Split out actor and domain blocking checks * Check for errors on default values being set * Clean up actor rejection due to being blocked * Update dev admin * Add colon to error to make it easier to read * Remove markdown rendering of go live message. Reorganize text. Remove content warning. Closes #1645 * Break out the sort+render messages logic so it can be fired on visibility change. Closes #1643 * Do not send profile updates if federation is disabled * Save follow references to inbound activities table * Update dev admin * Add blocked actor test * Remove the overloaded term of Follow from social links * Fix test running in memory only * Remove "just" in engagement messags * Replace star with heart for like action. * Update dev admin * Explicitly set cc as public * Remove overly using the stream name in fediverse engagement messages * Some federated/follow UI tweaks * Remove explicit cc and bcc as they are not required * Explicitly set the audience * Remove extra margin * Add Join Fediverse button to follow modal. Closes #1651 * Do not allow multiple follows to send multiple events. Closes #1650 * Give events a min height * Do not allow old posts to be liked/shared. Closes #1652 * Remove value from log message * Alert followers on private mode toggle * Ignore clicks to follow button if disabled * Remove underline from action buttons * Add moderator icon to join message * Update admin * Post-merge remove unused var * Remove pointing at feature branch Co-authored-by: Ginger Wong <omqmail@gmail.com>
2022-01-12 13:53:10 -08:00
parent c51d9cdbf4
commit 045a0a2afd
174 changed files with 7295 additions and 404 deletions
--- a/webroot/img/fediverse-black.png
+++ b/webroot/img/fediverse-black.png
--- a/webroot/img/fediverse-color.png
+++ b/webroot/img/fediverse-color.png
--- a/webroot/img/fediverse-white.png
+++ b/webroot/img/fediverse-white.png
--- a/webroot/img/follow.svg
+++ b/webroot/img/follow.svg
@@ -0,0 +1,312 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   sodipodi:docname="Follow.svg"
+   inkscape:version="1.1.1 (c3084ef, 2021-09-22)"
+   id="svg1314"
+   version="1.1"
+   viewBox="0 0 132.29166 132.29167"
+   height="500"
+   width="500"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs1308">
+    <inkscape:path-effect
+       hide_knots="false"
+       only_selected="false"
+       apply_with_radius="true"
+       apply_no_radius="true"
+       use_knot_distance="true"
+       flexible="false"
+       chamfer_steps="1"
+       radius="22"
+       mode="F"
+       method="auto"
+       unit="px"
+       satellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       lpeversion="1"
+       is_visible="true"
+       id="path-effect2100"
+       effect="fillet_chamfer" />
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect2018"
+       is_visible="true"
+       lpeversion="1"
+       satellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       unit="px"
+       method="auto"
+       mode="F"
+       radius="22"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <linearGradient
+       x1="39.48497"
+       y1="0.047389723"
+       x2="39.48497"
+       y2="44.901764"
+       id="linearGradient2278"
+       gradientTransform="scale(0.78982873,1.2660973)"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         offset="0"
+         stop-color="#2087e2"
+         stop-opacity="1"
+         id="stop2026" />
+      <stop
+         offset="1"
+         stop-color="#b63fff"
+         stop-opacity="1"
+         id="stop2028" />
+    </linearGradient>
+    <inkscape:path-effect
+       hide_knots="false"
+       only_selected="false"
+       apply_with_radius="true"
+       apply_no_radius="true"
+       use_knot_distance="true"
+       flexible="false"
+       chamfer_steps="1"
+       radius="22"
+       mode="F"
+       method="auto"
+       unit="px"
+       satellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       lpeversion="1"
+       is_visible="true"
+       id="path-effect1458"
+       effect="fillet_chamfer" />
+    <linearGradient
+       y2="71.171745"
+       x2="132.77428"
+       y1="71.171745"
+       x1="37.088039"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient1584"
+       xlink:href="#RESERVED_FOR_INKSCAPE_DUPLICATE_DEF_000000000"
+       inkscape:collect="always" />
+    <linearGradient
+       x1="0.83099705"
+       y1="26.975092"
+       x2="0.83099705"
+       y2="42.979877"
+       id="linearGradient1915"
+       gradientTransform="scale(0.85532098,1.1691517)"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         offset="0"
+         stop-color="#FFFFFF"
+         stop-opacity="0.5"
+         id="stop2071" />
+      <stop
+         offset="1"
+         stop-color="#FFFFFF"
+         stop-opacity="0.2"
+         id="stop2073" />
+    </linearGradient>
+    <rect
+       id="rect1590"
+       height="155.13683"
+       width="136.01654"
+       y="26.752991"
+       x="44.191872" />
+    <rect
+       id="rect1281"
+       height="155.13683"
+       width="136.01654"
+       y="26.752991"
+       x="44.191872" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#RESERVED_FOR_INKSCAPE_DUPLICATE_DEF_000000000"
+       id="linearGradient1584-5"
+       gradientUnits="userSpaceOnUse"
+       x1="37.088039"
+       y1="71.171745"
+       x2="132.77428"
+       y2="71.171745" />
+    <rect
+       x="44.191872"
+       y="26.752991"
+       width="136.01654"
+       height="155.13683"
+       id="rect1590-2" />
+    <rect
+       x="44.191872"
+       y="26.752991"
+       width="136.01654"
+       height="155.13683"
+       id="rect2032" />
+    <rect
+       id="rect1590-2-9"
+       height="155.13683"
+       width="136.01654"
+       y="26.752991"
+       x="44.191872" />
+    <rect
+       id="rect2130"
+       height="155.13683"
+       width="136.01654"
+       y="26.752991"
+       x="44.191872" />
+    <inkscape:path-effect
+       hide_knots="false"
+       only_selected="false"
+       apply_with_radius="true"
+       apply_no_radius="true"
+       use_knot_distance="true"
+       flexible="false"
+       chamfer_steps="1"
+       radius="22"
+       mode="F"
+       method="auto"
+       unit="px"
+       satellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       lpeversion="1"
+       is_visible="true"
+       id="path-effect1148"
+       effect="fillet_chamfer" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2278"
+       id="linearGradient1150"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(155.92963)"
+       x1="276.92184"
+       y1="49.976803"
+       x2="308.71417"
+       y2="49.976803" />
+  </defs>
+  <sodipodi:namedview
+     inkscape:window-maximized="0"
+     inkscape:window-y="23"
+     inkscape:window-x="1280"
+     inkscape:window-height="1035"
+     inkscape:window-width="1920"
+     inkscape:guide-bbox="true"
+     showguides="false"
+     units="px"
+     showgrid="false"
+     inkscape:document-rotation="0"
+     inkscape:current-layer="layer6"
+     inkscape:document-units="mm"
+     inkscape:cy="275.39497"
+     inkscape:cx="289.69028"
+     inkscape:zoom="1.1892011"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     borderopacity="1.0"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     id="base"
+     inkscape:pagecheckerboard="0">
+    <sodipodi:guide
+       id="guide2200"
+       orientation="1,0"
+       position="44.558367,13.027415" />
+    <sodipodi:guide
+       id="guide2202"
+       orientation="1,0"
+       position="88.02151,12.912128" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata1311">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     style="display:inline"
+     inkscape:label="Background"
+     id="layer2"
+     inkscape:groupmode="layer">
+    <path
+       transform="matrix(4.161118,0,0,4.1611093,-1801.1461,-141.81325)"
+       inkscape:path-effect="#path-effect1148"
+       style="display:inline;fill:url(#linearGradient1150);fill-opacity:1;stroke:none;stroke-width:0.207662;stroke-opacity:1"
+       id="path1086"
+       width="31.792337"
+       height="31.792337"
+       x="432.85147"
+       y="34.080635"
+       sodipodi:type="rect"
+       inkscape:export-filename="/Users/don/Desktop/Draft-01.png"
+       inkscape:export-xdpi="115.64"
+       inkscape:export-ydpi="115.64"
+       d="m 438.6723,34.080635 h 20.15068 a 5.8208333,5.8208333 45 0 1 5.82083,5.820833 v 20.150671 a 5.8208333,5.8208333 135 0 1 -5.82083,5.820833 H 438.6723 a 5.8208333,5.8208333 45 0 1 -5.82083,-5.820833 V 39.901468 a 5.8208333,5.8208333 135 0 1 5.82083,-5.820833 z" />
+  </g>
+  <g
+     style="display:inline"
+     inkscape:label="Shadow"
+     id="layer6"
+     inkscape:groupmode="layer">
+    <path
+       sodipodi:nodetypes="cccccccc"
+       id="path1843"
+       style="display:inline;opacity:0.85;fill:#8842da;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 906.37607,136.92939 -1.16908,21.51397 -21.18682,0.9402 23.86651,33.56761 h 6.78711 c 12.63935,-7.7e-4 22.88508,-10.24737 22.88476,-22.88672 v -17.37304 z"
+       transform="matrix(1.0583333,0,0,1.0583314,-859.95885,-71.914618)"
+       inkscape:export-filename="/Users/don/Desktop/Draft-01.png"
+       inkscape:export-xdpi="115.64"
+       inkscape:export-ydpi="115.64" />
+  </g>
+  <g
+     style="display:inline"
+     inkscape:label="Outline"
+     id="layer3"
+     inkscape:groupmode="layer">
+    <circle
+       style="display:inline;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:8.78842;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path1797"
+       cx="876.2179"
+       cy="118.02967"
+       r="21.553619"
+       transform="matrix(0.90817292,0,0,0.91240816,-737.0168,-65.427926)"
+       inkscape:export-filename="/Users/don/Desktop/Draft-01.png"
+       inkscape:export-xdpi="115.64"
+       inkscape:export-ydpi="115.64" />
+    <path
+       id="path1831"
+       style="display:inline;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:6.64064;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 845.10701,163.99555 c 0,-16.54233 13.41021,-29.95253 29.95254,-29.95253 7.21351,0 14.1847,2.60326 19.63258,7.3314"
+       transform="matrix(1.1474324,0,0,1.2648307,-944.18797,-103.00395)"
+       sodipodi:nodetypes="csc"
+       inkscape:export-filename="/Users/don/Desktop/Draft-01.png"
+       inkscape:export-xdpi="115.64"
+       inkscape:export-ydpi="115.64" />
+    <path
+       style="display:inline;fill:#ffffff;stroke:#ffffff;stroke-width:7.55906;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 881.64121,159.87402 34.92069,0.27968"
+       id="path1839"
+       transform="matrix(1.0583333,0,0,1.0583314,-853.60885,-74.031283)"
+       sodipodi:nodetypes="cc"
+       inkscape:export-filename="/Users/don/Desktop/Draft-01.png"
+       inkscape:export-xdpi="115.64"
+       inkscape:export-ydpi="115.64" />
+    <path
+       sodipodi:nodetypes="cc"
+       transform="matrix(0,1.0583314,-1.0583333,0,267.28831,-856.231)"
+       id="path1841"
+       d="m 881.64121,159.87402 34.92069,0.27968"
+       style="display:inline;fill:#ffffff;stroke:#ffffff;stroke-width:7.55906;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       inkscape:export-filename="/Users/don/Desktop/Draft-01.png"
+       inkscape:export-xdpi="115.64"
+       inkscape:export-ydpi="115.64" />
+  </g>
+</svg>
--- a/webroot/img/like.svg
+++ b/webroot/img/like.svg
@@ -0,0 +1,315 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   sodipodi:docname="Heart.svg"
+   inkscape:version="1.1.1 (c3084ef, 2021-09-22)"
+   id="svg1314"
+   version="1.1"
+   viewBox="0 0 132.29166 132.29167"
+   height="500"
+   width="500"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs1308">
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect1810"
+       is_visible="true"
+       lpeversion="1"
+       satellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       unit="px"
+       method="auto"
+       mode="F"
+       radius="22"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <inkscape:path-effect
+       hide_knots="false"
+       only_selected="false"
+       apply_with_radius="true"
+       apply_no_radius="true"
+       use_knot_distance="true"
+       flexible="false"
+       chamfer_steps="1"
+       radius="22"
+       mode="F"
+       method="auto"
+       unit="px"
+       satellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       lpeversion="1"
+       is_visible="true"
+       id="path-effect2100"
+       effect="fillet_chamfer" />
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect2018"
+       is_visible="true"
+       lpeversion="1"
+       satellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       unit="px"
+       method="auto"
+       mode="F"
+       radius="22"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <linearGradient
+       x1="39.48497"
+       y1="0.047389723"
+       x2="39.48497"
+       y2="44.901764"
+       id="linearGradient2278"
+       gradientTransform="scale(0.78982873,1.2660973)"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         offset="0"
+         stop-color="#2087e2"
+         stop-opacity="1"
+         id="stop2026" />
+      <stop
+         offset="1"
+         stop-color="#b63fff"
+         stop-opacity="1"
+         id="stop2028" />
+    </linearGradient>
+    <inkscape:path-effect
+       hide_knots="false"
+       only_selected="false"
+       apply_with_radius="true"
+       apply_no_radius="true"
+       use_knot_distance="true"
+       flexible="false"
+       chamfer_steps="1"
+       radius="22"
+       mode="F"
+       method="auto"
+       unit="px"
+       satellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       lpeversion="1"
+       is_visible="true"
+       id="path-effect1458"
+       effect="fillet_chamfer" />
+    <linearGradient
+       y2="71.171745"
+       x2="132.77428"
+       y1="71.171745"
+       x1="37.088039"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient1584"
+       xlink:href="#RESERVED_FOR_INKSCAPE_DUPLICATE_DEF_000000000"
+       inkscape:collect="always" />
+    <linearGradient
+       x1="0.83099705"
+       y1="26.975092"
+       x2="0.83099705"
+       y2="42.979877"
+       id="linearGradient1915"
+       gradientTransform="scale(0.85532098,1.1691517)"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         offset="0"
+         stop-color="#FFFFFF"
+         stop-opacity="0.5"
+         id="stop2071" />
+      <stop
+         offset="1"
+         stop-color="#FFFFFF"
+         stop-opacity="0.2"
+         id="stop2073" />
+    </linearGradient>
+    <rect
+       id="rect1590"
+       height="155.13683"
+       width="136.01654"
+       y="26.752991"
+       x="44.191872" />
+    <rect
+       id="rect1281"
+       height="155.13683"
+       width="136.01654"
+       y="26.752991"
+       x="44.191872" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#RESERVED_FOR_INKSCAPE_DUPLICATE_DEF_000000000"
+       id="linearGradient1584-5"
+       gradientUnits="userSpaceOnUse"
+       x1="37.088039"
+       y1="71.171745"
+       x2="132.77428"
+       y2="71.171745" />
+    <rect
+       x="44.191872"
+       y="26.752991"
+       width="136.01654"
+       height="155.13683"
+       id="rect1590-2" />
+    <rect
+       x="44.191872"
+       y="26.752991"
+       width="136.01654"
+       height="155.13683"
+       id="rect2032" />
+    <rect
+       id="rect1590-2-9"
+       height="155.13683"
+       width="136.01654"
+       y="26.752991"
+       x="44.191872" />
+    <rect
+       id="rect2130"
+       height="155.13683"
+       width="136.01654"
+       y="26.752991"
+       x="44.191872" />
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect2337"
+       is_visible="true"
+       lpeversion="1"
+       satellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       unit="px"
+       method="auto"
+       mode="F"
+       radius="22"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2278"
+       id="linearGradient1812"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(155.92963)"
+       x1="276.92184"
+       y1="49.976803"
+       x2="308.71417"
+       y2="49.976803" />
+  </defs>
+  <sodipodi:namedview
+     inkscape:window-maximized="0"
+     inkscape:window-y="23"
+     inkscape:window-x="1280"
+     inkscape:window-height="1035"
+     inkscape:window-width="1920"
+     inkscape:guide-bbox="true"
+     showguides="false"
+     units="px"
+     showgrid="false"
+     inkscape:document-rotation="0"
+     inkscape:current-layer="layer2"
+     inkscape:document-units="mm"
+     inkscape:cy="275.39497"
+     inkscape:cx="289.69028"
+     inkscape:zoom="1.1892011"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     borderopacity="1.0"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     id="base"
+     inkscape:pagecheckerboard="0">
+    <sodipodi:guide
+       id="guide2200"
+       orientation="1,0"
+       position="44.558367,13.027415" />
+    <sodipodi:guide
+       id="guide2202"
+       orientation="1,0"
+       position="88.02151,12.912128" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata1311">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     style="display:inline"
+     inkscape:label="Background"
+     id="layer2"
+     inkscape:groupmode="layer">
+    <path
+       sodipodi:type="rect"
+       y="34.080635"
+       x="432.85147"
+       height="31.792337"
+       width="31.792337"
+       id="path2238-5"
+       style="display:inline;fill:url(#linearGradient1812);fill-opacity:1;stroke:none;stroke-width:0.207662;stroke-opacity:1"
+       inkscape:path-effect="#path-effect1810"
+       transform="matrix(4.1611053,0,0,4.1611038,-1801.1405,-141.81306)"
+       inkscape:export-filename="/Users/don/Desktop/Draft-01.png"
+       inkscape:export-xdpi="115.64"
+       inkscape:export-ydpi="115.64"
+       d="m 438.6723,34.080635 h 20.15068 a 5.8208333,5.8208333 45 0 1 5.82083,5.820833 v 20.150671 a 5.8208333,5.8208333 135 0 1 -5.82083,5.820833 H 438.6723 a 5.8208333,5.8208333 45 0 1 -5.82083,-5.820833 V 39.901468 a 5.8208333,5.8208333 135 0 1 5.82083,-5.820833 z" />
+  </g>
+  <g
+     style="display:inline"
+     inkscape:label="Shadow"
+     id="layer6"
+     inkscape:groupmode="layer">
+    <path
+       id="path2341"
+       style="display:inline;opacity:0.75;fill:#853dd0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 604.31641,64.029297 3.55078,7.783203 5.08203,22.791016 -19.42383,28.058594 -27.0957,19.52148 -33.69531,-23.11914 46.80664,46.15625 h 26.50195 a 22.886149,22.886142 0 0 0 22.88672,-22.88672 V 81.951172 Z"
+       transform="matrix(1.0583301,0,0,1.05833,-533.32357,-42.566358)"
+       inkscape:export-filename="/Users/don/Desktop/Draft-01.png"
+       inkscape:export-xdpi="115.64"
+       inkscape:export-ydpi="115.64" />
+  </g>
+  <g
+     style="display:inline"
+     inkscape:label="Reflection"
+     id="layer5"
+     inkscape:groupmode="layer">
+    <path
+       style="display:inline;fill:#8392ee;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 552.91873,75.535789 c 0,0 -38.26097,-7.735196 -18.92593,27.162051 14.58324,26.32085 31.11511,24.28058 31.11511,24.28058 0,0 -16.14602,-23.38507 -12.18918,-51.442631 z"
+       id="path2351"
+       transform="matrix(0.95099105,0,0,0.95099098,-474.54607,-32.694089)"
+       sodipodi:nodetypes="cscc"
+       inkscape:export-filename="/Users/don/Desktop/Draft-01.png"
+       inkscape:export-xdpi="115.64"
+       inkscape:export-ydpi="115.64" />
+  </g>
+  <g
+     style="display:inline"
+     inkscape:label="Outline"
+     id="layer3"
+     inkscape:groupmode="layer">
+    <path
+       sodipodi:nodetypes="zczcz"
+       transform="matrix(0.95454696,0,0,0.95454689,-533.57025,-33.626074)"
+       id="path2289"
+       d="m 674.2158,70.253529 c -21.05563,-22.862132 -45.94323,2.215859 -45.94323,2.215859 0,0 -24.88738,-25.078069 -45.94281,-2.215937 -21.05544,22.862132 16.8893,64.132949 45.94281,78.022769 29.05377,-13.88974 66.99886,-55.160559 45.94323,-78.022691 z"
+       style="display:inline;fill:none;stroke:#ffffff;stroke-width:7.8652;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       inkscape:export-filename="/Users/don/Desktop/Draft-01.png"
+       inkscape:export-xdpi="115.64"
+       inkscape:export-ydpi="115.64" />
+  </g>
+</svg>
--- a/webroot/img/repost.svg
+++ b/webroot/img/repost.svg
@@ -0,0 +1,311 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   sodipodi:docname="Boost.svg"
+   inkscape:version="1.1.1 (c3084ef, 2021-09-22)"
+   id="svg1314"
+   version="1.1"
+   viewBox="0 0 132.29166 132.29167"
+   height="500"
+   width="500"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs1308">
+    <inkscape:path-effect
+       hide_knots="false"
+       only_selected="false"
+       apply_with_radius="true"
+       apply_no_radius="true"
+       use_knot_distance="true"
+       flexible="false"
+       chamfer_steps="1"
+       radius="22"
+       mode="F"
+       method="auto"
+       unit="px"
+       satellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       lpeversion="1"
+       is_visible="true"
+       id="path-effect2100"
+       effect="fillet_chamfer" />
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect2018"
+       is_visible="true"
+       lpeversion="1"
+       satellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       unit="px"
+       method="auto"
+       mode="F"
+       radius="22"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <linearGradient
+       x1="39.48497"
+       y1="0.047389723"
+       x2="39.48497"
+       y2="44.901764"
+       id="linearGradient2278"
+       gradientTransform="scale(0.78982873,1.2660973)"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         offset="0"
+         stop-color="#2087e2"
+         stop-opacity="1"
+         id="stop2026" />
+      <stop
+         offset="1"
+         stop-color="#b63fff"
+         stop-opacity="1"
+         id="stop2028" />
+    </linearGradient>
+    <inkscape:path-effect
+       hide_knots="false"
+       only_selected="false"
+       apply_with_radius="true"
+       apply_no_radius="true"
+       use_knot_distance="true"
+       flexible="false"
+       chamfer_steps="1"
+       radius="22"
+       mode="F"
+       method="auto"
+       unit="px"
+       satellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       lpeversion="1"
+       is_visible="true"
+       id="path-effect1458"
+       effect="fillet_chamfer" />
+    <linearGradient
+       y2="71.171745"
+       x2="132.77428"
+       y1="71.171745"
+       x1="37.088039"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient1584"
+       xlink:href="#RESERVED_FOR_INKSCAPE_DUPLICATE_DEF_000000000"
+       inkscape:collect="always" />
+    <linearGradient
+       x1="0.83099705"
+       y1="26.975092"
+       x2="0.83099705"
+       y2="42.979877"
+       id="linearGradient1915"
+       gradientTransform="scale(0.85532098,1.1691517)"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         offset="0"
+         stop-color="#FFFFFF"
+         stop-opacity="0.5"
+         id="stop2071" />
+      <stop
+         offset="1"
+         stop-color="#FFFFFF"
+         stop-opacity="0.2"
+         id="stop2073" />
+    </linearGradient>
+    <rect
+       id="rect1590"
+       height="155.13683"
+       width="136.01654"
+       y="26.752991"
+       x="44.191872" />
+    <rect
+       id="rect1281"
+       height="155.13683"
+       width="136.01654"
+       y="26.752991"
+       x="44.191872" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#RESERVED_FOR_INKSCAPE_DUPLICATE_DEF_000000000"
+       id="linearGradient1584-5"
+       gradientUnits="userSpaceOnUse"
+       x1="37.088039"
+       y1="71.171745"
+       x2="132.77428"
+       y2="71.171745" />
+    <rect
+       x="44.191872"
+       y="26.752991"
+       width="136.01654"
+       height="155.13683"
+       id="rect1590-2" />
+    <rect
+       x="44.191872"
+       y="26.752991"
+       width="136.01654"
+       height="155.13683"
+       id="rect2032" />
+    <linearGradient
+       y2="71.171745"
+       x2="132.77428"
+       y1="71.171745"
+       x1="37.088039"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient1584-5-0"
+       xlink:href="#RESERVED_FOR_INKSCAPE_DUPLICATE_DEF_000000000"
+       inkscape:collect="always" />
+    <rect
+       id="rect1590-2-9"
+       height="155.13683"
+       width="136.01654"
+       y="26.752991"
+       x="44.191872" />
+    <rect
+       id="rect2130"
+       height="155.13683"
+       width="136.01654"
+       y="26.752991"
+       x="44.191872" />
+    <inkscape:path-effect
+       hide_knots="false"
+       only_selected="false"
+       apply_with_radius="true"
+       apply_no_radius="true"
+       use_knot_distance="true"
+       flexible="false"
+       chamfer_steps="1"
+       radius="22"
+       mode="F"
+       method="auto"
+       unit="px"
+       satellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       lpeversion="1"
+       is_visible="true"
+       id="path-effect1080"
+       effect="fillet_chamfer" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2278"
+       id="linearGradient1084"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(155.92963)"
+       x1="276.92184"
+       y1="49.976803"
+       x2="308.71417"
+       y2="49.976803" />
+  </defs>
+  <sodipodi:namedview
+     inkscape:window-maximized="0"
+     inkscape:window-y="23"
+     inkscape:window-x="1280"
+     inkscape:window-height="1035"
+     inkscape:window-width="1920"
+     inkscape:guide-bbox="true"
+     showguides="false"
+     units="px"
+     showgrid="false"
+     inkscape:document-rotation="0"
+     inkscape:current-layer="layer6"
+     inkscape:document-units="mm"
+     inkscape:cy="275.39497"
+     inkscape:cx="289.69028"
+     inkscape:zoom="1.1892011"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     borderopacity="1.0"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     id="base"
+     inkscape:pagecheckerboard="0">
+    <sodipodi:guide
+       id="guide2200"
+       orientation="1,0"
+       position="44.558367,13.027415" />
+    <sodipodi:guide
+       id="guide2202"
+       orientation="1,0"
+       position="88.02151,12.912128" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata1311">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     style="display:inline"
+     inkscape:label="Background"
+     id="layer2"
+     inkscape:groupmode="layer">
+    <path
+       transform="matrix(4.161118,0,0,4.1611093,-1801.146,-141.81325)"
+       inkscape:path-effect="#path-effect1080"
+       style="display:inline;fill:url(#linearGradient1084);fill-opacity:1;stroke:none;stroke-width:0.207662;stroke-opacity:1"
+       id="path1070"
+       width="31.792337"
+       height="31.792337"
+       x="432.85147"
+       y="34.080635"
+       sodipodi:type="rect"
+       inkscape:export-filename="/Users/don/Desktop/Draft-01.png"
+       inkscape:export-xdpi="115.64"
+       inkscape:export-ydpi="115.64"
+       d="m 438.6723,34.080635 h 20.15068 a 5.8208333,5.8208333 45 0 1 5.82083,5.820833 v 20.150671 a 5.8208333,5.8208333 135 0 1 -5.82083,5.820833 H 438.6723 a 5.8208333,5.8208333 45 0 1 -5.82083,-5.820833 V 39.901468 a 5.8208333,5.8208333 135 0 1 5.82083,-5.820833 z" />
+  </g>
+  <g
+     style="display:inline"
+     inkscape:label="Shadow"
+     id="layer6"
+     inkscape:groupmode="layer">
+    <path
+       id="path1744"
+       style="display:inline;opacity:0.75;fill:#7f40cf;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 755.59375,115.26367 -0.75,38.77149 -9.61914,12.17187 -46.68854,3.28589 24.59284,23.45825 h 37.22851 c 12.64012,3.2e-4 22.88704,-10.2466 22.88672,-22.88672 v -37.61133 l -9.31641,-11.63085 z"
+       transform="matrix(1.0583333,0,0,1.0583314,-696.64204,-71.914618)"
+       sodipodi:nodetypes="cccccccccc"
+       inkscape:export-filename="/Users/don/Desktop/Draft-01.png"
+       inkscape:export-xdpi="115.64"
+       inkscape:export-ydpi="115.64" />
+  </g>
+  <g
+     style="display:inline"
+     inkscape:label="Outline"
+     id="layer3"
+     inkscape:groupmode="layer">
+    <path
+       id="rect1704"
+       style="display:inline;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:7.8652;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 741.45312,94.964844 h -41.41796 c -8.18705,0 -14.77735,6.590276 -14.77735,14.777346 v 41.41797 m 14.77735,14.77734 h 41.41796 c 8.18706,0 14.77735,-6.59028 14.77735,-14.77734 v -41.41797"
+       transform="matrix(1.0583333,0,0,1.0583314,-696.64204,-71.914618)"
+       sodipodi:nodetypes="cssccssc"
+       inkscape:export-filename="/Users/don/Desktop/Draft-01.png"
+       inkscape:export-xdpi="115.64"
+       inkscape:export-ydpi="115.64" />
+    <path
+       style="display:inline;fill:none;stroke:#ffffff;stroke-width:7.8652;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 670.07576,143.37121 15.18204,13.78895 15.49978,-13.59955"
+       id="path1725"
+       transform="matrix(1.0583333,0,0,1.0583314,-696.64204,-71.914618)"
+       sodipodi:nodetypes="ccc"
+       inkscape:export-filename="/Users/don/Desktop/Draft-01.png"
+       inkscape:export-xdpi="115.64"
+       inkscape:export-ydpi="115.64" />
+    <path
+       sodipodi:nodetypes="ccc"
+       id="path1725-7"
+       d="m 670.07576,143.37121 15.18204,13.78895 15.49978,-13.59955"
+       style="display:inline;fill:none;stroke:#ffffff;stroke-width:7.8652;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       transform="matrix(-1.0583333,0,0,-1.0583314,828.93303,210.55653)"
+       inkscape:export-filename="/Users/don/Desktop/Draft-01.png"
+       inkscape:export-xdpi="115.64"
+       inkscape:export-ydpi="115.64" />
+  </g>
+</svg>
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -31,10 +31,10 @@
  <link href="/js/web_modules/videojs/video-js.min.css" rel="stylesheet" />
  <link href="/js/web_modules/@videojs/themes/fantasy/index.css" rel="stylesheet" />

-  <link href="./styles/video.css" rel="stylesheet" />
-  <link href="./styles/chat.css" rel="stylesheet" />
-  <link href="./styles/user-content.css" rel="stylesheet" />
-  <link href="./styles/app.css" rel="stylesheet" />
+  <link href="/styles/video.css" rel="stylesheet" />
+  <link href="/styles/chat.css" rel="stylesheet" />
+  <link href="/styles/user-content.css" rel="stylesheet" />
+  <link href="/styles/app.css" rel="stylesheet" />

  <!-- The following script tags are not required for the app to run,
         however they will make it load a lot faster (fewer round trips) when HTTP/2 is used.
@@ -72,7 +72,7 @@

 </head>

-<body class="scrollbar-hidden bg-gray-300 text-gray-800">
+<body id="app-body" class="scrollbar-hidden bg-gray-300 text-gray-800">
  <div id="app">
    <div id="loading-logo-container">
      <img id="loading-logo" src="/logo">
@@ -84,7 +84,7 @@
    import htm from '/js/web_modules/htm.js';
    const html = htm.bind(h);

-    import App from './js/app.js';
+    import App from '/js/app.js';
    render(html`<${App} />`, document.getElementById("app"), document.getElementById("loading-logo-container"));
  </script>

--- a/webroot/js/TEMP-TODO.md
+++ b/webroot/js/TEMP-TODO.md
@@ -0,0 +1,77 @@
+# TEMP TODO FILE
+
+# ~~Mockup for Recordings and Scheduling~~
+# Mockup for Fediverse Social, Tabbed User Content
+This used to be setting up to display Recordings, but the progress can be used towards Fediverse work.
+
+- Rearranges some logic around when to display the chat panel vs when video is playing
+- Improves user content styling for improved positioning across screen sizes.
+- Add accessible Tab Bar navigation
+
+## Move some things around
+
+- [x] move social icons under Profile image
+- [x] move External Actions to top right, below video element
+- [x] disable/hide chat panel + chat icon when there is no Recording, nor Live video playing
+- [ ] add tab bar below tags list
+- [ ] style Follow on Fediverse Modal
+
+### Add more local React States
+- [ ] add offline / no-video state (? what was this again?)
+- [ ] add tab states
+- [ ] **DEFER** add route states
+- [ ] **DEFER** add recordings[] when comes in from config
+- [ ] **DEFER** add schedule[] when comes in from config
+
+## Add Tab bar
+Tab bar includes:
+- `About` - User custom info
+- `Followers` - display tab if schedule info exists
+- **DEFER** `Videos` - display if user has Recordings
+- **DEFER** `Schedule` - display tab if schedule info exists
+
+
+## **DEFER?** Routing, Url Handling
+- do we need it for Followers?
+  #### Recording urls
+  - `server.com/recordings`
+  - `server.com/recordings/id123`
+
+  #### Schedule urls
+  - `server.com/schedule`
+  - `server.com/schedule/id123`
+
+  #### Followers Url?
+
+  ### Todo
+  - [ ] modify server side go to just load up index.html/app.js when url routes to /recording or /schedule
+  - [ ] update app js to detect url route and display appropriate tab content
+
+
+## **DEFER** Recordings
+
+### `server.com/recordings`
+- [ ] don't show chat elements
+- [ ] list avilable recordings, display list similar to directory.owncast.
+- [ ] display recording length
+- [ ] display num views?
+
+
+### `server.com/recordings/id123`
+- [ ] display video, full size with recording loaded
+- [ ] display chat
+- [ ] do not enable chat message input
+- [ ] render chat messages as they came in relative to video timestamp
+
+
+## Schedule
+- [ ] don't show chat elements
+
+### `server.com/schedule`
+- [ ] list items ASC
+
+
+### `server.com/schedule/id123`
+- [ ] display info
+
+
--- a/webroot/js/app.js
+++ b/webroot/js/app.js
@@ -6,6 +6,8 @@ import { OwncastPlayer } from './components/player.js';
 import SocialIconsList from './components/platform-logos-list.js';
 import UsernameForm from './components/chat/username.js';
 import VideoPoster from './components/video-poster.js';
+import Followers from './components/federation/followers.js';
+
 import Chat from './components/chat/chat.js';
 import Websocket, {
  CALLBACKS,
@@ -17,10 +19,14 @@ import ExternalActionModal, {
  ExternalActionButton,
 } from './components/external-action-modal.js';

+import FediverseFollowModal, {
+  FediverseFollowButton,
+} from './components/fediverse-follow-modal.js';
+
 import {
  addNewlines,
+  checkUrlPathForDisplay,
  classNames,
-  clearLocalStorage,
  debounce,
  getLocalStorage,
  getOrientation,
@@ -28,6 +34,7 @@ import {
  makeLastOnlineString,
  parseSecondsToDurationString,
  pluralize,
+  ROUTE_RECORDINGS,
  setLocalStorage,
 } from './utils/helpers.js';
 import {
@@ -52,6 +59,7 @@ import {
  WIDTH_SINGLE_COL,
 } from './utils/constants.js';
 import { checkIsModerator } from './utils/chat.js';
+import TabBar from './components/tab-bar.js';

 export default class App extends Component {
  constructor(props, context) {
@@ -92,7 +100,13 @@ export default class App extends Component {
      windowHeight: window.innerHeight,
      orientation: getOrientation(this.hasTouchScreen),

-      externalAction: null,
+      // modals
+      externalActionModalData: null,
+      fediverseModalData: null,
+
+      // routing & tabbing
+      section: '',
+      sectionId: '',
    };

    // timers
@@ -119,6 +133,9 @@ export default class App extends Component {
    this.handleKeyPressed = this.handleKeyPressed.bind(this);
    this.displayExternalAction = this.displayExternalAction.bind(this);
    this.closeExternalActionModal = this.closeExternalActionModal.bind(this);
+    this.displayFediverseFollowModal =
+      this.displayFediverseFollowModal.bind(this);
+    this.closeFediverseFollowModal = this.closeFediverseFollowModal.bind(this);

    // player events
    this.handlePlayerReady = this.handlePlayerReady.bind(this);
@@ -158,6 +175,9 @@ export default class App extends Component {
      onError: this.handlePlayerError,
    });
    this.player.init();
+
+    // check routing
+    this.getRoute();
  }

  componentWillUnmount() {
@@ -176,6 +196,13 @@ export default class App extends Component {
    }
  }

+  getRoute() {
+    const routeInfo = checkUrlPathForDisplay();
+    this.setState({
+      ...routeInfo,
+    });
+  }
+
  // fetch /config data
  getConfig() {
    fetch(URL_CONFIG)
@@ -478,12 +505,13 @@ export default class App extends Component {
  }

  handleKeyPressed(e) {
-    if (
-      e.target !== document.getElementById('message-input') &&
-      e.target !== document.getElementById('username-change-input') &&
-      e.target !== document.getElementsByClassName('emoji-picker__search')[0] &&
-      this.state.streamOnline
-    ) {
+    // Only handle shortcuts if the focus is on the general page body,
+    // not a specific input field.
+    if (e.target !== document.getElementById('app-body')) {
+      return;
+    }
+
+    if (this.state.streamOnline) {
      switch (e.code) {
        case 'MediaPlayPause':
        case 'KeyP':
@@ -527,7 +555,7 @@ export default class App extends Component {
      return;
    }
    this.setState({
-      externalAction: {
+      externalActionModalData: {
        ...action,
        url: fullUrl,
      },
@@ -535,10 +563,17 @@ export default class App extends Component {
  }
  closeExternalActionModal() {
    this.setState({
-      externalAction: null,
+      externalActionModalData: null,
    });
  }

+  displayFediverseFollowModal(data) {
+    this.setState({ fediverseModalData: data });
+  }
+  closeFediverseFollowModal() {
+    this.setState({ fediverseModalData: null });
+  }
+
  handleWebsocketMessage(e) {
    if (e.type === SOCKET_MESSAGE_TYPES.ERROR_USER_DISABLED) {
      // User has been actively disabled on the backend. Turn off chat for them.
@@ -645,9 +680,13 @@ export default class App extends Component {
      websocket,
      windowHeight,
      windowWidth,
-      externalAction,
+      fediverseModalData,
+      externalActionModalData,
      lastDisconnectTime,
+      section,
+      sectionId,
    } = state;
+
    const {
      version: appVersion,
      logo = TEMP_IMAGE,
@@ -660,6 +699,7 @@ export default class App extends Component {
      externalActions,
      customStyles,
      maxSocketPayloadSize,
+      federation = {},
    } = configData;

    const bgUserLogo = { backgroundImage: `url(${logo})` };
@@ -680,11 +720,19 @@ export default class App extends Component {
    const shortHeight = windowHeight <= HEIGHT_SHORT_WIDE && !isPortrait;
    const singleColMode = windowWidth <= WIDTH_SINGLE_COL && !shortHeight;

-    const shouldDisplayChat = displayChatPanel && canChat && !chatDisabled;
+    const noVideoContent =
+      !playerActive || (section === ROUTE_RECORDINGS && sectionId !== '');
+    const shouldDisplayChat =
+      displayChatPanel && !chatDisabled && !noVideoContent;
+    const usernameStyle = chatDisabled ? 'none' : 'flex';
+    // const shouldDisplayChat = displayChatPanel && canChat && !chatDisabled;

    const extraAppClasses = classNames({
      'config-loading': configData.loading,
+
      chat: shouldDisplayChat,
+      'no-chat': !shouldDisplayChat,
+      'no-video': noVideoContent,
      'chat-hidden': !displayChatPanel && canChat && !chatDisabled, // hide panel
      'chat-disabled': !canChat || chatDisabled,
      'single-col': singleColMode,
@@ -699,31 +747,53 @@ export default class App extends Component {
      : html` <${VideoPoster} offlineImage=${logo} active=${streamOnline} /> `;

    // modal buttons
-    const externalActionButtons =
-      externalActions &&
-      externalActions.length > 0 &&
-      html`<div
-        id="external-actions-container"
-        class="flex flex-row align-center"
-      >
-        ${externalActions.map(
-          function (action) {
-            return html`<${ExternalActionButton}
-              onClick=${this.displayExternalAction}
-              action=${action}
-            />`;
-          }.bind(this)
-        )}
-      </div>`;
+    const externalActionButtons = html`<div
+      id="external-actions-container"
+      class="flex flex-row flex-wrap justify-end"
+    >
+      ${externalActions &&
+      externalActions.map(
+        function (action) {
+          return html`<${ExternalActionButton}
+            onClick=${this.displayExternalAction}
+            action=${action}
+          />`;
+        }.bind(this)
+      )}
+
+      <!-- fediverse follow button -->
+      ${federation.enabled &&
+      html`<${FediverseFollowButton}
+        onClick=${this.displayFediverseFollowModal}
+        federationInfo=${federation}
+        serverName=${name}
+      />`}
+    </div>`;

    // modal component
    const externalActionModal =
-      externalAction &&
+      externalActionModalData &&
      html`<${ExternalActionModal}
-        action=${externalAction}
+        action=${externalActionModalData}
        onClose=${this.closeExternalActionModal}
      />`;

+    const fediverseFollowModal =
+      fediverseModalData &&
+      html`
+        <${ExternalActionModal}
+          onClose=${this.closeFediverseFollowModal}
+          action=${fediverseModalData}
+          useIframe=${false}
+          customContent=${html`<${FediverseFollowModal}
+            name=${name}
+            logo=${logo}
+            federationInfo=${federation}
+            onClose=${this.closeFediverseFollowModal}
+          />`}
+        />
+      `;
+
    const chat = this.state.websocket
      ? html`
          <${Chat}
@@ -738,6 +808,36 @@ export default class App extends Component {
        `
      : null;

+    const TAB_CONTENT = [
+      {
+        label: 'About',
+        content: html`
+          <div>
+            <div
+              id="stream-summary"
+              class="stream-summary my-4"
+              dangerouslySetInnerHTML=${{ __html: summary }}
+            ></div>
+            <div id="tag-list" class="tag-list text-gray-600 mb-3">
+              ${tagList && `#${tagList}`}
+            </div>
+            <div
+              id="extra-user-content"
+              class="extra-user-content"
+              dangerouslySetInnerHTML=${{ __html: extraPageContent }}
+            ></div>
+          </div>
+        `,
+      },
+    ];
+
+    if (federation.enabled) {
+      TAB_CONTENT.push({
+        label: 'Followers',
+        content: html`<${Followers} />`,
+      });
+    }
+
    return html`
      <div
        id="app-container"
@@ -784,7 +884,9 @@ export default class App extends Component {
                id="chat-toggle"
                onClick=${this.handleChatPanelToggle}
                class="flex cursor-pointer text-center justify-center items-center min-w-12 h-full bg-gray-800 hover:bg-gray-700"
-                style=${{ display: chatDisabled ? 'none' : 'block' }}
+                style=${{
+                  display: chatDisabled || noVideoContent ? 'none' : 'block',
+                }}
              >
                💬
              </button>
@@ -819,41 +921,42 @@ export default class App extends Component {
          </section>
        </main>

-        <section id="user-content" aria-label="User information" class="p-8">
+        <section
+          id="user-content"
+          aria-label="Owncast server information"
+          class="p-2"
+        >
+          ${externalActionButtons && html`${externalActionButtons}`}
+
          <div class="user-content flex flex-row p-8">
            <div
-              class="user-image rounded-full bg-white p-4 mr-8 bg-no-repeat bg-center"
-              style=${bgUserLogo}
+              class="user-logo-icons flex flex-col items-center justify-start mr-8"
            >
-              <img class="logo visually-hidden" alt="" src=${logo} />
+              <div
+                class="user-image rounded-full bg-white p-4 bg-no-repeat bg-center"
+                style=${bgUserLogo}
+              >
+                <img class="logo visually-hidden" alt="" src=${logo} />
+              </div>
+              <div class="social-actions">
+                <${SocialIconsList} handles=${socialHandles} />
+              </div>
            </div>
-            <div
-              class="user-content-header border-b border-gray-500 border-solid"
-            >
-              <h2 class="font-semibold text-5xl">
+
+            <div class="user-content-header">
+              <h2 class="server-name font-semibold text-5xl">
                <span class="streamer-name text-indigo-600">${name}</span>
              </h2>
-              ${externalActionButtons &&
-              html`<div>${externalActionButtons}</div>`}
              <h3 class="font-semibold text-3xl">
                ${streamOnline && streamTitle}
              </h3>
-              <${SocialIconsList} handles=${socialHandles} />
-              <div
-                id="stream-summary"
-                class="stream-summary my-4"
-                dangerouslySetInnerHTML=${{ __html: summary }}
-              ></div>
-              <div id="tag-list" class="tag-list text-gray-600 mb-3">
-                ${tagList && `#${tagList}`}
+
+              <!-- tab bar -->
+              <div class="${TAB_CONTENT.length > 1 ? 'my-8' : 'my-3'}">
+                <${TabBar} tabs=${TAB_CONTENT} ariaLabel="User Content" />
              </div>
            </div>
          </div>
-          <div
-            id="extra-user-content"
-            class="extra-user-content px-8"
-            dangerouslySetInnerHTML=${{ __html: extraPageContent }}
-          ></div>
        </section>

        <footer class="flex flex-row justify-start p-8 opacity-50 text-xs">
@@ -864,7 +967,7 @@ export default class App extends Component {
          </span>
        </footer>

-        ${chat} ${externalActionModal}
+        ${chat} ${externalActionModal} ${fediverseFollowModal}
      </div>
    `;
  }
--- a/webroot/js/components/chat/chat.js
+++ b/webroot/js/components/chat/chat.js
@@ -25,6 +25,9 @@ const renderableChatStyleMessages = [
  SOCKET_MESSAGE_TYPES.CHAT_ACTION,
  SOCKET_MESSAGE_TYPES.SYSTEM,
  SOCKET_MESSAGE_TYPES.CHAT,
+  SOCKET_MESSAGE_TYPES.FEDIVERSE_ENGAGEMENT_FOLLOW,
+  SOCKET_MESSAGE_TYPES.FEDIVERSE_ENGAGEMENT_LIKE,
+  SOCKET_MESSAGE_TYPES.FEDIVERSE_ENGAGEMENT_REPOST,
 ];
 export default class Chat extends Component {
  constructor(props, context) {
@@ -47,10 +50,6 @@ export default class Chat extends Component {
    this.receivedMessageUpdate = false;
    this.hasFetchedHistory = false;

-    // Force render is a state to force the messages to re-render when visibility
-    // changes for messages. This overrides componentShouldUpdate logic.
-    this.forceRender = false;
-
    // Unordered dictionary of messages keyed by ID.
    this.messages = {};

@@ -98,10 +97,6 @@ export default class Chat extends Component {
      sortedMessages,
    } = this.state;

-    if (this.forceRender) {
-      return true;
-    }
-
    const {
      webSocketConnected: nextSocket,
      chatUserNames: nextUserNames,
@@ -224,7 +219,8 @@ export default class Chat extends Component {
    };

    this.messages = updatedMessagesList;
-    this.forceRender = true;
+
+    this.resortAndRenderMessages();
  }

  handleChangeModeratorStatus(isModerator) {
@@ -261,12 +257,16 @@ export default class Chat extends Component {
    };
    this.messages = updatedMessagesList;

+    this.resortAndRenderMessages();
+  }
+
+  resortAndRenderMessages() {
    // Convert the unordered dictionary of messages to an ordered array.
    // NOTE: This sorts the entire collection of messages on every new message
    // because the order a message comes in cannot be trusted that it's the order
    // it was sent, you need to sort by timestamp. I don't know if there
    // is a  performance problem waiting to occur here for larger chat feeds.
-    var sortedMessages = Object.values(updatedMessagesList)
+    var sortedMessages = Object.values(this.messages)
      // Filter out messages set to not be visible
      .filter((message) => message.visible !== false)
      .sort((a, b) => {
--- a/webroot/js/components/chat/message.js
+++ b/webroot/js/components/chat/message.js
@@ -26,6 +26,62 @@ function SystemMessage(props) {
  `;
 }

+function SingleFederatedUser(props) {
+  const { message } = props;
+  const { type, body, title, image, link } = message;
+
+  let icon = null;
+  switch (type) {
+    case SOCKET_MESSAGE_TYPES.FEDIVERSE_ENGAGEMENT_FOLLOW:
+      icon = '/img/follow.svg';
+      break;
+    case SOCKET_MESSAGE_TYPES.FEDIVERSE_ENGAGEMENT_LIKE:
+      icon = '/img/like.svg';
+      break;
+    case SOCKET_MESSAGE_TYPES.FEDIVERSE_ENGAGEMENT_REPOST:
+      icon = '/img/repost.svg';
+      break;
+    default:
+      break;
+  }
+
+  return html`
+    <a
+      href=${link}
+      target="_blank"
+      class="hover:no-underline"
+      title="Visit profile"
+    >
+      <div
+        class="federated-action m-2 mt-3 bg-white flex items-center px-2 rounded-xl shadow border"
+      >
+        <div class="relative" style="top: -6px">
+          <img
+            src="${image || '/img/logo.svg'}"
+            style="max-width: unset"
+            class="rounded-full border border-slate-500	w-16"
+          />
+          <span
+            style=${{
+              backgroundImage: `url(${icon})`,
+            }}
+            class="absolute h-6 w-6 rounded-full border-2 border-white action-icon"
+          ></span>
+        </div>
+        <div class="px-4 py-2">
+          <span class=" text-gray-500 text-sm hover:no-underline truncate">
+            ${title}
+          </span>
+          <p
+            class=" text-gray-700 w-full text-base leading-6"
+            dangerouslySetInnerHTML=${{ __html: body }}
+          ></p>
+        </div>
+      </div>
+    </a>
+  `;
+}
+
 export default function Message(props) {
  const { message } = props;
  const { type, oldName, user, body } = message;
@@ -46,8 +102,18 @@ export default function Message(props) {
    return html`<${SystemMessage} contents=${contents} />`;
  } else if (type === SOCKET_MESSAGE_TYPES.USER_JOINED) {
    const { displayName } = user;
-    const contents = html`<span class="font-bold">${displayName}</span> joined
-      the chat.`;
+    const isAuthorModerator = checkIsModerator(message);
+    const messageAuthorFlair = isAuthorModerator
+      ? html`<img
+          title="Moderator"
+          class="inline-block mr-1 w-3 h-3"
+          src="/img/moderator-nobackground.svg"
+        />`
+      : null;
+    const contents = html`<div>
+      <span class="font-bold">${messageAuthorFlair}${displayName}</span>
+      ${' '}joined the chat.
+    </div>`;
    return html`<${SystemMessage} contents=${contents} />`;
  } else if (type === SOCKET_MESSAGE_TYPES.CHAT_ACTION) {
    const contents = html`<span
@@ -64,6 +130,12 @@ export default function Message(props) {
      </div>`;
      return html`<${SystemMessage} contents=${contents} />`;
    }
+  } else if (
+    type === SOCKET_MESSAGE_TYPES.FEDIVERSE_ENGAGEMENT_FOLLOW ||
+    SOCKET_MESSAGE_TYPES.FEDIVERSE_ENGAGEMENT_LIKE ||
+    SOCKET_MESSAGE_TYPES.FEDIVERSE_ENGAGEMENT_REPOST
+  ) {
+    return html` <${SingleFederatedUser} message=${message} /> `;
  } else {
    console.log('Unknown message type:', type);
  }
--- a/webroot/js/components/chat/moderator-actions.js
+++ b/webroot/js/components/chat/moderator-actions.js
@@ -237,7 +237,7 @@ function ModeratorMoreInfoContainer({
 }) {
  const { user, timestamp, body } = message;
  const { displayName, createdAt, previousNames, displayColor } = user;
-  const isAuthorModerator = user.scopes && user.scopes.contains('MODERATOR');
+  const isAuthorModerator = user.scopes && user.scopes.includes('MODERATOR');

  const authorTextColor = { color: textColorForHue(displayColor) };
  const createDate = new Date(createdAt);
--- a/webroot/js/components/external-action-modal.js
+++ b/webroot/js/components/external-action-modal.js
@@ -35,14 +35,13 @@ export default class ExternalActionModal extends Component {
  }

  render() {
-    const { action } = this.props;
+    const { action, useIframe = true, customContent = null } = this.props;
    const { url, title, description } = action;
    const { iframeLoaded } = this.state;
    const iframeStyle = iframeLoaded
      ? null
-      : {
-          backgroundImage: 'url(/img/loading.gif)',
-        };
+      : { backgroundImage: 'url(/img/loading.gif)' };
+
    return html`
      <div
        class="modal micromodal-slide"
@@ -61,7 +60,10 @@ export default class ExternalActionModal extends Component {
              id="modal-header"
              class="modal__header flex flex-row justify-between items-center bg-gray-300 p-3 rounded-t-md"
            >
-              <h2 class="modal__title text-indigo-600 font-semibold">
+              <h2
+                id="external-action-modal-header"
+                class="modal__title text-indigo-600 font-semibold"
+              >
                ${title || description}
              </h2>
              <button
@@ -70,23 +72,30 @@ export default class ExternalActionModal extends Component {
                data-micromodal-close
              ></button>
            </header>
-            <div id="modal-content-content" class="modal-content-content">
-              <div
-                id="modal-content"
-                class="modal__content text-gray-600 rounded-b-md overflow-y-auto overflow-x-hidden"
-              >
-                <iframe
-                  id="external-modal-iframe"
-                  style=${iframeStyle}
-                  class="bg-gray-100 bg-center bg-no-repeat"
-                  width="100%"
-                  allowpaymentrequest="true"
-                  allowfullscreen="false"
-                  sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
-                  src=${url}
-                  onload=${this.setIframeLoaded}
-                />
-              </div>
+            <div
+              id="modal-content-content"
+              class="modal-content-content rounded-b-md"
+            >
+              ${useIframe
+                ? html`
+                    <div
+                      id="modal-content"
+                      class="modal__content text-gray-600 overflow-y-auto overflow-x-hidden"
+                    >
+                      <iframe
+                        id="external-modal-iframe"
+                        style=${iframeStyle}
+                        class="bg-gray-100 bg-center bg-no-repeat"
+                        width="100%"
+                        allowpaymentrequest="true"
+                        allowfullscreen="false"
+                        sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
+                        src=${url}
+                        onload=${this.setIframeLoaded}
+                      />
+                    </div>
+                  `
+                : customContent}
            </div>
          </div>
        </div>
@@ -95,8 +104,8 @@ export default class ExternalActionModal extends Component {
  }
 }

-export function ExternalActionButton({ action, onClick }) {
-  const { title, icon, color = undefined } = action;
+export function ExternalActionButton({ action, onClick, label = '' }) {
+  const { title, icon, color = undefined, description } = action;
  const logo =
    icon &&
    html`
@@ -106,12 +115,14 @@ export function ExternalActionButton({ action, onClick }) {
  const handleClick = () => onClick(action);
  return html`
    <button
-      class="external-action-button rounded-sm flex flex-row justify-center items-center overflow-hidden bg-gray-800"
+      class="external-action-button rounded-sm flex flex-row justify-center items-center overflow-hidden m-1 px-3 py-1 text-base text-white bg-gray-800 rounded"
      onClick=${handleClick}
      style=${bgcolor}
+      aria-label=${description}
+      title=${description || title}
    >
      ${logo}
-      <span class="external-action-label">${title}</span>
+      <span class="external-action-label">${label || title}</span>
    </button>
  `;
 }
--- a/webroot/js/components/federation/followers.js
+++ b/webroot/js/components/federation/followers.js
@@ -0,0 +1,91 @@
+import { h, Component } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
+import { URL_FOLLOWERS } from '/js/utils/constants.js';
+const html = htm.bind(h);
+
+export default class FollowerList extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      followers: [],
+    };
+  }
+
+  componentDidMount() {
+    try {
+      this.getFollowers();
+    } catch (e) {
+      console.error('followers error: ', e);
+    }
+  }
+
+  async getFollowers() {
+    const response = await fetch(URL_FOLLOWERS);
+    const followers = await response.json();
+
+    this.setState({ followers: followers });
+  }
+
+  render() {
+    const { followers } = this.state;
+    if (!followers) {
+      return null;
+    }
+
+    const noFollowersInfo = html`<div>
+      <p class="mb-5 text-2xl">Be the first to follow this live stream.</p>
+      <p class="text-md">
+        By following this stream you'll get updates when it goes live, receive
+        posts from the streamer, and be featured here as a follower.
+      </p>
+      <p class="text-md mt-5">
+        Learn more about ${' '}
+        <a class="underline" href="https://en.wikipedia.org/wiki/Fediverse"
+          >The Fediverse</a
+        >, where you can follow this server as well as so much more.
+      </p>
+    </div>`;
+
+    return html`
+      <div class="flex flex-wrap">
+        ${followers.length === 0 && noFollowersInfo}
+        ${followers.map((follower) => {
+          return html` <${SingleFollower} user=${follower} /> `;
+        })}
+      </div>
+    `;
+  }
+}
+
+function SingleFollower(props) {
+  const { user } = props;
+  const { name, username, link, image } = user;
+
+  var displayName = name;
+  var displayUsername = username;
+
+  if (!displayName) {
+    displayName = displayUsername.split('@', 1)[0];
+  }
+  return html`
+    <a
+      href=${link}
+      class="following-list-follower block bg-white flex p-2 rounded-xl shadow border hover:no-underline m-4"
+      target="_blank"
+    >
+      <img
+        src="${image || '/img/logo.svg'}"
+        class="w-16 h-16 rounded-full"
+        onError=${({ currentTarget }) => {
+          currentTarget.onerror = null;
+          currentTarget.src = '/img/logo.svg';
+        }}
+      />
+      <div class="p-3 truncate flex-grow">
+        <p class="font-semibold text-gray-700 truncate">${displayName}</p>
+        <p class="text-sm text-gray-500 truncate">${displayUsername}</p>
+      </div>
+    </a>
+  `;
+}
--- a/webroot/js/components/fediverse-follow-modal.js
+++ b/webroot/js/components/fediverse-follow-modal.js
@@ -0,0 +1,196 @@
+import { h, Component } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
+import { ExternalActionButton } from './external-action-modal.js';
+
+const html = htm.bind(h);
+
+function validateAccount(account) {
+  account = account.replace(/^@+/, '');
+  var regex =
+    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  return regex.test(String(account).toLowerCase());
+}
+
+export default class FediverseFollowModal extends Component {
+  constructor(props) {
+    super(props);
+
+    this.remoteFollowButtonPressed = this.remoteFollowButtonPressed.bind(this);
+
+    this.state = {
+      errorMessage: null,
+      value: '',
+      loading: false,
+      valid: false,
+    };
+  }
+
+  async remoteFollowButtonPressed() {
+    if (!this.state.valid) {
+      return;
+    }
+
+    this.setState({ loading: true, errorMessage: null });
+    const { value } = this.state;
+    const { onClose } = this.props;
+
+    const account = value.replace(/^@+/, '');
+    const request = { account: account };
+    const requestURL = '/api/remotefollow';
+    const rawResponse = await fetch(requestURL, {
+      method: 'POST',
+      body: JSON.stringify(request),
+    });
+    const result = await rawResponse.json();
+
+    if (!result.redirectUrl) {
+      this.setState({ errorMessage: result.message, loading: false });
+      return;
+    }
+
+    window.open(result.redirectUrl, '_blank');
+    onClose();
+  }
+
+  navigateToFediverseJoinPage() {
+    window.open('https://owncast.online/join-fediverse', '_blank');
+  }
+
+  onInput = (e) => {
+    const { value } = e.target;
+    const valid = validateAccount(value);
+    this.setState({ value, valid });
+  };
+
+  render() {
+    const { name, federationInfo = {}, logo } = this.props;
+    const { account } = federationInfo;
+    const { errorMessage, value, valid, loading } = this.state;
+    const buttonState = valid ? '' : 'cursor-not-allowed opacity-50';
+
+    const error = errorMessage
+      ? html`
+          <div
+            class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+            role="alert"
+          >
+            <div class="font-bold mb-2">
+              There was an error following this Owncast server.
+            </div>
+            <span class="block">
+              Please verify you entered the correct user account. It's also
+              possible your server may not support remote following, so you may
+              want to manually follow ${' '}
+              <span class="font-semibold">${account}</span> using your service's
+              own interface.
+            </span>
+            <div class="block mt-2">
+              Server error: <span class="">${errorMessage}</span>
+            </div>
+          </div>
+        `
+      : null;
+
+    const loaderStyle = loading ? 'flex' : 'none';
+
+    return html`
+      <div class="bg-gray-100 bg-center bg-no-repeat p-4">
+        <p class="text-gray-700 text-md">
+          By following this stream you'll get posts and notifications such as
+          when it goes live.
+        </p>
+
+        <div
+          class="p-4 my-2 rounded bg-gray-300 border border-indigo-400 border-solid flex items-center justify-start"
+        >
+          <img src=${logo} style=${{ height: '3em', width: '3em' }} />
+          <p class="ml-4">
+            <span class="font-bold">${name}</span>
+            <br />
+            <span class="">${account}</span>
+          </p>
+        </div>
+
+        ${error}
+
+        <div class="mb34">
+          <label
+            class="block text-gray-700 text-sm font-semibold mt-6"
+            for="username"
+          >
+            Enter your username@server to follow:
+          </label>
+          <input
+            onInput=${this.onInput}
+            value="${value}"
+            class="border bg-white rounded w-full py-2 px-3 mb-2 mt-2 text-indigo-700 leading-tight focus:outline-none focus:shadow-outline"
+            id="username"
+            type="text"
+            placeholder="Fediverse account@instance.tld"
+          />
+        </div>
+
+        <p class="text-gray-600 text-xs italic">
+          You'll be redirected to your Fediverse server and asked to confirm
+          this action. ${'  '}
+          <a
+            class=" text-blue-500"
+            href="https://owncast.online/join-fediverse"
+            target="_blank"
+            rel="noopener noreferrer"
+            >Join the Fediverse if you haven't.</a
+          >
+        </p>
+
+        <button
+          class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 mt-6 px-4 rounded focus:outline-none focus:shadow-outline ${buttonState}"
+          type="button"
+          onClick=${this.remoteFollowButtonPressed}
+        >
+          Follow
+        </button>
+        <button
+          class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 ml-4 mt-6 px-4 rounded focus:outline-none focus:shadow-outline"
+          type="button"
+          onClick=${this.navigateToFediverseJoinPage}
+        >
+          Join the Fediverse
+        </button>
+        <div
+          id="follow-loading-spinner-container"
+          style="display: ${loaderStyle}"
+        >
+          <img id="follow-loading-spinner" src="/img/loading.gif" />
+          <p class="text-gray-700 text-lg">Contacting your server.</p>
+          <p class="text-gray-600 text-lg">Please wait...</p>
+        </div>
+      </div>
+    `;
+  }
+}
+
+export function FediverseFollowButton({ serverName, federationInfo, onClick }) {
+  const fediverseFollowAction = {
+    color: 'rgba(28, 26, 59, 1)',
+    description: `Follow ${serverName} at ${federationInfo.account}`,
+    icon: '/img/fediverse-color.png',
+    openExternally: false,
+    title: `Follow ${serverName}`,
+    url: '',
+  };
+
+  const handleClick = () => onClick(fediverseFollowAction);
+  return html`
+    <span id="fediverse-follow-button-container">
+      <${ExternalActionButton}
+        onClick=${handleClick}
+        action=${fediverseFollowAction}
+        label=${`Follow ${
+          federationInfo.followerCount > 10
+            ? ` (${federationInfo.followerCount})`
+            : ''
+        }`}
+      />
+    </span>
+  `;
+}
--- a/webroot/js/components/platform-logos-list.js
+++ b/webroot/js/components/platform-logos-list.js
@@ -1,64 +1,70 @@
-import {h} from '/js/web_modules/preact.js';
+import { h } from '/js/web_modules/preact.js';
 import htm from '/js/web_modules/htm.js';
-import {classNames} from '../utils/helpers.js';
+import { classNames } from '../utils/helpers.js';

 const html = htm.bind(h);

 function SocialIcon(props) {
-  const {platform, icon, url} = props;
-  const iconSupplied = !!icon
+  const { platform, icon, url } = props;
+  const iconSupplied = !!icon;
  const name = platform;

  const finalIcon = iconSupplied ? icon : '/img/platformlogos/default.svg';

-  const style = `background-image: url(${finalIcon});`
+  const style = `background-image: url(${finalIcon});`;

  const itemClass = classNames({
-    "user-social-item": true,
-    "flex": true,
-    "justify-start": true,
-    "items-center": true,
-    "-mr-1": true,
+    'user-social-item': true,
+    flex: true,
+    'justify-start': true,
+    'items-center': true,
+    'm-1': true,
  });
  const labelClass = classNames({
-    "platform-label": true,
-    "visually-hidden": !!finalIcon,
-    "text-indigo-800": true,
-    "text-xs": true,
-    "uppercase": true,
-    "max-w-xs": true,
-    "inline-block": true,
+    'platform-label': true,
+    'visually-hidden': !!finalIcon,
+    'text-indigo-800': true,
+    'text-xs': true,
+    uppercase: true,
+    'max-w-xs': true,
+    'inline-block': true,
  });

-  return (
-    html`
-      <a class=${itemClass} target="_blank" rel="me" href=${url}>
-        <span class="platform-icon rounded-lg bg-no-repeat"
-              style=${style} title="Find me on ${name}"></span>
-        <span class=${labelClass}>Find me on ${name}</span>
-      </a>
-    `);
+  return html`
+    <a class=${itemClass} target="_blank" rel="me" href=${url}>
+      <span
+        class="platform-icon rounded-lg bg-no-repeat"
+        style=${style}
+        title="Find me on ${name}"
+      ></span>
+      <span class=${labelClass}>Find me on ${name}</span>
+    </a>
+  `;
 }

 export default function (props) {
-  const {handles} = props;
+  const { handles } = props;
  if (handles == null) {
    return null;
  }

-  const list = handles.map((item, index) => html`
-    <li key="social${index}">
-      <${SocialIcon} platform=${item.platform} icon=${item.icon}
-                     url=${item.url}/>
-    </li>
-  `);
+  const list = handles.map(
+    (item, index) => html`
+      <li key="social${index}">
+        <${SocialIcon}
+          platform=${item.platform}
+          icon=${item.icon}
+          url=${item.url}
+        />
+      </li>
+    `
+  );

-  return html`
-    <ul
-      id="social-list"
-      class="social-list flex flex-row items-center justify-start flex-wrap">
-      <span
-        class="follow-label text-xs font-bold mr-2 uppercase">Follow me:</span>
+  return html` <ul id="social-list" class="social-list m-2 text-center">
+    <p
+      class="follow-icon-list flex flex-row items-center justify-center flex-wrap"
+    >
      ${list}
-    </ul>`;
+    </p>
+  </ul>`;
 }
--- a/webroot/js/components/tab-bar.js
+++ b/webroot/js/components/tab-bar.js
@@ -0,0 +1,70 @@
+import { h, Component } from '/js/web_modules/preact.js';
+
+import htm from '/js/web_modules/htm.js';
+
+const html = htm.bind(h);
+
+export default class TabBar extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeIndex: 0,
+    };
+
+    this.handleTabClick = this.handleTabClick.bind(this);
+  }
+
+  handleTabClick(index) {
+    this.setState({ activeIndex: index });
+  }
+
+  render() {
+    const { tabs, ariaLabel } = this.props;
+    if (!tabs.length) {
+      return null;
+    }
+
+    if (tabs.length === 1) {
+      return html`
+        ${tabs[0].content}
+      `;
+
+    } else {
+      return html`
+        <div class="tab-bar">
+          <div role="tablist" aria-label=${ariaLabel}>
+            ${
+              tabs.map((tabItem, index) => {
+                const handleClick = () => this.handleTabClick(index);
+                return html`
+                  <button
+                    role="tab"
+                    aria-selected=${index === this.state.activeIndex}
+                    aria-controls=${`tabContent${index}`}
+                    id=${`tab-${tabItem.label}`}
+                    onclick=${handleClick}
+                  >${tabItem.label}</button>
+                `;
+              })
+            }
+          </div>
+          ${
+            tabs.map((tabItem, index) => {
+              return html`
+                  <div
+                    tabindex="0"
+                    role="tabpanel"
+                    id=${`tabContent${index}`}
+                    aria-labelledby=${`tab-${tabItem.label}`}
+                    hidden=${index !== this.state.activeIndex}
+                  >
+                    ${tabItem.content}
+                  </div>
+              `;
+            })
+          }
+        </div>
+      `;
+    }
+  }
+}
--- a/webroot/js/utils/chat.js
+++ b/webroot/js/utils/chat.js
@@ -43,11 +43,13 @@ export function generatePlaceholderText(isEnabled, hasSentFirstChatMessage) {
 export function extraUserNamesFromMessageHistory(messages) {
  const list = [];
  if (messages) {
-    messages.forEach(function (message) {
-      if (!list.includes(message.user.displayName)) {
-        list.push(message.user.displayName);
-      }
-    });
+    messages
+      .filter((m) => m.user && m.user.displayName)
+      .forEach(function (message) {
+        if (!list.includes(message.user.displayName)) {
+          list.push(message.user.displayName);
+        }
+      });
  }
  return list;
 }
--- a/webroot/js/utils/constants.js
+++ b/webroot/js/utils/constants.js
@@ -16,6 +16,7 @@ export const URL_WEBSOCKET = `${
  location.protocol === 'https:' ? 'wss' : 'ws'
 }://${location.host}/ws`;
 export const URL_CHAT_REGISTRATION = `/api/chat/register`;
+export const URL_FOLLOWERS = `/api/followers`;

 export const TIMER_STATUS_UPDATE = 5000; // ms
 export const TIMER_DISABLE_CHAT_AFTER_OFFLINE = 5 * 60 * 1000; // 5 mins
--- a/webroot/js/utils/helpers.js
+++ b/webroot/js/utils/helpers.js
@@ -177,3 +177,24 @@ export function makeLastOnlineString(timestamp) {

  return `Last live: ${string}`;
 }
+
+
+// Routing & Tabs
+export const ROUTE_RECORDINGS = 'recordings';
+export const ROUTE_SCHEDULE = 'schedule';
+// looks for `/recording|schedule/id` pattern to determine what to display from the tab view
+export function checkUrlPathForDisplay() {
+  const pathTest = [ROUTE_RECORDINGS, ROUTE_SCHEDULE];
+  const pathParts = window.location.pathname.split('/');
+
+  if (pathParts.length >= 2) {
+    const part = pathParts[1].toLowerCase();
+    if (pathTest.includes(part)) {
+      return {
+        section: part,
+        sectionId: pathParts[2] || '',
+      };
+    }
+  }
+  return null;
+}
--- a/webroot/js/utils/websocket.js
+++ b/webroot/js/utils/websocket.js
@@ -12,6 +12,9 @@ export const SOCKET_MESSAGE_TYPES = {
  SYSTEM: 'SYSTEM',
  USER_JOINED: 'USER_JOINED',
  CHAT_ACTION: 'CHAT_ACTION',
+  FEDIVERSE_ENGAGEMENT_FOLLOW: 'FEDIVERSE_ENGAGEMENT_FOLLOW',
+  FEDIVERSE_ENGAGEMENT_LIKE: 'FEDIVERSE_ENGAGEMENT_LIKE',
+  FEDIVERSE_ENGAGEMENT_REPOST: 'FEDIVERSE_ENGAGEMENT_REPOST',
  CONNECTED_USER_INFO: 'CONNECTED_USER_INFO',
  ERROR_USER_DISABLED: 'ERROR_USER_DISABLED',
  ERROR_NEEDS_REGISTRATION: 'ERROR_NEEDS_REGISTRATION',
--- a/webroot/styles/app.css
+++ b/webroot/styles/app.css
@@ -10,6 +10,15 @@ May have overrides for other components with own stylesheets.
  --video-container-height: calc((9 / 16) * 100vw);
  --header-bg-color: rgba(20,0,40,1);
  --user-image-width: 10em;
+
+  --novideo-container-height: 16em;
+
+  --owncast-purple: rgba(120, 113, 255, 1);
+}
+
+.no-video,
+.single-col.no-video {
+  --video-container-height: var(--novideo-container-height);
 }

 html {
@@ -78,23 +87,11 @@ header {
  display: none;
 }

-#external-actions-container {
-  margin: 1em 0;
-
-}
 .external-action-button {
-  border-radius: 4px;
-  color: #fff;
-  font-size: .88em;
-  padding: .25em .75em;
-  margin: .35em;
-  margin-left: 0;
-  display: flex;
  max-width: 250px;
-  padding-top: .3em;
 }
 .external-action-button:hover {
-  text-decoration: underline;
+  box-shadow: var(--owncast-purple) 0px 0px 5px;
 }
 .external-action-icon {
  margin: .25em .5em .25em 0;
@@ -108,7 +105,9 @@ header {
  overflow: hidden;
 }

-
+#fediverse-follow-button-container .external-action-button {
+  border: 2px solid var(--owncast-purple);
+}

 /* ************************************************ */

@@ -170,6 +169,9 @@ header {
  width: var(--content-width);
 }

+.user-content-header {
+  width: 100%;
+}
 .chat #video-container {
  height: calc((9 / 16) * var(--content-width));
 }
@@ -218,7 +220,7 @@ header {
 }
 .single-col #user-content .user-content {
  flex-wrap: wrap;
-  justify-content: center;
+  justify-content: flex-start;
 }
 .single-col.chat #user-content {
  display: none;
@@ -243,6 +245,36 @@ header {
  max-height: 3em;
 }

+
+.single-col .user-logo-icons {
+  margin-right: 0;
+  margin-bottom: 1em;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: center;
+}
+.single-col.use-fediverse-follow.user-logo-icons {
+  align-items: center;
+}
+
+.single-col .social-list {
+  text-align: left;
+}
+.single-col .social-actions {
+  margin-left: 1em;
+}
+.single-col .follow-icon-list {
+   justify-content: flex-start;
+}
+.single-col.use-fediverse-follow #fediverse-button-singlecol {
+  display: inline-block;
+}
+
+.single-col #external-actions-container {
+  justify-content: flex-start;
+}
+
+
@media screen and (max-height: 500px) {
  .single-col.touch-screen:not(.touch-keyboard-active) {
    --header-height: 0px;
@@ -251,15 +283,19 @@ header {
    display: none;
  }
 }
+/* ************************************************ */


+.no-video #video-container {
+  min-height: var(--video-container-height);
+}
+
 /* ************************************************ */


@media screen and (max-width: 860px) {
  :root {
    --right-col-width: 20em;
-    --user-image-width: 6em;
  }
  #video-container {
    min-height: 240px;
@@ -314,14 +350,14 @@ header {
 }

 .modal__container {
+  position: relative;
  background-color: transparent;
  padding: 0px;
  max-width: 740px;
-  height: 75vh;
  width: 50%;
-  border-radius: 0px;
  overflow: hidden;
  box-sizing: border-box;
+  top: -15%;
 }
 .modal__close {
  background: transparent;
@@ -419,3 +455,52 @@ header {
    -webkit-overflow-scrolling: touch;
  }
 }
+
+
+/**************************
+  Tab Bar Base Styles
+**************************/
+.tab-bar [role="tab"] {
+  padding: .5rem 1rem;
+  border-radius: .25rem .25rem 0 0;
+  font-weight: bold;
+}
+.tab-bar [role="tab"]:hover {
+  background-color: rgba(255,255,255,.35);
+}
+.tab-bar [role="tab"][aria-selected="true"] {
+  color: var(--owncast-purple);
+  background-color: white;
+}
+.tab-bar [role="tabpanel"] {
+  padding: 1rem 0;
+  border-top: 1px solid var(--header-bg-color);
+  min-height: 15rem;
+}
+
+.follower {
+  width: 20vw;
+  max-width: 300px
+}
+
+.following-list-follower {
+  max-width: 280px;
+}
+
+#follow-loading-spinner-container {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  opacity: 0.7;
+}
+
+#follow-loading-spinner {
+  width: 100px;
+  height: 100px;
+}
--- a/webroot/styles/chat.css
+++ b/webroot/styles/chat.css
@@ -342,3 +342,16 @@
 /* MODERATOR STYLES */
 /* MODERATOR STYLES */
 /* MODERATOR STYLES */
+
+.action-icon {
+  bottom: -5px;
+  right: -2px;
+  animation: spin 0.4s ease 1.0;
+  animation-fill-mode: forwards;
+  background-color: white;
+  background-size: cover;
+}
+
+.federated-action {
+  min-height: 76px;
+}
--- a/webroot/styles/user-content.css
+++ b/webroot/styles/user-content.css
@@ -6,9 +6,9 @@
  background-size: cover;
 }

-.user-social-item {
+/* .user-social-item {
  margin-right: .85rem;
-}
+} */

 .user-social-item .platform-icon {
  --icon-width: 28px;