Merge pull request #128 from tinloof/tin-2735-icon-option-localizeditem

icon option in localizedItem, changeset and readme updated

.changeset/tasty-planets-press.md

@@ -0,0 +1,5 @@
+---
+"@tinloof/sanity-studio": patch
+---
+
+Icon option to localizedItem

packages/sanity-studio/README.md

@@ -414,6 +414,7 @@ The `localizedItem` utility helps create localized document lists in your Sanity
 ```tsx
 import { localizedItem } from '@tinloof/sanity-studio';
 import { StructureResolver } from 'sanity/structure';
+import { BookIcon } from '@sanity/icons';
 
 const locales = [
     { id: 'en', title: 'English' },
@@ -424,7 +425,7 @@ export const structure: StructureResolver = (S) => {
   return S.list()
     .title('Content')
     .items([
-      localizedItem(S, 'blog.post', 'Blog posts', locales),
+      localizedItem(S, 'blog.post', 'Blog posts', locales, BookIcon),
     ]);
 ```
 
@@ -434,6 +435,7 @@ export const structure: StructureResolver = (S) => {
 - `name`: The document type name (string)
 - `title`: The display title for the list (string)
 - `locales`: An array of locale objects with `id` and `title` properties
+- `icon`: (Optional) Icon to show instead of the default Sanity folder icon to assist with readability
 
 ### Example with additional locale properties
 
@@ -445,7 +447,7 @@ const locales = [
   { id: "fr", title: "French", countryCode: "FR" },
 ];
 
-localizedItem(S, "blog.post", "Blog posts", locales);
+localizedItem(S, "blog.post", "Blog posts", locales, BookIcon);
 ```
 
 The utility will create a nested structure with:

packages/sanity-studio/src/utils/localizedItem.ts

@@ -1,4 +1,6 @@
-import { ListItemBuilder, StructureBuilder } from 'sanity/structure';
+import { FolderIcon } from "@sanity/icons";
+import { BaseSchemaDefinition } from "sanity";
+import { ListItemBuilder, StructureBuilder } from "sanity/structure";
 
 export type Locale = {
   id: string;
@@ -10,39 +12,38 @@ export const localizedItem = (
   S: StructureBuilder,
   name: string,
   title: string,
-  locales: Locale[]
+  locales: Locale[],
+  icon?: BaseSchemaDefinition["icon"]
 ): ListItemBuilder => {
   // Input validation
-  if (!name || typeof name !== 'string') {
-    throw new Error('localizedItem: name parameter must be a non-empty string');
+  if (!name || typeof name !== "string") {
+    throw new Error("localizedItem: name parameter must be a non-empty string");
   }
-  if (!title || typeof title !== 'string') {
+  if (!title || typeof title !== "string") {
     throw new Error(
-      'localizedItem: title parameter must be a non-empty string'
+      "localizedItem: title parameter must be a non-empty string"
     );
   }
   if (!Array.isArray(locales) || locales.length === 0) {
-    throw new Error('localizedItem: locales must be a non-empty array');
+    throw new Error("localizedItem: locales must be a non-empty array");
   }
   if (!locales.every((locale) => locale.id && locale.title)) {
-    throw new Error('localizedItem: each locale must have an id and title');
+    throw new Error("localizedItem: each locale must have an id and title");
   }
 
   return S.listItem()
     .title(title)
+    .icon(icon || FolderIcon)
     .child(
       S.list()
         .id(name)
         .title(`${title} by locale`)
         .items([
           S.listItem()
             .id(`${name}-all`)
-            .title('All')
+            .title("All")
             .child(
-              S.documentTypeList(name)
-                .title(title)
-                .filter(`_type == $name`)
-                .params({ name })
+              S.documentTypeList(name).filter(`_type == $name`).params({ name })
             ),
           S.divider(),
           ...locales.map((locale) =>
@@ -51,7 +52,6 @@ export const localizedItem = (
               .title(locale.title)
               .child(
                 S.documentTypeList(name)
-                  .title(`(${locale.id}) ${title}`)
                   .filter(`_type == $name && locale == $locale`)
                   .params({ locale: locale.id, name })
               )