update: preliminary support for accordions.

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/editRelated.svelte

@@ -11,8 +11,9 @@
     import { type Columns, PROHIBITED_ROW_KEYS } from '../store';
     import ColumnItem from './columns/columnItem.svelte';
     import { buildWildcardColumnsQuery, isRelationship, isRelationshipToMany } from './store';
-    import { Divider, Layout, Skeleton, Typography } from '@appwrite.io/pink-svelte';
+    import { Accordion, Divider, Layout, Skeleton } from '@appwrite.io/pink-svelte';
     import { deepClone } from '$lib/helpers/object';
+    import { preferences } from '$lib/stores/preferences';
 
     const databaseId = page.params.database;
 
@@ -313,6 +314,20 @@
         };
     }
 
+    function getAccordionTitle(row: Models.Row): string {
+        const names = preferences.getDisplayNames(row.$tableId).filter((name) => name !== '$id');
+
+        const values = names
+            .map((name) => row?.[name])
+            .filter((value) => value != null && typeof value === 'string' && value !== '');
+
+        if (!values.length) {
+            return row.$id;
+        }
+
+        return `${values.join(' | ')} (...${row.$id.slice(-5)})`;
+    }
+
     $effect(() => {
         if (rows && tableId) {
             loadRelatedRow().then(() => {
@@ -323,7 +338,7 @@
 </script>
 
 {#if loading}
-    <div style:margin-block="" style:margin-inline-end="2.25rem">
+    <div style:margin-inline-end="2.25rem">
         <Skeleton variant="line" height={40} width="auto" />
     </div>
 {:else if relatedTable?.columns?.length && fetchedRows.length}
@@ -350,21 +365,24 @@
             {/if}
         {:else}
             <Layout.Stack direction="column" gap="m" class="column-item-stack">
-                <Typography.Text variant="l-400">{relatedTable.name}</Typography.Text>
-                <Layout.Stack direction="column" gap="l" class="column-item-stack">
+                <Layout.Stack direction="column" gap="xs" class="column-item-stack">
                     {#each fetchedRows as row, index (row.$id)}
                         {@const workStore = getStore(row.$id)}
-                        {#if workStore}
-                            {#each columnsToRender as column}
-                                {@const label = column.key}
-                                <ColumnItem
-                                    {column}
-                                    {label}
-                                    editing
-                                    formValues={workStore}
-                                    onUpdateFormValues={handleFormUpdate(row.$id)} />
-                            {/each}
-                        {/if}
+                        <Accordion title={getAccordionTitle(row)} hideDivider>
+                            {#if workStore}
+                                <Layout.Stack direction="column" gap="m">
+                                    {#each columnsToRender as column}
+                                        {@const label = column.key}
+                                        <ColumnItem
+                                            {column}
+                                            {label}
+                                            editing
+                                            formValues={workStore}
+                                            onUpdateFormValues={handleFormUpdate(row.$id)} />
+                                    {/each}
+                                </Layout.Stack>
+                            {/if}
+                        </Accordion>
 
                         {#if index < fetchedRows.length - 1}
                             <Divider />
@@ -375,3 +393,9 @@
         {/if}
     </div>
 {/if}
+
+<style lang="scss">
+    :global(.column-item-stack .divider) {
+        margin-inline-start: 4px;
+    }
+</style>