From e37763ebc785e4fb99af191773b557d97ad0e5bf Mon Sep 17 00:00:00 2001
From: Shusui MOYATANI <syusui.s@gmail.com>
Date: Thu, 12 Oct 2023 03:42:32 +0900
Subject: [PATCH] fix: enable to select text in buttons

---
 src/components/Post.tsx                                  | 4 ++--
 src/components/event/ProfileListItem.tsx                 | 6 +++---
 src/components/event/Reaction.tsx                        | 2 +-
 src/components/event/Repost.tsx                          | 2 +-
 src/components/event/textNote/MentionedUserDisplay.tsx   | 4 +---
 src/components/event/textNote/TextNoteContentDisplay.tsx | 5 ++++-
 src/components/event/textNote/TextNoteDisplay.tsx        | 2 +-
 7 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/Post.tsx b/src/components/Post.tsx
index fc2e1b3..77092a9 100644
--- a/src/components/Post.tsx
+++ b/src/components/Post.tsx
@@ -48,7 +48,7 @@ const Post: Component<PostProps> = (props) => {
           <div class="flex justify-between gap-1 text-xs">
             <button
               type="button"
-              class="author flex min-w-0 truncate hover:text-blue-500"
+              class="author flex min-w-0 select-text truncate hover:text-blue-500"
               onClick={(ev) => {
                 ev.preventDefault();
                 props?.onShowProfile?.();
@@ -74,7 +74,7 @@ const Post: Component<PostProps> = (props) => {
             <div class="created-at shrink-0">
               <button
                 type="button"
-                class="hover:underline"
+                class="select-text hover:underline"
                 onClick={(ev) => {
                   ev.preventDefault();
                   props.onShowEvent?.();
diff --git a/src/components/event/ProfileListItem.tsx b/src/components/event/ProfileListItem.tsx
index 98f0c61..c36de0d 100644
--- a/src/components/event/ProfileListItem.tsx
+++ b/src/components/event/ProfileListItem.tsx
@@ -1,4 +1,4 @@
-import { Component, Show, Switch, Match } from 'solid-js';
+import { Component, Show } from 'solid-js';
 
 import useProfile from '@/nostr/useProfile';
 import npubEncodeFallback from '@/utils/npubEncodeFallback';
@@ -9,7 +9,7 @@ export type ProfileListItemProps = {
 };
 
 const ProfileListItem: Component<ProfileListItemProps> = (props) => {
-  const { profile, query } = useProfile(() => ({
+  const { profile } = useProfile(() => ({
     pubkey: props.pubkey,
   }));
 
@@ -31,7 +31,7 @@ const ProfileListItem: Component<ProfileListItemProps> = (props) => {
         <div class="flex justify-between gap-1 text-xs">
           <button
             type="button"
-            class="profile flex min-w-0 truncate hover:text-blue-500"
+            class="profile flex min-w-0 select-text truncate hover:text-blue-500"
             onClick={(ev) => {
               ev.preventDefault();
               props?.onShowProfile?.();
diff --git a/src/components/event/Reaction.tsx b/src/components/event/Reaction.tsx
index af21355..1907899 100644
--- a/src/components/event/Reaction.tsx
+++ b/src/components/event/Reaction.tsx
@@ -56,7 +56,7 @@ const ReactionDisplay: Component<ReactionDisplayProps> = (props) => {
           </div>
           <div class="flex-1 overflow-hidden">
             <button
-              class="truncate font-bold hover:text-blue-500 hover:underline"
+              class="select-text truncate font-bold hover:text-blue-500 hover:underline"
               onClick={() => showProfile(props.event.pubkey)}
             >
               <UserDisplayName pubkey={props.event.pubkey} />
diff --git a/src/components/event/Repost.tsx b/src/components/event/Repost.tsx
index 84a753a..c4727db 100644
--- a/src/components/event/Repost.tsx
+++ b/src/components/event/Repost.tsx
@@ -31,7 +31,7 @@ const Repost: Component<RepostProps> = (props) => {
         </div>
         <div class="flex-1 truncate break-all">
           <button
-            class="hover:text-blue-500 hover:underline"
+            class="select-text hover:text-blue-500 hover:underline"
             onClick={() => showProfile(props.event.pubkey)}
           >
             <UserDisplayName pubkey={props.event.pubkey} />
diff --git a/src/components/event/textNote/MentionedUserDisplay.tsx b/src/components/event/textNote/MentionedUserDisplay.tsx
index 54e89df..e1a1cdb 100644
--- a/src/components/event/textNote/MentionedUserDisplay.tsx
+++ b/src/components/event/textNote/MentionedUserDisplay.tsx
@@ -1,8 +1,6 @@
 import GeneralUserMentionDisplay from '@/components/event/textNote/GeneralUserMentionDisplay';
 import useModalState from '@/hooks/useModalState';
 
-import type { MentionedUser } from '@/nostr/parseTextNote';
-
 export type MentionedUserDisplayProps = {
   pubkey: string;
 };
@@ -14,7 +12,7 @@ const MentionedUserDisplay = (props: MentionedUserDisplayProps) => {
     showProfile(props.pubkey);
   };
   return (
-    <button class="inline text-blue-500 underline" onClick={handleClick}>
+    <button class="inline select-text text-blue-500 underline" onClick={handleClick}>
       <GeneralUserMentionDisplay pubkey={props.pubkey} />
     </button>
   );
diff --git a/src/components/event/textNote/TextNoteContentDisplay.tsx b/src/components/event/textNote/TextNoteContentDisplay.tsx
index 3a3fdb9..49f4be9 100644
--- a/src/components/event/textNote/TextNoteContentDisplay.tsx
+++ b/src/components/event/textNote/TextNoteContentDisplay.tsx
@@ -98,7 +98,10 @@ const TextNoteContentDisplay = (props: TextNoteContentDisplayProps) => {
         }
         if (item.type === 'HashTag') {
           return (
-            <button class="text-blue-500 underline" onClick={() => addHashTagColumn(item.content)}>
+            <button
+              class="select-text text-blue-500 underline"
+              onClick={() => addHashTagColumn(item.content)}
+            >
               {item.content}
             </button>
           );
diff --git a/src/components/event/textNote/TextNoteDisplay.tsx b/src/components/event/textNote/TextNoteDisplay.tsx
index 3d4c5ba..69b8842 100644
--- a/src/components/event/textNote/TextNoteDisplay.tsx
+++ b/src/components/event/textNote/TextNoteDisplay.tsx
@@ -347,7 +347,7 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
                 <For each={event().taggedPubkeys()}>
                   {(replyToPubkey: string) => (
                     <button
-                      class="pr-1 text-blue-500 hover:underline"
+                      class="select-text pr-1 text-blue-500 hover:underline"
                       onClick={(ev) => {
                         ev.stopPropagation();
                         showProfile(replyToPubkey);