Show only 4 projects with most recent updatedAt

src/lib/components/breadcrumbsConsole.svelte

@@ -104,10 +104,22 @@
             title: 'Switch project',
             items: !selectedOrg
                 ? []
-                : selectedOrg.projects.map((project) => ({
-                      name: project.name,
-                      href: `/console/project-${project.$id}/overview`
-                  }))
+                : selectedOrg.projects
+                      .map((project, index) => {
+                          if (index < 4) {
+                              return {
+                                  name: project.name,
+                                  href: `/console/project-${project.$id}/overview`
+                              };
+                          } else if (index === 4) {
+                              return {
+                                  name: 'All projects',
+                                  href: `/console/organization-${selectedOrg.$id}`
+                              };
+                          }
+                          return null;
+                      })
+                      .filter((project) => project !== null)
         },
         bottom: {
             items: [
@@ -244,10 +256,22 @@
         {/if}
 
         <div class="menu" use:melt={$menuProjects}>
-            {#each selectedOrg.projects as project}
-                <a href={`/console/project-${project.$id}`} class="item" use:melt={$itemProjects}>
-                    {project.name}
-                </a>
+            {#each selectedOrg.projects as project, index}
+                {#if index < 4}
+                    <a
+                        href={`/console/project-${project.$id}`}
+                        class="item"
+                        use:melt={$itemProjects}>
+                        {project.name}
+                    </a>
+                {:else if index === 4}
+                    <a
+                        href={`/console/organization-${selectedOrg.$id}`}
+                        class="item"
+                        use:melt={$itemProjects}>
+                        All projects
+                    </a>
+                {/if}
             {/each}
             <div class="separator" use:melt={$separatorProjects} />
             <a

src/routes/(console)/+layout.ts

@@ -39,7 +39,7 @@ export const load: LayoutLoad = async ({ params, fetch, depends, parent }) => {
         const orgProjects = await sdk.forConsole.projects.list([
             Query.equal('teamId', currentOrgId),
             Query.limit(100),
-            Query.orderDesc('')
+            Query.orderDesc('$updatedAt')
         ]);
         projects = orgProjects.projects.length > 0 ? orgProjects.projects : [];
     }