From 6e52c28c8137ec2d8bad558281fe572b05a8d652 Mon Sep 17 00:00:00 2001
From: Jost Schulte <jost.schulte@protonmail.com>
Date: Sat, 24 Dec 2022 20:57:27 -0600
Subject: [PATCH] feat(mew-view)!: add page for mew view (#37)

* show help texts for mew input field

* add lick icon & tooltips

* replace like with lick icon

* add avatar to main search results

* reduce number of mew fetches & lick in background

* set min height for mew input field

* refactor dialogs

* move tag mew state to store

* trim mew field input when publishing

* workaround profile context mess up of app structure

* replace base modal

* move yarn to own page

* reload yarn on toggle lick

* show skeletons while loading yarn

* fix agent profile mews feed

* fix mew licking in yarn

* narrow view in xl mode

* fix tag mews feed

* fix mews feed store

* add followers and followees to my profile

* move empty mew feed to mew list

* pass onLickMew down to list item

* pass in onToggleLickMew from tag mews feed

* pass onToggleLickMew from agent profile

* pass onPublishMew from mews feed

* pass onPublishMew from TagMewsFeed

* pass onPublishMew from AgentProfile

* fetch mewmew in yarn

* update changelog

* update holonix sources

* add ci os matrix
---
 .github/workflows/test.yml            |   6 +-
 CHANGELOG.md                          |   1 +
 nix/sources.json                      |   6 +-
 ui/public/icons.svg                   |   6 +-
 ui/src/components/BaseDialog.vue      |  32 ---
 ui/src/components/ButtonFollow.vue    |   4 +-
 ui/src/components/CreateMewDialog.vue | 118 +++++-----
 ui/src/components/CreateMewField.vue  |  91 +++++---
 ui/src/components/EmptyMewsFeed.vue   |  12 +
 ui/src/components/FolloweesList.vue   |   6 +
 ui/src/components/FollowersList.vue   |   6 +
 ui/src/components/MewContent.vue      |  28 ++-
 ui/src/components/MewList.vue         |  27 ++-
 ui/src/components/MewListItem.vue     | 318 ++++++++++++--------------
 ui/src/components/MewTimestamp.vue    |  29 +++
 ui/src/components/MewYarnListItem.vue | 234 +++++++++++++++++++
 ui/src/components/ProfilePopup.vue    |   4 +-
 ui/src/components/Timestamp.vue       |  27 ---
 ui/src/css/quasar.variables.sass      |  13 +-
 ui/src/layouts/MainLayout.vue         |  67 ++++--
 ui/src/main.ts                        |   6 +-
 ui/src/pages/AgentProfile.vue         |  56 ++++-
 ui/src/pages/HomePage.vue             |   6 +-
 ui/src/pages/MewYarn.vue              | 147 ++++++++++++
 ui/src/pages/MewsFeed.vue             |  43 ++--
 ui/src/pages/MyProfile.vue            |  35 ++-
 ui/src/pages/NotFound.vue             |   3 +-
 ui/src/pages/TagMewsFeed.vue          |  55 ++++-
 ui/src/router.ts                      |   6 +
 ui/src/services/clutter-dna.ts        |   2 +-
 ui/src/stores/clutter.ts              |  30 ++-
 ui/src/stores/index.ts                |   2 +-
 ui/src/types/types.ts                 |  10 +-
 ui/src/utils/hash.ts                  |   2 +-
 ui/src/utils/page-layout.ts           |   9 +
 35 files changed, 1018 insertions(+), 429 deletions(-)
 delete mode 100644 ui/src/components/BaseDialog.vue
 create mode 100644 ui/src/components/EmptyMewsFeed.vue
 create mode 100644 ui/src/components/MewTimestamp.vue
 create mode 100644 ui/src/components/MewYarnListItem.vue
 delete mode 100644 ui/src/components/Timestamp.vue
 create mode 100644 ui/src/pages/MewYarn.vue
 create mode 100644 ui/src/utils/page-layout.ts

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index b95b5f0d..a6418261 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -4,7 +4,11 @@ on: [pull_request]
 
 jobs:
   build-and-test:
-    runs-on: ubuntu-latest
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        # os: [ubuntu-latest, macos-latest]
 
     steps:
       - name: Checkout code
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5d28f091..0ef72aa9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ## Unreleased
 
 ### Added
+- Thread view for a mew with all its replies.
 ### Changed
 ### Fixed
 ### Removed
diff --git a/nix/sources.json b/nix/sources.json
index 940894de..6d0c284e 100644
--- a/nix/sources.json
+++ b/nix/sources.json
@@ -5,10 +5,10 @@
         "homepage": "",
         "owner": "holochain",
         "repo": "holonix",
-        "rev": "251987d1e5d5e943eb96e5849125a2fcc212fe6d",
-        "sha256": "0lnydk200x4r3yh3z23r4rmw825cdg7aiq7l4jc0aq4mwpkxqj8j",
+        "rev": "21f339a295d28e559371b805e489b973db6d769d",
+        "sha256": "140f0snqv9dlinpjdjjxhm1yynd8xkv58gjvpwqhzjxs7gna8z38",
         "type": "tarball",
-        "url": "https://github.com/holochain/holonix/archive/251987d1e5d5e943eb96e5849125a2fcc212fe6d.tar.gz",
+        "url": "https://github.com/holochain/holonix/archive/21f339a295d28e559371b805e489b973db6d769d.tar.gz",
         "url_template": "https://github.com/<owner>/<repo>/archive/<rev>.tar.gz"
     }
 }
diff --git a/ui/public/icons.svg b/ui/public/icons.svg
index 9994b552..2e3f0ca4 100644
--- a/ui/public/icons.svg
+++ b/ui/public/icons.svg
@@ -1,6 +1,10 @@
 <svg xmlns="http://www.w3.org/2000/svg">
   <symbol id="cat" viewBox="0 0 24 24">
     <path
-       d="m 20.16199,5.7182363 c -0.844039,0.4378809 -1.217109,1.415541 -2.024326,1.8744476 -0.37867,0.215325 -1.01417,-0.066833 -1.424905,-0.094835 C 16.189501,7.4619939 15.434678,7.79181 14.958687,7.6160932 14.321602,7.3808085 13.816718,6.0760271 13.449976,5.5318914 c -0.804417,0.4179516 -1.019935,1.7839883 -1.11401,2.6102299 -0.261674,2.2982077 0.321343,5.1330087 2.88524,5.8730147 v 0.0932 C 14.459952,13.960611 13.68397,13.823551 12.983867,13.473492 10.024986,11.994058 10.211343,8.8508052 10.746529,6.0912174 9.1648268,5.5767311 7.0813669,5.2697907 5.8057457,6.6505556 3.885883,4.4361695 6.7994086,1.8707912 9.0685288,2.0985478 10.214884,2.2136783 10.848516,3.3133887 11.864731,3.4732969 12.396006,3.5568665 12.480094,2.931858 12.38547,2.5487715 12.118582,1.4680421 10.725371,0.61426938 9.7210833,0.35603347 7.2523289,-0.2787842 4.2161606,0.7641315 3.0441714,3.108095 2.4743425,4.2477675 2.4440115,5.9369397 2.9090377,7.1166635 3.0796885,7.54961 3.6904131,8.1121486 3.7032301,8.5545638 3.7278271,9.406395 3.0530025,10.394176 3.0127588,11.311663 c -0.1268361,2.892232 0.665682,5.972571 1.3598428,8.762907 0.2688747,1.08073 0.4270494,2.480742 1.0058872,3.443732 0.6320912,1.051643 1.137539,-0.352562 1.1697369,-0.926733 0.100165,-1.785767 0.1186862,-3.641826 0.4335394,-5.406891 0.079717,-0.446816 0.2742978,-1.611529 0.9647251,-1.412223 0.5704355,0.164724 0.7181204,1.011089 0.8018235,1.505452 0.2607534,1.540408 0.3714094,3.112597 0.5877715,4.661108 0.064598,0.462389 0.1019466,1.742425 0.6707348,1.887577 0.564835,0.144172 0.721543,-1.072996 0.800327,-1.421454 0.279661,-1.23557 0.384449,-2.513756 0.752393,-3.728907 0.126096,-0.416321 0.346413,-1.06935 0.866307,-1.114275 0.598397,-0.05171 0.792296,0.663739 0.873495,1.114275 0.211621,1.173397 -0.03586,2.530158 -0.03586,3.728907 0,0.389296 -0.09113,1.51541 0.563071,1.448108 0.514027,-0.05289 0.755282,-0.761993 0.907145,-1.168446 0.499387,-1.336535 0.777478,-2.804218 1.086316,-4.195015 0.21451,-0.965865 0.454549,-1.929983 0.694412,-2.889892 0.09631,-0.384997 0.124021,-0.957108 0.371396,-1.276865 0.288255,-0.372418 1.007651,-0.437112 1.411673,-0.669609 0.739443,-0.425376 1.299152,-1.105342 1.648914,-1.875634 0.82316,-1.8131777 0.366373,-4.1476276 0.215532,-6.0594597 z" />
+      d="m 20.16199,5.7182363 c -0.844039,0.4378809 -1.217109,1.415541 -2.024326,1.8744476 -0.37867,0.215325 -1.01417,-0.066833 -1.424905,-0.094835 C 16.189501,7.4619939 15.434678,7.79181 14.958687,7.6160932 14.321602,7.3808085 13.816718,6.0760271 13.449976,5.5318914 c -0.804417,0.4179516 -1.019935,1.7839883 -1.11401,2.6102299 -0.261674,2.2982077 0.321343,5.1330087 2.88524,5.8730147 v 0.0932 C 14.459952,13.960611 13.68397,13.823551 12.983867,13.473492 10.024986,11.994058 10.211343,8.8508052 10.746529,6.0912174 9.1648268,5.5767311 7.0813669,5.2697907 5.8057457,6.6505556 3.885883,4.4361695 6.7994086,1.8707912 9.0685288,2.0985478 10.214884,2.2136783 10.848516,3.3133887 11.864731,3.4732969 12.396006,3.5568665 12.480094,2.931858 12.38547,2.5487715 12.118582,1.4680421 10.725371,0.61426938 9.7210833,0.35603347 7.2523289,-0.2787842 4.2161606,0.7641315 3.0441714,3.108095 2.4743425,4.2477675 2.4440115,5.9369397 2.9090377,7.1166635 3.0796885,7.54961 3.6904131,8.1121486 3.7032301,8.5545638 3.7278271,9.406395 3.0530025,10.394176 3.0127588,11.311663 c -0.1268361,2.892232 0.665682,5.972571 1.3598428,8.762907 0.2688747,1.08073 0.4270494,2.480742 1.0058872,3.443732 0.6320912,1.051643 1.137539,-0.352562 1.1697369,-0.926733 0.100165,-1.785767 0.1186862,-3.641826 0.4335394,-5.406891 0.079717,-0.446816 0.2742978,-1.611529 0.9647251,-1.412223 0.5704355,0.164724 0.7181204,1.011089 0.8018235,1.505452 0.2607534,1.540408 0.3714094,3.112597 0.5877715,4.661108 0.064598,0.462389 0.1019466,1.742425 0.6707348,1.887577 0.564835,0.144172 0.721543,-1.072996 0.800327,-1.421454 0.279661,-1.23557 0.384449,-2.513756 0.752393,-3.728907 0.126096,-0.416321 0.346413,-1.06935 0.866307,-1.114275 0.598397,-0.05171 0.792296,0.663739 0.873495,1.114275 0.211621,1.173397 -0.03586,2.530158 -0.03586,3.728907 0,0.389296 -0.09113,1.51541 0.563071,1.448108 0.514027,-0.05289 0.755282,-0.761993 0.907145,-1.168446 0.499387,-1.336535 0.777478,-2.804218 1.086316,-4.195015 0.21451,-0.965865 0.454549,-1.929983 0.694412,-2.889892 0.09631,-0.384997 0.124021,-0.957108 0.371396,-1.276865 0.288255,-0.372418 1.007651,-0.437112 1.411673,-0.669609 0.739443,-0.425376 1.299152,-1.105342 1.648914,-1.875634 0.82316,-1.8131777 0.366373,-4.1476276 0.215532,-6.0594597 z" />
+  </symbol>
+  <symbol id="lick" viewBox="0 0 217.65 204.19">
+    <path fill="currentColor" stroke="black" stroke-width="15"
+      d="M 200.06, 58.29 c 2-12.78-2.74-22.56-12.58-30.34-17.42-13.76-50-13-66.63,1.65 a 10.74,10.74,0,0,0-3.58,7.47 c -2.54,21.55-4.19,43.1-1.78,64.8,1,8.8,1.57,17.66,2,26.51.23,4.46-2.22,7.56-6.64,8.41-4.76.91-8.14-1.29-9.81-5.79a28.22,28.22,0,0,1-1.46-6.08 C 95.93,96.33,95,67.7,99.07,39.08 c .82-5.67-.74-9.57-5.72-12.39 C 74.2,15.87,54.66,14.38,35.2,25.23 c -11.49,6.4-17.74,16.19-17,30.23 a 199.25,199.25,0,0,0,23.7,85.26,111.73,111.73,0,0,0,9.41,14.41 c 31.92,42,84.64,41.94,116.05-.36 C 188.54,126.2,197,93,200.06,58.29 Z" />
   </symbol>
 </svg>
\ No newline at end of file
diff --git a/ui/src/components/BaseDialog.vue b/ui/src/components/BaseDialog.vue
deleted file mode 100644
index 8520f2fe..00000000
--- a/ui/src/components/BaseDialog.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <q-dialog v-model="isVisible" @hide="onClose">
-    <q-card class="dialog">
-      <q-card-section class="q-pb-sm">
-        <div class="row justify-between items-center">
-          <slot name="title" />
-          <q-btn v-close-popup icon="close" flat round dense />
-        </div>
-      </q-card-section>
-
-      <q-card-section class="q-pb-lg">
-        <slot name="content" />
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-
-const emit = defineEmits<{ (e: "close"): void }>();
-
-const isVisible = ref(true);
-const onClose = () => emit("close");
-</script>
-
-<style lang="sass" scoped>
-.dialog
-  min-width: 400px
-  max-width: 600px
-  max-height: calc(100vh - 100px)
-</style>
diff --git a/ui/src/components/ButtonFollow.vue b/ui/src/components/ButtonFollow.vue
index ad2aad9b..afb308a2 100644
--- a/ui/src/components/ButtonFollow.vue
+++ b/ui/src/components/ButtonFollow.vue
@@ -19,7 +19,7 @@
 import { follow, myFollowing, unfollow } from "@/services/clutter-dna";
 import { useProfilesStore } from "@/services/profiles-store";
 import { PROFILE_FIELDS } from "@/types/types";
-import { isSameAgentPubKey } from "@/utils/hash";
+import { isSameHash } from "@/utils/hash";
 import { showError, showMessage } from "@/utils/notification";
 import { Profile } from "@holochain-open-dev/profiles";
 import { AgentPubKey } from "@holochain/client";
@@ -42,7 +42,7 @@ onMounted(async () => {
     loading.value = true;
     const currentMyFollowing = await myFollowing();
     following.value = currentMyFollowing.some((agent) =>
-      isSameAgentPubKey(agent, props.agentPubKey)
+      isSameHash(agent, props.agentPubKey)
     );
   } catch (error) {
     showError(error);
diff --git a/ui/src/components/CreateMewDialog.vue b/ui/src/components/CreateMewDialog.vue
index 7958afbb..ef97a14e 100644
--- a/ui/src/components/CreateMewDialog.vue
+++ b/ui/src/components/CreateMewDialog.vue
@@ -1,68 +1,82 @@
 <template>
-  <base-dialog class="mew-dialog" @close="onClose">
-    <template #title>
-      <div class="text-subtitle1 text-medium">
-        <slot name="title" />
-      </div>
-    </template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide">
+    <q-card class="q-dialog-plugin dialog">
+      <q-card-section class="q-pb-sm">
+        <div class="row justify-between items-center">
+          <div class="text-subtitle1 text-medium">
+            <template v-if="MewTypeName.Original in mewType">
+              Create a mew:
+            </template>
+            <template v-if="MewTypeName.Reply in mewType">Reply to </template>
+            <template v-if="MewTypeName.Quote in mewType">Quote </template>
 
-    <template #content>
-      <div class="q-mb-md text-subtitle1">
-        <slot name="content" />
-      </div>
+            <template
+              v-if="
+                MewTypeName.Reply in mewType || MewTypeName.Quote in mewType
+              "
+            >
+              <span class="q-mr-xs text-primary text-bold">{{
+                originalAuthor.fields[PROFILE_FIELDS.DISPLAY_NAME]
+              }}</span>
+              <span>@{{ originalAuthor.nickname }}</span>
+            </template>
+          </div>
+          <q-btn icon="close" flat round dense @click="onDialogCancel" />
+        </div>
+      </q-card-section>
 
-      <profiles-context :store="profilesStore">
-        <CreateMewField
-          :mew-type="mewType"
-          :saving="saving"
-          @publish-mew="onPublishMew"
-        />
-      </profiles-context>
-    </template>
-  </base-dialog>
+      <q-card-section
+        v-if="MewTypeName.Reply in mewType || MewTypeName.Quote in mewType"
+      >
+        <div class="q-mb-md text-subtitle1 text-grey-7">
+          <mew-content :feed-mew="originalMew" />
+        </div>
+      </q-card-section>
+
+      <q-card-section>
+        <profiles-context :store="profilesStore">
+          <CreateMewField :mew-type="mewType" @publish-mew="_onMewPublish" />
+        </profiles-context>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
 </template>
 
 <script setup lang="ts">
-import BaseDialog from "@/components/BaseDialog.vue";
 import CreateMewField from "@/components/CreateMewField.vue";
-import { ROUTES } from "@/router";
 import { useProfilesStore } from "@/services/profiles-store";
-import { useClutterStore } from "@/stores";
-import { CreateMewInput, MewType } from "@/types/types";
-import { showError } from "@/utils/notification";
-import { PropType, ref } from "vue";
-import { useRouter } from "vue-router";
+import { FeedMew, MewType, MewTypeName, PROFILE_FIELDS } from "@/types/types";
+import { Profile } from "@holochain-open-dev/profiles";
+import { useDialogPluginComponent } from "quasar";
+import { PropType } from "vue";
+import MewContent from "./MewContent.vue";
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
+  useDialogPluginComponent();
 
-defineProps({ mewType: { type: Object as PropType<MewType>, required: true } });
-const emit = defineEmits<{ (e: "mew-created"): void; (e: "close"): void }>();
-const onClose = () => emit("close");
+const props = defineProps({
+  mewType: { type: Object as PropType<MewType>, required: true },
+  onPublishMew: {
+    type: Function as PropType<(mewType: MewType) => void>,
+    required: true,
+  },
+  originalMew: { type: Object as PropType<FeedMew>, default: () => ({}) },
+  originalAuthor: { type: Object as PropType<Profile>, default: () => ({}) },
+});
+defineEmits([...useDialogPluginComponent.emits]);
 
-const clutterStore = useClutterStore();
 const profilesStore = useProfilesStore();
-const router = useRouter();
-const saving = ref(false);
 
-const onPublishMew = async (mew: CreateMewInput) => {
-  try {
-    saving.value = true;
-    await useClutterStore().createMew(mew);
-    emit("mew-created");
-    if (router.currentRoute.value.name === ROUTES.feed) {
-      clutterStore.fetchMewsFeed();
-    } else {
-      router.push({ name: ROUTES.feed });
-    }
-    onClose();
-  } catch (error) {
-    showError(error);
-  } finally {
-    saving.value = false;
-  }
+const _onMewPublish = () => {
+  props.onPublishMew(props.mewType);
+  onDialogOK();
 };
 </script>
 
-<style lang="sass">
-.mew-dialog
-  .q-card.dialog
-    overflow: visible
+<style lang="sass" scoped>
+.dialog
+  min-width: 400px
+  max-width: 600px
+  max-height: calc(100vh - 100px)
+  overflow: visible
 </style>
diff --git a/ui/src/components/CreateMewField.vue b/ui/src/components/CreateMewField.vue
index 490a80a8..993fbb1b 100644
--- a/ui/src/components/CreateMewField.vue
+++ b/ui/src/components/CreateMewField.vue
@@ -3,7 +3,7 @@
     <div ref="mewContainer" class="text-left" style="position: relative">
       <q-card
         contenteditable="true"
-        class="mew-content text-body1 q-mb-md q-pa-md"
+        class="mew-content text-body1 q-pa-md"
         bordered
         flat
         @keydown="onKeyDown"
@@ -13,6 +13,22 @@
         @input="onInput"
       />
 
+      <q-icon name="help" color="grey" size="xs" class="help-text">
+        <q-tooltip
+          class="text-body2"
+          anchor="top middle"
+          self="bottom middle"
+          :delay="TOOLTIP_DELAY"
+        >
+          You can mention people with @ and use #hashtags and $cashtags in a
+          mew.
+        </q-tooltip>
+      </q-icon>
+
+      <div class="q-mb-xs text-right text-caption text-grey">
+        Ctrl/Cmd + Enter to publish
+      </div>
+
       <q-card class="autocompleter">
         <template v-if="currentAgentSearch.length < 3">
           <q-card-section>Min. 3 letters</q-card-section>
@@ -60,7 +76,7 @@
     </div>
 
     <q-btn
-      :disable="isNewMewEmpty || saving"
+      :disable="isMewEmpty"
       :loading="saving"
       :tabindex="agentAutocompletions.length && 0"
       color="accent"
@@ -72,27 +88,27 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
+import { useProfilesStore } from "@/services/profiles-store";
+import { useClutterStore } from "@/stores";
+import { showError } from "@/utils/notification";
+import { Profile } from "@holochain-open-dev/profiles";
+import { debounce } from "quasar";
+import { onMounted, PropType, ref } from "vue";
 import {
   CreateMewInput,
   LinkTarget,
   LinkTargetName,
   MewType,
   PROFILE_FIELDS,
+  TOOLTIP_DELAY,
 } from "../types/types";
-import { PropType } from "vue";
-import { showError } from "@/utils/notification";
-import { useProfilesStore } from "@/services/profiles-store";
-import { Profile } from "@holochain-open-dev/profiles";
-import { debounce } from "quasar";
 
 const ANCHOR_DATA_ID_AGENT_PUB_KEY = "agentPubKey";
 
-const emit = defineEmits<{ (e: "publish-mew", mew: CreateMewInput): void }>();
+const emit = defineEmits<{ (e: "publish-mew"): void }>();
 
 const props = defineProps({
   mewType: { type: Object as PropType<MewType>, required: true },
-  saving: { type: Boolean, default: false },
 });
 
 interface AgentAutocompletion {
@@ -100,24 +116,14 @@ interface AgentAutocompletion {
   value: Profile;
 }
 
+const store = useClutterStore();
 const profilesStore = useProfilesStore();
 const mewContainer = ref<HTMLDivElement | null>(null);
 
-onMounted(() => {
-  // focus mew input field
-  setTimeout(
-    () =>
-      document
-        .getSelection()
-        ?.setPosition(
-          mewContainer.value?.querySelector(".mew-content") || null,
-          0
-        ),
-    0
-  );
-});
-const isNewMewEmpty = ref(true);
-const saving = computed(() => props.saving);
+onMounted(() => setTimeout(focusInputField, 0));
+
+const isMewEmpty = ref(true);
+const saving = ref(false);
 
 const currentAgentSearch = ref("");
 let currentAnchorOffset: number;
@@ -128,6 +134,11 @@ const AUTOCOMPLETER_MARGIN_TOP = 20;
 const agentAutocompletions = ref<AgentAutocompletion[]>([]);
 const autocompleterLoading = ref(false);
 
+const focusInputField = () =>
+  document
+    .getSelection()
+    ?.setPosition(mewContainer.value?.querySelector(".mew-content") || null, 0);
+
 const hideAutocompleter = () => {
   const autocompleter = mewContainer.value?.querySelector(".autocompleter");
   if (autocompleter && autocompleter instanceof HTMLElement) {
@@ -150,14 +161,14 @@ const stripAnchorFromLink = (selection: Selection) => {
 };
 
 const onInput = () =>
-  (isNewMewEmpty.value =
+  (isMewEmpty.value =
     mewContainer.value?.querySelector(".mew-content")?.textContent?.length ===
     0);
 
 const onKeyDown = (keyDownEvent: KeyboardEvent) => {
   if (keyDownEvent.key === "Enter") {
     keyDownEvent.preventDefault();
-    if (keyDownEvent.metaKey && !isNewMewEmpty.value) {
+    if (keyDownEvent.metaKey && !isMewEmpty.value) {
       publishMew();
     }
   } else if (keyDownEvent.key === "ArrowDown") {
@@ -258,7 +269,7 @@ const onAutocompleteAgentSelect = (agent: AgentAutocompletion) => {
   document.getSelection()?.setPosition(spaceNode, 1);
 };
 
-const publishMew = () => {
+const publishMew = async () => {
   const mewInput = mewContainer.value?.querySelector(".mew-content");
   if (!mewInput) {
     return;
@@ -285,11 +296,22 @@ const publishMew = () => {
 
   const createMewInput: CreateMewInput = {
     mewType: props.mewType,
-    text: mewInput.textContent,
+    text: mewInput.textContent ? mewInput.textContent.trim() : null,
     links: mentions.length ? mentions : undefined,
   };
-  emit("publish-mew", createMewInput);
+  try {
+    saving.value = true;
+    await store.createMew(createMewInput);
+  } catch (error) {
+    showError(error);
+  } finally {
+    saving.value = false;
+  }
+  emit("publish-mew");
   mewInput.textContent = "";
+  isMewEmpty.value = true;
+  hideAutocompleter();
+  focusInputField();
 };
 
 const onCaretPositionChange = () => {
@@ -363,13 +385,20 @@ const debouncedOnCaretPositionChange = debounce(onCaretPositionChange, 300);
 
 <style lang="sass">
 .mew-content
-  height: $body-font-size * $body-line-height * 2
+  min-height: $body-font-size * $body-line-height * 2
+
   &:focus
     outline-color: $primary
   a
     color: $secondary
     font-weight: 600
 
+.help-text
+  position: absolute
+  cursor: default
+  top: 5px
+  right: 5px
+
 .autocompleter
   position: absolute
   display: none
diff --git a/ui/src/components/EmptyMewsFeed.vue b/ui/src/components/EmptyMewsFeed.vue
new file mode 100644
index 00000000..224dc14f
--- /dev/null
+++ b/ui/src/components/EmptyMewsFeed.vue
@@ -0,0 +1,12 @@
+<template>
+  <q-banner class="bg-grey-3" dense rounded>
+    <template #avatar>
+      <q-icon name="pets" color="accent" />
+    </template>
+    <div class="text-subtitle1">{{ text }}</div>
+  </q-banner>
+</template>
+
+<script setup lang="ts">
+defineProps({ text: { type: String, default: "Meeow, nothing here yet" } });
+</script>
diff --git a/ui/src/components/FolloweesList.vue b/ui/src/components/FolloweesList.vue
index 096c3bb4..9a888e15 100644
--- a/ui/src/components/FolloweesList.vue
+++ b/ui/src/components/FolloweesList.vue
@@ -5,6 +5,11 @@
     </q-list>
   </template>
 
+  <EmptyMewsFeed
+    v-else-if="agentFollowees.length == 0"
+    text="No followees yet"
+  />
+
   <template v-else>
     <q-list>
       <q-item
@@ -35,6 +40,7 @@ import { showError } from "@/utils/notification";
 import { AgentPubKey } from "@holochain/client";
 import { onMounted, ref, watch } from "vue";
 import AvatarWithPopup from "./AvatarWithPopup.vue";
+import EmptyMewsFeed from "./EmptyMewsFeed.vue";
 import ProfileSkeleton from "./ProfileSkeleton.vue";
 
 interface Followee {
diff --git a/ui/src/components/FollowersList.vue b/ui/src/components/FollowersList.vue
index 9d31f202..72f5dbe7 100644
--- a/ui/src/components/FollowersList.vue
+++ b/ui/src/components/FollowersList.vue
@@ -5,6 +5,11 @@
     </q-list>
   </template>
 
+  <EmptyMewsFeed
+    v-else-if="followersOfAgent.length == 0"
+    text="No followers yet"
+  />
+
   <template v-else>
     <q-list>
       <q-item
@@ -35,6 +40,7 @@ import { showError } from "@/utils/notification";
 import { AgentPubKey } from "@holochain/client";
 import { onMounted, ref, watch } from "vue";
 import AvatarWithPopup from "./AvatarWithPopup.vue";
+import EmptyMewsFeed from "./EmptyMewsFeed.vue";
 import ProfileSkeleton from "./ProfileSkeleton.vue";
 
 interface Follower {
diff --git a/ui/src/components/MewContent.vue b/ui/src/components/MewContent.vue
index 18af0e19..e7cc856c 100644
--- a/ui/src/components/MewContent.vue
+++ b/ui/src/components/MewContent.vue
@@ -6,6 +6,7 @@
           v-if="contentPart[1]"
           :to="contentPart[1]"
           class="text-secondary text-bold"
+          @click.stop
         >
           {{ contentPart[0] }}
         </router-link>
@@ -17,12 +18,15 @@
 </template>
 
 <script setup lang="ts">
+import { PATH, ROUTES } from "@/router";
 import { FeedMew, LinkTargetName } from "@/types/types";
 import { TAG_REGEX, TAG_SYMBOLS } from "@/utils/tags";
-import { PATH, ROUTES } from "@/router";
-import { PropType } from "vue";
-import { RouteLocationRaw } from "vue-router";
 import { serializeHash } from "@holochain-open-dev/utils";
+import { computed, PropType } from "vue";
+import { RouteLocationRaw } from "vue-router";
+
+type ContentPart = [string] | [string, RouteLocationRaw];
+
 const props = defineProps({
   feedMew: { type: Object as PropType<FeedMew>, required: true },
 });
@@ -30,16 +34,20 @@ const props = defineProps({
 const startsWithTag = (contentPart: string) =>
   Object.values(TAG_SYMBOLS).some((symbol) => contentPart.startsWith(symbol));
 
-const mentions = props.feedMew.mew.content?.links?.slice().reverse();
-const content = props.feedMew.mew.content?.text || "";
-const parts = content.split(TAG_REGEX).filter((part) => Boolean(part));
+const mentions = computed(() =>
+  props.feedMew.mew.content?.links?.slice().reverse()
+);
+const content = computed(() => props.feedMew.mew.content?.text || "");
+const parts = computed(() =>
+  content.value.split(TAG_REGEX).filter((part) => Boolean(part))
+);
 
-const contentParts: Array<[string] | [string, RouteLocationRaw]> = parts.map(
-  (part) => {
+const contentParts = computed<ContentPart[]>(() =>
+  parts.value.map((part) => {
     if (startsWithTag(part)) {
       let agentPubKey = "";
       if (part[0] === TAG_SYMBOLS.MENTION) {
-        const mention = mentions?.pop()?.[LinkTargetName.Mention];
+        const mention = mentions.value?.pop()?.[LinkTargetName.Mention];
         // formality, mention must exist
         agentPubKey = mention ? serializeHash(mention) : "";
       }
@@ -51,6 +59,6 @@ const contentParts: Array<[string] | [string, RouteLocationRaw]> = parts.map(
       return [part, to];
     }
     return [part];
-  }
+  })
 );
 </script>
diff --git a/ui/src/components/MewList.vue b/ui/src/components/MewList.vue
index 91d645f2..b9ca0e46 100644
--- a/ui/src/components/MewList.vue
+++ b/ui/src/components/MewList.vue
@@ -1,32 +1,37 @@
 <template>
-  <mew-list-skeleton v-if="loading" />
+  <mew-list-skeleton v-if="isLoading" />
+
+  <EmptyMewsFeed v-else-if="mews.length === 0" />
 
   <q-list v-else bordered separator>
     <mew-list-item
       v-for="(mew, index) of mews"
       :key="index"
       :feed-mew="mew"
-      @refresh-feed="emit('refresh')"
+      :on-toggle-lick-mew="onToggleLickMew"
+      :on-publish-mew="onPublishMew"
     />
   </q-list>
 </template>
 
 <script setup lang="ts">
-import { PropType } from "vue";
-import { FeedMew } from "@/types/types";
 import MewListItem from "@/components/MewListItem.vue";
 import MewListSkeleton from "@/components/MewListSkeleton.vue";
+import { FeedMew, MewType } from "@/types/types";
+import { ActionHash } from "@holochain/client";
+import { PropType } from "vue";
+import EmptyMewsFeed from "./EmptyMewsFeed.vue";
 
 defineProps({
-  mews: {
+  mews: { type: Array as PropType<FeedMew[]>, required: true },
+  isLoading: { type: Boolean, required: true },
+  onToggleLickMew: {
+    type: Function as PropType<(hash: ActionHash) => Promise<void>>,
     required: true,
-    type: Object as PropType<FeedMew[]>,
   },
-  loading: {
-    default: false,
-    type: Boolean,
+  onPublishMew: {
+    type: Function as PropType<(mewType: MewType) => Promise<void>>,
+    required: true,
   },
 });
-
-const emit = defineEmits<{ (e: "refresh"): void }>();
 </script>
diff --git a/ui/src/components/MewListItem.vue b/ui/src/components/MewListItem.vue
index 79a9b862..d795a755 100644
--- a/ui/src/components/MewListItem.vue
+++ b/ui/src/components/MewListItem.vue
@@ -1,139 +1,95 @@
 <template>
-  <component
-    :is="showOriginalMew ? QExpansionItem : QItem"
-    :content-inset-level="showOriginalMew ? 1 : undefined"
-    :class="showOriginalMew ? undefined : 'items-start'"
-    :header-class="showOriginalMew ? 'items-start' : undefined"
-    :expand-icon-toggle="showOriginalMew ? true : undefined"
-  >
-    <template #[slotName]>
-      <q-item-section avatar>
-        <avatar-with-popup :agent-pub-key="feedMew.action.author" />
-      </q-item-section>
+  <q-item class="items-start">
+    <q-item-section avatar>
+      <avatar-with-popup :agent-pub-key="feedMew.action.author" />
+    </q-item-section>
+
+    <q-item-section>
+      <div class="row q-mb-sm">
+        <div
+          :class="{
+            'cursor-pointer': !isCurrentProfile(feedMew.action.author),
+          }"
+          @click="onAgentClick(feedMew.action.author)"
+        >
+          <span class="q-mr-xs text-primary text-weight-bold">
+            {{ agentProfile?.fields[PROFILE_FIELDS.DISPLAY_NAME] }}
+          </span>
+          <span>@{{ agentProfile?.nickname }}</span>
+        </div>
 
-      <q-item-section>
-        <div class="row q-mb-sm">
-          <div
-            :class="{
-              'cursor-pointer': !isCurrentProfile(feedMew.action.author),
-            }"
-            @click="onAgentClick(feedMew.action.author)"
-          >
-            <span class="q-mr-xs text-primary text-weight-bold">
-              {{ displayName }}
+        <span v-if="!isOriginal" class="q-ml-md">
+          <q-skeleton
+            v-if="loadingOriginalMewAuthor"
+            type="text"
+            width="4rem"
+          />
+          <template v-else-if="originalMew && originalMewAuthor">
+            <span class="q-mr-xs text-secondary">
+              {{ reactionLabel }}
             </span>
-            <span>@{{ agentProfile?.nickname }}</span>
-          </div>
-
-          <span v-if="!isOriginal" class="q-ml-md">
-            <q-skeleton
-              v-if="loadingOriginalMewAuthor"
-              type="text"
-              width="4rem"
-            />
             <router-link
-              v-else-if="originalMew && originalMewAuthor"
               :to="{
                 name: ROUTES.profiles,
                 params: { agent: serializeHash(originalMew.action.author) },
               }"
               class="text-secondary"
             >
-              {{ reactionLabel }}
               <span class="text-bold">
                 {{ originalMewAuthor.fields[PROFILE_FIELDS.DISPLAY_NAME] }}
               </span>
               @{{ originalMewAuthor.nickname }}
             </router-link>
-          </span>
-
-          <q-space />
-
-          <span class="q-ml-md text-caption">
-            <timestamp :timestamp="feedMew.action.timestamp" />
-          </span>
-        </div>
-
-        <mew-content
-          :feed-mew="originalMew && isMewMew ? originalMew : feedMew"
-          class="q-mb-xs"
-        />
-
-        <div>
-          <q-btn
-            size="sm"
-            :icon="isLickedByMe ? 'favorite' : 'favorite_border'"
-            flat
-            @click="toggleLickMew"
-          >
-            {{ feedMew.licks.length }}
-          </q-btn>
-          <q-btn size="sm" icon="reply" flat @click="replyToMew">
-            {{ feedMew.replies.length }}
-          </q-btn>
-          <q-btn size="sm" icon="forward" flat @click="mewMew">
-            {{ feedMew.mewmews.length }}
-          </q-btn>
-          <q-btn size="sm" icon="format_quote" flat @click="quote">
-            {{ feedMew.quotes.length }}
-          </q-btn>
-        </div>
-      </q-item-section>
-
-      <create-mew-dialog
-        v-if="isReplying"
-        :mew-type="{ reply: feedMew.actionHash }"
-        @mew-created="onMewCreated"
-        @close="isReplying = false"
-      >
-        <template #title>
-          <span>
-            Reply to
-            <span class="q-mr-xs text-primary text-bold">{{
-              displayName
-            }}</span>
-            <span>@{{ nickname }}</span>
-          </span>
-        </template>
-        <template #content>
-          <div class="text-grey-7">
-            <mew-content :feed-mew="feedMew" />
-          </div>
-        </template>
-      </create-mew-dialog>
-
-      <create-mew-dialog
-        v-if="isQuoting"
-        :mew-type="{ quote: feedMew.actionHash }"
-        @mew-created="onMewCreated"
-        @close="isQuoting = false"
-      >
-        <template #title>
-          <span>
-            Quote
-            <span class="q-mr-xs text-primary text-bold">{{
-              displayName
-            }}</span>
-            <span>@{{ nickname }}</span>
-          </span>
-        </template>
-        <template #content>
-          <div class="text-grey-7">
-            <mew-content :feed-mew="feedMew" />
-          </div>
-        </template>
-      </create-mew-dialog>
-    </template>
-
-    <template v-if="showOriginalMew" #default>
-      <!-- compile error when v-if condition is moved to outer v-if -->
-      <mew-list-item v-if="originalMew" :feed-mew="originalMew" />
-    </template>
-  </component>
+          </template>
+        </span>
+
+        <q-space />
+
+        <span class="q-ml-md text-caption">
+          <timestamp :timestamp="feedMew.action.timestamp" />
+        </span>
+      </div>
+
+      <mew-content
+        :feed-mew="originalMew && isMewMew ? originalMew : feedMew"
+        class="q-my-sm cursor-pointer"
+        @click="onMewClick"
+      />
+
+      <div>
+        <q-btn
+          :disable="isUpdatingLick"
+          size="sm"
+          flat
+          @click="onToggleLickMew"
+        >
+          <q-icon
+            name="svguse:/icons.svg#lick"
+            :color="isLickedByMe ? 'pink-4' : 'transparent'"
+            class="q-mr-xs"
+          />
+          {{ feedMew.licks.length }}
+          <q-tooltip :delay="TOOLTIP_DELAY">Lick mew</q-tooltip>
+        </q-btn>
+        <q-btn size="sm" icon="reply" flat @click="replyToMew">
+          {{ feedMew.replies.length }}
+          <q-tooltip :delay="TOOLTIP_DELAY">Reply to mew</q-tooltip>
+        </q-btn>
+        <q-btn size="sm" icon="forward" flat @click="mewMew">
+          {{ feedMew.mewmews.length }}
+          <q-tooltip :delay="TOOLTIP_DELAY">Mewmew mew</q-tooltip>
+        </q-btn>
+        <q-btn size="sm" icon="format_quote" flat @click="quote">
+          {{ feedMew.quotes.length }}
+          <q-tooltip :delay="TOOLTIP_DELAY">Quote mew</q-tooltip>
+        </q-btn>
+      </div>
+    </q-item-section>
+  </q-item>
 </template>
 
 <script setup lang="ts">
-import { ROUTES } from "@/router";
+import router, { ROUTES } from "@/router";
 import {
   createMew,
   getFeedMewAndContext,
@@ -144,31 +100,40 @@ import { useProfilesStore } from "@/services/profiles-store";
 import {
   CreateMewInput,
   FeedMew,
+  MewType,
   MewTypeName,
   PROFILE_FIELDS,
+  TOOLTIP_DELAY,
 } from "@/types/types";
-import { isSameAgentPubKey } from "@/utils/hash";
+import { isSameHash } from "@/utils/hash";
 import { useProfileUtils } from "@/utils/profile";
 import { Profile } from "@holochain-open-dev/profiles";
 import { serializeHash } from "@holochain-open-dev/utils";
-import { QExpansionItem, QItem } from "quasar";
+import { ActionHash } from "@holochain/client";
+import { QItem, useQuasar } from "quasar";
 import { computed, onMounted, PropType, ref } from "vue";
 import AvatarWithPopup from "./AvatarWithPopup.vue";
 import CreateMewDialog from "./CreateMewDialog.vue";
 import MewContent from "./MewContent.vue";
-import Timestamp from "./Timestamp.vue";
+import Timestamp from "./MewTimestamp.vue";
 
 const props = defineProps({
   feedMew: { type: Object as PropType<FeedMew>, required: true },
+  onToggleLickMew: {
+    type: Function as PropType<(hash: ActionHash) => Promise<void>>,
+    required: true,
+  },
+  onPublishMew: {
+    type: Function as PropType<(mewType: MewType) => Promise<void>>,
+    required: true,
+  },
 });
 
+const $q = useQuasar();
+
 const profilesStore = useProfilesStore();
 const { isCurrentProfile, onAgentClick } = useProfileUtils();
-const agentProfile = ref();
-const displayName = computed(
-  () => agentProfile.value?.fields[PROFILE_FIELDS.DISPLAY_NAME]
-);
-const nickname = computed(() => agentProfile.value?.nickname);
+const agentProfile = ref<Profile>();
 const myAgentPubKey = profilesStore.value.myAgentPubKey;
 
 const isMewMew = computed(
@@ -178,9 +143,15 @@ const isOriginal = computed(
   () => MewTypeName.Original in props.feedMew.mew.mewType
 );
 const isReply = computed(() => MewTypeName.Reply in props.feedMew.mew.mewType);
-const isQuote = computed(() => MewTypeName.Quote in props.feedMew.mew.mewType);
-const showOriginalMew = computed(() => isReply.value || isQuote.value);
-const slotName = computed(() => (showOriginalMew.value ? "header" : "default"));
+
+const originalMewHash =
+  MewTypeName.MewMew in props.feedMew.mew.mewType
+    ? props.feedMew.mew.mewType.mewMew
+    : MewTypeName.Reply in props.feedMew.mew.mewType
+    ? props.feedMew.mew.mewType.reply
+    : MewTypeName.Quote in props.feedMew.mew.mewType
+    ? props.feedMew.mew.mewType.quote
+    : props.feedMew.mew.mewType.original;
 const originalMew = ref<FeedMew>();
 const originalMewAuthor = ref<Profile>();
 const loadingOriginalMewAuthor = ref<boolean>();
@@ -188,7 +159,10 @@ const reactionLabel = computed(() =>
   isMewMew.value ? "mewmewed from" : isReply.value ? "replied to" : "quoted"
 );
 
-const emit = defineEmits<{ (e: "refresh-feed"): void }>();
+const isUpdatingLick = ref(false);
+const isLickedByMe = computed(() =>
+  props.feedMew.licks.some((lick) => isSameHash(lick, myAgentPubKey))
+);
 
 onMounted(async () => {
   const agentProfileReadable = await profilesStore.value.fetchAgentProfile(
@@ -196,61 +170,71 @@ onMounted(async () => {
   );
   agentProfileReadable.subscribe((profile) => (agentProfile.value = profile));
 
-  if (MewTypeName.Original in props.feedMew.mew.mewType) {
+  if (!originalMewHash) {
     return;
   }
-  // load original mew author if item is a reply, mewmew or quote
-  loadingOriginalMewAuthor.value = true;
-  const originalMewHash =
-    MewTypeName.MewMew in props.feedMew.mew.mewType
-      ? props.feedMew.mew.mewType.mewMew
-      : MewTypeName.Reply in props.feedMew.mew.mewType
-      ? props.feedMew.mew.mewType.reply
-      : props.feedMew.mew.mewType.quote;
-  getFeedMewAndContext(originalMewHash)
-    .then((mew) => {
-      originalMew.value = mew;
-      profilesStore.value
-        .fetchAgentProfile(mew.action.author)
-        .then((profileReadable) => {
-          profileReadable.subscribe(
-            (profile) => (originalMewAuthor.value = profile)
-          );
-        });
-    })
-    .finally(() => (loadingOriginalMewAuthor.value = false));
+  getFeedMewAndContext(originalMewHash).then((mew) => {
+    originalMew.value = mew;
+    // load original mew author
+    loadingOriginalMewAuthor.value = true;
+    profilesStore.value
+      .fetchAgentProfile(mew.action.author)
+      .then((profileReadable) => {
+        profileReadable.subscribe(
+          (profile) => (originalMewAuthor.value = profile)
+        );
+      })
+      .finally(() => (loadingOriginalMewAuthor.value = false));
+  });
 });
 
-const isReplying = ref(false);
-const isQuoting = ref(false);
-const isLickedByMe = computed(() =>
-  props.feedMew.licks.some((lick) => isSameAgentPubKey(lick, myAgentPubKey))
-);
+const onMewClick = () => {
+  router.push({
+    name: ROUTES.yarn,
+    params: { hash: serializeHash(props.feedMew.actionHash) },
+  });
+};
 
-const toggleLickMew = async () => {
+const onToggleLickMew = async () => {
+  isUpdatingLick.value = true;
   if (isLickedByMe.value) {
     await unlickMew(props.feedMew.actionHash);
   } else {
     await lickMew(props.feedMew.actionHash);
   }
-  emit("refresh-feed");
+  await props.onToggleLickMew(props.feedMew.actionHash);
+  isUpdatingLick.value = false;
 };
 
-const replyToMew = () => (isReplying.value = true);
+const replyToMew = () =>
+  $q.dialog({
+    component: CreateMewDialog,
+    componentProps: {
+      mewType: { [MewTypeName.Reply]: props.feedMew.actionHash },
+      onPublishMew: props.onPublishMew,
+      originalMew: props.feedMew,
+      originalAuthor: agentProfile.value,
+    },
+  });
 
 const mewMew = async () => {
+  const mewType = { mewMew: props.feedMew.actionHash };
   const mew: CreateMewInput = {
-    mewType: { mewMew: props.feedMew.actionHash },
+    mewType,
     text: null,
   };
   await createMew(mew);
-  emit("refresh-feed");
+  props.onPublishMew(mewType);
 };
 
-const quote = () => (isQuoting.value = true);
-
-const onMewCreated = () => {
-  isReplying.value = false;
-  isQuoting.value = false;
-};
+const quote = () =>
+  $q.dialog({
+    component: CreateMewDialog,
+    componentProps: {
+      mewType: { [MewTypeName.Quote]: props.feedMew.actionHash },
+      onPublishMew: props.onPublishMew,
+      originalMew: props.feedMew,
+      originalAuthor: agentProfile.value,
+    },
+  });
 </script>
diff --git a/ui/src/components/MewTimestamp.vue b/ui/src/components/MewTimestamp.vue
new file mode 100644
index 00000000..7877a225
--- /dev/null
+++ b/ui/src/components/MewTimestamp.vue
@@ -0,0 +1,29 @@
+<template>
+  {{ formattedTimestamp }}
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps({ timestamp: { type: Number, required: true } });
+
+const timestamp = computed(() => new Date(Number(props.timestamp) / 1000));
+const dateFormatOptions: Intl.DateTimeFormatOptions = {
+  year: "numeric",
+  month: "short",
+  day: "2-digit",
+};
+const timeFormatOptions: Intl.DateTimeFormatOptions = {
+  hour: "numeric",
+  minute: "numeric",
+};
+const formattedDate = computed(() =>
+  new Intl.DateTimeFormat("default", dateFormatOptions).format(timestamp.value)
+);
+const formattedTime = computed(() =>
+  new Intl.DateTimeFormat("default", timeFormatOptions).format(timestamp.value)
+);
+const formattedTimestamp = computed(
+  () => `${formattedTime.value} on ${formattedDate.value}`
+);
+</script>
diff --git a/ui/src/components/MewYarnListItem.vue b/ui/src/components/MewYarnListItem.vue
new file mode 100644
index 00000000..6d823701
--- /dev/null
+++ b/ui/src/components/MewYarnListItem.vue
@@ -0,0 +1,234 @@
+<template>
+  <q-item :inset-level="contentInsetLevel" class="items-start">
+    <q-item-section avatar>
+      <avatar-with-popup :agent-pub-key="feedMew.action.author" />
+    </q-item-section>
+
+    <q-item-section>
+      <div class="row q-mb-sm">
+        <div
+          :class="{
+            'cursor-pointer': !isCurrentProfile(feedMew.action.author),
+          }"
+          @click="onAgentClick(feedMew.action.author)"
+        >
+          <span class="q-mr-xs text-primary text-weight-bold">
+            {{ agentProfile?.fields[PROFILE_FIELDS.DISPLAY_NAME] }}
+          </span>
+          <span>@{{ agentProfile?.nickname }}</span>
+        </div>
+
+        <span v-if="!isOriginal" class="q-ml-md">
+          <q-skeleton
+            v-if="loadingOriginalMewAuthor"
+            type="text"
+            width="4rem"
+          />
+          <router-link
+            v-else-if="originalMew && originalMewAuthor"
+            :to="{
+              name: ROUTES.profiles,
+              params: { agent: serializeHash(originalMew.action.author) },
+            }"
+            class="text-secondary"
+          >
+            {{ reactionLabel }}
+            <span class="text-bold">
+              {{ originalMewAuthor.fields[PROFILE_FIELDS.DISPLAY_NAME] }}
+            </span>
+            @{{ originalMewAuthor.nickname }}
+          </router-link>
+        </span>
+
+        <q-space />
+
+        <span class="q-ml-md text-caption">
+          <Timestamp :timestamp="feedMew.action.timestamp" />
+        </span>
+      </div>
+
+      <MewContent
+        :feed-mew="isMewMew && originalMew ? originalMew : feedMew"
+        class="q-my-sm cursor-pointer"
+        @click="onMewClick(feedMew)"
+      />
+
+      <div>
+        <q-btn :disable="isUpdatingLick" size="sm" flat @click="toggleLickMew">
+          <q-icon
+            name="svguse:/icons.svg#lick"
+            :color="isLickedByMe ? 'pink-4' : 'transparent'"
+            class="q-mr-xs"
+          />
+          {{ feedMew.licks.length }}
+          <q-tooltip :delay="TOOLTIP_DELAY">Lick mew</q-tooltip>
+        </q-btn>
+        <q-btn size="sm" icon="reply" flat @click="replyToMew">
+          {{ feedMew.replies.length }}
+          <q-tooltip :delay="TOOLTIP_DELAY">Reply to mew</q-tooltip>
+        </q-btn>
+        <q-btn size="sm" icon="forward" flat @click="mewMew">
+          {{ feedMew.mewmews.length }}
+          <q-tooltip :delay="TOOLTIP_DELAY">Mewmew mew</q-tooltip>
+        </q-btn>
+        <q-btn size="sm" icon="format_quote" flat @click="quote">
+          {{ feedMew.quotes.length }}
+          <q-tooltip :delay="TOOLTIP_DELAY">Quote mew</q-tooltip>
+        </q-btn>
+      </div>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+import { ROUTES } from "@/router";
+import {
+  createMew,
+  getFeedMewAndContext,
+  lickMew,
+  unlickMew,
+} from "@/services/clutter-dna";
+import { useProfilesStore } from "@/services/profiles-store";
+import {
+  CreateMewInput,
+  FeedMew,
+  MewTypeName,
+  PROFILE_FIELDS,
+  TOOLTIP_DELAY,
+} from "@/types/types";
+import { isSameHash } from "@/utils/hash";
+import { useProfileUtils } from "@/utils/profile";
+import { Profile } from "@holochain-open-dev/profiles";
+import { serializeHash } from "@holochain-open-dev/utils";
+import { ActionHash } from "@holochain/client";
+import { useQuasar } from "quasar";
+import { computed, onMounted, PropType, ref } from "vue";
+import { useRouter } from "vue-router";
+import AvatarWithPopup from "./AvatarWithPopup.vue";
+import CreateMewDialog from "./CreateMewDialog.vue";
+import MewContent from "./MewContent.vue";
+import Timestamp from "./MewTimestamp.vue";
+
+const props = defineProps({
+  feedMew: { type: Object as PropType<FeedMew>, required: true },
+  onPublishMew: {
+    type: Function as PropType<() => Promise<void>>,
+    required: true,
+  },
+  onToggleLickMew: {
+    type: Function as PropType<(hash: ActionHash) => Promise<void>>,
+    required: true,
+  },
+  contentInsetLevel: { type: Number, default: undefined },
+});
+
+const $q = useQuasar();
+
+const router = useRouter();
+
+const profilesStore = useProfilesStore();
+const { isCurrentProfile, onAgentClick } = useProfileUtils();
+const agentProfile = ref<Profile>();
+const myAgentPubKey = profilesStore.value.myAgentPubKey;
+
+const isMewMew = computed(
+  () => MewTypeName.MewMew in props.feedMew.mew.mewType
+);
+const isOriginal = computed(
+  () => MewTypeName.Original in props.feedMew.mew.mewType
+);
+const isReply = computed(() => MewTypeName.Reply in props.feedMew.mew.mewType);
+
+const originalMewHash =
+  MewTypeName.MewMew in props.feedMew.mew.mewType
+    ? props.feedMew.mew.mewType.mewMew
+    : MewTypeName.Reply in props.feedMew.mew.mewType
+    ? props.feedMew.mew.mewType.reply
+    : MewTypeName.Quote in props.feedMew.mew.mewType
+    ? props.feedMew.mew.mewType.quote
+    : props.feedMew.mew.mewType.original;
+const originalMew = ref<FeedMew>();
+const originalMewAuthor = ref<Profile>();
+const loadingOriginalMewAuthor = ref<boolean>();
+const reactionLabel = computed(() =>
+  isMewMew.value ? "mewmewed from" : isReply.value ? "replied to" : "quoted"
+);
+
+const isUpdatingLick = ref(false);
+const isLickedByMe = computed(() =>
+  props.feedMew.licks.some((lick) => isSameHash(lick, myAgentPubKey))
+);
+
+onMounted(async () => {
+  const agentProfileReadable = await profilesStore.value.fetchAgentProfile(
+    props.feedMew.action.author
+  );
+  agentProfileReadable.subscribe((profile) => (agentProfile.value = profile));
+
+  if (!originalMewHash) {
+    return;
+  }
+  getFeedMewAndContext(originalMewHash).then((mew) => {
+    originalMew.value = mew;
+    // load original mew author
+    loadingOriginalMewAuthor.value = true;
+    profilesStore.value
+      .fetchAgentProfile(mew.action.author)
+      .then((profileReadable) => {
+        profileReadable.subscribe(
+          (profile) => (originalMewAuthor.value = profile)
+        );
+      })
+      .finally(() => (loadingOriginalMewAuthor.value = false));
+  });
+});
+
+const onMewClick = (mew: FeedMew) => {
+  router.push({
+    name: ROUTES.yarn,
+    params: { hash: serializeHash(mew.actionHash) },
+  });
+};
+
+const toggleLickMew = async () => {
+  isUpdatingLick.value = true;
+  if (isLickedByMe.value) {
+    await unlickMew(props.feedMew.actionHash);
+  } else {
+    await lickMew(props.feedMew.actionHash);
+  }
+  await props.onToggleLickMew(props.feedMew.actionHash);
+  isUpdatingLick.value = false;
+};
+
+const replyToMew = () =>
+  $q.dialog({
+    component: CreateMewDialog,
+    componentProps: {
+      mewType: { [MewTypeName.Reply]: props.feedMew.actionHash },
+      onPublishMew: props.onPublishMew,
+      originalMew: props.feedMew,
+      originalAuthor: agentProfile.value,
+    },
+  });
+
+const mewMew = async () => {
+  const mew: CreateMewInput = {
+    mewType: { mewMew: props.feedMew.actionHash },
+    text: null,
+  };
+  await createMew(mew);
+  props.onPublishMew();
+};
+
+const quote = () =>
+  $q.dialog({
+    component: CreateMewDialog,
+    componentProps: {
+      mewType: { [MewTypeName.Quote]: props.feedMew.actionHash },
+      onPublishMew: props.onPublishMew,
+      originalMew: props.feedMew,
+      originalAuthor: agentProfile.value,
+    },
+  });
+</script>
diff --git a/ui/src/components/ProfilePopup.vue b/ui/src/components/ProfilePopup.vue
index 5afbd471..f96b3b59 100644
--- a/ui/src/components/ProfilePopup.vue
+++ b/ui/src/components/ProfilePopup.vue
@@ -35,7 +35,7 @@
 <script setup lang="ts">
 import { useProfilesStore } from "@/services/profiles-store";
 import { PROFILE_FIELDS } from "@/types/types";
-import { isSameAgentPubKey } from "@/utils/hash";
+import { isSameHash } from "@/utils/hash";
 import { showError } from "@/utils/notification";
 import { useProfileUtils } from "@/utils/profile";
 import { Profile } from "@holochain-open-dev/profiles";
@@ -56,7 +56,7 @@ const router = useRouter();
 const profilesStore = useProfilesStore();
 const { onAgentClick } = useProfileUtils();
 const isMyProfile = computed(() =>
-  isSameAgentPubKey(props.agentPubKey, profilesStore.value.myAgentPubKey)
+  isSameHash(props.agentPubKey, profilesStore.value.myAgentPubKey)
 );
 const isCurrentProfile = computed(
   () =>
diff --git a/ui/src/components/Timestamp.vue b/ui/src/components/Timestamp.vue
deleted file mode 100644
index dc8cc489..00000000
--- a/ui/src/components/Timestamp.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  {{ formattedTimestamp }}
-</template>
-
-<script setup lang="ts">
-const props = defineProps({ timestamp: { type: Number, required: true } });
-
-const timestamp = new Date(Number(props.timestamp) / 1000);
-const dateFormatOptions: Intl.DateTimeFormatOptions = {
-  year: "numeric",
-  month: "short",
-  day: "2-digit",
-};
-const timeFormatOptions: Intl.DateTimeFormatOptions = {
-  hour: "numeric",
-  minute: "numeric",
-};
-const formattedDate = new Intl.DateTimeFormat(
-  "default",
-  dateFormatOptions
-).format(timestamp);
-const formattedTime = new Intl.DateTimeFormat(
-  "default",
-  timeFormatOptions
-).format(timestamp);
-const formattedTimestamp = `${formattedTime} on ${formattedDate}`;
-</script>
diff --git a/ui/src/css/quasar.variables.sass b/ui/src/css/quasar.variables.sass
index b6011e71..b3c52206 100644
--- a/ui/src/css/quasar.variables.sass
+++ b/ui/src/css/quasar.variables.sass
@@ -1,10 +1,19 @@
 $primary: #e68702
-$secondary: #5983a0d7
+$secondary: #5983a0
 $accent: #9C27B0
 
 $dark: #1D1D1D
 
 $positive: #21BA45
 $negative: #C10015
-$info: #31CCEC
+$info: #5978a0
 $warning: #F2C037
+
+$h1: (size: 3rem, line-height: 3rem, letter-spacing: -.01562em, weight: 300) !default
+$h2: (size: 2.75rem, line-height: 2.75rem, letter-spacing: -.00833em, weight: 300) !default
+$h3: (size: 2.5rem, line-height: 2.625rem, letter-spacing: normal, weight: 400) !default
+$h4: (size: 2.125rem, line-height: 2.5rem, letter-spacing: .00735em, weight: 400) !default
+$h5: (size: 1.5rem, line-height: 2rem, letter-spacing: normal, weight: 400) !default
+$h6: (size: 1.25rem, line-height: 2rem, letter-spacing: .0125em, weight: 500) !default
+
+$tooltip-fontsize: 0.75rem
diff --git a/ui/src/layouts/MainLayout.vue b/ui/src/layouts/MainLayout.vue
index ae3926e7..dcbfad38 100644
--- a/ui/src/layouts/MainLayout.vue
+++ b/ui/src/layouts/MainLayout.vue
@@ -1,10 +1,11 @@
 <template>
   <q-layout view="hHh lpr fFf">
     <q-header elevated class="row justify-center">
-      <q-toolbar class="col-12 col-md-6">
+      <q-toolbar class="col-12 col-md-6 col-xl-5">
         <q-tabs v-model="tab" dense inline-label class="col-grow">
           <q-route-tab :to="{ name: ROUTES.home }">
             <q-icon name="svguse:/icons.svg#cat" size="lg" />
+            <q-tooltip :delay="TOOLTIP_DELAY">Den</q-tooltip>
           </q-route-tab>
 
           <q-btn
@@ -14,8 +15,8 @@
             @click="onAddMewClick"
           >
             Mew
+            <q-tooltip :delay="TOOLTIP_DELAY">Create a mew</q-tooltip>
           </q-btn>
-
           <q-select
             v-model="selection"
             :options="options"
@@ -32,13 +33,27 @@
             dark
             class="col q-mx-md"
             :options-dark="false"
-            dense
             @filter="search"
             @update:model-value="onAgentSelect"
           >
             <template #prepend>
               <q-icon name="search" color="white" />
             </template>
+            <template #option="item">
+              <profiles-context :store="profilesStore">
+                <q-item clickable v-bind="item.itemProps" dense class="q-py-sm">
+                  <q-item-section avatar>
+                    <agent-avatar
+                      :agentPubKey="item.opt.agentPubKey"
+                      size="40"
+                    />
+                  </q-item-section>
+                  <q-item-section class="text-body2">
+                    {{ item.opt.label }}
+                  </q-item-section>
+                </q-item>
+              </profiles-context>
+            </template>
             <template #no-option>
               <q-item>
                 <q-item-section>
@@ -63,6 +78,7 @@
               :agentPubKey="profilesStore.myAgentPubKey"
               size="40"
             />
+            <q-tooltip :delay="TOOLTIP_DELAY">Your profile</q-tooltip>
           </q-route-tab>
         </q-tabs>
       </q-toolbar>
@@ -70,42 +86,50 @@
 
     <q-page-container class="row q-mt-xl bg-white">
       <q-space />
-      <router-view class="col-12 col-md-6" />
+      <router-view class="col-12 col-md-6 col-xl-5" />
       <q-space />
     </q-page-container>
-
-    <create-mew-dialog
-      v-if="isCreatingMew"
-      :mew-type="{ original: null }"
-      @close="isCreatingMew = false"
-    >
-      <template #title>Create a mew:</template>
-    </create-mew-dialog>
   </q-layout>
 </template>
 
 <script setup lang="ts">
+import CreateMewDialog from "@/components/CreateMewDialog.vue";
+import { ROUTES } from "@/router";
 import { useProfilesStore } from "@/services/profiles-store";
-import { QSelectOption } from "quasar";
-import { useRouter } from "vue-router";
-import { ref } from "vue";
+import { useClutterStore } from "@/stores";
+import { MewTypeName, PROFILE_FIELDS, TOOLTIP_DELAY } from "@/types/types";
 import { showError } from "@/utils/notification";
-import { ROUTES } from "@/router";
-import CreateMewDialog from "@/components/CreateMewDialog.vue";
 import { serializeHash } from "@holochain-open-dev/utils";
-import { PROFILE_FIELDS } from "@/types/types";
+import { AgentPubKey } from "@holochain/client";
+import { QSelectOption, useQuasar } from "quasar";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const $q = useQuasar();
 
+const store = useClutterStore();
 const profilesStore = useProfilesStore();
 const router = useRouter();
 const tab = ref("");
 
 const searching = ref(false);
-const options = ref<QSelectOption[]>([]);
+const options = ref<Array<QSelectOption & { agentPubKey: AgentPubKey }>>([]);
 const selection = ref<QSelectOption | null>(null);
 const searchTerm = ref("");
 
-const isCreatingMew = ref(false);
-const onAddMewClick = () => (isCreatingMew.value = true);
+const onPublishMew = () => {
+  if (router.currentRoute.value.name === ROUTES.feed) {
+    store.fetchMewsFeed();
+  } else {
+    router.push({ name: ROUTES.feed });
+  }
+};
+
+const onAddMewClick = () =>
+  $q.dialog({
+    component: CreateMewDialog,
+    componentProps: { mewType: { [MewTypeName.Original]: null }, onPublishMew },
+  });
 
 const search = (
   inputValue: string,
@@ -123,6 +147,7 @@ const search = (
         );
         options.value = profilesMap.entries().map(([key, value]) => ({
           value: serializeHash(key),
+          agentPubKey: key,
           label: `${value.fields[PROFILE_FIELDS.DISPLAY_NAME]} (@${
             value.nickname
           })`,
diff --git a/ui/src/main.ts b/ui/src/main.ts
index 0a008119..ec23eb84 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -13,7 +13,7 @@ import { ProfilesService, ProfilesStore } from "@holochain-open-dev/profiles";
 import { AppInfoResponse } from "@holochain/client";
 import "@quasar/extras/material-icons/material-icons.css";
 import { createPinia } from "pinia";
-import { Notify, Quasar } from "quasar";
+import { Dialog, Notify, Quasar } from "quasar";
 import "quasar/src/css/index.sass";
 import { createApp, ref, watch } from "vue";
 import App from "./App.vue";
@@ -30,7 +30,7 @@ import { PROFILE_FIELDS } from "./types/types";
 const app = createApp(App);
 app.use(router);
 app.use(Quasar, {
-  plugins: { Notify },
+  plugins: { Dialog, Notify },
 });
 app.use(createPinia());
 
@@ -71,8 +71,6 @@ const initProfileStore = async (client: any) => {
   const holochainClient = IS_HOLO_HOSTED
     ? new HoloClient(client, appInfo)
     : new HolochainClient(client);
-  console.log("hello");
-  client.on("sepp", () => console.log("hello"));
   const cell = appInfo.cell_data.find(
     (cell) => cell.role_name === CLUTTER_ROLE_NAME
   );
diff --git a/ui/src/pages/AgentProfile.vue b/ui/src/pages/AgentProfile.vue
index 636efdf0..248b2249 100644
--- a/ui/src/pages/AgentProfile.vue
+++ b/ui/src/pages/AgentProfile.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-page class="row">
+  <q-page class="row" :style-fn="pageHeightCorrection">
     <div class="col-8">
       <h6 class="q-mt-none q-mb-md">Profile</h6>
       <q-spinner-pie v-if="loadingProfile" size="10%" color="primary" />
@@ -37,7 +37,14 @@
       </q-card>
 
       <h6 class="q-mb-md">Mews</h6>
-      <MewList :loading="loadingMews" :mews="mews" @refresh="loadMews" />
+      <EmptyMewsFeed v-if="!loadingMews && mews.length === 0" />
+      <MewList
+        v-else
+        :is-loading="loadingMews"
+        :mews="mews"
+        :on-toggle-lick-mew="onToggleLickMew"
+        :on-publish-mew="onPublishMew"
+      />
     </div>
 
     <div class="follow-col col self-start q-pl-xl q-pr-md">
@@ -51,15 +58,22 @@
 
 <script setup lang="ts">
 import ButtonFollow from "@/components/ButtonFollow.vue";
+import EmptyMewsFeed from "@/components/EmptyMewsFeed.vue";
 import FolloweesList from "@/components/FolloweesList.vue";
 import FollowersList from "@/components/FollowersList.vue";
-import { mewsBy, myFollowing } from "@/services/clutter-dna";
+import {
+  getFeedMewAndContext,
+  mewsBy,
+  myFollowing,
+} from "@/services/clutter-dna";
 import { useProfilesStore } from "@/services/profiles-store";
-import { FeedMew, PROFILE_FIELDS } from "@/types/types";
-import { isSameAgentPubKey } from "@/utils/hash";
-import { showError } from "@/utils/notification";
+import { FeedMew, MewType, MewTypeName, PROFILE_FIELDS } from "@/types/types";
+import { isSameHash } from "@/utils/hash";
+import { showError, showMessage } from "@/utils/notification";
+import { pageHeightCorrection } from "@/utils/page-layout";
 import { Profile } from "@holochain-open-dev/profiles";
 import { deserializeHash } from "@holochain-open-dev/utils";
+import { ActionHash } from "@holochain/client";
 import { computed, onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import MewList from "../components/MewList.vue";
@@ -83,7 +97,7 @@ const isFollowing = ref(false);
 const mews = ref<FeedMew[]>([]);
 
 const isMyProfile = computed(() =>
-  isSameAgentPubKey(agentPubKey.value, profilesStore.value.myAgentPubKey)
+  isSameHash(agentPubKey.value, profilesStore.value.myAgentPubKey)
 );
 
 const loadMews = async () => {
@@ -129,12 +143,36 @@ onMounted(load);
 
 watch(
   () => route.params.agent,
-  () => {
-    if (route.params.agent) {
+  (value) => {
+    if (value) {
       load();
     }
   }
 );
+
+const onToggleLickMew = async (hash: ActionHash) => {
+  try {
+    const index = mews.value.findIndex((mew) =>
+      isSameHash(hash, mew.actionHash)
+    );
+    if (index !== -1) {
+      mews.value[index] = await getFeedMewAndContext(hash);
+    }
+  } catch (error) {
+    showError(error);
+  }
+};
+
+const onPublishMew = async (mewType: MewType) => {
+  loadMews();
+  showMessage(
+    MewTypeName.Reply in mewType
+      ? "Replied to mew"
+      : MewTypeName.MewMew in mewType
+      ? "Mew mewmewed"
+      : "Quoted mew"
+  );
+};
 </script>
 
 <style lang="sass">
diff --git a/ui/src/pages/HomePage.vue b/ui/src/pages/HomePage.vue
index 98f00bd1..3ccafa5e 100644
--- a/ui/src/pages/HomePage.vue
+++ b/ui/src/pages/HomePage.vue
@@ -1,7 +1,11 @@
 <template>
-  <q-page class="text-center">
+  <q-page class="text-center" :style-fn="pageHeightCorrection">
     <h6>Meeow, you're in!</h6>
     <h2>Welcome to the Clutter</h2>
     <q-img width="40%" src="@/assets/img/cat-eating-bird-circle.png" />
   </q-page>
 </template>
+
+<script setup lang="ts">
+import { pageHeightCorrection } from "@/utils/page-layout";
+</script>
diff --git a/ui/src/pages/MewYarn.vue b/ui/src/pages/MewYarn.vue
new file mode 100644
index 00000000..ad797b04
--- /dev/null
+++ b/ui/src/pages/MewYarn.vue
@@ -0,0 +1,147 @@
+<template>
+  <q-page :style-fn="pageHeightCorrection">
+    <q-card flat>
+      <q-card-section class="q-pb-none">
+        <q-btn flat @click="$router.go(-1)">
+          <q-icon
+            name="arrow_right_alt"
+            size="lg"
+            style="transform: rotate(180deg); font-weight: 100"
+          />
+          Back
+        </q-btn>
+      </q-card-section>
+
+      <q-card-section v-if="mew" class="yarn-container">
+        <profiles-context :store="profilesStore">
+          <q-list>
+            <MewListItemSkeleton v-if="isLoadingMew" />
+            <MewYarnListItem
+              v-else
+              :feed-mew="mew"
+              :on-publish-mew="onPublishMew"
+              :on-toggle-lick-mew="onToggleLickMew"
+              class="q-mb-md bg-orange-1"
+            />
+
+            <q-item class="q-mb-md q-px-none">
+              <div class="col-grow">
+                <div class="q-mb-md text-h6 text-medium">Reply</div>
+
+                <profiles-context :store="profilesStore">
+                  <CreateMewField
+                    :mew-type="{ [MewTypeName.Reply]: mew.actionHash }"
+                    class="full-width"
+                    @publish-mew="onPublishMew"
+                  />
+                </profiles-context>
+              </div>
+            </q-item>
+          </q-list>
+
+          <MewListSkeleton v-if="isLoadingReplies" />
+          <q-list v-else-if="replies.length" bordered separator>
+            <MewYarnListItem
+              v-for="(reply, index) of replies"
+              :key="index"
+              :feed-mew="reply"
+              :on-publish-mew="onPublishMew"
+              :on-toggle-lick-mew="onToggleLickMew"
+              :content-inset-level="1"
+            />
+          </q-list>
+        </profiles-context>
+      </q-card-section>
+    </q-card>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+import CreateMewField from "@/components/CreateMewField.vue";
+import MewListItemSkeleton from "@/components/MewListItemSkeleton.vue";
+import MewListSkeleton from "@/components/MewListSkeleton.vue";
+import MewYarnListItem from "@/components/MewYarnListItem.vue";
+import { ROUTES } from "@/router";
+import { getFeedMewAndContext } from "@/services/clutter-dna";
+import { useProfilesStore } from "@/services/profiles-store";
+import { FeedMew, MewTypeName } from "@/types/types";
+import { isSameHash } from "@/utils/hash";
+import { showError } from "@/utils/notification";
+import { pageHeightCorrection } from "@/utils/page-layout";
+import { deserializeHash } from "@holochain-open-dev/utils";
+import { ActionHash } from "@holochain/client";
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+
+const profilesStore = useProfilesStore();
+
+const route = useRoute();
+
+const mew = ref<FeedMew>();
+const isLoadingMew = ref(false);
+const replies = ref<FeedMew[]>([]);
+const isLoadingReplies = ref(false);
+
+const onToggleLickMew = async (mewHash: ActionHash) => {
+  const feedMew = await getFeedMewAndContext(mewHash);
+  const replyIndex = replies.value.findIndex((r) =>
+    isSameHash(r.actionHash, mewHash)
+  );
+  if (replyIndex === -1) {
+    mew.value = feedMew;
+  } else {
+    replies.value[replyIndex] = feedMew;
+  }
+};
+
+const getMewHashFromRoute = () =>
+  deserializeHash(
+    typeof route.params.hash === "string"
+      ? route.params.hash
+      : route.params.hash[0]
+  );
+
+const loadMew = async () => {
+  const mewHash = getMewHashFromRoute();
+  try {
+    isLoadingMew.value = true;
+    mew.value = await getFeedMewAndContext(mewHash);
+  } catch (error) {
+    showError(error);
+  } finally {
+    isLoadingMew.value = false;
+  }
+};
+
+const loadReplies = async () => {
+  try {
+    isLoadingReplies.value = true;
+    const replyHashes = mew.value?.replies;
+    if (!replyHashes) {
+      return;
+    }
+    replies.value = await Promise.all(
+      replyHashes.map((replyHash) => getFeedMewAndContext(replyHash))
+    );
+  } catch (error) {
+    showError(error);
+  } finally {
+    isLoadingReplies.value = false;
+  }
+};
+
+const loadYarn = async () => {
+  await loadMew();
+  loadReplies();
+};
+
+onMounted(loadYarn);
+
+watch(route, (value) => {
+  if (value.name === ROUTES.yarn) {
+    loadYarn();
+  }
+});
+
+const onPublishMew = async () => loadYarn();
+</script>
diff --git a/ui/src/pages/MewsFeed.vue b/ui/src/pages/MewsFeed.vue
index ce6c4e85..5162ba93 100644
--- a/ui/src/pages/MewsFeed.vue
+++ b/ui/src/pages/MewsFeed.vue
@@ -1,43 +1,32 @@
 <template>
-  <q-page class="q-pb-lg">
-    <CreateMewField :mew-type="{ original: null }" @publish-mew="publishMew" />
+  <q-page class="q-pb-lg" :style-fn="pageHeightCorrection">
+    <CreateMewField
+      :mew-type="{ original: null }"
+      @publish-mew="store.fetchMewsFeed"
+    />
 
     <h6 class="q-mb-md">Your Mews Feed</h6>
 
-    <q-banner
-      v-if="!store.isLoadingMewsFeed && store.mewsFeed.length === 0"
-      class="bg-grey-3"
-      dense
-      rounded
-    >
-      <template #avatar>
-        <q-icon name="pets" color="accent" />
-      </template>
-      <div class="text-subtitle1">Meeoow, nothing here yet!</div>
-    </q-banner>
-
     <MewList
-      v-else
-      :loading="store.isLoadingMewsFeed"
       :mews="store.mewsFeed"
-      @refresh="store.fetchMewsFeed"
+      :is-loading="store.isLoadingMewsFeed"
+      :on-toggle-lick-mew="onToggleLickMew"
+      :on-publish-mew="onPublishMew"
     />
   </q-page>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from "vue";
-import { CreateMewInput } from "../types/types";
+import CreateMewField from "@/components/CreateMewField.vue";
+import MewList from "@/components/MewList.vue";
 import { useClutterStore } from "@/stores";
-import CreateMewField from "../components/CreateMewField.vue";
-import MewList from "../components/MewList.vue";
+import { pageHeightCorrection } from "@/utils/page-layout";
+import { ActionHash } from "@holochain/client";
+import { onMounted } from "vue";
 
 const store = useClutterStore();
+onMounted(store.fetchMewsFeed);
 
-onMounted(() => store.fetchMewsFeed());
-
-const publishMew = async (newMew: CreateMewInput) => {
-  await store.createMew(newMew);
-  store.fetchMewsFeed();
-};
+const onToggleLickMew = (hash: ActionHash) => store.reloadMew(hash);
+const onPublishMew = async () => store.fetchMewsFeed();
 </script>
diff --git a/ui/src/pages/MyProfile.vue b/ui/src/pages/MyProfile.vue
index b5d93d9a..0bc48add 100644
--- a/ui/src/pages/MyProfile.vue
+++ b/ui/src/pages/MyProfile.vue
@@ -1,5 +1,36 @@
 <template>
-  <q-page class="flex justify-center" style="width: 50%">
-    <my-profile />
+  <q-page :style-fn="pageHeightCorrection">
+    <div class="row">
+      <div>
+        <q-card class="col-6 self-start q-mb-xl q-px-xl q-py-lg text-body1">
+          <my-profile />
+        </q-card>
+      </div>
+
+      <q-space class="col-1" />
+
+      <div class="follow-col col self-start">
+        <h6 class="q-mt-none q-mb-md">Following</h6>
+        <FolloweesList :agent-pub-key="myAgentPubKey" />
+        <h6 class="q-mb-md">Followed by</h6>
+        <FollowersList :agent-pub-key="myAgentPubKey" />
+      </div>
+    </div>
   </q-page>
 </template>
+
+<script setup lang="ts">
+import FolloweesList from "@/components/FolloweesList.vue";
+import FollowersList from "@/components/FollowersList.vue";
+import { useProfilesStore } from "@/services/profiles-store";
+import { pageHeightCorrection } from "@/utils/page-layout";
+
+const profilesStore = useProfilesStore();
+const myAgentPubKey = profilesStore.value.myAgentPubKey;
+</script>
+
+<style lang="sass">
+.follow-col
+  position: sticky
+  top: $toolbar-min-height + map-get(map-get($spaces, "xl"), "y")
+</style>
diff --git a/ui/src/pages/NotFound.vue b/ui/src/pages/NotFound.vue
index fd6a34df..32c9eb3b 100644
--- a/ui/src/pages/NotFound.vue
+++ b/ui/src/pages/NotFound.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-page class="text-center" padding>
+  <q-page class="text-center" :style-fn="pageHeightCorrection">
     <h4>You've lost the thread</h4>
     <q-btn
       icon="explore"
@@ -13,4 +13,5 @@
 
 <script setup lang="ts">
 import { ROUTES } from "@/router";
+import { pageHeightCorrection } from "@/utils/page-layout";
 </script>
diff --git a/ui/src/pages/TagMewsFeed.vue b/ui/src/pages/TagMewsFeed.vue
index 1527090d..2b1a5ef8 100644
--- a/ui/src/pages/TagMewsFeed.vue
+++ b/ui/src/pages/TagMewsFeed.vue
@@ -1,24 +1,33 @@
 <template>
-  <q-page>
+  <q-page :style-fn="pageHeightCorrection">
     <h6 class="q-mt-none q-mb-md">Mews with {{ tagSymbol }}{{ tag }}</h6>
 
-    <MewList :loading="loading" :mews="mews" @refresh="loadMewsFeed" />
+    <MewList
+      :mews="mews"
+      :is-loading="isLoading"
+      :on-toggle-lick-mew="onToggleLickMew"
+      :on-publish-mew="onPublishmew"
+    />
   </q-page>
 </template>
 
 <script setup lang="ts">
 import {
+  getFeedMewAndContext,
   getMewsWithCashtag,
   getMewsWithHashtag,
   getMewsWithMention,
 } from "@/services/clutter-dna";
-import { onMounted, computed, ref, watch } from "vue";
-import { FeedMew } from "@/types/types";
-import { showError } from "@/utils/notification";
+import { FeedMew, MewType, MewTypeName } from "@/types/types";
+import { isSameHash } from "@/utils/hash";
+import { showError, showMessage } from "@/utils/notification";
+import { pageHeightCorrection } from "@/utils/page-layout";
+import { TAG_SYMBOLS } from "@/utils/tags";
+import { deserializeHash } from "@holochain-open-dev/utils";
+import { ActionHash } from "@holochain/client";
+import { computed, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import MewList from "../components/MewList.vue";
-import { deserializeHash } from "@holochain-open-dev/utils";
-import { TAG_SYMBOLS } from "@/utils/tags";
 
 const router = useRouter();
 const currentRoute = computed(() => router.currentRoute.value);
@@ -34,17 +43,17 @@ const agentPubKey = computed(() =>
     : currentRoute.value.query.agentPubKey
 );
 
-const loading = ref(false);
 const mews = ref<FeedMew[]>([]);
+const isLoading = ref(false);
 
 const loadMewsFeed = async () => {
   try {
-    loading.value = true;
+    isLoading.value = true;
     if (tagSymbol.value === TAG_SYMBOLS.CASHTAG) {
       mews.value = await getMewsWithCashtag(tagSymbol.value + tag.value);
     } else if (tagSymbol.value === TAG_SYMBOLS.HASHTAG) {
       mews.value = await getMewsWithHashtag(tagSymbol.value + tag.value);
-    } else if (tagSymbol.value === TAG_SYMBOLS.MENTION) {
+    } else {
       mews.value = await getMewsWithMention(
         deserializeHash(agentPubKey.value || "")
       );
@@ -52,10 +61,34 @@ const loadMewsFeed = async () => {
   } catch (error) {
     showError(error);
   } finally {
-    loading.value = false;
+    isLoading.value = false;
   }
 };
 
 onMounted(loadMewsFeed);
 watch(router.currentRoute, loadMewsFeed);
+
+const onToggleLickMew = async (hash: ActionHash) => {
+  try {
+    const index = mews.value.findIndex((mew) =>
+      isSameHash(hash, mew.actionHash)
+    );
+    if (index !== -1) {
+      mews.value[index] = await getFeedMewAndContext(hash);
+    }
+  } catch (error) {
+    showError(error);
+  }
+};
+
+const onPublishmew = async (mewType: MewType) => {
+  loadMewsFeed();
+  showMessage(
+    MewTypeName.Reply in mewType
+      ? "Replied to mew"
+      : MewTypeName.MewMew in mewType
+      ? "Mew mewmewed"
+      : "Quoted mew"
+  );
+};
 </script>
diff --git a/ui/src/router.ts b/ui/src/router.ts
index c4d24975..54eec308 100644
--- a/ui/src/router.ts
+++ b/ui/src/router.ts
@@ -12,6 +12,7 @@ export const ROUTES = {
   myProfile: "myProfile",
   profiles: "profiles",
   feed: "feed",
+  yarn: "yarn",
   [PATH[TAG_SYMBOLS.CASHTAG]]: PATH[TAG_SYMBOLS.CASHTAG],
   [PATH[TAG_SYMBOLS.HASHTAG]]: PATH[TAG_SYMBOLS.HASHTAG],
   [PATH[TAG_SYMBOLS.MENTION]]: PATH[TAG_SYMBOLS.MENTION],
@@ -38,6 +39,11 @@ const routes: RouteRecordRaw[] = [
     name: ROUTES.feed,
     component: () => import("./pages/MewsFeed.vue"),
   },
+  {
+    path: "/yarn/:hash",
+    name: ROUTES.yarn,
+    component: () => import("./pages/MewYarn.vue"),
+  },
   {
     path: `/${PATH[TAG_SYMBOLS.CASHTAG]}/:tag`,
     name: ROUTES[PATH[TAG_SYMBOLS.CASHTAG]],
diff --git a/ui/src/services/clutter-dna.ts b/ui/src/services/clutter-dna.ts
index 053a1eb0..737ea06a 100644
--- a/ui/src/services/clutter-dna.ts
+++ b/ui/src/services/clutter-dna.ts
@@ -30,7 +30,7 @@ export const callZome = async <T>(
   payload: CallZomeRequest["payload"]
 ) => {
   const result: { type: "ok"; data: T } = await useClientStore().callZome({
-    roleId: CLUTTER_ROLE_NAME,
+    roleName: CLUTTER_ROLE_NAME,
     zomeName: MEWS_ZOME_NAME,
     fnName,
     payload,
diff --git a/ui/src/stores/clutter.ts b/ui/src/stores/clutter.ts
index 5201e2ad..1a517b7f 100644
--- a/ui/src/stores/clutter.ts
+++ b/ui/src/stores/clutter.ts
@@ -1,6 +1,13 @@
-import { callZome, MewsFn } from "@/services/clutter-dna";
+import {
+  callZome,
+  getFeedMewAndContext,
+  mewsFeed,
+  MewsFn,
+} from "@/services/clutter-dna";
 import { CreateMewInput, FeedMew } from "@/types/types";
+import { isSameHash } from "@/utils/hash";
 import { showError } from "@/utils/notification";
+import { ActionHash } from "@holochain/client";
 import { defineStore } from "pinia";
 
 export const CLUTTER_ROLE_NAME = "clutter";
@@ -8,20 +15,33 @@ export const MEWS_ZOME_NAME = "mews";
 
 export const makeUseClutterStore = () => {
   return defineStore("clutter", {
-    state: () => ({ mewsFeed: [] as FeedMew[], isLoadingMewsFeed: false }),
+    state: () => ({
+      mewsFeed: [] as FeedMew[],
+      isLoadingMewsFeed: false,
+    }),
     actions: {
       async fetchMewsFeed() {
         try {
           this.isLoadingMewsFeed = true;
-          this.mewsFeed = await callZome(MewsFn.MewsFeed, {
-            option: "",
-          });
+          this.mewsFeed = await mewsFeed({ option: "" });
         } catch (error) {
           showError(error);
         } finally {
           this.isLoadingMewsFeed = false;
         }
       },
+      async reloadMew(actionHash: ActionHash) {
+        try {
+          const index = this.mewsFeed.findIndex((mew) =>
+            isSameHash(actionHash, mew.actionHash)
+          );
+          if (index !== -1) {
+            this.mewsFeed[index] = await getFeedMewAndContext(actionHash);
+          }
+        } catch (error) {
+          showError(error);
+        }
+      },
       async createMew(mew: CreateMewInput) {
         return callZome(MewsFn.CreateMew, mew);
       },
diff --git a/ui/src/stores/index.ts b/ui/src/stores/index.ts
index 94f19506..f5a9e54c 100644
--- a/ui/src/stores/index.ts
+++ b/ui/src/stores/index.ts
@@ -45,7 +45,7 @@ export type ClientStore = StoreDefinition<
   {
     isReady: boolean;
     callZome: (params: {
-      roleId: string;
+      roleName: string;
       zomeName: string;
       fnName: string;
       payload: any;
diff --git a/ui/src/types/types.ts b/ui/src/types/types.ts
index 2efc6c91..4c5329e1 100644
--- a/ui/src/types/types.ts
+++ b/ui/src/types/types.ts
@@ -6,6 +6,8 @@ export const PROFILE_FIELDS = {
   LOCATION: "Location",
 };
 
+export const TOOLTIP_DELAY = 400;
+
 export enum LinkTargetName {
   Mention = "Mention",
 }
@@ -61,6 +63,10 @@ export interface FeedMew {
   mewmews: HoloHash[];
 }
 
+export interface FeedOptions {
+  option: string;
+}
+
 export interface NotificationOptions {
   color?: string;
   textColor?: string;
@@ -81,7 +87,3 @@ export interface NotificationOptions {
   actions?: Array<() => void>;
   onDismiss?: () => void;
 }
-
-export interface FeedOptions {
-  option: string;
-}
diff --git a/ui/src/utils/hash.ts b/ui/src/utils/hash.ts
index 5975cfa9..eb06d947 100644
--- a/ui/src/utils/hash.ts
+++ b/ui/src/utils/hash.ts
@@ -1,2 +1,2 @@
-export const isSameAgentPubKey = (key1: Uint8Array, key2: Uint8Array) =>
+export const isSameHash = (key1: Uint8Array, key2: Uint8Array) =>
   key1.every((byte, index) => key2[index] === byte);
diff --git a/ui/src/utils/page-layout.ts b/ui/src/utils/page-layout.ts
new file mode 100644
index 00000000..3344532a
--- /dev/null
+++ b/ui/src/utils/page-layout.ts
@@ -0,0 +1,9 @@
+export const pageHeightCorrection = (offset: number, height: number) => {
+  // "offset" is a Number (pixels) that refers to the total
+  // height of header + footer that occupies on screen,
+  // based on the QLayout "view" prop configuration
+
+  // this is actually what the default style-fn does in Quasar
+  // return { minHeight: offset ? `calc(100vh - ${offset}px)` : "100vh" };
+  return { minHeight: `${height - offset - 56 - 16}px` };
+};