From ea5b50cf0a9411354380619ab641549bb265cc62 Mon Sep 17 00:00:00 2001
From: codytseng <codytseng98@gmail.com>
Date: Sat, 12 Apr 2025 00:00:45 +0800
Subject: [PATCH] feat: select-none

---
 src/components/FavoriteRelaysSetting/index.tsx |  2 +-
 src/components/NoteOptions/RawEventDialog.tsx  |  4 +++-
 src/components/RelayInfo/index.tsx             | 12 ++++++------
 src/components/ui/textarea.tsx                 |  2 +-
 src/index.css                                  |  1 +
 src/pages/secondary/NotePage/index.tsx         |  8 +++++++-
 src/pages/secondary/ProfilePage/index.tsx      | 11 +++++++----
 7 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/components/FavoriteRelaysSetting/index.tsx b/src/components/FavoriteRelaysSetting/index.tsx
index 8618ef62..ffbc66b4 100644
--- a/src/components/FavoriteRelaysSetting/index.tsx
+++ b/src/components/FavoriteRelaysSetting/index.tsx
@@ -18,7 +18,7 @@ export default function FavoriteRelaysSetting() {
         <TemporaryRelaySet />
         <div className="space-y-2">
           <div className="flex flex-wrap items-center justify-between gap-2">
-            <div className="text-muted-foreground font-semibold select-nones shrink-0">
+            <div className="text-muted-foreground font-semibold select-none shrink-0">
               {t('Relay sets')}
             </div>
             <PullRelaySetsButton />
diff --git a/src/components/NoteOptions/RawEventDialog.tsx b/src/components/NoteOptions/RawEventDialog.tsx
index e34bf7c8..0f31900a 100644
--- a/src/components/NoteOptions/RawEventDialog.tsx
+++ b/src/components/NoteOptions/RawEventDialog.tsx
@@ -25,7 +25,9 @@ export default function RawEventDialog({
           <DialogDescription className="hidden" />
         </DialogHeader>
         <ScrollArea className="h-full">
-          <pre className="text-sm text-muted-foreground">{JSON.stringify(event, null, 2)}</pre>
+          <pre className="text-sm text-muted-foreground select-text">
+            {JSON.stringify(event, null, 2)}
+          </pre>
           <ScrollBar orientation="horizontal" />
         </ScrollArea>
       </DialogContent>
diff --git a/src/components/RelayInfo/index.tsx b/src/components/RelayInfo/index.tsx
index e6048ff3..ac9eccfa 100644
--- a/src/components/RelayInfo/index.tsx
+++ b/src/components/RelayInfo/index.tsx
@@ -20,7 +20,7 @@ export default function RelayInfo({ url }: { url: string }) {
       <div className="space-y-2">
         <div className="flex gap-2 items-center">
           <RelayIcon url={url} className="w-8 h-8" />
-          <div className="text-2xl font-semibold truncate">
+          <div className="text-2xl font-semibold truncate select-text">
             {relayInfo.name || relayInfo.shortUrl}
           </div>
         </div>
@@ -33,7 +33,7 @@ export default function RelayInfo({ url }: { url: string }) {
           </div>
         )}
         {relayInfo.description && (
-          <div className="text-wrap break-words whitespace-pre-wrap mt-2">
+          <div className="text-wrap break-words whitespace-pre-wrap mt-2 select-text">
             {relayInfo.description}
           </div>
         )}
@@ -67,7 +67,7 @@ export default function RelayInfo({ url }: { url: string }) {
           <a
             href={normalizeHttpUrl(relayInfo.payments_url)}
             target="_blank"
-            className="hover:underline text-primary"
+            className="hover:underline text-primary select-text"
           >
             {relayInfo.payments_url}
           </a>
@@ -86,7 +86,7 @@ export default function RelayInfo({ url }: { url: string }) {
         {relayInfo.contact && (
           <div className="space-y-2 flex-1">
             <div className="text-sm font-semibold text-muted-foreground">{t('Contact')}</div>
-            <div className="flex gap-2 items-center font-semibold">
+            <div className="flex gap-2 items-center font-semibold select-text">
               <Mail />
               {relayInfo.contact}
             </div>
@@ -95,7 +95,7 @@ export default function RelayInfo({ url }: { url: string }) {
         {relayInfo.software && (
           <div className="space-y-2 flex-1">
             <div className="text-sm font-semibold text-muted-foreground">{t('Software')}</div>
-            <div className="flex gap-2 items-center font-semibold">
+            <div className="flex gap-2 items-center font-semibold select-text">
               <SquareCode />
               {formatSoftware(relayInfo.software)}
             </div>
@@ -104,7 +104,7 @@ export default function RelayInfo({ url }: { url: string }) {
         {relayInfo.version && (
           <div className="space-y-2 flex-1">
             <div className="text-sm font-semibold text-muted-foreground">{t('Version')}</div>
-            <div className="flex gap-2 items-center font-semibold">
+            <div className="flex gap-2 items-center font-semibold select-text">
               <GitBranch />
               {relayInfo.version}
             </div>
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index a681c174..38e0de0c 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -7,7 +7,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<'tex
     return (
       <textarea
         className={cn(
-          'flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          'flex min-h-[80px] w-full rounded-md border border-input bg-transparent select-text px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
           className
         )}
         ref={ref}
diff --git a/src/index.css b/src/index.css
index 3b8f284b..a3a38412 100644
--- a/src/index.css
+++ b/src/index.css
@@ -30,6 +30,7 @@
     -webkit-overflow-scrolling: touch;
     text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
+    user-select: none;
   }
 
   .clickable {
diff --git a/src/pages/secondary/NotePage/index.tsx b/src/pages/secondary/NotePage/index.tsx
index b95fa4e6..0c6b8059 100644
--- a/src/pages/secondary/NotePage/index.tsx
+++ b/src/pages/secondary/NotePage/index.tsx
@@ -70,7 +70,13 @@ const NotePage = forwardRef(({ id, index }: { id?: string; index?: number }, ref
           <ParentNote key={`root-note-${event.id}`} eventId={rootEventId} />
         )}
         <ParentNote key={`parent-note-${event.id}`} eventId={parentEventId} />
-        <Note key={`note-${event.id}`} event={event} fetchNoteStats hideParentNotePreview />
+        <Note
+          key={`note-${event.id}`}
+          event={event}
+          className="select-text"
+          fetchNoteStats
+          hideParentNotePreview
+        />
       </div>
       <Separator className="mt-4" />
       {event.kind === kinds.ShortTextNote ? (
diff --git a/src/pages/secondary/ProfilePage/index.tsx b/src/pages/secondary/ProfilePage/index.tsx
index d43e2cdb..9e701572 100644
--- a/src/pages/secondary/ProfilePage/index.tsx
+++ b/src/pages/secondary/ProfilePage/index.tsx
@@ -98,7 +98,7 @@ const ProfilePage = forwardRef(({ id, index }: { id?: string; index?: number },
         </div>
         <div className="pt-2">
           <div className="flex gap-2 items-center">
-            <div className="text-xl font-semibold truncate">{username}</div>
+            <div className="text-xl font-semibold truncate select-text">{username}</div>
             {isFollowingYou && (
               <div className="text-muted-foreground rounded-full bg-muted text-xs h-fit px-2 shrink-0">
                 {t('Follows you')}
@@ -107,7 +107,7 @@ const ProfilePage = forwardRef(({ id, index }: { id?: string; index?: number },
           </div>
           <Nip05 pubkey={pubkey} />
           {lightningAddress && (
-            <div className="text-sm text-yellow-400 flex gap-1 items-center">
+            <div className="text-sm text-yellow-400 flex gap-1 items-center select-text">
               <Zap className="size-4 shrink-0" />
               <div className="flex-1 max-w-fit w-0 truncate">{lightningAddress}</div>
             </div>
@@ -116,9 +116,12 @@ const ProfilePage = forwardRef(({ id, index }: { id?: string; index?: number },
             <PubkeyCopy pubkey={pubkey} />
             <QrCodePopover pubkey={pubkey} />
           </div>
-          <ProfileAbout about={about} className="text-wrap break-words whitespace-pre-wrap mt-2" />
+          <ProfileAbout
+            about={about}
+            className="text-wrap break-words whitespace-pre-wrap mt-2 select-text"
+          />
           {website && (
-            <div className="flex gap-1 items-center text-primary mt-2 truncate">
+            <div className="flex gap-1 items-center text-primary mt-2 truncate select-text">
               <Link size={14} className="shrink-0" />
               <a
                 href={website}