refactor(web): rename fragment props from 'from' to semantic names

Quentin Gliech and Claude Opus 4.6 (1M context) created 1 month ago

Rename fragment data props to match their domain meaning:
- AuthorAvatar: from → author
- LabelBadge/LabelBadgeLink: from → label

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Change summary

webui2/src/components/bugs/comment-box.tsx       | 2 +-
webui2/src/components/bugs/label-editor.tsx      | 4 ++--
webui2/src/components/bugs/timeline.tsx          | 6 +++---
webui2/src/components/shared/comment-card.tsx    | 6 +++---
webui2/src/components/shared/issue-filters.tsx   | 2 +-
webui2/src/components/shared/label-badge.tsx     | 6 +++---
webui2/src/routes/$repo/_issues/issues/index.tsx | 2 +-
webui2/src/routes/$repo/_issues/user/$id.tsx     | 2 +-
8 files changed, 15 insertions(+), 15 deletions(-)

Detailed changes

webui2/src/components/bugs/comment-box.tsx 🔗

@@ -120,7 +120,7 @@ export function CommentBox({ bugPrefix, bugStatus, ref_ }: CommentBoxProps) {
 
   return (
     <CommentCard.Root>
-      <CommentCard.AuthorAvatar from={user} />
+      <CommentCard.AuthorAvatar author={user} />
       <CommentCard.Card>
         <WritePreview.Root hasContent={hasMessage} preview={preview} onPreviewChange={setPreview}>
           <WritePreview.Tabs className="border-border border-b px-4 py-2" />

webui2/src/components/bugs/label-editor.tsx 🔗

@@ -157,7 +157,7 @@ export function LabelEditor({ bugPrefix, currentLabels, ref_, validLabels }: Lab
                             : {}
                         }
                       />
-                      <LabelBadge from={label} />
+                      <LabelBadge label={label} />
                     </Listbox.Item>
                   );
                 })}
@@ -172,7 +172,7 @@ export function LabelEditor({ bugPrefix, currentLabels, ref_, validLabels }: Lab
       ) : (
         <div className="flex flex-wrap gap-1">
           {currentLabels.map((label) => (
-            <LabelBadge key={label.name} from={label} />
+            <LabelBadge key={label.name} label={label} />
           ))}
         </div>
       )}

webui2/src/components/bugs/timeline.tsx 🔗

@@ -164,7 +164,7 @@ function CommentItem({
 
   return (
     <CommentCard.Root>
-      <CommentCard.AuthorAvatar from={item.author} />
+      <CommentCard.AuthorAvatar author={item.author} />
       <CommentCard.Card>
         <CommentCard.CardHeader>
           <Link
@@ -258,7 +258,7 @@ function LabelChangeItem({ item, repo }: { item: LabelChangeItem; repo: string |
           <>
             added{" "}
             {item.added.map((l, i) => (
-              <LabelBadge key={i} from={l} />
+              <LabelBadge key={i} label={l} />
             ))}{" "}
           </>
         )}
@@ -266,7 +266,7 @@ function LabelChangeItem({ item, repo }: { item: LabelChangeItem; repo: string |
           <>
             removed{" "}
             {item.removed.map((l, i) => (
-              <LabelBadge key={i} from={l} />
+              <LabelBadge key={i} label={l} />
             ))}{" "}
           </>
         )}

webui2/src/components/shared/comment-card.tsx 🔗

@@ -25,12 +25,12 @@ export function Root({ children, className }: RootProps) {
 }
 
 interface AuthorAvatarProps {
-  from: FragmentType<typeof IDENTITY_SUMMARY_FRAGMENT>;
+  author: FragmentType<typeof IDENTITY_SUMMARY_FRAGMENT>;
   className?: string;
 }
 
-export function AuthorAvatar({ from, className }: AuthorAvatarProps) {
-  const { data } = useSuspenseFragment({ fragment: IDENTITY_SUMMARY_FRAGMENT, from });
+export function AuthorAvatar({ author, className }: AuthorAvatarProps) {
+  const { data } = useSuspenseFragment({ fragment: IDENTITY_SUMMARY_FRAGMENT, from: author });
 
   return (
     <Avatar className={cn("mt-1 size-8 shrink-0", className)}>

webui2/src/components/shared/issue-filters.tsx 🔗

@@ -373,7 +373,7 @@ function LabelFilter({
                           opacity: active ? 1 : 0.35,
                         }}
                       />
-                      <LabelBadge from={label} />
+                      <LabelBadge label={label} />
                     </Listbox.Item>
                   );
                 })}

webui2/src/components/shared/label-badge.tsx 🔗

@@ -22,7 +22,7 @@ function contrastColor(r: number, g: number, b: number): string {
 }
 
 interface LabelBadgeProps {
-  from: FragmentType<typeof LABEL_FIELDS_FRAGMENT>;
+  label: FragmentType<typeof LABEL_FIELDS_FRAGMENT>;
   className?: string;
 }
 
@@ -31,8 +31,8 @@ interface LabelBadgeProps {
 const LabelBadge = React.forwardRef<
   HTMLSpanElement,
   LabelBadgeProps & Omit<React.HTMLAttributes<HTMLSpanElement>, "color">
->(({ from, className, ...props }, ref) => {
-  const { data } = useSuspenseFragment({ fragment: LABEL_FIELDS_FRAGMENT, from });
+>(({ label, className, ...props }, ref) => {
+  const { data } = useSuspenseFragment({ fragment: LABEL_FIELDS_FRAGMENT, from: label });
   const bg = `rgb(${data.color.R},${data.color.G},${data.color.B})`;
   const text = contrastColor(data.color.R, data.color.G, data.color.B);

webui2/src/routes/$repo/_issues/issues/index.tsx 🔗

@@ -290,7 +290,7 @@ function RouteComponent() {
                 {bug.labels.map((label) => (
                   <LabelBadgeLink
                     key={label.name}
-                    from={label}
+                    label={label}
                     to="/$repo/issues"
                     params={{ repo }}
                     search={{

webui2/src/routes/$repo/_issues/user/$id.tsx 🔗

@@ -191,7 +191,7 @@ function RouteComponent() {
                   {bug.title}
                 </Link>
                 {bug.labels.map((label) => (
-                  <LabelBadge key={label.name} from={label} />
+                  <LabelBadge key={label.name} label={label} />
                 ))}
               </IssueRow.TitleArea>
               <IssueRow.Meta>