chore: changes at https://yup-live.pages.dev/change-log

apps/yup-live-desktop/src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "yup-live-tauri",
-    "version": "1.2.3"
+    "version": "1.4.2"
   },
   "tauri": {
     "allowlist": {

apps/yup-live-mobile/src/store/main.ts

@@ -13,7 +13,8 @@ const useMainStore = defineStore('main', {
                 forcedVersion: '',
                 updateMessage: 'The current version of the app is no longer supported. You must update to the latest version to continue using the app. Do you want to update now?',
                 updateUrl: 'https://play.google.com/store/apps/details?id=gf.info.yup',
-                updatePaused: false
+                updatePaused: false,
+                disableNativeLikes: false,
             },
             userData: {
                 account: '',

apps/yup-live-mobile/src/views/CrossPostModal.vue

@@ -55,22 +55,37 @@
                     style="width: 2.3rem; height: 2.3rem; margin: auto"
                   />
                   <label
-                    for="castField"
+                    :for="`post${index}`"
                     class="leading-7 text-sm text-gray-600 dark:text-gray-300"
                     >Content</label
                   >
-                  <textarea
-                    ref="txtEl"
-                    id="castField"
-                    v-model="post.postContent"
+                  <div
+                    :id="`post${index}`"
+                    editable
+                    :contenteditable="!isSendPost"
+                    placeholder="Write here..."
                     class="txt-box w-full bg-stone-200 text-gray-800 rounded border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 h-36 text-base outline-none py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"
                     @input="
-                      () => {
-                        postContentCharCount[index] = post.postContent.length;
-                      }
-                    "
-                  >
-                  </textarea>
+                  (e: any) => {
+                    post.postContent = e?.target?.textContent;
+                    postContentCharCount[index] = post.postContent.length;
+                    checkForMentions(post.postContent, index);
+                  }
+                "
+                  ></div>
+                  <MentionList
+                    v-if="mentionsOpen"
+                    style="padding: 0"
+                    :mentions="mentions"
+                    :positionCoords="mentionsCoords"
+                    :loading="false"
+                    @mention-selected="
+                  (mention: any) => {
+                    insertMention(mention, index);
+                  }
+                "
+                  />
+
                   <small
                     >Character limit: {{ postContentCharCount[index] }} /
                     {{ maxCharCount }}</small
@@ -407,6 +422,9 @@ import { wait } from "shared/src";
 import ProfileFarcasterIcon from "icons/src/profileFarcaster.vue";
 import AddIcon from "icons/src/add.vue";
 import SubstractIcon from "icons/src/substract.vue";
+import MentionList from "components/post/mention.vue";
+import { searchWeb3ProfileByHandle } from "shared/src/utils/requests/web3Profiles";
+import { IWeb3Profile } from "shared/src/types/web3Profile";
 
 export default defineComponent({
   name: "CrossPost",
@@ -436,6 +454,7 @@ export default defineComponent({
     IonList,
     AddIcon,
     SubstractIcon,
+    MentionList,
   },
   props: {
     crossPost: {
@@ -516,6 +535,9 @@ export default defineComponent({
     const isChannelSearching = ref(false);
     const showFcChannel = ref(!!postPlatforms?.value?.includes("farcaster"));
     let searchString = "";
+    const mentionsOpen = ref(false);
+    const mentionsCoords = ref({ x: 0, y: 0 });
+    const mentions = ref([]) as Ref<IWeb3Profile[]>;
 
     const addToThread = () => {
       if (posts.length > 30) {
@@ -857,11 +879,60 @@ export default defineComponent({
 
     onMounted(() => {
       if (props.shareLink) {
-        refTxtEl.value?.setSelectionRange(0, 0);
-        refTxtEl.value?.focus();
+        const el = document.getElementById("castField");
+        if (el) {
+          el.innerHTML = " " + props.shareLink;
+          el.focus();
+        }
       }
     });
 
+    const checkForMentions = async (text: string, index: number) => {
+      const checkMentions = text.match(/@[a-zA-Z0-9_]+$/gms);
+      if (checkMentions) {
+        const inputEl = document.getElementById(`post${index}`);
+        const inputElRect = inputEl?.getBoundingClientRect();
+        const range = window.getSelection()?.getRangeAt(0);
+        const rect = range?.getBoundingClientRect();
+        mentionsCoords.value = { x: rect?.x ?? 0, y: rect?.y ?? 0 };
+        mentionsCoords.value.x -= inputElRect?.x ?? 0;
+        mentionsCoords.value.y -= (inputElRect?.y ?? 0) / 3.5;
+        const searchMentions = await searchWeb3ProfileByHandle(
+          undefined,
+          checkMentions[0]
+        );
+        mentions.value = searchMentions ?? [];
+        mentionsOpen.value = true;
+      } else {
+        mentionsOpen.value = false;
+      }
+    };
+
+    const insertMention = (mention: IWeb3Profile, index: number) => {
+      const postEl = document.getElementById(`post${index}`);
+      // const range = window.getSelection()?.getRangeAt(0);
+      const mentionNode = document.createElement("span");
+      mentionNode.innerText = `@${mention.handle}`;
+      mentionNode.style.color = "coral";
+      mentionNode.style.fontWeight = "bold";
+      mentionNode.style.cursor = "pointer";
+      mentionNode.contentEditable = "false";
+      mentionNode.onclick = () => {
+        mentionsOpen.value = false;
+      };
+      if (postEl) {
+        postEl.innerHTML = postEl.innerHTML.replace(/@[a-zA-Z0-9_]+$/gms, "");
+        postEl.appendChild(mentionNode);
+        const sel = window.getSelection();
+        if (!sel) return;
+        sel.selectAllChildren(postEl);
+        sel.collapseToEnd();
+
+        posts[index].postContent = postEl.textContent ?? "";
+      }
+      mentionsOpen.value = false;
+    };
+
     return {
       openPostModal,
       isSendPost,
@@ -901,6 +972,11 @@ export default defineComponent({
       substractFromThread,
       localReplyTo,
       intialPlatforms,
+      checkForMentions,
+      mentionsOpen,
+      mentionsCoords,
+      mentions,
+      insertMention,
     };
   },
 });
@@ -912,6 +988,12 @@ export default defineComponent({
   --checkbox-background-checked: #405c252b;
 }
 
+[contenteditable="true"]:empty:before {
+  content: attr(placeholder);
+  pointer-events: none;
+  display: block; /* For Firefox */
+}
+
 .txt-box {
   background-color: #a1a5a952;
   border: 4px solid #3333339e;

apps/yup-live-mobile/src/views/SettingsModal.vue

@@ -256,6 +256,20 @@
                   @ion-change="changeSetting('accountTracking')"
                 ></ion-toggle>
               </ion-item>
+              <ion-item>
+                Disable like native propagation, this will make likes to not be forwarded
+                to native social networks.
+              </ion-item>
+              <ion-item>
+                <ion-label>Disable native propagation</ion-label>
+                <ion-toggle
+                  :key="updateKey"
+                  slot="end"
+                  aria-label="Enable Feed Personalization"
+                  :checked="store?.settings?.disableNativeLikes"
+                  @ion-change="changeSetting('disableNativeLikes')"
+                ></ion-toggle>
+              </ion-item>
             </ion-list>
           </div>
         </ion-accordion>
@@ -521,7 +535,8 @@
                   <li>Identifier is your email or blueSky handle</li>
                   <li>
                     Password is either an app password(recommended) or your blue sky
-                    account password.
+                    account password, if you have 2-auth enabled you need to use an app
+                    password.
                   </li>
                   <li>Login session will be forwarded to YUP API</li>
                 </ul></small

apps/yup-live/package.json

@@ -77,7 +77,7 @@
     "typescript": "~5.1.3",
     "vite": "^5.0.11",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-ssg": "^0.23.6",
+    "vite-ssg": "^0.23.8",
     "vite-ssg-sitemap": "^0.4.3"
   },
   "removedDeps": {

apps/yup-live/src/app.vue

@@ -97,6 +97,10 @@ export default defineComponent({
           mainStore.userData.authToken = localStorage.getItem("authToken") || "";
           getConnected(mainStore, mainStore.userData.account, mainStore.userData.address);
           mainStore.isLoggedIn = true;
+          if (mainStore.settings) {
+            mainStore.settings.disableNativeLikes =
+              localStorage.getItem("disableLikeNativePropagation") === "true";
+          }
           collectionStore.collectionsPromise = getCollections(
             collectionStore,
             mainStore.userData.account

apps/yup-live/src/components/content/connect/connectBtn.vue

@@ -160,6 +160,7 @@ header .loggedBtn {
   top: 0.1rem;
   box-shadow: inset -1px -1px 3rem 2px var(--logoBg), -2px 2px 2px 2px var(--logoBg),
     2px -2px 2px 2px var(--logoBg);
+  margin-left: 0.6rem;
 }
 
 .connectButton {