From db22c3f271b5a09cc8ed687045ddcb11331dc6b8 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Sat, 14 Feb 2026 08:26:08 +0000 Subject: [PATCH 1/2] Refactor CreateLookDialog to use compact sidebar and 2-column grid This change refines the `CreateLookDialog` layout to be more compact and user-friendly. Key changes: - Replaced the sidebar with a text-only vertical navigation bar (`w-32`) to maximize content space. - Adjusted the equipment grid to a fixed 2-column layout (`grid-cols-2`) for better item visibility and reduced density. - Removed icons from sidebar buttons to streamline the interface. - Maintained the tabbed structure (Equipment, Pose, Expression, Instructions) and footer layout from the previous iteration. --- src/ui/components/CreateLookDialog.tsx | 612 ++++++++++++++----------- 1 file changed, 343 insertions(+), 269 deletions(-) diff --git a/src/ui/components/CreateLookDialog.tsx b/src/ui/components/CreateLookDialog.tsx index 815e42f..294668c 100644 --- a/src/ui/components/CreateLookDialog.tsx +++ b/src/ui/components/CreateLookDialog.tsx @@ -9,7 +9,14 @@ import { LoadOutfitDialog } from './LoadOutfitDialog' import { SaveOutfitDialog } from './SaveOutfitDialog' import { Badge } from './ui/badge' import { Button } from './ui/button' -import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './ui/dialog' +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from './ui/dialog' import { Label } from './ui/label' import { ScrollArea, ScrollBar } from './ui/scroll-area' import { Textarea } from './ui/textarea' @@ -29,12 +36,15 @@ interface CreateLookDialogProps { onSuccess: () => void } +type Tab = 'equipment' | 'pose' | 'expression' | 'instructions' + export const CreateLookDialog: React.FC = ({ open, onOpenChange, characterId, onSuccess, }) => { + const [activeTab, setActiveTab] = useState('equipment') const [items, setItems] = useState([]) const [loading, setLoading] = useState(true) const [selectedCategories, setSelectedCategories] = useState([]) @@ -165,288 +175,352 @@ export const CreateLookDialog: React.FC = ({ return ( <> - - -
- - Select Equipment - - Choose items to equip on your character. + + {/* Header */} + + + Create New Look + + + Design your character's look by selecting equipment, pose, and expression. + + + +
+ {/* Sidebar Navigation */} +
+ + + +
+ + {/* Content Area */} +
+ {/* Equipment Tab */} + {activeTab === 'equipment' && ( +
+ {/* Category Filter */} +
+ +
+ {EQUIPMENT_CATEGORIES.map((cat) => { + const isSelected = selectedCategories.includes(cat.main_category) + return ( + toggleCategory(cat.main_category)} + > + {cat.main_category} + + ) + })} +
+ + +
+ + {/* Equipment Grid */} + + {loading ? ( +
+ +
+ ) : items.length === 0 ? ( +
+

No equipment found.

+
+ ) : ( +
+ {items.map((item) => { + const isSelected = selectedEquipments.some((e) => e.id === item.id) + return ( +
toggleEquipment(item)} + > +
+ {item.name} + {isSelected && ( +
+ +
+ )} +
+
+

+ {item.name} +

+

+ {item.category} +

+
+
+ ) + })} +
+ )} + + + {/* Selected Items (Persistent in Equipment Tab) */} +
+
+

+ Selected Items + + {selectedEquipments.length} + +

+
+ +
+ {selectedEquipments.length === 0 ? ( +
+ Select items from the list above. +
+ ) : ( + selectedEquipments.map((item) => ( +
+ {item.name} + +
+ )) + )} +
+ + +
+
+ )} + + {/* Pose Tab */} + {activeTab === 'pose' && ( + +
+
setSelectedPoseId(null)} + > + + Default Pose +
+ {poses.map((pose) => ( +
setSelectedPoseId(pose.id)} + > + {pose.name} +
+ + {pose.name} + +
+ {selectedPoseId === pose.id && ( +
+ +
+ )} +
+ ))} +
+ + )} + + {/* Expression Tab */} + {activeTab === 'expression' && ( + +
+
setSelectedExpressionId(null)} + > + + Default +
+ {expressions.map((expression) => ( +
setSelectedExpressionId(expression.id)} + > + {expression.name} +
+ + {expression.name} + +
+ {selectedExpressionId === expression.id && ( +
+ +
+ )} +
+ ))} +
+ + )} + + {/* Instructions Tab */} + {activeTab === 'instructions' && ( +
+
+ +

+ Add any specific details or instructions for the AI generation. Describe how + the equipment should be worn or any specific stylistic preferences. +

+