From aaac910e0c840fba348cf52dcd762e56867c7c98 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 7 Sep 2025 11:55:58 +0000
Subject: [PATCH 1/3] Initial plan


From 54f0d2bd191cbfad3d0b28a5659d7ca2d72c6067 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 7 Sep 2025 12:04:13 +0000
Subject: [PATCH 2/3] Implement pin functionality for news stories

- Add isPinned and pinnedOrder fields to CompletedStory interface
- Add pin/unpin/remove actions to simpleLiveFeedStore
- Update StoryCard to show pin/close buttons on hover
- Add visual indicators for pinned stories
- Sort stories with pinned ones first in LiveFeed
- Add accessibility labels and proper interaction patterns

Co-authored-by: acdc-digital <127530566+acdc-digital@users.noreply.github.com>
---
 smnb/components/livefeed/StoryCard.tsx        | 55 +++++++++++-
 smnb/components/livefeed/liveFeed.tsx         | 50 ++++++++++-
 .../stores/livefeed/simpleLiveFeedStore.ts    | 86 +++++++++++++++++++
 smnb/lib/utils/storyUtils.ts                  | 21 ++++-
 4 files changed, 204 insertions(+), 8 deletions(-)

diff --git a/smnb/components/livefeed/StoryCard.tsx b/smnb/components/livefeed/StoryCard.tsx
index 6feabf0..340f413 100644
--- a/smnb/components/livefeed/StoryCard.tsx
+++ b/smnb/components/livefeed/StoryCard.tsx
@@ -13,14 +13,14 @@ interface StoryCardProps {
   className?: string;
   theme?: keyof typeof StoryThemes;
   showActions?: boolean;
-  onAction?: (action: 'read' | 'share' | 'bookmark', story: CompletedStory) => void;
+  onAction?: (action: 'read' | 'share' | 'bookmark' | 'pin' | 'unpin' | 'remove', story: CompletedStory) => void;
 }
 
 export default function StoryCard({ 
   story, 
   isFirst = false, 
   className,
-  theme = isFirst ? 'highlighted' : 'default',
+  theme = story.isPinned ? 'pinned' : (isFirst ? 'highlighted' : 'default'),
   showActions = false,
   onAction 
 }: StoryCardProps) {
@@ -72,6 +72,13 @@ export default function StoryCard({
           {story.tone}
         </span>
         
+        {/* Pinned indicator */}
+        {story.isPinned && (
+          <span className={StoryCardTokens.pinnedBadge}>
+            PINNED #{story.pinnedOrder}
+          </span>
+        )}
+        
         {/* Thread indicators */}
         {story.isThreadUpdate && (
           <span className={StoryCardTokens.threadUpdate}>
@@ -79,10 +86,52 @@ export default function StoryCard({
           </span>
         )}
         
+        {/* Action buttons - Pin and Remove (on hover) */}
+        <div className="ml-auto flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+          {onAction && (
+            <>
+              {/* Pin/Unpin Button */}
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onAction(story.isPinned ? 'unpin' : 'pin', story);
+                }}
+                className={`p-1 rounded transition-colors cursor-pointer ${
+                  story.isPinned 
+                    ? 'text-yellow-400 hover:text-yellow-300' 
+                    : 'text-muted-foreground hover:text-foreground'
+                }`}
+                title={story.isPinned ? 'Unpin story' : 'Pin story to top'}
+                aria-label={story.isPinned ? 'Unpin story' : 'Pin story to top'}
+              >
+                {React.createElement(StoryDisplayUtils.getPinIcon(), { 
+                  size: 14, 
+                  className: story.isPinned ? 'fill-current' : ''
+                })}
+              </button>
+              
+              {/* Remove Button */}
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onAction('remove', story);
+                }}
+                className="p-1 rounded transition-colors text-muted-foreground hover:text-red-400 cursor-pointer"
+                title="Remove story"
+                aria-label="Remove story"
+              >
+                {React.createElement(StoryDisplayUtils.getCloseIcon(), { 
+                  size: 14 
+                })}
+              </button>
+            </>
+          )}
+        </div>
+        
         {/* Source attribution */}
         {story.originalItem?.subreddit && (
           <span 
-            className="ml-auto flex items-center cursor-pointer p-1 rounded transition-colors"
+            className="flex items-center cursor-pointer p-1 rounded transition-colors"
             title={`Source: r/${story.originalItem.subreddit}`}
             aria-label={`Source: r/${story.originalItem.subreddit}`}
             onClick={() => setIsBookmarked(!isBookmarked)}
diff --git a/smnb/components/livefeed/liveFeed.tsx b/smnb/components/livefeed/liveFeed.tsx
index 5c97375..1212bbd 100644
--- a/smnb/components/livefeed/liveFeed.tsx
+++ b/smnb/components/livefeed/liveFeed.tsx
@@ -5,7 +5,7 @@
 
 import { useEffect, useState } from 'react';
 import React from 'react';
-import { useSimpleLiveFeedStore } from '@/lib/stores/livefeed/simpleLiveFeedStore';
+import { useSimpleLiveFeedStore, CompletedStory } from '@/lib/stores/livefeed/simpleLiveFeedStore';
 import { Trash2 } from 'lucide-react';
 import StoryCard from './StoryCard';
 
@@ -20,8 +20,49 @@ export default function LiveFeed({ className }: LiveFeedProps) {
     storyHistory,
     clearStoryHistory,
     loadStoriesFromConvex,
+    pinStory,
+    unpinStory,
+    removeStory,
   } = useSimpleLiveFeedStore();
 
+  // Sort stories with pinned ones first
+  const sortedStories = React.useMemo(() => {
+    return [...storyHistory].sort((a, b) => {
+      // Pinned stories first
+      if (a.isPinned && !b.isPinned) return -1;
+      if (!a.isPinned && b.isPinned) return 1;
+      
+      // If both pinned, sort by pinnedOrder
+      if (a.isPinned && b.isPinned) {
+        return (a.pinnedOrder || 0) - (b.pinnedOrder || 0);
+      }
+      
+      // For unpinned stories, maintain original order (newest first)
+      return b.timestamp.getTime() - a.timestamp.getTime();
+    });
+  }, [storyHistory]);
+
+  // Handle story actions
+  const handleStoryAction = (action: 'read' | 'share' | 'bookmark' | 'pin' | 'unpin' | 'remove', story: CompletedStory) => {
+    switch (action) {
+      case 'pin':
+        pinStory(story.id);
+        break;
+      case 'unpin':
+        unpinStory(story.id);
+        break;
+      case 'remove':
+        removeStory(story.id);
+        break;
+      case 'read':
+      case 'share':
+      case 'bookmark':
+        // These actions can be handled later if needed
+        console.log(`${action} action for story:`, story.id);
+        break;
+    }
+  };
+
   // Check for reduced motion preference
   useEffect(() => {
     const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
@@ -44,7 +85,7 @@ export default function LiveFeed({ className }: LiveFeedProps) {
       {/* Fixed Header */}
       <div className="flex-shrink-0 bg-[#191919] backdrop-blur-sm border-b border-border/20 flex items-center justify-between px-4 py-2">
         <div className="text-sm font-light text-muted-foreground font-sans">
-          Live Stories {storyHistory.length > 0 ? `(${storyHistory.length})` : ''}
+          Live Stories {sortedStories.length > 0 ? `(${sortedStories.length})` : ''}
         </div>
         <div className="flex items-center gap-2">
           <button
@@ -69,12 +110,13 @@ export default function LiveFeed({ className }: LiveFeedProps) {
         
         <div className="space-y-4 px-2 pt-2 relative z-10">
           <div className="space-y-3">
-            {storyHistory.map((story, index) => (
+            {sortedStories.map((story, index) => (
               <StoryCard
                 key={story.id}
                 story={story}
                 isFirst={false}
-                showActions={false}
+                showActions={true}
+                onAction={handleStoryAction}
                 className={reducedMotion ? '' : 'animate-slide-in-top'}
               />
             ))}
diff --git a/smnb/lib/stores/livefeed/simpleLiveFeedStore.ts b/smnb/lib/stores/livefeed/simpleLiveFeedStore.ts
index 3acf125..07491e9 100644
--- a/smnb/lib/stores/livefeed/simpleLiveFeedStore.ts
+++ b/smnb/lib/stores/livefeed/simpleLiveFeedStore.ts
@@ -95,6 +95,10 @@ export interface CompletedStory {
   updateType?: StoryUpdate['updateType']; // Type of update if it's an update
   threadTopic?: string; // Topic of the thread for display
   updateCount?: number; // Number of updates in the thread
+  
+  // Pin functionality
+  isPinned?: boolean; // Whether this story is pinned
+  pinnedOrder?: number; // Order of pinned stories (1 = top, 2 = second, etc.)
 }
 
 interface SimpleLiveFeedStore {
@@ -148,6 +152,11 @@ interface SimpleLiveFeedStore {
   clearStoryHistory: () => void;
   addTestStory: () => void; // For testing
   
+  // Pin actions
+  pinStory: (storyId: string) => void;
+  unpinStory: (storyId: string) => void;
+  removeStory: (storyId: string) => void;
+  
   // Convex integration
   loadStoriesFromConvex: () => Promise<void>;
   saveStoryToConvex: (story: CompletedStory) => Promise<void>;
@@ -727,4 +736,81 @@ export const useSimpleLiveFeedStore = create<SimpleLiveFeedStore>((set, get) =>
       // Don't throw - this shouldn't break the normal flow
     }
   },
+
+  // Pin actions
+  pinStory: (storyId: string) => {
+    set((state) => {
+      const story = state.storyHistory.find(s => s.id === storyId);
+      if (!story || story.isPinned) {
+        return state; // Story not found or already pinned
+      }
+
+      // Find the next pinned order number
+      const pinnedStories = state.storyHistory.filter(s => s.isPinned);
+      const nextPinnedOrder = pinnedStories.length > 0 
+        ? Math.max(...pinnedStories.map(s => s.pinnedOrder || 0)) + 1 
+        : 1;
+
+      const updatedHistory = state.storyHistory.map(s =>
+        s.id === storyId
+          ? { ...s, isPinned: true, pinnedOrder: nextPinnedOrder }
+          : s
+      );
+
+      console.log(`📌 Pinned story: ${story.narrative.substring(0, 30)}... (Order: ${nextPinnedOrder})`);
+      return { storyHistory: updatedHistory };
+    });
+  },
+
+  unpinStory: (storyId: string) => {
+    set((state) => {
+      const story = state.storyHistory.find(s => s.id === storyId);
+      if (!story || !story.isPinned) {
+        return state; // Story not found or not pinned
+      }
+
+      const unpinnedOrder = story.pinnedOrder;
+      
+      // Remove pin from target story and reorder remaining pinned stories
+      const updatedHistory = state.storyHistory.map(s => {
+        if (s.id === storyId) {
+          // Remove pin from target story
+          const { isPinned, pinnedOrder, ...storyWithoutPin } = s;
+          return storyWithoutPin;
+        } else if (s.isPinned && s.pinnedOrder && unpinnedOrder && s.pinnedOrder > unpinnedOrder) {
+          // Shift down stories that were after the unpinned story
+          return { ...s, pinnedOrder: s.pinnedOrder - 1 };
+        }
+        return s;
+      });
+
+      console.log(`📌 Unpinned story: ${story.narrative.substring(0, 30)}...`);
+      return { storyHistory: updatedHistory };
+    });
+  },
+
+  removeStory: (storyId: string) => {
+    set((state) => {
+      const story = state.storyHistory.find(s => s.id === storyId);
+      if (!story) {
+        return state; // Story not found
+      }
+
+      // If removing a pinned story, reorder remaining pinned stories
+      const removedPinnedOrder = story.isPinned ? story.pinnedOrder : null;
+      
+      const updatedHistory = state.storyHistory
+        .filter(s => s.id !== storyId) // Remove the story
+        .map(s => {
+          // Reorder remaining pinned stories if needed
+          if (s.isPinned && s.pinnedOrder && removedPinnedOrder && s.pinnedOrder > removedPinnedOrder) {
+            return { ...s, pinnedOrder: s.pinnedOrder - 1 };
+          }
+          return s;
+        });
+
+      console.log(`🗑️ Removed story: ${story.narrative.substring(0, 30)}...`);
+      return { storyHistory: updatedHistory };
+    });
+  },
 }));
diff --git a/smnb/lib/utils/storyUtils.ts b/smnb/lib/utils/storyUtils.ts
index f23c1a6..a19d7b6 100644
--- a/smnb/lib/utils/storyUtils.ts
+++ b/smnb/lib/utils/storyUtils.ts
@@ -13,7 +13,8 @@ import {
   Zap,
   Pin,
   GitBranch,
-  Bookmark
+  Bookmark,
+  X
 } from 'lucide-react';
 
 /**
@@ -56,6 +57,16 @@ export const StoryDisplayUtils = {
    */
   getSourceIcon: () => Bookmark,
 
+  /**
+   * Get Lucide icon component for pin indicator
+   */
+  getPinIcon: () => Pin,
+
+  /**
+   * Get Lucide icon component for close button
+   */
+  getCloseIcon: () => X,
+
   /**
    * Format timestamp to relative time
    */
@@ -144,6 +155,7 @@ export const StoryCardTokens = {
   // Card states
   highlighted: "border-blue-500 bg-blue-500/5 shadow-sm ring-1 ring-blue-500/20",
   normal: "border-border/50 hover:border-border hover:bg-card/50",
+  pinned: "border-yellow-500/50 bg-yellow-500/5 shadow-sm ring-1 ring-yellow-500/20",
   
   // Animation classes
   animation: "animate-slide-in-top",
@@ -158,6 +170,9 @@ export const StoryCardTokens = {
   toneLabel: "text-xs text-muted-foreground font-medium uppercase tracking-wide",
   topicTag: "px-1.5 py-0.5 rounded-full text-xs bg-cyan-400/20 text-cyan-300 border border-cyan-400/40",
   
+  // Pin indicator
+  pinnedBadge: "px-1.5 py-0.5 rounded-full text-xs font-medium bg-yellow-400/20 text-yellow-300 border border-yellow-400/40",
+  
   // Thread indicators
   threadUpdate: "px-1.5 py-0.5 rounded-full text-xs font-medium bg-yellow-400/20 text-yellow-300 border border-yellow-400/40",
   threadNew: "px-1.5 py-0.5 rounded-full text-xs font-medium bg-violet-400/20 text-violet-300 border border-violet-400/40",
@@ -182,6 +197,10 @@ export const StoryThemes = {
     card: StoryCardTokens.highlighted, 
     content: "text-blue-900 dark:text-blue-100"
   },
+  pinned: {
+    card: StoryCardTokens.pinned,
+    content: "text-card-foreground"
+  },
   archived: {
     card: "border-border/30 bg-muted/30 opacity-75",
     content: "text-muted-foreground"

From 630df16e633801e20726d6bf25432113669bc4a5 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 7 Sep 2025 12:09:38 +0000
Subject: [PATCH 3/3] Add test stories functionality and complete pin feature
 implementation

- Add addMultipleTestStories method for easy testing
- Add test story button to LiveFeed header
- Verify pin functionality works correctly with visual demo
- All pin requirements implemented and tested

Co-authored-by: acdc-digital <127530566+acdc-digital@users.noreply.github.com>
---
 smnb/components/livefeed/liveFeed.tsx         |  9 +++
 .../stores/livefeed/simpleLiveFeedStore.ts    | 59 +++++++++++++++++++
 2 files changed, 68 insertions(+)

diff --git a/smnb/components/livefeed/liveFeed.tsx b/smnb/components/livefeed/liveFeed.tsx
index 1212bbd..a1f8dc9 100644
--- a/smnb/components/livefeed/liveFeed.tsx
+++ b/smnb/components/livefeed/liveFeed.tsx
@@ -23,6 +23,7 @@ export default function LiveFeed({ className }: LiveFeedProps) {
     pinStory,
     unpinStory,
     removeStory,
+    addMultipleTestStories,
   } = useSimpleLiveFeedStore();
 
   // Sort stories with pinned ones first
@@ -88,6 +89,14 @@ export default function LiveFeed({ className }: LiveFeedProps) {
           Live Stories {sortedStories.length > 0 ? `(${sortedStories.length})` : ''}
         </div>
         <div className="flex items-center gap-2">
+          {/* Add test stories button for demonstration */}
+          <button
+            onClick={addMultipleTestStories}
+            title="Add Test Stories"
+            className="px-2 py-1 text-xs bg-blue-600 hover:bg-blue-500 text-white rounded transition-colors cursor-pointer"
+          >
+            Add Test Stories
+          </button>
           <button
             onClick={clearStoryHistory}
             title="Clear Stories"
diff --git a/smnb/lib/stores/livefeed/simpleLiveFeedStore.ts b/smnb/lib/stores/livefeed/simpleLiveFeedStore.ts
index 07491e9..b154048 100644
--- a/smnb/lib/stores/livefeed/simpleLiveFeedStore.ts
+++ b/smnb/lib/stores/livefeed/simpleLiveFeedStore.ts
@@ -151,6 +151,7 @@ interface SimpleLiveFeedStore {
   addCompletedStory: (story: CompletedStory) => void;
   clearStoryHistory: () => void;
   addTestStory: () => void; // For testing
+  addMultipleTestStories: () => void; // For pin testing
   
   // Pin actions
   pinStory: (storyId: string) => void;
@@ -667,6 +668,64 @@ export const useSimpleLiveFeedStore = create<SimpleLiveFeedStore>((set, get) =>
     });
   },
 
+  // Add multiple test stories for pin functionality testing
+  addMultipleTestStories: () => {
+    const testStories = [
+      {
+        id: `test-story-1-${Date.now()}`,
+        narrative: "First test story about AI developments in the tech industry. This story will help us test the pin functionality and ensure everything works as expected.",
+        tone: 'breaking' as const,
+        priority: 'high' as const,
+        timestamp: new Date(Date.now() - 1000),
+        duration: 30,
+        originalItem: {
+          title: "First AI Story",
+          author: "tech_reporter1",
+          subreddit: "technology"
+        },
+        sentiment: 'positive' as const,
+        topics: ['AI', 'Technology']
+      },
+      {
+        id: `test-story-2-${Date.now()}`,
+        narrative: "Second test story covering developments in renewable energy. This helps us test multiple stories and pin ordering functionality.",
+        tone: 'developing' as const,
+        priority: 'medium' as const,
+        timestamp: new Date(Date.now() - 2000),
+        duration: 25,
+        originalItem: {
+          title: "Renewable Energy Progress",
+          author: "energy_reporter",
+          subreddit: "energy"
+        },
+        sentiment: 'positive' as const,
+        topics: ['Energy', 'Environment']
+      },
+      {
+        id: `test-story-3-${Date.now()}`,
+        narrative: "Third test story about space exploration and recent discoveries. Perfect for testing the pin functionality with multiple stories.",
+        tone: 'analysis' as const,
+        priority: 'low' as const,
+        timestamp: new Date(Date.now() - 3000),
+        duration: 35,
+        originalItem: {
+          title: "Space Exploration Update",
+          author: "space_reporter",
+          subreddit: "space"
+        },
+        sentiment: 'neutral' as const,
+        topics: ['Space', 'Science']
+      }
+    ];
+    
+    set((state) => {
+      const newHistory = [...testStories, ...state.storyHistory];
+      const trimmedHistory = newHistory.slice(0, state.maxStoryHistory);
+      console.log(`🧪 Added ${testStories.length} test stories for pin functionality testing`);
+      return { storyHistory: trimmedHistory };
+    });
+  },
+
   // Convex integration methods
   loadStoriesFromConvex: async () => {
     try {