From 60daec38ff0137639512541c041b27ecb4762e8a Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Wed, 25 Mar 2026 15:56:28 -0700
Subject: [PATCH] fix: allow text selection and copy

This was conflicting with the left and right tap areas for navigating a
stream.
---
 js/src/features/particles/stream-view.tsx        | 8 ++++++--
 js/src/features/particles/text-particle-view.tsx | 4 ++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/js/src/features/particles/stream-view.tsx b/js/src/features/particles/stream-view.tsx
index 96908aa..82f5a1a 100644
--- a/js/src/features/particles/stream-view.tsx
+++ b/js/src/features/particles/stream-view.tsx
@@ -16,7 +16,7 @@ import { Button } from "@/components/ui/button";
 import { Home, Settings } from "lucide-react";
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
 import { WindowControls } from "@/components/window-controls";
-import { formatDistanceToNow } from "@/lib/time-utils";
+import { RelativeTimestamp } from "@/components/relative-timestamp";
 import { useStreamPlayback } from "@/hooks/use-stream-playback";
 import { usePrefetchAdjacentMedia } from "@/hooks/use-prefetch-adjacent-media";
 
@@ -179,8 +179,12 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
   );
 
   // Click-to-navigate: left 30% = prev, right 70% = next
+  // Suppressed when the user has selected text (drag-to-select)
   const handlePlaybackClick = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
+      const selection = window.getSelection();
+      if (selection && selection.toString().length > 0) return;
+
       const rect = e.currentTarget.getBoundingClientRect();
       const x = (e.clientX - rect.left) / rect.width;
       if (x < 0.3) prev();
@@ -391,7 +395,7 @@ function ParticleBreadcrumbContent({ particle, networkId }: { particle: Particle
           {initials}
         </AvatarFallback>
       </Avatar>
-      {prefix} - {formatDistanceToNow(particle.created_at.toISOString())}
+      {prefix} - <RelativeTimestamp date={particle.created_at} />
     </span>
   )
 }
diff --git a/js/src/features/particles/text-particle-view.tsx b/js/src/features/particles/text-particle-view.tsx
index b5c8532..a1393a6 100644
--- a/js/src/features/particles/text-particle-view.tsx
+++ b/js/src/features/particles/text-particle-view.tsx
@@ -98,7 +98,7 @@ export function TextParticleView({
       <div className="flex h-full w-full flex-col items-center justify-center bg-gradient-to-b from-black/40 via-black/20 to-black/40 p-8">
         <p
           className={cn(
-            "max-w-2xl break-words text-center leading-relaxed text-white",
+            "max-w-2xl break-words text-center leading-relaxed text-white select-text cursor-text",
             style.size,
             style.weight,
           )}
@@ -113,7 +113,7 @@ export function TextParticleView({
     <div className="flex h-full w-full items-center justify-center bg-gradient-to-b from-black/40 via-black/20 to-black/40 p-8">
       <div className="flex max-h-full w-full items-center gap-6">
         <div className="flex-1 overflow-y-auto rounded-2xl max-w-lg mx-auto bg-white/10 p-5 backdrop-blur-md">
-          <p className="break-words text-base leading-relaxed text-white">
+          <p className="break-words text-base leading-relaxed text-white select-text cursor-text">
             {content}
           </p>
         </div>