From de31b29404fa252709a081660cb6ed133aafab7e Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 10 Feb 2026 01:54:28 +0000
Subject: [PATCH] Rename "Outfit" to "Look" in Fitting Room

Renames the terminology in the Fitting Room feature from "Outfit" to "Look" to better align with future feature plans (where "Outfit" will refer to equipment combinations).

Changes include:
- Renaming `CreateOutfitDialog.tsx` to `CreateLookDialog.tsx`.
- Updating the route from `/characters/:id/outfits` to `/characters/:id/looks`.
- Updating all UI text and internal variable names in the affected components.
- Updating navigation in `Characters.tsx`.
---
 src/ui/App.tsx                                |  2 +-
 ...eOutfitDialog.tsx => CreateLookDialog.tsx} |  6 ++--
 src/ui/pages/Characters.tsx                   |  2 +-
 src/ui/pages/FittingRoom.tsx                  | 28 +++++++++----------
 4 files changed, 19 insertions(+), 19 deletions(-)
 rename src/ui/components/{CreateOutfitDialog.tsx => CreateLookDialog.tsx} (98%)

diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index 8f63126..93a6607 100644
--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
@@ -13,7 +13,7 @@ export default function App() {
         <Route path="/" element={<Layout />}>
           <Route index element={<Navigate to="/characters" replace />} />
           <Route path="characters" element={<Characters />} />
-          <Route path="characters/:id/outfits" element={<FittingRoom />} />
+          <Route path="characters/:id/looks" element={<FittingRoom />} />
           <Route path="equipments" element={<Equipments />} />
           <Route path="settings" element={<Settings />} />
         </Route>
diff --git a/src/ui/components/CreateOutfitDialog.tsx b/src/ui/components/CreateLookDialog.tsx
similarity index 98%
rename from src/ui/components/CreateOutfitDialog.tsx
rename to src/ui/components/CreateLookDialog.tsx
index 9832975..7bead77 100644
--- a/src/ui/components/CreateOutfitDialog.tsx
+++ b/src/ui/components/CreateLookDialog.tsx
@@ -12,14 +12,14 @@ import { Loader2, X, Check } from 'lucide-react'
 type EquipmentResponse = InferResponseType<typeof client.equipments.$get>
 type EquipmentItem = EquipmentResponse['items'][number]
 
-interface CreateOutfitDialogProps {
+interface CreateLookDialogProps {
   open: boolean
   onOpenChange: (open: boolean) => void
   characterId: string
   onSuccess: () => void
 }
 
-export const CreateOutfitDialog: React.FC<CreateOutfitDialogProps> = ({
+export const CreateLookDialog: React.FC<CreateLookDialogProps> = ({
   open,
   onOpenChange,
   characterId,
@@ -91,7 +91,7 @@ export const CreateOutfitDialog: React.FC<CreateOutfitDialogProps> = ({
 
       if (!res.ok) {
         const errData = (await res.json()) as { error?: string }
-        throw new Error(errData.error || 'Failed to create outfit')
+        throw new Error(errData.error || 'Failed to create look')
       }
 
       onSuccess()
diff --git a/src/ui/pages/Characters.tsx b/src/ui/pages/Characters.tsx
index 2bbca3c..2ee5d73 100644
--- a/src/ui/pages/Characters.tsx
+++ b/src/ui/pages/Characters.tsx
@@ -63,7 +63,7 @@ export default function Characters() {
             <div
               key={char.id}
               className="border-transparent cursor-pointer"
-              onClick={() => navigate(`/characters/${char.id}/outfits`)}
+              onClick={() => navigate(`/characters/${char.id}/looks`)}
             >
               <div className="flex flex-col items-center p-6 gap-4">
                 <Avatar className="w-32 h-32 border-4 border-stone-100 shadow-inner">
diff --git a/src/ui/pages/FittingRoom.tsx b/src/ui/pages/FittingRoom.tsx
index 5c024b6..ebc8f9c 100644
--- a/src/ui/pages/FittingRoom.tsx
+++ b/src/ui/pages/FittingRoom.tsx
@@ -5,7 +5,7 @@ import { InferResponseType } from 'hono/client'
 import { Button } from '../components/ui/button'
 import { Card } from '../components/ui/card'
 import { Plus, ArrowLeft } from 'lucide-react'
-import { CreateOutfitDialog } from '../components/CreateOutfitDialog'
+import { CreateLookDialog } from '../components/CreateLookDialog'
 import { useNavigate } from 'react-router-dom'
 
 // Types - Define locally to avoid complex type extraction if client inference is tricky
@@ -21,7 +21,7 @@ export default function FittingRoom() {
   const [character, setCharacter] = useState<CharacterResponse | null>(null)
   const [generations, setGenerations] = useState<GenerationItem[]>([])
   const [loading, setLoading] = useState(true)
-  const [createOpen, setCreateOpen] = useState(false)
+  const [createLookOpen, setCreateLookOpen] = useState(false)
 
   useEffect(() => {
     if (id) {
@@ -87,7 +87,7 @@ export default function FittingRoom() {
               Fitting Room
             </h1>
             <p className="text-stone-500 text-sm font-medium flex items-center gap-2">
-              Manage outfits for{' '}
+              Manage looks for{' '}
               <span className="text-stone-900 font-bold bg-stone-200 px-2 py-0.5 rounded text-xs uppercase">
                 {character.name}
               </span>
@@ -95,10 +95,10 @@ export default function FittingRoom() {
           </div>
         </div>
         <Button
-          onClick={() => setCreateOpen(true)}
+          onClick={() => setCreateLookOpen(true)}
           className="bg-stone-900 hover:bg-stone-800 text-white shadow-lg hover:shadow-xl transition-all"
         >
-          <Plus className="mr-2 h-4 w-4" /> Create New Outfit
+          <Plus className="mr-2 h-4 w-4" /> Create New Look
         </Button>
       </div>
 
@@ -132,9 +132,9 @@ export default function FittingRoom() {
           <div className="p-4 border-b border-stone-100 bg-stone-50/50 flex justify-between items-center shrink-0">
             <h3 className="font-bold text-stone-700 uppercase tracking-wider text-xs flex items-center gap-2">
               <span className="w-2 h-2 rounded-full bg-green-500"></span>
-              Generated Outfits
+              Generated Looks
             </h3>
-            <span className="text-xs font-mono text-stone-400">{generations.length} OUTFITS</span>
+            <span className="text-xs font-mono text-stone-400">{generations.length} LOOKS</span>
           </div>
 
           <div className="flex-1 overflow-y-auto p-4 custom-scrollbar">
@@ -144,11 +144,11 @@ export default function FittingRoom() {
                   <Plus className="w-8 h-8 text-stone-300" />
                 </div>
                 <div className="text-center">
-                  <p className="font-medium text-stone-600">No outfits generated yet.</p>
-                  <p className="text-xs mt-1">Create your first outfit to get started.</p>
+                  <p className="font-medium text-stone-600">No looks generated yet.</p>
+                  <p className="text-xs mt-1">Create your first look to get started.</p>
                 </div>
-                <Button variant="outline" onClick={() => setCreateOpen(true)}>
-                  Create Outfit
+                <Button variant="outline" onClick={() => setCreateLookOpen(true)}>
+                  Create Look
                 </Button>
               </div>
             ) : (
@@ -193,9 +193,9 @@ export default function FittingRoom() {
         </div>
       </div>
 
-      <CreateOutfitDialog
-        open={createOpen}
-        onOpenChange={setCreateOpen}
+      <CreateLookDialog
+        open={createLookOpen}
+        onOpenChange={setCreateLookOpen}
         characterId={id || ''}
         onSuccess={() => id && fetchData(id)}
       />