shardegger/storycove
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
Stefan Hardegger
2025-08-18 10:32:02 +02:00
parent 65f1c6edc7
commit e952241e3c
2 changed files with 22 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/stories/StoryCard.tsx
View File

@@ -29,6 +29,8 @@ export default function StoryCard({
const [updating, setUpdating] = useState(false); const [updating, setUpdating] = useState(false);
const handleRatingClick = async (e: React.MouseEvent, newRating: number) => { const handleRatingClick = async (e: React.MouseEvent, newRating: number) => {
console.log('Rating click:', newRating, 'for story:', story.title);
// Prevent default and stop propagation to avoid triggering navigation
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@@ -56,7 +58,10 @@ export default function StoryCard({
if (viewMode === 'list') { if (viewMode === 'list') {
return ( return (
<div className="theme-card theme-shadow rounded-lg p-4 hover:shadow-lg transition-shadow"> <div
className="theme-card theme-shadow rounded-lg p-4 hover:shadow-lg transition-shadow"
onClick={(e) => console.log('Story card clicked (list view):', story.title, 'Target:', e.target)}
>
<div className="flex gap-4"> <div className="flex gap-4">
{/* Cover Image */} {/* Cover Image */}
<div className="flex-shrink-0"> <div className="flex-shrink-0">
@@ -171,7 +176,10 @@ export default function StoryCard({
// Grid view // Grid view
return ( return (
<div className="theme-card theme-shadow rounded-lg overflow-hidden hover:shadow-lg transition-shadow group"> <div
className="theme-card theme-shadow rounded-lg overflow-hidden hover:shadow-lg transition-shadow group"
onClick={(e) => console.log('Story card clicked (grid view):', story.title, 'Target:', e.target)}
>
{/* Cover Image */} {/* Cover Image */}
<Link href={`/stories/${story.id}`}> <Link href={`/stories/${story.id}`}>
<div className="aspect-[3/4] bg-gray-200 dark:bg-gray-700 overflow-hidden"> <div className="aspect-[3/4] bg-gray-200 dark:bg-gray-700 overflow-hidden">

13
frontend/src/components/stories/StoryMultiSelect.tsx
View File

@@ -21,7 +21,15 @@ export default function StoryMultiSelect({
const [selectedStoryIds, setSelectedStoryIds] = useState<string[]>([]); const [selectedStoryIds, setSelectedStoryIds] = useState<string[]>([]);
const [isSelectionMode, setIsSelectionMode] = useState(false); const [isSelectionMode, setIsSelectionMode] = useState(false);
console.log('StoryMultiSelect render:', {
storiesCount: stories.length,
isSelectionMode,
selectedCount: selectedStoryIds.length,
allowMultiSelect
});
const handleStorySelect = (storyId: string) => { const handleStorySelect = (storyId: string) => {
console.log('Story selection triggered:', storyId, 'Selection mode:', isSelectionMode);
setSelectedStoryIds(prev => { setSelectedStoryIds(prev => {
if (prev.includes(storyId)) { if (prev.includes(storyId)) {
const newSelection = prev.filter(id => id !== storyId); const newSelection = prev.filter(id => id !== storyId);
@@ -101,7 +109,10 @@ export default function StoryMultiSelect({
<input <input
type="checkbox" type="checkbox"
checked={selectedStoryIds.includes(story.id)} checked={selectedStoryIds.includes(story.id)}
onChange={() => handleStorySelect(story.id)} onChange={(e) => {
e.stopPropagation(); // Prevent checkbox clicks from interfering
handleStorySelect(story.id);
}}
className="w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500 bg-white shadow-lg" className="w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500 bg-white shadow-lg"
/> />
</div> </div>