fix: op badge

Author: hzoo

components/post/CompactPost.tsx

@@ -37,7 +37,7 @@ export function CompactPost({
 						className="hover:underline font-medium text-gray-800 dark:text-gray-600 truncate max-w-[100px]"
 						title={post.author.displayName}
 					>
-						{`@${post.author.handle}`}
+						{post.author.handle}
 					</a>
 					{op === post.author.handle && (
 						<span className="ml-1 px-1.5 py-0.5 text-xs font-semibold bg-blue-100 text-blue-800 rounded-full dark:bg-blue-900 dark:text-blue-300">
@@ -65,7 +65,7 @@ export function CompactPost({
 				)}
 			</div>
 			{isExpanded.value && (
-				<PostReplies post={post} depth={depth + 1} isExpanded={isExpanded} />
+				<PostReplies post={post} depth={depth + 1} isExpanded={isExpanded} op={op} />
 			)}
 		</article>
 	);

components/post/FullPost.tsx

@@ -61,7 +61,7 @@ export function FullPost({ post }: FullPostProps) {
 					<CompactPostActions post={post} />
 				</div>
 			</div>
-			<PostReplies post={post} depth={0} isExpanded={isExpanded} />
+			<PostReplies post={post} depth={0} isExpanded={isExpanded} op={post.author.handle} />
 		</article>
 	);
 }

components/post/PostReplies.tsx

@@ -11,7 +11,8 @@ export function PostReplies({
   post,
   isExpanded,
   depth = 0,
-}: Omit<PostRepliesProps, 'prefetchedReplies'>) {
+  op,
+}: PostRepliesProps) {
   const threadStateSignal = getThreadSignal(post.uri);
   const { data: replies, isLoading, error } = threadStateSignal.value;
 
@@ -50,7 +51,7 @@ export function PostReplies({
             post={reply.post as AppBskyFeedDefs.PostView}
             depth={depth}
             expanded={isExpanded.value}
-            op={post.author.handle}
+            op={op}
           />
         ))
       )}

lib/signals.ts

@@ -18,29 +18,24 @@ export interface ThreadState {
 }
 
 // Map where key is the root post URI, value is the signal for that thread's state
-export const threadsStore = signal(new Map<string, Signal<ThreadState>>());
+export const threadsStore = new Map<string, Signal<ThreadState>>();
 
 // Helper function to get or initialize a thread signal
 export function getThreadSignal(uri: string): Signal<ThreadState> {
-  const store = threadsStore.peek(); // Use peek to avoid subscribing components that just need the signal instance
-  if (!store.has(uri)) {
+  if (!threadsStore.has(uri)) {
     const newSignal = signal<ThreadState>({
       data: null,
       lastFetched: null,
       isLoading: false,
       error: null,
     });
-    // Create a new map to trigger updates for components observing the map itself (if any)
-    threadsStore.value = new Map(store.set(uri, newSignal));
+    threadsStore.set(uri, newSignal);
     return newSignal;
   }
-  return store.get(uri)!;
+  return threadsStore.get(uri)!;
 }
 
 // Signal to track which post's collapse controls (line/button) are hovered
 export const hoveredCollapsePostUri = signal<string | null>(null);
-
-// -------------------------
-
 // Signal to track the last version the user has seen the intro/update popup for
 export const lastSeenVersion = signalBrowserLocal<string>("last-seen-version", "0.0.0");

lib/types.ts

@@ -12,4 +12,5 @@ export interface PostRepliesProps {
   depth?: number;
   maxDepth?: number;
   prefetchedReplies?: ThreadReply[];
+  op?: string;
 }