From 6351aa75e9b7860b329ffe4cf33684c628857086 Mon Sep 17 00:00:00 2001
From: Jamie Pine
Date: Thu, 29 Jan 2026 19:46:27 -0800
Subject: [PATCH] Refactor StoryList component for improved readability and
organization
- Reorganized import statements for clarity and consistency.
- Adjusted formatting of state declarations for better readability.
- Streamlined JSX structure for improved visual hierarchy.
- Updated dialog descriptions for consistency in presentation.
- Made minor adjustments to spacing and layout for enhanced UI consistency.
---
app/src/components/StoriesTab/StoryList.tsx | 46 ++++++++++----------
docs/public/app-screenshot-1.webp | Bin 136754 -> 181930 bytes
docs/public/app-screenshot-2.webp | Bin 131774 -> 160362 bytes
docs/public/app-screenshot-3.webp | Bin 110446 -> 116802 bytes
landing/public/assets/app-screenshot-1.webp | Bin 136754 -> 181930 bytes
landing/public/assets/app-screenshot-2.webp | Bin 131774 -> 160362 bytes
landing/public/assets/app-screenshot-3.webp | Bin 110446 -> 116802 bytes
7 files changed, 23 insertions(+), 23 deletions(-)
diff --git a/app/src/components/StoriesTab/StoryList.tsx b/app/src/components/StoriesTab/StoryList.tsx
index db4c840b..ebbd6616 100644
--- a/app/src/components/StoriesTab/StoryList.tsx
+++ b/app/src/components/StoriesTab/StoryList.tsx
@@ -1,14 +1,5 @@
import { Plus, BookOpen, MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
import { useState } from 'react';
-import { Button } from '@/components/ui/button';
-import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogFooter,
- DialogHeader,
- DialogTitle,
-} from '@/components/ui/dialog';
import {
AlertDialog,
AlertDialogAction,
@@ -19,6 +10,15 @@ import {
AlertDialogHeader,
AlertDialogTitle,
} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from '@/components/ui/dialog';
import {
DropdownMenu,
DropdownMenuContent,
@@ -26,18 +26,13 @@ import {
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
import { useToast } from '@/components/ui/use-toast';
-import {
- useStories,
- useCreateStory,
- useUpdateStory,
- useDeleteStory,
-} from '@/lib/hooks/useStories';
-import { useStoryStore } from '@/stores/storyStore';
+import { useStories, useCreateStory, useUpdateStory, useDeleteStory } from '@/lib/hooks/useStories';
import { cn } from '@/lib/utils/cn';
import { formatDate } from '@/lib/utils/format';
+import { useStoryStore } from '@/stores/storyStore';
export function StoryList() {
const { data: stories, isLoading } = useStories();
@@ -49,7 +44,11 @@ export function StoryList() {
const [createDialogOpen, setCreateDialogOpen] = useState(false);
const [editDialogOpen, setEditDialogOpen] = useState(false);
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
- const [editingStory, setEditingStory] = useState<{ id: string; name: string; description?: string } | null>(null);
+ const [editingStory, setEditingStory] = useState<{
+ id: string;
+ name: string;
+ description?: string;
+ } | null>(null);
const [deletingStoryId, setDeletingStoryId] = useState(null);
const [newStoryName, setNewStoryName] = useState('');
const [newStoryDescription, setNewStoryDescription] = useState('');
@@ -213,7 +212,9 @@ export function StoryList() {
)}
- {story.item_count} {story.item_count === 1 ? 'item' : 'items'}
+
+ {story.item_count} {story.item_count === 1 ? 'item' : 'items'}
+
•
{formatDate(story.updated_at)}
@@ -300,9 +301,7 @@ export function StoryList() {
Edit Story
-
- Update the story name and description.
-
+ Update the story name and description.