Display project name instead of ID in Tokens Studio sync dropdown

.changeset/two-gifts-study.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/figma-plugin": patch
+---
+
+Display project name instead of ID in Tokens Studio sync dropdown

packages/tokens-studio-for-figma/src/app/components/StorageItem.tsx

@@ -30,6 +30,7 @@ const StorageItem = ({ item, onEdit, onMigrate }: Props) => {
   const storageType = useSelector(storageTypeSelector);
   const { provider, id, name } = item;
   const branch = isGitProvider(item) ? item.branch : null;
+  const projectName = provider === StorageProviderType.TOKENS_STUDIO && 'projectName' in item ? item.projectName : null;
   const { restoreStoredProvider, deleteProvider } = useRemoteTokens();
   const { confirm } = useConfirm();
   const { setStorageType } = useStorage();
@@ -119,7 +120,7 @@ const StorageItem = ({ item, onEdit, onMigrate }: Props) => {
                   maxWidth: '100%',
                 }}
               >
-                {id}
+                {projectName || id}
                 {' '}
                 {branch && ` (${branch})`}
               </Box>

packages/tokens-studio-for-figma/src/app/components/StorageItemForm/TokensStudioForm.tsx

@@ -69,6 +69,7 @@ export default function TokensStudioForm({
         secret: zod.string(),
         internalId: zod.string().optional(),
         orgId: zod.string(),
+        projectName: zod.string().optional(),
         baseUrl: zod.string().optional(),
       });
       const validationResult = zodSchema.safeParse(values);
@@ -183,9 +184,13 @@ export default function TokensStudioForm({
 
   const onProjectChange = React.useCallback(
     (value: string) => {
+      const selectedProjectData = projectOptions.find((project) => project.value === value);
       onChange({ target: { name: 'id', value } });
+      if (selectedProjectData) {
+        onChange({ target: { name: 'projectName', value: selectedProjectData.label } });
+      }
     },
-    [onChange],
+    [onChange, projectOptions],
   );
 
   const handleBaseUrlBlur = React.useCallback(

packages/tokens-studio-for-figma/src/types/StorageType.ts

@@ -80,6 +80,7 @@ StorageProviderType.TOKENS_STUDIO,
   name: string; // this is only for reference
   orgId: string; // this is the organization id
   id: string; // this is the project id
+  projectName?: string; // this is the project name for display purposes
   baseUrl?: string; // this is the base URL for the Studio instance (optional for backward compatibility)
 }
 >;