Add icon option to collection file

Author: kyoshino

src/lib/components/assets/list/primary-sidebar.svelte

@@ -13,7 +13,10 @@
   } from '$lib/services/assets';
   import { getFolderLabelByCollection } from '$lib/services/assets/view';
   import { getCollection, getCollectionIndex } from '$lib/services/contents/collection';
-  import { getCollectionFileIndex } from '$lib/services/contents/collection/files';
+  import {
+    getCollectionFile,
+    getCollectionFileIndex,
+  } from '$lib/services/contents/collection/files';
   import { isSmallScreen } from '$lib/services/user/env';
 
   const numberFormatter = $derived(Intl.NumberFormat($appLocale ?? undefined));
@@ -45,8 +48,11 @@
     <OptionGroup label={$_('asset_location.repository')}>
       {#each folders as folder ([folder.collectionName, folder.fileName, folder.internalPath].join(':'))}
         {#await sleep() then}
-          {@const { collectionName, internalPath, entryRelative, hasTemplateTags } = folder}
+          {@const { collectionName, fileName, internalPath, entryRelative, hasTemplateTags } =
+            folder}
           {@const collection = collectionName ? getCollection(collectionName) : undefined}
+          {@const collectionFile =
+            collection && fileName ? getCollectionFile(collection, fileName) : undefined}
           <!-- Can’t upload assets if collection assets are saved at entry-relative paths -->
           {@const uploadDisabled = entryRelative || hasTemplateTags}
           {@const selected = equal($selectedAssetFolder, folder)}
@@ -107,7 +113,7 @@
             }}
           >
             {#snippet startIcon()}
-              <Icon name={collection?.icon || 'folder'} />
+              <Icon name={collectionFile?.icon || collection?.icon || 'folder'} />
             {/snippet}
             {#snippet endIcon()}
               {#key $allAssets}

src/lib/components/common/list-container.svelte

@@ -26,6 +26,8 @@
 
 <style lang="scss">
   .list-container {
+    --icon-size: 36px;
+
     flex: auto;
     position: relative;
     height: 100%;

src/lib/components/common/listing-grid.svelte

@@ -119,8 +119,6 @@
   }
 
   .list-view {
-    --icon-size: 36px;
-
     @media (width < 768px) {
       padding: 0;
     }

src/lib/components/contents/list/file-list.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { EmptyState, GridCell, GridRow, InfiniteScroll, TruncatedText } from '@sveltia/ui';
+  import { EmptyState, GridCell, GridRow, Icon, InfiniteScroll, TruncatedText } from '@sveltia/ui';
   import { sleep } from '@sveltia/utils/misc';
   import { _ } from 'svelte-i18n';
   import ListContainer from '$lib/components/common/list-container.svelte';
@@ -20,7 +20,7 @@
       aria-rowcount={$selectedCollection.files.length}
     >
       <InfiniteScroll items={$selectedCollection.files} itemKey="name">
-        {#snippet renderItem(/** @type {CollectionFile} */ { name, label })}
+        {#snippet renderItem(/** @type {CollectionFile} */ { name, label, icon })}
           {#await sleep() then}
             <GridRow
               onclick={() => {
@@ -31,6 +31,9 @@
             >
               <GridCell class="title">
                 <div role="none" class="label">
+                  {#if icon}
+                    <Icon name={icon} />
+                  {/if}
                   <TruncatedText lines={2}>
                     {label || name}
                   </TruncatedText>
@@ -47,3 +50,21 @@
     </EmptyState>
   {/if}
 </ListContainer>
+
+<style lang="scss">
+  .label {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    :global(.icon) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--sui-control-medium-border-radius);
+      width: var(--icon-size);
+      height: var(--icon-size);
+      background-color: var(--sui-secondary-background-color);
+    }
+  }
+</style>

src/lib/types/public.js

@@ -721,6 +721,8 @@
  * @typedef {object} CollectionFile
  * @property {string} name Unique identifier for the file.
  * @property {string} [label] Label to be displayed in the editor UI. Default: `name` option value.
+ * @property {string} [icon] Name of a Material Symbols icon to be displayed in the collection file
+ * list and other places.
  * @property {string} file File path relative to the project root.
  * @property {Field[]} fields Set of fields to be included in the file.
  * @property {string} [media_folder] Internal media folder path for the collection. This overrides