From 7baf88c39aa667961de8b17a78cb71da04bb8830 Mon Sep 17 00:00:00 2001
From: Didd <didd.tuni@akasha.world>
Date: Wed, 20 Nov 2024 21:32:58 +0300
Subject: [PATCH 01/11] chore(): update extensions cards

---
 .../extensions/src/components/explore.tsx     |  99 ++++++++-------
 .../src/components/extensions-hub.tsx         |   5 +-
 .../src/components/pages/explore.tsx          |  87 ++++++-------
 .../info-page/sub-pages/dev-info-page.tsx     |  19 ++-
 .../default-extensions-list.tsx               | 115 ++++++++++--------
 .../installed-extensions-list.tsx             |  90 ++++++++------
 .../src/components/app-routes/index.tsx       |  42 ++++---
 .../components/pages/edit-profile/index.tsx   |  14 +--
 .../update-profile-mutation-cache.ts          |  28 +++++
 .../src/components/profile-header/index.tsx   |  13 +-
 .../src/components/AppList/index.tsx          |  96 ++++++---------
 .../DynamicInfiniteScroll/index.tsx           |  13 +-
 .../src/components/ExtensionCard/index.tsx    | 111 +++++++++++++++++
 .../src/components/Pill/index.tsx             |  19 ++-
 .../src/components/ProfileNameField/index.tsx |  10 +-
 .../selectors/get-app-release-by-id-query.ts  |   6 +
 libs/hooks/src/use-installed-extensions.ts    |  28 ++---
 libs/sdk/src/gql/index.ts                     |  11 +-
 18 files changed, 490 insertions(+), 316 deletions(-)
 create mode 100644 extensions/apps/profile/src/components/pages/edit-profile/update-profile-mutation-cache.ts
 create mode 100644 libs/design-system-core/src/components/ExtensionCard/index.tsx

diff --git a/extensions/apps/extensions/src/components/explore.tsx b/extensions/apps/extensions/src/components/explore.tsx
index 463d6a9083..77220ef9aa 100644
--- a/extensions/apps/extensions/src/components/explore.tsx
+++ b/extensions/apps/extensions/src/components/explore.tsx
@@ -1,73 +1,72 @@
 import React from 'react';
-import AppList, { App } from '@akashaorg/design-system-components/lib/components/AppList';
+import AppList from '@akashaorg/design-system-components/lib/components/AppList';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
 import Card from '@akashaorg/design-system-core/lib/components/Card';
-import Image from '@akashaorg/design-system-core/lib/components/Image';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
+import ExtensionCard, {
+  ExtensionCardProps,
+} from '@akashaorg/design-system-core/lib/components/ExtensionCard';
+import { ReactNode } from '@tanstack/react-router';
 
-type TLatestExtensionsCardProps = {
-  buttonLabel: string;
-  latestExtensionsLabel: string;
-  latestExtensions?: App[];
-  onViewAllClick: () => void;
-};
-
-export type TExploreProps = TLatestExtensionsCardProps & {
+export type TExploreProps = {
   titleLabel: string;
-  publicImgPath?: string;
-  assetExtension?: string;
-  sections: {
-    assetName?: string;
+  popularExtensions?: ExtensionCardProps[];
+  popularExtensionsLabel: string;
+  viewAllLabel: string;
+  cta: {
     title: string;
     description: string;
-    ctaNode: React.ReactNode;
-  }[];
+    action: ReactNode;
+  };
+  onViewAllClick: () => void;
 };
 
 export const Explore: React.FC<TExploreProps> = props => {
   const {
     titleLabel,
-    publicImgPath = '/images',
-    assetExtension = 'webp',
-    sections,
-    latestExtensionsLabel,
-    latestExtensions,
-    buttonLabel,
+    popularExtensions,
+    popularExtensionsLabel,
+    viewAllLabel,
+    cta,
     onViewAllClick,
   } = props;
 
   return (
     <Stack spacing="gap-y-4" customStyle="mb-2">
       <Text variant="h5">{titleLabel}</Text>
-      {sections.map((section, idx) => (
-        <React.Fragment key={section.title + idx}>
-          {!!latestExtensions?.length && idx === 1 && (
-            <Card padding="p-4">
-              <Stack spacing="gap-y-4">
-                <Stack direction="row" align="center" justify="between">
-                  <Text variant="h6">{latestExtensionsLabel}</Text>
-                  <Button variant="text" label={buttonLabel} onClick={onViewAllClick} />
-                </Stack>
-                <AppList apps={latestExtensions} onLoadMore={() => null} />
-              </Stack>
-            </Card>
-          )}
-          <Card key={section.title + idx} padding="p-4">
-            <Stack spacing="gap-y-3">
-              {section.assetName && (
-                <Image
-                  customStyle="object-contain rounded-2xl"
-                  src={`${publicImgPath}/${section.assetName}.${assetExtension}`}
-                />
-              )}
-              <Text variant="h6">{section.title}</Text>
-              <Text variant="body2">{section.description}</Text>
-              {section.ctaNode}
-            </Stack>
-          </Card>
-        </React.Fragment>
-      ))}
+      {popularExtensions?.length > 0 && (
+        <ExtensionCard
+          coverImageSrc={popularExtensions[0]?.coverImageSrc}
+          displayName={popularExtensions[0]?.displayName}
+          applicationType={popularExtensions[0]?.applicationType}
+          description={popularExtensions[0]?.description}
+          featured={true}
+          action={popularExtensions[0]?.action}
+        />
+      )}
+      {popularExtensions?.length > 1 && (
+        <Stack spacing="gap-y-4">
+          <Stack direction="row" align="center" spacing="gap-x-2">
+            <Text variant="h6">{popularExtensionsLabel}</Text>
+            <Button
+              variant="text"
+              size="md"
+              label={viewAllLabel}
+              onClick={onViewAllClick}
+              customStyle="ml-auto"
+            />
+          </Stack>
+          <AppList apps={popularExtensions.slice(1)} onLoadMore={() => null} />
+        </Stack>
+      )}
+      <Card padding="p-4">
+        <Stack spacing="gap-y-3">
+          <Text variant="h6">{cta.title}</Text>
+          <Text variant="body2">{cta.description}</Text>
+          {cta.action}
+        </Stack>
+      </Card>
     </Stack>
   );
 };
diff --git a/extensions/apps/extensions/src/components/extensions-hub.tsx b/extensions/apps/extensions/src/components/extensions-hub.tsx
index b6d1aa97a4..354728e289 100644
--- a/extensions/apps/extensions/src/components/extensions-hub.tsx
+++ b/extensions/apps/extensions/src/components/extensions-hub.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
-import AppList, { App } from '@akashaorg/design-system-components/lib/components/AppList';
+import AppList from '@akashaorg/design-system-components/lib/components/AppList';
 import Card from '@akashaorg/design-system-core/lib/components/Card';
 import Image from '@akashaorg/design-system-core/lib/components/Image';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
+import { ExtensionCardProps } from '@akashaorg/design-system-core/lib/components/ExtensionCard';
 
 export type TExtensionsHubProps = {
   titleLabel: string;
   publicImgPath?: string;
   assetExtension?: string;
-  extensions?: App[];
+  extensions?: ExtensionCardProps[];
   sections: {
     assetName?: string;
     title: string;
diff --git a/extensions/apps/extensions/src/components/pages/explore.tsx b/extensions/apps/extensions/src/components/pages/explore.tsx
index 36c3fb3b32..0af4bbbad5 100644
--- a/extensions/apps/extensions/src/components/pages/explore.tsx
+++ b/extensions/apps/extensions/src/components/pages/explore.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
+import Button from '@akashaorg/design-system-core/lib/components/Button';
+import routes, { DEVELOPER_MODE, EXTENSIONS } from '../../routes';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from '@tanstack/react-router';
 import { useRootComponentProps } from '@akashaorg/ui-awf-hooks';
 import { ArrowLongRightIcon } from '@heroicons/react/24/outline';
-import Button from '@akashaorg/design-system-core/lib/components/Button';
 import { Explore } from '../explore';
-import routes, { DEVELOPER_MODE, EXTENSIONS } from '../../routes';
+import { AkashaAppApplicationType } from '@akashaorg/typings/lib/sdk/graphql-types-new';
 
 export const ExplorePage: React.FC<unknown> = () => {
   const navigate = useNavigate();
@@ -36,65 +37,55 @@ export const ExplorePage: React.FC<unknown> = () => {
     });
   };
 
-  const handleAppClick = (appId: string) => {
-    navigate({
-      to: '/info/$appId',
-      params: {
-        appId,
-      },
-    });
-  };
-
   const handleCTAClick = () => {
     navigate({
       to: routes[DEVELOPER_MODE],
     });
   };
-  const latestExtensions = [];
+
+  const popularExtensions = [
+    {
+      id: '',
+      coverImageSrc: null,
+      displayName: t('Vibes Console'),
+      description: `${t("Dive into AKASHA WORLD's Vibes Console!")} 💫 ${t("Your spot to become a moderator, explore applicants, and curate content. Together, let's shape our vibrant community!")} 🌟🔍✨`,
+      applicationType: AkashaAppApplicationType.App,
+    },
+  ];
 
   return (
     <Explore
       titleLabel={t("What's new!")}
-      sections={[
-        {
-          assetName: t('vibes-console-explore'),
-          title: t('Vibes Console'),
-          description: `${t("Dive into AKASHA WORLD's Vibes Console!")} 💫 ${t("Your spot to become a moderator, explore applicants, and curate content. Together, let's shape our vibrant community!")} 🌟🔍✨`,
-          ctaNode: (
-            <Button
-              variant={isInstalled ? 'secondary' : 'primary'}
-              label={isInstalled ? t('Installed') : t('Open')}
-              customStyle="w-fit self-end"
-              onClick={() => handleButtonClick('@akashaorg/app-vibes-console')}
-            />
-          ),
-        },
-        {
-          title: t('Want to create your own extension?'),
-          description: t(
-            'Create awesome extensions, spark your imagination, and be part of an enthusiastic developer community!',
-          ),
-          ctaNode: (
-            <Button
-              size="md"
-              variant="text"
-              iconDirection="right"
-              icon={<ArrowLongRightIcon />}
-              label={t('Start your journey')}
-              customStyle="w-fit self-end"
-              onClick={handleCTAClick}
-            />
-          ),
-        },
-      ]}
-      latestExtensionsLabel={t('Latest Extensions')}
-      latestExtensions={latestExtensions.map(ext => ({
+      cta={{
+        title: t('Want to create your own extension?'),
+        description: t(
+          'Create awesome extensions, spark your imagination, and be part of an enthusiastic developer community!',
+        ),
+        action: (
+          <Button
+            size="md"
+            variant="text"
+            iconDirection="right"
+            icon={<ArrowLongRightIcon />}
+            label={t('Start your journey')}
+            customStyle="w-fit self-end"
+            onClick={handleCTAClick}
+          />
+        ),
+      }}
+      popularExtensionsLabel={t('Popular Extensions')}
+      popularExtensions={popularExtensions.map(ext => ({
         ...ext,
         action: (
-          <Button variant="primary" label={t('Open')} onClick={() => handleAppClick(ext.id)} />
+          <Button
+            variant={isInstalled ? 'secondary' : 'primary'}
+            label={isInstalled ? t('Installed') : t('Open')}
+            onClick={() => handleButtonClick('@akashaorg/app-vibes-console')}
+            customStyle="w-fit self-end"
+          />
         ),
       }))}
-      buttonLabel={t('View All')}
+      viewAllLabel={t('View All')}
       onViewAllClick={handleViewAllLatestExtensions}
     />
   );
diff --git a/extensions/apps/extensions/src/components/pages/info-page/sub-pages/dev-info-page.tsx b/extensions/apps/extensions/src/components/pages/info-page/sub-pages/dev-info-page.tsx
index 89ce69ea69..715fabe260 100644
--- a/extensions/apps/extensions/src/components/pages/info-page/sub-pages/dev-info-page.tsx
+++ b/extensions/apps/extensions/src/components/pages/info-page/sub-pages/dev-info-page.tsx
@@ -102,8 +102,23 @@ export const DevInfoPage = (props: DevInfoPageProps) => {
         // @todo: we'll need to show the curated apps only. filtering will be made here
         ?.filter(() => true)
         .map(app => ({
-          ...app,
-          logoImage: transformSource(app.logoImage),
+          coverImageSrc: app?.coverImage?.src,
+          displayName: app?.displayName,
+          applicationType: app?.applicationType,
+          author: app.author
+            ? {
+                profileDID: app.author?.akashaProfile?.did?.id,
+                name: app.author?.akashaProfile?.name,
+                avatar: transformSource(app.author?.akashaProfile?.avatar?.default),
+                alternativeAvatars: app.author?.akashaProfile?.avatar.alternatives?.map(alt =>
+                  transformSource(alt),
+                ),
+                nsfw: app.author?.akashaProfile?.nsfw,
+              }
+            : null,
+          description: app?.description,
+          default: t('Default'),
+          nsfw: app?.nsfw,
           action: <Button onClick={handleAppOpen(app.name)} label={t('Open')} />,
         })),
     [appsReq.data, handleAppOpen, t],
diff --git a/extensions/apps/extensions/src/components/pages/installed-extensions/default-extensions-list.tsx b/extensions/apps/extensions/src/components/pages/installed-extensions/default-extensions-list.tsx
index b32bb23d8e..fb0dea209b 100644
--- a/extensions/apps/extensions/src/components/pages/installed-extensions/default-extensions-list.tsx
+++ b/extensions/apps/extensions/src/components/pages/installed-extensions/default-extensions-list.tsx
@@ -1,17 +1,15 @@
 import React from 'react';
 import getSDK from '@akashaorg/core-sdk';
 import AppList from '@akashaorg/design-system-components/lib/components/AppList';
-import Card from '@akashaorg/design-system-core/lib/components/Card';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
 import Spinner from '@akashaorg/design-system-core/lib/components/Spinner';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
 import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
-import { useRootComponentProps } from '@akashaorg/ui-awf-hooks';
+import { transformSource, useRootComponentProps } from '@akashaorg/ui-awf-hooks';
 import { useGetAppsByPublisherDidQuery } from '@akashaorg/ui-awf-hooks/lib/generated';
 import { selectApps } from '@akashaorg/ui-awf-hooks/lib/selectors/get-apps-by-publisher-did-query';
 import { useTranslation } from 'react-i18next';
-import { type InstalledExtension } from '@akashaorg/ui-awf-hooks/lib/use-installed-extensions';
 import { SortOrder } from '@akashaorg/typings/lib/sdk/graphql-types-new';
 import { useNavigate } from '@tanstack/react-router';
 
@@ -42,62 +40,73 @@ export const DefaultExtensionsList = () => {
 
   const apps = selectApps(data);
 
-  const defaultExtensions: InstalledExtension[] = apps?.map(app => ({
-    name: app.name,
-    displayName: app.displayName,
-    logoImage: app.logoImage,
-    applicationType: app.applicationType,
-    description: app.description,
+  const defaultExtensions = apps?.map(app => ({
+    coverImageSrc: app?.coverImage?.src,
+    displayName: app?.displayName,
+    applicationType: app?.applicationType,
+    author: app.author
+      ? {
+          profileDID: app.author?.akashaProfile?.did?.id,
+          name: app.author?.akashaProfile?.name,
+          avatar: transformSource(app.author?.akashaProfile?.avatar?.default),
+          alternativeAvatars: app.author?.akashaProfile?.avatar.alternatives?.map(alt =>
+            transformSource(alt),
+          ),
+          nsfw: app.author?.akashaProfile?.nsfw,
+        }
+      : null,
+    description: app?.description,
+    nsfw: app?.nsfw,
+    defaultLabel: t('Default'),
+    isDefaultWorldExtension: true,
     action: (
       <Button variant="secondary" label={t('Open')} onClick={() => handleAppClick(app.name)} />
     ),
   }));
 
   return (
-    <Card padding="p-4">
-      <Stack spacing="gap-y-4">
-        <Stack spacing="gap-y-2">
-          <Text variant="h6">{t('Default Extensions')}</Text>
-          <Text variant="body2" color={{ light: 'grey5', dark: 'grey6' }}>
-            {t(
-              'The default extensions are the ones that come preinstalled with AKASHA World. You cannot uninstall them.',
-            )}
-          </Text>
-        </Stack>
-        {
-          //@TODO replace with Loader component once its created
-        }
-        {loading && (
-          <Stack spacing="gap-y-5" align="center">
-            <Spinner />
-            <Text variant="button-md">{t('Loading default extensions')}</Text>
-          </Stack>
-        )}
-        {error && (
-          <ErrorLoader
-            title={
-              <Text variant="h5" align="center" selectable={false}>
-                {t(`Uh-oh! We couldn't load`)} <br />
-                {t(`the extensions list!`)}
-              </Text>
-            }
-            details={
-              <Text variant="body2" align="center" selectable={false} customStyle="w-60 sm:w-auto">
-                {t(`It seems there's a problem with the server. Please try again later!`)}
-              </Text>
-            }
-            type="list-not-available"
-            noWrapperCard={true}
-          />
-        )}
-        {defaultExtensions && (
-          <AppList
-            apps={defaultExtensions}
-            //@TODO implement pagination as the list can grow
-            onLoadMore={() => null}
-          />
-        )}
+    <Stack spacing="gap-y-4">
+      <Stack spacing="gap-y-2">
+        <Text variant="h6">{t('Default Extensions')}</Text>
+        <Text variant="body2" color={{ light: 'grey5', dark: 'grey6' }}>
+          {t(
+            'The default extensions are the ones that come preinstalled with AKASHA World. You cannot uninstall them.',
+          )}
+        </Text>
       </Stack>
-    </Card>
+      {
+        //@TODO replace with Loader component once its created
+      }
+      {loading && (
+        <Stack spacing="gap-y-5" align="center">
+          <Spinner />
+          <Text variant="button-md">{t('Loading default extensions')}</Text>
+        </Stack>
+      )}
+      {error && (
+        <ErrorLoader
+          title={
+            <Text variant="h5" align="center" selectable={false}>
+              {t(`Uh-oh! We couldn't load`)} <br />
+              {t(`the extensions list!`)}
+            </Text>
+          }
+          details={
+            <Text variant="body2" align="center" selectable={false} customStyle="w-60 sm:w-auto">
+              {t(`It seems there's a problem with the server. Please try again later!`)}
+            </Text>
+          }
+          type="list-not-available"
+          noWrapperCard={true}
+        />
+      )}
+      {defaultExtensions?.length > 0 && (
+        <AppList
+          apps={defaultExtensions}
+          //@TODO implement pagination as the list can grow
+          onLoadMore={() => null}
+        />
+      )}
+    </Stack>
   );
 };
diff --git a/extensions/apps/extensions/src/components/pages/installed-extensions/installed-extensions-list.tsx b/extensions/apps/extensions/src/components/pages/installed-extensions/installed-extensions-list.tsx
index 25f3cd849b..66d07e0134 100644
--- a/extensions/apps/extensions/src/components/pages/installed-extensions/installed-extensions-list.tsx
+++ b/extensions/apps/extensions/src/components/pages/installed-extensions/installed-extensions-list.tsx
@@ -13,7 +13,7 @@ import {
   type InstalledExtension,
   useInstalledExtensions,
 } from '@akashaorg/ui-awf-hooks/lib/use-installed-extensions';
-import { useAkashaStore, useRootComponentProps } from '@akashaorg/ui-awf-hooks';
+import { transformSource, useAkashaStore, useRootComponentProps } from '@akashaorg/ui-awf-hooks';
 import { useNavigate } from '@tanstack/react-router';
 
 const PUBLIC_IMAGE_PATH = '/images';
@@ -55,7 +55,21 @@ export const InstalledExtensionsList = () => {
   const { data, error, loading } = useInstalledExtensions();
 
   const addAction = (ext: InstalledExtension) => ({
-    ...ext,
+    coverImageSrc: ext?.coverImage?.src,
+    displayName: ext?.displayName,
+    applicationType: ext?.applicationType,
+    author: ext.author
+      ? {
+          profileDID: ext.author?.did?.id,
+          name: ext.author?.name,
+          avatar: transformSource(ext.author?.avatar?.default),
+          alternativeAvatars: ext.author?.avatar.alternatives?.map(alt => transformSource(alt)),
+          nsfw: ext.author?.nsfw,
+        }
+      : null,
+    description: ext?.description,
+    nsfw: ext?.nsfw,
+    default: t('Default'),
     action: (
       <Button variant="secondary" label={t('Open')} onClick={() => handleAppClick(ext.name)} />
     ),
@@ -111,43 +125,41 @@ export const InstalledExtensionsList = () => {
         />
       )}
       {installedExtensions && (
-        <Card padding="p-4">
-          <Stack spacing="gap-y-3" align="center">
-            {!installedExtensions.length && (
-              <>
-                <Stack customStyle="h-52 w-52">
-                  <Image
-                    customStyle="object-contain"
-                    src={`${PUBLIC_IMAGE_PATH}/longbeam-notfound.webp`}
-                  />
-                </Stack>
-                <Text variant="h6">{t('No extensions installed yet!')}</Text>
-                <Stack align="center">
-                  <Text as="span" variant="body2" color={{ light: 'grey5', dark: 'grey6' }}>
-                    <Button
-                      variant="text"
-                      size="md"
-                      label={t('Discover')}
-                      onClick={handleDiscoverClick}
-                      customStyle="inline-block"
-                    />{' '}
-                    {t('cool extensions and install them')}
-                  </Text>
-                  <Text variant="body2" color={{ light: 'grey5', dark: 'grey6' }}>
-                    {t('to customize your world')}
-                  </Text>
-                </Stack>
-              </>
-            )}
-            {!!installedExtensions.length && (
-              <AppList
-                apps={installedExtensions}
-                //implementation requires pagination support on installed extensions service on sdk
-                onLoadMore={() => null}
-              />
-            )}
-          </Stack>
-        </Card>
+        <Stack spacing="gap-y-3" align="center">
+          {!installedExtensions.length && (
+            <>
+              <Stack customStyle="h-52 w-52">
+                <Image
+                  customStyle="object-contain"
+                  src={`${PUBLIC_IMAGE_PATH}/longbeam-notfound.webp`}
+                />
+              </Stack>
+              <Text variant="h6">{t('No extensions installed yet!')}</Text>
+              <Stack align="center">
+                <Text as="span" variant="body2" color={{ light: 'grey5', dark: 'grey6' }}>
+                  <Button
+                    variant="text"
+                    size="md"
+                    label={t('Discover')}
+                    onClick={handleDiscoverClick}
+                    customStyle="inline-block"
+                  />{' '}
+                  {t('cool extensions and install them')}
+                </Text>
+                <Text variant="body2" color={{ light: 'grey5', dark: 'grey6' }}>
+                  {t('to customize your world')}
+                </Text>
+              </Stack>
+            </>
+          )}
+          {!!installedExtensions.length && (
+            <AppList
+              apps={installedExtensions}
+              //implementation requires pagination support on installed extensions service on sdk
+              onLoadMore={() => null}
+            />
+          )}
+        </Stack>
       )}
     </>
   );
diff --git a/extensions/apps/profile/src/components/app-routes/index.tsx b/extensions/apps/profile/src/components/app-routes/index.tsx
index 9ec57a82eb..afdf1c3a0f 100644
--- a/extensions/apps/profile/src/components/app-routes/index.tsx
+++ b/extensions/apps/profile/src/components/app-routes/index.tsx
@@ -52,7 +52,13 @@ const defaultRoute = createRoute({
 
 const profileInfoRoute = createRoute({
   getParentRoute: () => rootRoute,
-  path: '$profileDID',
+  path: '/$profileDID',
+  component: Outlet,
+});
+
+const profileInfoIndexRoute = createRoute({
+  getParentRoute: () => profileInfoRoute,
+  path: '/',
   loader: ({ context, params }) => {
     context.apolloClient.query({
       query: GetProfileByDidDocument,
@@ -74,8 +80,8 @@ const profileInfoRoute = createRoute({
 });
 
 const profileEditRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: `$profileDID${menuRoute[EDIT]}`,
+  getParentRoute: () => profileInfoRoute,
+  path: `${menuRoute[EDIT]}`,
   component: () => {
     const { profileDID } = profileEditRoute.useParams();
     return (
@@ -91,8 +97,8 @@ const profileEditRoute = createRoute({
 });
 
 const followersRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: `$profileDID${menuRoute[FOLLOWERS]}`,
+  getParentRoute: () => profileInfoRoute,
+  path: `${menuRoute[FOLLOWERS]}`,
   loader: ({ context, params }) => {
     context.apolloClient.query({
       query: GetFollowersListByDidDocument,
@@ -118,8 +124,8 @@ const followersRoute = createRoute({
 });
 
 const followingRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: `$profileDID${menuRoute[FOLLOWING]}`,
+  getParentRoute: () => profileInfoRoute,
+  path: `${menuRoute[FOLLOWING]}`,
   loader: ({ context, params }) => {
     context.apolloClient.query({
       query: GetFollowingListByDidDocument,
@@ -145,8 +151,8 @@ const followingRoute = createRoute({
 });
 
 const interestsRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: `$profileDID${menuRoute[INTERESTS]}`,
+  getParentRoute: () => profileInfoRoute,
+  path: `${menuRoute[INTERESTS]}`,
   component: () => {
     const { profileDID } = interestsRoute.useParams();
     return (
@@ -161,8 +167,8 @@ const interestsRoute = createRoute({
 });
 
 const beamsRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: `$profileDID${menuRoute[BEAMS]}`,
+  getParentRoute: () => profileInfoRoute,
+  path: `${menuRoute[BEAMS]}`,
   component: () => {
     const { profileDID } = beamsRoute.useParams();
     return (
@@ -178,12 +184,14 @@ const beamsRoute = createRoute({
 
 const routeTree = rootRoute.addChildren([
   defaultRoute,
-  profileInfoRoute,
-  profileEditRoute,
-  followersRoute,
-  followingRoute,
-  interestsRoute,
-  beamsRoute,
+  profileInfoRoute.addChildren([
+    profileInfoIndexRoute,
+    profileEditRoute,
+    followersRoute,
+    followingRoute,
+    interestsRoute,
+    beamsRoute,
+  ]),
 ]);
 
 export const router = ({ baseRouteName, apolloClient }: ICreateRouter) =>
diff --git a/extensions/apps/profile/src/components/pages/edit-profile/index.tsx b/extensions/apps/profile/src/components/pages/edit-profile/index.tsx
index bad1d1d92f..907500c80d 100644
--- a/extensions/apps/profile/src/components/pages/edit-profile/index.tsx
+++ b/extensions/apps/profile/src/components/pages/edit-profile/index.tsx
@@ -21,6 +21,7 @@ import {
 } from '@akashaorg/typings/lib/ui';
 import { getAvatarImage, getCoverImage } from './get-profile-images';
 import { selectProfileData } from '@akashaorg/ui-awf-hooks/lib/selectors/get-profile-by-did-query';
+import { useNavigate } from '@tanstack/react-router';
 
 type EditProfilePageProps = {
   profileDID: string;
@@ -29,7 +30,7 @@ type EditProfilePageProps = {
 const EditProfilePage: React.FC<EditProfilePageProps> = props => {
   const { profileDID } = props;
   const { t } = useTranslation('app-profile');
-  const { getCorePlugins, logger, uiEvents } = useRootComponentProps();
+  const { logger, uiEvents } = useRootComponentProps();
   const {
     image: avatarImage,
     saveImage: saveAvatarImage,
@@ -43,7 +44,7 @@ const EditProfilePage: React.FC<EditProfilePageProps> = props => {
   const isSavingImage = isSavingAvatarImage || isSavingCoverImage;
   const [showNsfwModal, setShowNsfwModal] = useState(false);
   const [nsfwFormValues, setNsfwFormValues] = useState<PublishProfileData>();
-  const navigateTo = getCorePlugins().routing.navigateTo;
+  const navigate = useNavigate();
   const { data, error } = useGetProfileByDidSuspenseQuery({
     variables: { id: profileDID },
   });
@@ -87,9 +88,7 @@ const EditProfilePage: React.FC<EditProfilePageProps> = props => {
 
   const [createProfileMutation, { loading: createProfileProcessing }] = useCreateProfileMutation({
     context: { source: sdk.services.gql.contextSources.composeDB },
-    onCompleted: () => {
-      onSuccess();
-    },
+    onCompleted: onSuccess,
     onError: error => {
       onError();
       logger.error(`error in creating a profile: ${JSON.stringify(error)}`);
@@ -115,10 +114,7 @@ const EditProfilePage: React.FC<EditProfilePageProps> = props => {
     );
 
   const navigateToProfileInfoPage = () => {
-    navigateTo({
-      appName: '@akashaorg/app-profile',
-      getNavigationUrl: () => `/${profileDID}`,
-    });
+    navigate({ to: '/$profileDID', params: { profileDID } });
   };
 
   const createProfile = async (
diff --git a/extensions/apps/profile/src/components/pages/edit-profile/update-profile-mutation-cache.ts b/extensions/apps/profile/src/components/pages/edit-profile/update-profile-mutation-cache.ts
new file mode 100644
index 0000000000..38703f274d
--- /dev/null
+++ b/extensions/apps/profile/src/components/pages/edit-profile/update-profile-mutation-cache.ts
@@ -0,0 +1,28 @@
+import { GetProfileByDidQuery } from '@akashaorg/typings/lib/sdk/graphql-operation-types-new';
+import { AkashaProfile } from '@akashaorg/typings/lib/ui';
+import { GetProfileByDidDocument } from '@akashaorg/ui-awf-hooks/lib/generated/apollo';
+import { ApolloCache } from '@apollo/client';
+
+interface IUpdateCache {
+  cache: ApolloCache<unknown>;
+  profileDID: string;
+  data: AkashaProfile;
+}
+
+export async function updateProfileMutationCache({ cache, profileDID, data }: IUpdateCache) {
+  const variables = {
+    id: profileDID,
+  };
+
+  console.log(data, 'before cache update');
+
+  const result = cache.updateQuery<GetProfileByDidQuery>(
+    {
+      query: GetProfileByDidDocument,
+      variables,
+    },
+    profileQuery => ({ node: { ...profileQuery.node, akashaProfile: { ...data } } }),
+  );
+
+  console.log(result.node, 'after cache update');
+}
diff --git a/extensions/apps/profile/src/components/profile-header/index.tsx b/extensions/apps/profile/src/components/profile-header/index.tsx
index 5106d589ac..b780a12bba 100644
--- a/extensions/apps/profile/src/components/profile-header/index.tsx
+++ b/extensions/apps/profile/src/components/profile-header/index.tsx
@@ -1,5 +1,4 @@
 import React, { Suspense, useCallback, useMemo } from 'react';
-import routes, { EDIT } from '../../routes';
 import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
 import FollowProfileButton from '../follow-profile-button';
 import {
@@ -25,6 +24,7 @@ import {
 } from '@akashaorg/ui-awf-hooks';
 import { useGetProfileByDidSuspenseQuery } from '@akashaorg/ui-awf-hooks/lib/generated/apollo';
 import { selectProfileData } from '@akashaorg/ui-awf-hooks/lib/selectors/get-profile-by-did-query';
+import { useNavigate } from '@tanstack/react-router';
 
 type ProfileHeaderProps = {
   profileDID: string;
@@ -40,6 +40,7 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = props => {
     data: { authenticatedDID },
   } = useAkashaStore();
   const { uiEvents, navigateToModal, getCorePlugins } = useRootComponentProps();
+  const navigate = useNavigate();
 
   const { data, error } = useGetProfileByDidSuspenseQuery({
     fetchPolicy:
@@ -88,17 +89,11 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = props => {
   };
 
   const handleClickProfileName = () => {
-    navigateTo({
-      appName: '@akashaorg/app-profile',
-      getNavigationUrl: () => `/${profileDID}`,
-    });
+    navigate({ to: '/$profileDID', params: { profileDID } });
   };
 
   const handleEdit = () => {
-    navigateTo({
-      appName: '@akashaorg/app-profile',
-      getNavigationUrl: () => `/${profileDID}${routes[EDIT]}`,
-    });
+    navigate({ to: '/$profileDID/edit', params: { profileDID } });
   };
 
   const handleFlagProfile = () => {
diff --git a/libs/design-system-components/src/components/AppList/index.tsx b/libs/design-system-components/src/components/AppList/index.tsx
index dae9faac3d..c957881792 100644
--- a/libs/design-system-components/src/components/AppList/index.tsx
+++ b/libs/design-system-components/src/components/AppList/index.tsx
@@ -1,28 +1,12 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import DynamicInfiniteScroll, { DynamicInfiniteScrollProps } from '../DynamicInfiniteScroll';
-import Divider from '@akashaorg/design-system-core/lib/components/Divider';
-import ExtensionIcon from '@akashaorg/design-system-core/lib/components/ExtensionIcon';
-import Stack from '@akashaorg/design-system-core/lib/components/Stack';
-import Text from '@akashaorg/design-system-core/lib/components/Text';
-import AppAvatar from '@akashaorg/design-system-core/lib/components/AppAvatar';
-import {
-  AkashaAppApplicationType,
-  AppImageSource,
-} from '@akashaorg/typings/lib/sdk/graphql-types-new';
-
-export type App = {
-  displayName?: string;
-  logoImage?: AppImageSource;
-  description?: string;
-  applicationType?: AkashaAppApplicationType;
-  action?: ReactNode;
-};
+import ExtensionCard, {
+  ExtensionCardProps,
+} from '@akashaorg/design-system-core/lib/components/ExtensionCard';
 
 export type AppListProps = {
-  apps: App[];
-  showAppTypeIndicator?: boolean;
-  overScan?: number;
-} & Pick<DynamicInfiniteScrollProps, 'hasNextPage' | 'loading' | 'onLoadMore'>;
+  apps: ExtensionCardProps[];
+} & Pick<DynamicInfiniteScrollProps, 'overScan' | 'hasNextPage' | 'loading' | 'onLoadMore'>;
 
 const ENTRY_HEIGHT = 92;
 
@@ -39,7 +23,6 @@ const ITEM_SPACING = 16;
  */
 const AppList: React.FC<AppListProps> = ({
   apps,
-  showAppTypeIndicator,
   loading,
   hasNextPage,
   onLoadMore,
@@ -51,46 +34,43 @@ const AppList: React.FC<AppListProps> = ({
       estimatedHeight={ENTRY_HEIGHT}
       overScan={overScan}
       itemSpacing={ITEM_SPACING}
+      lanes={2}
       hasNextPage={hasNextPage}
       loading={loading}
       onLoadMore={onLoadMore}
+      listWrapperStyle={
+        apps.length > 1
+          ? 'grid grid-cols-[repeat(auto-fit,_minmax(min(16rem,_100%),_1fr))] gap-4'
+          : 'flex'
+      }
     >
-      {({ index, itemIndex }) => {
-        const app = apps[itemIndex];
+      {({ itemIndex }) => {
+        const {
+          coverImageSrc,
+          displayName,
+          applicationType,
+          author,
+          description,
+          action,
+          defaultLabel,
+          isDefaultWorldExtension,
+          nsfw,
+          featured,
+        } = apps[itemIndex];
         return (
-          <Stack spacing="gap-y-4">
-            <Stack direction="row" justify="between" align="center" spacing="gap-x-8">
-              <Stack direction="row" spacing="gap-x-3">
-                <AppAvatar appType={app.applicationType} avatar={app.logoImage} />
-                <Stack direction="column" spacing="gap-y-1">
-                  <Stack direction="row" spacing="gap-2">
-                    <Text variant="button-sm">{app.displayName}</Text>
-                    {showAppTypeIndicator && (
-                      <Stack
-                        customStyle="w-[18px] h-[18px] rounded-full"
-                        background={{ light: 'secondaryLight', dark: 'secondaryDark' }}
-                        justify="center"
-                        align="center"
-                      >
-                        <ExtensionIcon type={app.applicationType} />
-                      </Stack>
-                    )}
-                  </Stack>
-                  <Text
-                    variant="footnotes2"
-                    weight="normal"
-                    color={{ light: 'grey4', dark: 'grey7' }}
-                    lineClamp={2}
-                  >
-                    {app.description || app.displayName}
-                  </Text>
-                </Stack>
-              </Stack>
-
-              {app.action}
-            </Stack>
-            {index < apps.length - 1 && <Divider />}
-          </Stack>
+          <ExtensionCard
+            coverImageSrc={coverImageSrc}
+            displayName={displayName}
+            applicationType={applicationType}
+            author={author}
+            description={description}
+            action={action}
+            nsfw={nsfw}
+            featured={featured || apps.length === 1}
+            defaultLabel={defaultLabel}
+            isDefaultWorldExtension={isDefaultWorldExtension}
+            customStyle="h-full"
+          />
         );
       }}
     </DynamicInfiniteScroll>
diff --git a/libs/design-system-components/src/components/DynamicInfiniteScroll/index.tsx b/libs/design-system-components/src/components/DynamicInfiniteScroll/index.tsx
index 1641897d5a..9d1fd70da9 100644
--- a/libs/design-system-components/src/components/DynamicInfiniteScroll/index.tsx
+++ b/libs/design-system-components/src/components/DynamicInfiniteScroll/index.tsx
@@ -27,13 +27,15 @@ export type DynamicInfiniteScrollProps = {
   enableScrollRestoration?: boolean;
   scrollRestorationStorageKey?: string;
   lastScrollRestorationKey?: string;
+  lanes?: number;
   overScan?: number;
   itemSpacing?: number;
   hasNextPage?: boolean;
   loading?: boolean;
-  customStyle?: string;
   header?: ReactElement;
   dataTestId?: string;
+  listWrapperStyle?: string;
+  customStyle?: string;
   onLoadMore: () => Promise<unknown> | void;
   children: (item: DynamicInfiniteScrollItem) => ReactElement;
 };
@@ -46,13 +48,15 @@ const DynamicInfiniteScroll: React.FC<DynamicInfiniteScrollProps> = props => {
     enableScrollRestoration = false,
     scrollRestorationStorageKey = 'storage-key',
     lastScrollRestorationKey,
+    lanes,
     overScan = 5,
     itemSpacing,
     hasNextPage,
     loading,
-    customStyle = '',
     header,
     dataTestId,
+    listWrapperStyle = '',
+    customStyle = '',
     onLoadMore,
     children,
   } = props;
@@ -97,7 +101,8 @@ const DynamicInfiniteScroll: React.FC<DynamicInfiniteScrollProps> = props => {
   }, [getHeaderHeight]);
 
   const virtualizer = useWindowVirtualizer({
-    count: count,
+    count,
+    lanes,
     overscan: overScan,
     gap: itemSpacing,
     initialMeasurementsCache: getInitialMeasurementsCache(),
@@ -149,7 +154,7 @@ const DynamicInfiniteScroll: React.FC<DynamicInfiniteScrollProps> = props => {
       >
         <Card
           data-offset={vListOffset}
-          customStyle={`flex flex-col absolute w-full top-0 left-0 translate-y-[${vListOffset}px] gap-y-[${itemSpacing}px]`}
+          customStyle={`flex flex-col absolute w-full top-0 left-0 translate-y-[${vListOffset}px] gap-y-[${itemSpacing}px] ${listWrapperStyle}`}
           type="plain"
         >
           {virtualItems.map((virtualItem, index, items) => (
diff --git a/libs/design-system-core/src/components/ExtensionCard/index.tsx b/libs/design-system-core/src/components/ExtensionCard/index.tsx
new file mode 100644
index 0000000000..21dab257d7
--- /dev/null
+++ b/libs/design-system-core/src/components/ExtensionCard/index.tsx
@@ -0,0 +1,111 @@
+import React, { ReactNode } from 'react';
+import Stack from '../Stack';
+import Card from '../Card';
+import AppCoverImage from '../AppCoverImage';
+import Text from '../Text';
+import Pill from '../Pill';
+import DidField from '../DidField';
+import Avatar from '../Avatar';
+import ProfileNameField from '../ProfileNameField';
+import ExtensionIcon from '../ExtensionIcon';
+import { Extension, Image } from '@akashaorg/typings/lib/ui';
+
+export type ExtensionCardProps = {
+  coverImageSrc: string;
+  displayName: string;
+  applicationType: Extension['applicationType'];
+  author?: {
+    profileDID: string;
+    name: string;
+    alternativeAvatars: Image[];
+    avatar: Image;
+    nsfw?: boolean;
+  };
+  description: string;
+  defaultLabel?: string;
+  isDefaultWorldExtension?: boolean;
+  nsfw?: boolean;
+  featured?: boolean;
+  action?: ReactNode;
+  customStyle?: string;
+};
+
+const ExtensionCard: React.FC<ExtensionCardProps> = props => {
+  const {
+    coverImageSrc,
+    displayName,
+    applicationType,
+    author,
+    description,
+    defaultLabel,
+    isDefaultWorldExtension = false,
+    nsfw,
+    featured,
+    action,
+    customStyle = '',
+  } = props;
+
+  return (
+    <Card elevation="1" padding={16} radius={20} customStyle={customStyle}>
+      <Stack spacing="gap-y-4">
+        <AppCoverImage
+          src={coverImageSrc}
+          appType={applicationType}
+          customStyle={`${featured ? 'h-[9.625rem]' : 'h-[6.25rem]'} object-cover rounded-[0.625rem]`}
+        />
+        <Stack spacing="gap-y-3">
+          <Stack justify="between" align="center" direction="row" spacing="gap-y-1">
+            <Text variant="h6">{displayName}</Text>
+            <>{action}</>
+          </Stack>
+          <Stack direction="row" spacing="gap-x-2">
+            <Pill
+              color={{ light: 'secondaryLight', dark: 'white' }}
+              background={{ light: 'tertiaryLight', dark: 'tertiaryDark' }}
+              icon={<ExtensionIcon type={applicationType} />}
+              weight="normal"
+              size="xs"
+              label={applicationType}
+              type="info"
+              customStyle="w-fit"
+            />
+            {isDefaultWorldExtension && (
+              <Pill
+                color={{ light: 'white', dark: 'black' }}
+                background={{ light: 'secondaryLight', dark: 'secondaryDark' }}
+                weight="normal"
+                size="xs"
+                label={defaultLabel}
+                type="info"
+                customStyle="w-fit"
+              />
+            )}
+          </Stack>
+          <Stack direction="row" align="center" spacing="gap-x-1">
+            <Avatar
+              size="xs"
+              avatar={author?.avatar}
+              alternativeAvatars={author?.alternativeAvatars}
+              profileId={author?.profileDID}
+              isNSFW={author?.nsfw}
+              customStyle="shrink-0 cursor-pointer h-4 w-4"
+            />
+            <ProfileNameField
+              did={author?.profileDID}
+              profileName={author?.name}
+              color={{ light: 'grey4', dark: 'grey6' }}
+              weight="normal"
+              truncateText={true}
+              size="sm"
+              hover={true}
+            />
+            <DidField did={author?.profileDID} isValid={true} copiable={true} />
+          </Stack>
+          <Text variant="body2">{description}</Text>
+        </Stack>
+      </Stack>
+    </Card>
+  );
+};
+
+export default ExtensionCard;
diff --git a/libs/design-system-core/src/components/Pill/index.tsx b/libs/design-system-core/src/components/Pill/index.tsx
index 8b950830b2..f5ada72ff5 100644
--- a/libs/design-system-core/src/components/Pill/index.tsx
+++ b/libs/design-system-core/src/components/Pill/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { ReactElement, useState } from 'react';
 import Button from '../Button';
 import Stack from '../Stack';
 import Text, { TextProps } from '../Text';
@@ -20,6 +20,8 @@ type ActionPillProps = Pick<
 
 export type InfoPillProps = Pick<TextProps, 'weight' | 'color' | 'customStyle'> & {
   label: string;
+  size?: PillSize;
+  icon?: ReactElement;
   borderColor?: Color;
   background?: Color;
   customTextStyle?: string;
@@ -61,7 +63,17 @@ export type PillProps =
  **/
 const Pill: React.FC<PillProps> = props => {
   if (props.type === 'info') {
-    const { borderColor, background, color, label, weight, customStyle, customTextStyle } = props;
+    const {
+      borderColor,
+      background,
+      color,
+      label,
+      size = 'sm',
+      weight,
+      customStyle,
+      icon,
+      customTextStyle,
+    } = props;
 
     const borderStyle = borderColor ? `border ${getColorClasses(borderColor, 'border')}` : '';
     return (
@@ -69,8 +81,9 @@ const Pill: React.FC<PillProps> = props => {
         align="center"
         justify="center"
         background={background}
-        customStyle={`min-h-min min-w-min rounded-full py-1 px-2 ${borderStyle} ${customStyle}`}
+        customStyle={`${PILL_SIZE_MAP[size]} ${borderStyle} ${customStyle}`}
       >
+        {icon}
         <Text
           variant="footnotes2"
           selectable={false}
diff --git a/libs/design-system-core/src/components/ProfileNameField/index.tsx b/libs/design-system-core/src/components/ProfileNameField/index.tsx
index 753c07dc5a..68cc8b283e 100644
--- a/libs/design-system-core/src/components/ProfileNameField/index.tsx
+++ b/libs/design-system-core/src/components/ProfileNameField/index.tsx
@@ -1,18 +1,21 @@
 import React from 'react';
-import Text from '../Text';
+import Text, { FontWeight } from '../Text';
 import Tooltip from '../Tooltip';
 import Stack from '../Stack';
 import Icon from '../Icon';
 import { ExclamationTriangleIcon } from '../Icon/hero-icons-outline';
 import { getDidNetworkType, truncateDid } from '../../utils/did-utils';
 import { getColorClasses } from '../../utils';
+import { Color } from '../types/common.types';
 
 export type ProfileNameFieldProps = {
   did: string;
   profileName?: string;
   nsfwLabel?: string;
   truncateText?: boolean;
+  weight?: FontWeight;
   size?: 'sm' | 'md' | 'lg';
+  color?: Color;
   showMissingNameWarning?: boolean;
   missingNameWarningLabel?: string;
   hover?: boolean;
@@ -48,6 +51,8 @@ const ProfileNameField: React.FC<ProfileNameFieldProps> = ({
   nsfwLabel = '',
   truncateText,
   size = 'sm',
+  weight = 'bold',
+  color,
   showMissingNameWarning,
   missingNameWarningLabel,
   hover = false,
@@ -71,7 +76,8 @@ const ProfileNameField: React.FC<ProfileNameFieldProps> = ({
       <Stack direction="row" spacing="gap-x-1">
         <Text
           variant={`button-${size}`}
-          weight="bold"
+          weight={weight}
+          color={color}
           truncate={true}
           customStyle={`${textTruncateStyle} ${textHoverStyle}`}
         >
diff --git a/libs/hooks/src/selectors/get-app-release-by-id-query.ts b/libs/hooks/src/selectors/get-app-release-by-id-query.ts
index cfa302ce9e..2e728832fb 100644
--- a/libs/hooks/src/selectors/get-app-release-by-id-query.ts
+++ b/libs/hooks/src/selectors/get-app-release-by-id-query.ts
@@ -1,6 +1,12 @@
 import { GetAppReleaseByIdQuery } from '@akashaorg/typings/lib/sdk/graphql-operation-types-new';
 import { isNodeWithId } from './selector-utils';
 
+export const selectApp = (data: GetAppReleaseByIdQuery) => {
+  if (isNodeWithId(data)) {
+    return data.node.application;
+  }
+};
+
 export const selectAppName = (data: GetAppReleaseByIdQuery) => {
   if (isNodeWithId(data)) {
     return data.node.application.name;
diff --git a/libs/hooks/src/use-installed-extensions.ts b/libs/hooks/src/use-installed-extensions.ts
index 0fd1f0d026..b4dafd7eb4 100644
--- a/libs/hooks/src/use-installed-extensions.ts
+++ b/libs/hooks/src/use-installed-extensions.ts
@@ -1,20 +1,22 @@
 import getSDK from '@akashaorg/core-sdk';
 import { useEffect, useState } from 'react';
-import {
-  selectAppName,
-  selectAppDisplayName,
-  selectAppLogoImage,
-  selectAppDescription,
-  selectAppType,
-} from './selectors/get-app-release-by-id-query';
+import { selectApp } from './selectors/get-app-release-by-id-query';
 import { useGetAppReleaseByIdLazyQuery } from './generated';
 import { AkashaApp } from '@akashaorg/typings/lib/sdk/graphql-types-new';
 import { InstalledExtensionSchema } from '@akashaorg/core-sdk/lib/db/installed-extensions.schema';
+import { AkashaProfile } from '@akashaorg/typings/lib/ui';
 
 export type InstalledExtension = Pick<
   AkashaApp,
-  'name' | 'displayName' | 'logoImage' | 'description' | 'applicationType'
->;
+  | 'name'
+  | 'displayName'
+  | 'logoImage'
+  | 'coverImage'
+  | 'description'
+  | 'applicationType'
+  | 'description'
+  | 'nsfw'
+> & { author: AkashaProfile };
 
 export const useInstalledExtensions = () => {
   const [appReleaseLazyQuery] = useGetAppReleaseByIdLazyQuery();
@@ -33,14 +35,12 @@ export const useInstalledExtensions = () => {
           const { data } = await appReleaseLazyQuery({
             variables: { id: installedExtension.releaseId },
           });
+          const appInfo = selectApp(data);
 
           return data
             ? {
-                name: selectAppName(data),
-                displayName: selectAppDisplayName(data),
-                logoImage: selectAppLogoImage(data),
-                description: selectAppDescription(data),
-                applicationType: selectAppType(data),
+                ...appInfo,
+                author: appInfo.author?.akashaProfile,
               }
             : null;
         };
diff --git a/libs/sdk/src/gql/index.ts b/libs/sdk/src/gql/index.ts
index bc2fa15604..28ec2d9793 100644
--- a/libs/sdk/src/gql/index.ts
+++ b/libs/sdk/src/gql/index.ts
@@ -96,6 +96,11 @@ class Gql {
         CeramicAccount: {
           merge: true,
           fields: {
+            akashaProfile: {
+              merge(existing = {}, incoming) {
+                return { ...existing, ...incoming };
+              },
+            },
             akashaFollowList: relayStylePagination(['sorting', 'filters']),
             akashaBeamStreamList: relayStylePagination(['sorting', 'filters']),
             akashaReflectStreamList: relayStylePagination(['sorting', 'filters']),
@@ -103,12 +108,6 @@ class Gql {
             akashaAppList: relayStylePagination(['sorting', 'filters']),
           },
         },
-        AkashaProfile: {
-          merge: true,
-          fields: {
-            followers: relayStylePagination(['sorting', 'filters']),
-          },
-        },
         Query: {
           fields: {
             akashaBeamIndex: relayStylePagination(['sorting', 'filters']),

From a73eb36961271255cda4a13ec7370e2aaa9f97f5 Mon Sep 17 00:00:00 2001
From: Didd <didd.tuni@akasha.world>
Date: Wed, 20 Nov 2024 21:34:59 +0300
Subject: [PATCH 02/11] chore():

---
 .../pages/edit-profile/update-profile-mutation-cache.ts     | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/extensions/apps/profile/src/components/pages/edit-profile/update-profile-mutation-cache.ts b/extensions/apps/profile/src/components/pages/edit-profile/update-profile-mutation-cache.ts
index 38703f274d..2df35d4fe5 100644
--- a/extensions/apps/profile/src/components/pages/edit-profile/update-profile-mutation-cache.ts
+++ b/extensions/apps/profile/src/components/pages/edit-profile/update-profile-mutation-cache.ts
@@ -14,15 +14,11 @@ export async function updateProfileMutationCache({ cache, profileDID, data }: IU
     id: profileDID,
   };
 
-  console.log(data, 'before cache update');
-
-  const result = cache.updateQuery<GetProfileByDidQuery>(
+  cache.updateQuery<GetProfileByDidQuery>(
     {
       query: GetProfileByDidDocument,
       variables,
     },
     profileQuery => ({ node: { ...profileQuery.node, akashaProfile: { ...data } } }),
   );
-
-  console.log(result.node, 'after cache update');
 }

From 46bef6471b22a3059893d423fb45d5aebc15723c Mon Sep 17 00:00:00 2001
From: Didd <didd.tuni@akasha.world>
Date: Wed, 20 Nov 2024 22:35:20 +0300
Subject: [PATCH 03/11] chore():

---
 .../info-page/sub-pages/dev-info-page.tsx     |  3 ++-
 .../default-extensions-list.tsx               |  1 +
 .../installed-extensions-list.tsx             |  3 ++-
 .../src/components/AppList/index.tsx          |  2 ++
 .../src/components/AppCoverImage/index.tsx    | 21 +++++++++++++++++++
 .../src/components/ExtensionCard/index.tsx    | 17 ++++++++++++---
 .../src/components/Pill/index.tsx             |  2 ++
 7 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/extensions/apps/extensions/src/components/pages/info-page/sub-pages/dev-info-page.tsx b/extensions/apps/extensions/src/components/pages/info-page/sub-pages/dev-info-page.tsx
index 715fabe260..e38c28f2d9 100644
--- a/extensions/apps/extensions/src/components/pages/info-page/sub-pages/dev-info-page.tsx
+++ b/extensions/apps/extensions/src/components/pages/info-page/sub-pages/dev-info-page.tsx
@@ -117,7 +117,8 @@ export const DevInfoPage = (props: DevInfoPageProps) => {
               }
             : null,
           description: app?.description,
-          default: t('Default'),
+          defaultLabel: t('Default'),
+          nsfwLabel: t('NSFW'),
           nsfw: app?.nsfw,
           action: <Button onClick={handleAppOpen(app.name)} label={t('Open')} />,
         })),
diff --git a/extensions/apps/extensions/src/components/pages/installed-extensions/default-extensions-list.tsx b/extensions/apps/extensions/src/components/pages/installed-extensions/default-extensions-list.tsx
index fb0dea209b..41360dd7de 100644
--- a/extensions/apps/extensions/src/components/pages/installed-extensions/default-extensions-list.tsx
+++ b/extensions/apps/extensions/src/components/pages/installed-extensions/default-extensions-list.tsx
@@ -58,6 +58,7 @@ export const DefaultExtensionsList = () => {
     description: app?.description,
     nsfw: app?.nsfw,
     defaultLabel: t('Default'),
+    nsfwLabel: t('NSFW'),
     isDefaultWorldExtension: true,
     action: (
       <Button variant="secondary" label={t('Open')} onClick={() => handleAppClick(app.name)} />
diff --git a/extensions/apps/extensions/src/components/pages/installed-extensions/installed-extensions-list.tsx b/extensions/apps/extensions/src/components/pages/installed-extensions/installed-extensions-list.tsx
index 66d07e0134..949a1c494a 100644
--- a/extensions/apps/extensions/src/components/pages/installed-extensions/installed-extensions-list.tsx
+++ b/extensions/apps/extensions/src/components/pages/installed-extensions/installed-extensions-list.tsx
@@ -69,7 +69,8 @@ export const InstalledExtensionsList = () => {
       : null,
     description: ext?.description,
     nsfw: ext?.nsfw,
-    default: t('Default'),
+    defaultLabel: t('Default'),
+    nsfwLabel: t('NSFW'),
     action: (
       <Button variant="secondary" label={t('Open')} onClick={() => handleAppClick(ext.name)} />
     ),
diff --git a/libs/design-system-components/src/components/AppList/index.tsx b/libs/design-system-components/src/components/AppList/index.tsx
index c957881792..c2cb060eca 100644
--- a/libs/design-system-components/src/components/AppList/index.tsx
+++ b/libs/design-system-components/src/components/AppList/index.tsx
@@ -53,6 +53,7 @@ const AppList: React.FC<AppListProps> = ({
           description,
           action,
           defaultLabel,
+          nsfwLabel,
           isDefaultWorldExtension,
           nsfw,
           featured,
@@ -68,6 +69,7 @@ const AppList: React.FC<AppListProps> = ({
             nsfw={nsfw}
             featured={featured || apps.length === 1}
             defaultLabel={defaultLabel}
+            nsfwLabel={nsfwLabel}
             isDefaultWorldExtension={isDefaultWorldExtension}
             customStyle="h-full"
           />
diff --git a/libs/design-system-core/src/components/AppCoverImage/index.tsx b/libs/design-system-core/src/components/AppCoverImage/index.tsx
index d0baba4f39..db6b298f15 100644
--- a/libs/design-system-core/src/components/AppCoverImage/index.tsx
+++ b/libs/design-system-core/src/components/AppCoverImage/index.tsx
@@ -1,9 +1,13 @@
 import React, { useMemo } from 'react';
+import Stack from '../Stack';
+import Icon from '../Icon';
 import { AkashaAppApplicationType } from '@akashaorg/typings/lib/sdk/graphql-types-new';
+import { EyeSlashIcon } from '../Icon/hero-icons-outline';
 
 export type AppCoverImageProps = {
   src?: string;
   appType?: string;
+  isNSFW?: boolean;
   publicImgPath?: string;
   customStyle?: string;
 };
@@ -11,6 +15,7 @@ export type AppCoverImageProps = {
 const AppCoverImage = (props: AppCoverImageProps) => {
   const {
     src,
+    isNSFW,
     publicImgPath = '/images',
     appType = AkashaAppApplicationType.App,
     customStyle,
@@ -41,6 +46,22 @@ const AppCoverImage = (props: AppCoverImageProps) => {
     }
   }, [appType]);
 
+  if (isNSFW) {
+    return (
+      <Stack
+        align="center"
+        justify="center"
+        background={{ light: 'grey9', dark: 'grey5' }}
+        customStyle={customStyle}
+        fullWidth
+      >
+        {isNSFW && (
+          <Icon icon={<EyeSlashIcon />} color={{ light: 'errorLight', dark: 'errorDark' }} />
+        )}
+      </Stack>
+    );
+  }
+
   return (
     <picture className={`w-full overflow-hidden ${customStyle}`}>
       {src && <source srcSet={src} />}
diff --git a/libs/design-system-core/src/components/ExtensionCard/index.tsx b/libs/design-system-core/src/components/ExtensionCard/index.tsx
index 21dab257d7..2a853d3e7e 100644
--- a/libs/design-system-core/src/components/ExtensionCard/index.tsx
+++ b/libs/design-system-core/src/components/ExtensionCard/index.tsx
@@ -23,6 +23,7 @@ export type ExtensionCardProps = {
   };
   description: string;
   defaultLabel?: string;
+  nsfwLabel?: string;
   isDefaultWorldExtension?: boolean;
   nsfw?: boolean;
   featured?: boolean;
@@ -38,6 +39,7 @@ const ExtensionCard: React.FC<ExtensionCardProps> = props => {
     author,
     description,
     defaultLabel,
+    nsfwLabel,
     isDefaultWorldExtension = false,
     nsfw,
     featured,
@@ -51,6 +53,7 @@ const ExtensionCard: React.FC<ExtensionCardProps> = props => {
         <AppCoverImage
           src={coverImageSrc}
           appType={applicationType}
+          isNSFW={nsfw}
           customStyle={`${featured ? 'h-[9.625rem]' : 'h-[6.25rem]'} object-cover rounded-[0.625rem]`}
         />
         <Stack spacing="gap-y-3">
@@ -62,12 +65,11 @@ const ExtensionCard: React.FC<ExtensionCardProps> = props => {
             <Pill
               color={{ light: 'secondaryLight', dark: 'white' }}
               background={{ light: 'tertiaryLight', dark: 'tertiaryDark' }}
-              icon={<ExtensionIcon type={applicationType} />}
+              icon={<ExtensionIcon type={applicationType} size="xs" />}
               weight="normal"
               size="xs"
               label={applicationType}
               type="info"
-              customStyle="w-fit"
             />
             {isDefaultWorldExtension && (
               <Pill
@@ -77,7 +79,16 @@ const ExtensionCard: React.FC<ExtensionCardProps> = props => {
                 size="xs"
                 label={defaultLabel}
                 type="info"
-                customStyle="w-fit"
+              />
+            )}
+            {nsfw && (
+              <Pill
+                color={{ light: 'errorLight', dark: 'white' }}
+                background={{ light: 'errorFade', dark: 'errorDark' }}
+                weight="normal"
+                size="xs"
+                label={nsfwLabel}
+                type="info"
               />
             )}
           </Stack>
diff --git a/libs/design-system-core/src/components/Pill/index.tsx b/libs/design-system-core/src/components/Pill/index.tsx
index f5ada72ff5..a6b28e6ac0 100644
--- a/libs/design-system-core/src/components/Pill/index.tsx
+++ b/libs/design-system-core/src/components/Pill/index.tsx
@@ -78,8 +78,10 @@ const Pill: React.FC<PillProps> = props => {
     const borderStyle = borderColor ? `border ${getColorClasses(borderColor, 'border')}` : '';
     return (
       <Stack
+        direction="row"
         align="center"
         justify="center"
+        spacing="gap-x-1"
         background={background}
         customStyle={`${PILL_SIZE_MAP[size]} ${borderStyle} ${customStyle}`}
       >

From 1ac662e0d08a3d794d27580dc02ed98734e8bfb5 Mon Sep 17 00:00:00 2001
From: Didd <didd.tuni@akasha.world>
Date: Wed, 20 Nov 2024 22:47:07 +0300
Subject: [PATCH 04/11] chore():

---
 .../apps/extensions/src/components/explore.tsx      |  1 +
 .../extensions/src/components/pages/explore.tsx     | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/extensions/apps/extensions/src/components/explore.tsx b/extensions/apps/extensions/src/components/explore.tsx
index 77220ef9aa..64dd255a4d 100644
--- a/extensions/apps/extensions/src/components/explore.tsx
+++ b/extensions/apps/extensions/src/components/explore.tsx
@@ -40,6 +40,7 @@ export const Explore: React.FC<TExploreProps> = props => {
           coverImageSrc={popularExtensions[0]?.coverImageSrc}
           displayName={popularExtensions[0]?.displayName}
           applicationType={popularExtensions[0]?.applicationType}
+          author={popularExtensions[0]?.author}
           description={popularExtensions[0]?.description}
           featured={true}
           action={popularExtensions[0]?.action}
diff --git a/extensions/apps/extensions/src/components/pages/explore.tsx b/extensions/apps/extensions/src/components/pages/explore.tsx
index 0af4bbbad5..3ce9922015 100644
--- a/extensions/apps/extensions/src/components/pages/explore.tsx
+++ b/extensions/apps/extensions/src/components/pages/explore.tsx
@@ -3,7 +3,7 @@ import Button from '@akashaorg/design-system-core/lib/components/Button';
 import routes, { DEVELOPER_MODE, EXTENSIONS } from '../../routes';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from '@tanstack/react-router';
-import { useRootComponentProps } from '@akashaorg/ui-awf-hooks';
+import { transformSource, useRootComponentProps } from '@akashaorg/ui-awf-hooks';
 import { ArrowLongRightIcon } from '@heroicons/react/24/outline';
 import { Explore } from '../explore';
 import { AkashaAppApplicationType } from '@akashaorg/typings/lib/sdk/graphql-types-new';
@@ -47,6 +47,17 @@ export const ExplorePage: React.FC<unknown> = () => {
     {
       id: '',
       coverImageSrc: null,
+      author: {
+        profileDID: 'k2t6wzhkhabz1ftv1zfwnlrzcz5yyg0fxyf580fkvzr22g8ra8fa8y7hpdz0jc',
+        name: 'AKASHA',
+        alternativeAvatars: null,
+        avatar: transformSource({
+          src: 'ipfs://bafkreidk5aoxy2bde5nc6w4l6slxos3lbj5n75y766irlrb7vnfxgv4hwu',
+          width: 192,
+          height: 192,
+        }),
+        nsfw: false,
+      },
       displayName: t('Vibes Console'),
       description: `${t("Dive into AKASHA WORLD's Vibes Console!")} 💫 ${t("Your spot to become a moderator, explore applicants, and curate content. Together, let's shape our vibrant community!")} 🌟🔍✨`,
       applicationType: AkashaAppApplicationType.App,

From b0c1c834c50ab258c4fb4b28986ce2367b2e3589 Mon Sep 17 00:00:00 2001
From: Didd <didd.tuni@akasha.world>
Date: Mon, 25 Nov 2024 09:44:30 +0300
Subject: [PATCH 05/11] chore(): add storybook and extensionTypeLabel prop to
 ExtensionCard

---
 .../extensions/src/components/explore.tsx     |  8 +-
 .../src/components/extensions-hub.tsx         |  2 +-
 .../src/components/pages/explore.tsx          |  4 +
 .../components/pages/info-page/info-page.tsx  | 22 +----
 .../info-page/sub-pages/dev-info-page.tsx     |  4 +
 .../default-extensions-list.tsx               |  4 +
 .../installed-extensions-list.tsx             |  4 +
 .../extensions/src/utils/extension-utils.tsx  | 21 ++++-
 .../src/components/AppList/index.tsx          |  6 +-
 .../src/components/ExtensionCard/index.tsx    | 27 +++---
 .../stories/dscomponents/app-list.stories.tsx |  9 +-
 .../dscomponents/extension-card.stories.tsx   | 92 +++++++++++++++++++
 .../src/stories/dscore/avatar.stories.tsx     |  1 +
 .../src/utils/generate-avatar-classes.ts      |  2 +
 14 files changed, 167 insertions(+), 39 deletions(-)
 rename libs/{design-system-core => design-system-components}/src/components/ExtensionCard/index.tsx (79%)
 create mode 100644 libs/design-system-components/src/stories/dscomponents/extension-card.stories.tsx

diff --git a/extensions/apps/extensions/src/components/explore.tsx b/extensions/apps/extensions/src/components/explore.tsx
index 64dd255a4d..6e7feeb95d 100644
--- a/extensions/apps/extensions/src/components/explore.tsx
+++ b/extensions/apps/extensions/src/components/explore.tsx
@@ -6,8 +6,10 @@ import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
 import ExtensionCard, {
   ExtensionCardProps,
-} from '@akashaorg/design-system-core/lib/components/ExtensionCard';
+} from '@akashaorg/design-system-components/lib/components/ExtensionCard';
 import { ReactNode } from '@tanstack/react-router';
+import { useTranslation } from 'react-i18next';
+import { getExtensionTypeLabel } from '../utils/extension-utils';
 
 export type TExploreProps = {
   titleLabel: string;
@@ -31,6 +33,7 @@ export const Explore: React.FC<TExploreProps> = props => {
     cta,
     onViewAllClick,
   } = props;
+  const { t } = useTranslation('app-extensions');
 
   return (
     <Stack spacing="gap-y-4" customStyle="mb-2">
@@ -40,6 +43,9 @@ export const Explore: React.FC<TExploreProps> = props => {
           coverImageSrc={popularExtensions[0]?.coverImageSrc}
           displayName={popularExtensions[0]?.displayName}
           applicationType={popularExtensions[0]?.applicationType}
+          extensionTypeLabel={t('{{extensionTypeLabel}}', {
+            extensionTypeLabel: getExtensionTypeLabel(popularExtensions[0]?.applicationType),
+          })}
           author={popularExtensions[0]?.author}
           description={popularExtensions[0]?.description}
           featured={true}
diff --git a/extensions/apps/extensions/src/components/extensions-hub.tsx b/extensions/apps/extensions/src/components/extensions-hub.tsx
index 354728e289..95661130f6 100644
--- a/extensions/apps/extensions/src/components/extensions-hub.tsx
+++ b/extensions/apps/extensions/src/components/extensions-hub.tsx
@@ -4,7 +4,7 @@ import Card from '@akashaorg/design-system-core/lib/components/Card';
 import Image from '@akashaorg/design-system-core/lib/components/Image';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
-import { ExtensionCardProps } from '@akashaorg/design-system-core/lib/components/ExtensionCard';
+import { ExtensionCardProps } from '@akashaorg/design-system-components/lib/components/ExtensionCard';
 
 export type TExtensionsHubProps = {
   titleLabel: string;
diff --git a/extensions/apps/extensions/src/components/pages/explore.tsx b/extensions/apps/extensions/src/components/pages/explore.tsx
index 3ce9922015..c135f69590 100644
--- a/extensions/apps/extensions/src/components/pages/explore.tsx
+++ b/extensions/apps/extensions/src/components/pages/explore.tsx
@@ -7,6 +7,7 @@ import { transformSource, useRootComponentProps } from '@akashaorg/ui-awf-hooks'
 import { ArrowLongRightIcon } from '@heroicons/react/24/outline';
 import { Explore } from '../explore';
 import { AkashaAppApplicationType } from '@akashaorg/typings/lib/sdk/graphql-types-new';
+import { getExtensionTypeLabel } from '../../utils/extension-utils';
 
 export const ExplorePage: React.FC<unknown> = () => {
   const navigate = useNavigate();
@@ -87,6 +88,9 @@ export const ExplorePage: React.FC<unknown> = () => {
       popularExtensionsLabel={t('Popular Extensions')}
       popularExtensions={popularExtensions.map(ext => ({
         ...ext,
+        extensionTypeLabel: t('{{extensionTypeLabel}}', {
+          extensionTypeLabel: getExtensionTypeLabel(ext?.applicationType),
+        }),
         action: (
           <Button
             variant={isInstalled ? 'secondary' : 'primary'}
diff --git a/extensions/apps/extensions/src/components/pages/info-page/info-page.tsx b/extensions/apps/extensions/src/components/pages/info-page/info-page.tsx
index 035b8954f6..8897a68b1f 100644
--- a/extensions/apps/extensions/src/components/pages/info-page/info-page.tsx
+++ b/extensions/apps/extensions/src/components/pages/info-page/info-page.tsx
@@ -28,12 +28,12 @@ import Icon from '@akashaorg/design-system-core/lib/components/Icon';
 import CopyToClipboard from '@akashaorg/design-system-core/lib/components/CopyToClipboard';
 import ProfileAvatarButton from '@akashaorg/design-system-core/lib/components/ProfileAvatarButton';
 import Pill from '@akashaorg/design-system-core/lib/components/Pill';
-import { AkashaAppApplicationType } from '@akashaorg/typings/lib/sdk/graphql-types-new';
 import { useInstalledExtensions } from '@akashaorg/ui-awf-hooks/lib/use-installed-extensions';
 import { UninstallModal } from './uninstall-modal';
 import AppCoverImage from './AppCoverImage';
 import StackedAvatar from '@akashaorg/design-system-core/lib/components/StackedAvatar';
 import { AppInfoNotificationCards } from '@akashaorg/design-system-components/lib/components/AppInfo/notification-cards';
+import { getExtensionTypeLabel } from '../../../utils/extension-utils';
 
 type InfoPageProps = {
   appId: string;
@@ -150,22 +150,6 @@ export const InfoPage: React.FC<InfoPageProps> = ({ appId }) => {
   const appData = selectAkashaApp(appReq.data);
   const latestRelease = useMemo(() => selectLatestRelease(appReq.data), [appReq.data]);
 
-  const extensionTypeLabel = useMemo(() => {
-    if (!appData?.applicationType) {
-      return '';
-    }
-    switch (appData.applicationType) {
-      case AkashaAppApplicationType.App:
-        return t('App');
-      case AkashaAppApplicationType.Plugin:
-        return t('Plugin');
-      case AkashaAppApplicationType.Widget:
-        return t('Widget');
-      default:
-        return t('Other');
-    }
-  }, [appData?.applicationType, t]);
-
   const coverImageSrc = useMemo(() => {
     if (appData?.coverImage?.src) {
       return transformSource(appData.coverImage)?.src;
@@ -228,7 +212,9 @@ export const InfoPage: React.FC<InfoPageProps> = ({ appId }) => {
                   }}
                   nsfw={appData.nsfw}
                   nsfwLabel={'NSFW'}
-                  extensionTypeLabel={extensionTypeLabel}
+                  extensionTypeLabel={t('{{extensionTypeLabel}}', {
+                    extensionTypeLabel: getExtensionTypeLabel(appData?.applicationType),
+                  })}
                   share={{ label: t('Share'), icon: <ShareIcon /> }}
                   report={{
                     label: t('Flag'),
diff --git a/extensions/apps/extensions/src/components/pages/info-page/sub-pages/dev-info-page.tsx b/extensions/apps/extensions/src/components/pages/info-page/sub-pages/dev-info-page.tsx
index e38c28f2d9..d88585f11b 100644
--- a/extensions/apps/extensions/src/components/pages/info-page/sub-pages/dev-info-page.tsx
+++ b/extensions/apps/extensions/src/components/pages/info-page/sub-pages/dev-info-page.tsx
@@ -20,6 +20,7 @@ import Spinner from '@akashaorg/design-system-core/lib/components/Spinner';
 import { NetworkStatus } from '@apollo/client';
 import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
 import DefaultEmptyCard from '@akashaorg/design-system-components/lib/components/DefaultEmptyCard';
+import { getExtensionTypeLabel } from '../../../../utils/extension-utils';
 
 type DevInfoPageProps = {
   devDid: string;
@@ -105,6 +106,9 @@ export const DevInfoPage = (props: DevInfoPageProps) => {
           coverImageSrc: app?.coverImage?.src,
           displayName: app?.displayName,
           applicationType: app?.applicationType,
+          extensionTypeLabel: t('{{extensionTypeLabel}}', {
+            extensionTypeLabel: getExtensionTypeLabel(app?.applicationType),
+          }),
           author: app.author
             ? {
                 profileDID: app.author?.akashaProfile?.did?.id,
diff --git a/extensions/apps/extensions/src/components/pages/installed-extensions/default-extensions-list.tsx b/extensions/apps/extensions/src/components/pages/installed-extensions/default-extensions-list.tsx
index 41360dd7de..a9e7355a14 100644
--- a/extensions/apps/extensions/src/components/pages/installed-extensions/default-extensions-list.tsx
+++ b/extensions/apps/extensions/src/components/pages/installed-extensions/default-extensions-list.tsx
@@ -12,6 +12,7 @@ import { selectApps } from '@akashaorg/ui-awf-hooks/lib/selectors/get-apps-by-pu
 import { useTranslation } from 'react-i18next';
 import { SortOrder } from '@akashaorg/typings/lib/sdk/graphql-types-new';
 import { useNavigate } from '@tanstack/react-router';
+import { getExtensionTypeLabel } from '../../../utils/extension-utils';
 
 export const DefaultExtensionsList = () => {
   const { t } = useTranslation('app-extensions');
@@ -44,6 +45,9 @@ export const DefaultExtensionsList = () => {
     coverImageSrc: app?.coverImage?.src,
     displayName: app?.displayName,
     applicationType: app?.applicationType,
+    extensionTypeLabel: t('{{extensionTypeLabel}}', {
+      extensionTypeLabel: getExtensionTypeLabel(app?.applicationType),
+    }),
     author: app.author
       ? {
           profileDID: app.author?.akashaProfile?.did?.id,
diff --git a/extensions/apps/extensions/src/components/pages/installed-extensions/installed-extensions-list.tsx b/extensions/apps/extensions/src/components/pages/installed-extensions/installed-extensions-list.tsx
index 949a1c494a..548b6fa9bd 100644
--- a/extensions/apps/extensions/src/components/pages/installed-extensions/installed-extensions-list.tsx
+++ b/extensions/apps/extensions/src/components/pages/installed-extensions/installed-extensions-list.tsx
@@ -15,6 +15,7 @@ import {
 } from '@akashaorg/ui-awf-hooks/lib/use-installed-extensions';
 import { transformSource, useAkashaStore, useRootComponentProps } from '@akashaorg/ui-awf-hooks';
 import { useNavigate } from '@tanstack/react-router';
+import { getExtensionTypeLabel } from '../../../utils/extension-utils';
 
 const PUBLIC_IMAGE_PATH = '/images';
 
@@ -58,6 +59,9 @@ export const InstalledExtensionsList = () => {
     coverImageSrc: ext?.coverImage?.src,
     displayName: ext?.displayName,
     applicationType: ext?.applicationType,
+    extensionTypeLabel: t('{{extensionTypeLabel}}', {
+      extensionTypeLabel: getExtensionTypeLabel(ext?.applicationType),
+    }),
     author: ext.author
       ? {
           profileDID: ext.author?.did?.id,
diff --git a/extensions/apps/extensions/src/utils/extension-utils.tsx b/extensions/apps/extensions/src/utils/extension-utils.tsx
index c9df78e8cd..91575418b0 100644
--- a/extensions/apps/extensions/src/utils/extension-utils.tsx
+++ b/extensions/apps/extensions/src/utils/extension-utils.tsx
@@ -1,4 +1,7 @@
-import { AkashaAppsStreamModerationStatus } from '@akashaorg/typings/lib/sdk/graphql-types-new';
+import {
+  AkashaAppApplicationType,
+  AkashaAppsStreamModerationStatus,
+} from '@akashaorg/typings/lib/sdk/graphql-types-new';
 import { ExtensionStatus } from '@akashaorg/typings/lib/ui';
 
 export const getExtensionStatus = (
@@ -35,3 +38,19 @@ export const getStatusIndicatorStyle = (
       return 'bg-grey6';
   }
 };
+
+export const getExtensionTypeLabel = (applicationType: AkashaAppApplicationType) => {
+  if (!applicationType) {
+    return '';
+  }
+  switch (applicationType) {
+    case AkashaAppApplicationType.App:
+      return 'App';
+    case AkashaAppApplicationType.Plugin:
+      return 'Plugin';
+    case AkashaAppApplicationType.Widget:
+      return 'Widget';
+    default:
+      return 'Other';
+  }
+};
diff --git a/libs/design-system-components/src/components/AppList/index.tsx b/libs/design-system-components/src/components/AppList/index.tsx
index c2cb060eca..0068e26e2f 100644
--- a/libs/design-system-components/src/components/AppList/index.tsx
+++ b/libs/design-system-components/src/components/AppList/index.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import DynamicInfiniteScroll, { DynamicInfiniteScrollProps } from '../DynamicInfiniteScroll';
-import ExtensionCard, {
-  ExtensionCardProps,
-} from '@akashaorg/design-system-core/lib/components/ExtensionCard';
+import ExtensionCard, { ExtensionCardProps } from '../ExtensionCard';
 
 export type AppListProps = {
   apps: ExtensionCardProps[];
@@ -49,6 +47,7 @@ const AppList: React.FC<AppListProps> = ({
           coverImageSrc,
           displayName,
           applicationType,
+          extensionTypeLabel,
           author,
           description,
           action,
@@ -63,6 +62,7 @@ const AppList: React.FC<AppListProps> = ({
             coverImageSrc={coverImageSrc}
             displayName={displayName}
             applicationType={applicationType}
+            extensionTypeLabel={extensionTypeLabel}
             author={author}
             description={description}
             action={action}
diff --git a/libs/design-system-core/src/components/ExtensionCard/index.tsx b/libs/design-system-components/src/components/ExtensionCard/index.tsx
similarity index 79%
rename from libs/design-system-core/src/components/ExtensionCard/index.tsx
rename to libs/design-system-components/src/components/ExtensionCard/index.tsx
index 2a853d3e7e..d7361cc43b 100644
--- a/libs/design-system-core/src/components/ExtensionCard/index.tsx
+++ b/libs/design-system-components/src/components/ExtensionCard/index.tsx
@@ -1,24 +1,25 @@
 import React, { ReactNode } from 'react';
-import Stack from '../Stack';
-import Card from '../Card';
-import AppCoverImage from '../AppCoverImage';
-import Text from '../Text';
-import Pill from '../Pill';
-import DidField from '../DidField';
-import Avatar from '../Avatar';
-import ProfileNameField from '../ProfileNameField';
-import ExtensionIcon from '../ExtensionIcon';
+import Stack from '@akashaorg/design-system-core/lib/components/Stack';
+import Card from '@akashaorg/design-system-core/lib/components/Card';
+import AppCoverImage from '@akashaorg/design-system-core/lib/components/AppCoverImage';
+import Text from '@akashaorg/design-system-core/lib/components/Text';
+import Pill from '@akashaorg/design-system-core/lib/components/Pill';
+import DidField from '@akashaorg/design-system-core/lib/components/DidField';
+import Avatar from '@akashaorg/design-system-core/lib/components/Avatar';
+import ProfileNameField from '@akashaorg/design-system-core/lib/components/ProfileNameField';
+import ExtensionIcon from '@akashaorg/design-system-core/lib/components/ExtensionIcon';
 import { Extension, Image } from '@akashaorg/typings/lib/ui';
 
 export type ExtensionCardProps = {
   coverImageSrc: string;
   displayName: string;
   applicationType: Extension['applicationType'];
+  extensionTypeLabel: string;
   author?: {
     profileDID: string;
     name: string;
-    alternativeAvatars: Image[];
-    avatar: Image;
+    avatar?: Image;
+    alternativeAvatars?: Image[];
     nsfw?: boolean;
   };
   description: string;
@@ -36,6 +37,7 @@ const ExtensionCard: React.FC<ExtensionCardProps> = props => {
     coverImageSrc,
     displayName,
     applicationType,
+    extensionTypeLabel,
     author,
     description,
     defaultLabel,
@@ -68,7 +70,7 @@ const ExtensionCard: React.FC<ExtensionCardProps> = props => {
               icon={<ExtensionIcon type={applicationType} size="xs" />}
               weight="normal"
               size="xs"
-              label={applicationType}
+              label={extensionTypeLabel}
               type="info"
             />
             {isDefaultWorldExtension && (
@@ -94,7 +96,6 @@ const ExtensionCard: React.FC<ExtensionCardProps> = props => {
           </Stack>
           <Stack direction="row" align="center" spacing="gap-x-1">
             <Avatar
-              size="xs"
               avatar={author?.avatar}
               alternativeAvatars={author?.alternativeAvatars}
               profileId={author?.profileDID}
diff --git a/libs/design-system-components/src/stories/dscomponents/app-list.stories.tsx b/libs/design-system-components/src/stories/dscomponents/app-list.stories.tsx
index 7e19341bf3..d93e45f246 100644
--- a/libs/design-system-components/src/stories/dscomponents/app-list.stories.tsx
+++ b/libs/design-system-components/src/stories/dscomponents/app-list.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
 import AppList, { AppListProps } from '../../components/AppList';
+import { AkashaAppApplicationType } from '@akashaorg/typings/lib/sdk/graphql-types-new';
 
 const meta: Meta<AppListProps> = {
   title: 'DSComponents/Extensions/AppList',
@@ -15,17 +16,21 @@ export const Default: Story = {
     apps: [
       {
         displayName: 'Supercarts',
+        applicationType: AkashaAppApplicationType.App,
+        extensionTypeLabel: 'App',
         description:
           'Play with your friends in AKASHA World and enjoy a couple of puzzle games or drawing games or any kind of game!',
         action: <Button label="Install" variant="primary" />,
-        logoImage: { src: 'https://placebeard.it/360x360', height: 360, width: 360 },
+        coverImageSrc: 'https://placebeard.it/640x480',
       },
       {
         displayName: 'Articles App',
+        applicationType: AkashaAppApplicationType.App,
+        extensionTypeLabel: 'App',
         description:
           'Read articles written by AKASHA community you can also write your own articles or collaborate with other authors!',
         action: <Button label="Install" variant="primary" />,
-        logoImage: { src: 'https://placebeard.it/360x360', height: 360, width: 360 },
+        coverImageSrc: 'https://placebeard.it/640x480',
       },
     ],
     onLoadMore: () => Promise.resolve({}),
diff --git a/libs/design-system-components/src/stories/dscomponents/extension-card.stories.tsx b/libs/design-system-components/src/stories/dscomponents/extension-card.stories.tsx
new file mode 100644
index 0000000000..85f856eb51
--- /dev/null
+++ b/libs/design-system-components/src/stories/dscomponents/extension-card.stories.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import Button from '@akashaorg/design-system-core/lib/components/Button';
+import type { Meta, StoryObj } from '@storybook/react';
+import ExtensionCard, { ExtensionCardProps } from '../../components/ExtensionCard';
+import { AkashaAppApplicationType } from '@akashaorg/typings/lib/sdk/graphql-types-new';
+
+const meta: Meta<ExtensionCardProps> = {
+  title: 'DSComponents/Cards/ExtensionCard',
+  component: ExtensionCard,
+};
+
+type Story = StoryObj<ExtensionCardProps>;
+
+export const Default: Story = {
+  args: {
+    displayName: 'Supercarts',
+    applicationType: AkashaAppApplicationType.App,
+    extensionTypeLabel: 'App',
+    author: {
+      profileDID: 'did:pkh:eip155:11155111:0xc2ccre32856a8d50c748d50a5991312d986208a8',
+      name: 'CoffeeLover',
+      avatar: { src: 'https://placebeard.it/360x360', height: 360, width: 360 },
+      alternativeAvatars: [{ src: 'https://placebeard.it/360x360', height: 360, width: 360 }],
+    },
+    description:
+      'Play with your friends in AKASHA World and enjoy a couple of puzzle games or drawing games or any kind of game!',
+    action: <Button label="Install" variant="primary" />,
+    coverImageSrc: 'https://placebeard.it/360x360',
+  },
+};
+
+export const FeaturedExtensionCard: Story = {
+  args: {
+    displayName: 'Supercarts',
+    applicationType: AkashaAppApplicationType.App,
+    extensionTypeLabel: 'App',
+    author: {
+      profileDID: 'did:pkh:eip155:11155111:0xc2ccre32856a8d50c748d50a5991312d986208a8',
+      name: 'CoffeeLover',
+      avatar: { src: 'https://placebeard.it/360x360', height: 360, width: 360 },
+      alternativeAvatars: [{ src: 'https://placebeard.it/360x360', height: 360, width: 360 }],
+    },
+    featured: true,
+    description:
+      'Play with your friends in AKASHA World and enjoy a couple of puzzle games or drawing games or any kind of game!',
+    action: <Button label="Install" variant="primary" />,
+    coverImageSrc: 'https://placebeard.it/360x360',
+  },
+};
+
+export const DefaultAppExtensionCard: Story = {
+  args: {
+    displayName: 'Supercarts',
+    applicationType: AkashaAppApplicationType.App,
+    extensionTypeLabel: 'App',
+    author: {
+      profileDID: 'did:pkh:eip155:11155111:0xc2ccre32856a8d50c748d50a5991312d986208a8',
+      name: 'CoffeeLover',
+      avatar: { src: 'https://placebeard.it/360x360', height: 360, width: 360 },
+      alternativeAvatars: [{ src: 'https://placebeard.it/360x360', height: 360, width: 360 }],
+    },
+    isDefaultWorldExtension: true,
+    defaultLabel: 'Default',
+    description:
+      'Play with your friends in AKASHA World and enjoy a couple of puzzle games or drawing games or any kind of game!',
+    action: <Button label="Install" variant="primary" />,
+    coverImageSrc: 'https://placebeard.it/360x360',
+  },
+};
+
+export const NSFWExtensionCard: Story = {
+  args: {
+    displayName: 'Supercarts',
+    applicationType: AkashaAppApplicationType.App,
+    extensionTypeLabel: 'App',
+    author: {
+      profileDID: 'did:pkh:eip155:11155111:0xc2ccre32856a8d50c748d50a5991312d986208a8',
+      name: 'CoffeeLover',
+      nsfw: true,
+      avatar: { src: 'https://placebeard.it/360x360', height: 360, width: 360 },
+      alternativeAvatars: [{ src: 'https://placebeard.it/360x360', height: 360, width: 360 }],
+    },
+    nsfw: true,
+    nsfwLabel: 'NSFW',
+    description:
+      'Play with your friends in AKASHA World and enjoy a couple of puzzle games or drawing games or any kind of game!',
+    action: <Button label="Install" variant="primary" />,
+    coverImageSrc: 'https://placebeard.it/360x360',
+  },
+};
+
+export default meta;
diff --git a/libs/design-system-components/src/stories/dscore/avatar.stories.tsx b/libs/design-system-components/src/stories/dscore/avatar.stories.tsx
index baef495ac9..63df4ecddf 100644
--- a/libs/design-system-components/src/stories/dscore/avatar.stories.tsx
+++ b/libs/design-system-components/src/stories/dscore/avatar.stories.tsx
@@ -43,6 +43,7 @@ export const NSFWAvatar: Story = {
   args: {
     profileId: 'did:pkh:eip155:5:0x36c703c4d22af437dc883e2e0884e57404e16493',
     avatar: { src: 'https://placebeard.it/360x360', height: 360, width: 360 },
+    size: 'xl',
     isNSFW: true,
   },
 };
diff --git a/libs/design-system-core/src/utils/generate-avatar-classes.ts b/libs/design-system-core/src/utils/generate-avatar-classes.ts
index 96bd2324fe..ee52b6141c 100644
--- a/libs/design-system-core/src/utils/generate-avatar-classes.ts
+++ b/libs/design-system-core/src/utils/generate-avatar-classes.ts
@@ -2,6 +2,7 @@ import { AvatarSize, AvatarBorderSize, AvatarBorderColor } from '../components/A
 import { Color } from '../components/types/common.types';
 
 export const avatarSizesMap = {
+  xxs: 'w-4 h-4',
   xs: 'w-6 h-6',
   sm: 'w-8 h-8',
   md: 'w-10 h-10',
@@ -11,6 +12,7 @@ export const avatarSizesMap = {
 };
 
 export const avatarBorderSizesMap = {
+  xxs: '1',
   xs: '1',
   sm: '2',
   md: '4',

From 404484012e0791de42e50fe5612bf955989d450c Mon Sep 17 00:00:00 2001
From: Didd <didd.tuni@akasha.world>
Date: Mon, 25 Nov 2024 09:46:47 +0300
Subject: [PATCH 06/11] chore(): add comment

---
 extensions/apps/extensions/src/components/pages/explore.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/extensions/apps/extensions/src/components/pages/explore.tsx b/extensions/apps/extensions/src/components/pages/explore.tsx
index c135f69590..3973290fc4 100644
--- a/extensions/apps/extensions/src/components/pages/explore.tsx
+++ b/extensions/apps/extensions/src/components/pages/explore.tsx
@@ -44,6 +44,7 @@ export const ExplorePage: React.FC<unknown> = () => {
     });
   };
 
+  //TODO: mock data
   const popularExtensions = [
     {
       id: '',

From 2dee2a4b2e4efb72fd03acbd116ee172cf9bc35c Mon Sep 17 00:00:00 2001
From: Didd <didd.tuni@akasha.world>
Date: Mon, 25 Nov 2024 09:58:32 +0300
Subject: [PATCH 07/11] chore(): remove stale file

---
 .../update-profile-mutation-cache.ts          | 24 -------------------
 1 file changed, 24 deletions(-)
 delete mode 100644 extensions/apps/profile/src/components/pages/edit-profile/update-profile-mutation-cache.ts

diff --git a/extensions/apps/profile/src/components/pages/edit-profile/update-profile-mutation-cache.ts b/extensions/apps/profile/src/components/pages/edit-profile/update-profile-mutation-cache.ts
deleted file mode 100644
index 2df35d4fe5..0000000000
--- a/extensions/apps/profile/src/components/pages/edit-profile/update-profile-mutation-cache.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { GetProfileByDidQuery } from '@akashaorg/typings/lib/sdk/graphql-operation-types-new';
-import { AkashaProfile } from '@akashaorg/typings/lib/ui';
-import { GetProfileByDidDocument } from '@akashaorg/ui-awf-hooks/lib/generated/apollo';
-import { ApolloCache } from '@apollo/client';
-
-interface IUpdateCache {
-  cache: ApolloCache<unknown>;
-  profileDID: string;
-  data: AkashaProfile;
-}
-
-export async function updateProfileMutationCache({ cache, profileDID, data }: IUpdateCache) {
-  const variables = {
-    id: profileDID,
-  };
-
-  cache.updateQuery<GetProfileByDidQuery>(
-    {
-      query: GetProfileByDidDocument,
-      variables,
-    },
-    profileQuery => ({ node: { ...profileQuery.node, akashaProfile: { ...data } } }),
-  );
-}

From d077e0c5250ed805c0ac0d0a74398c94738b4beb Mon Sep 17 00:00:00 2001
From: Didd <didd.tuni@akasha.world>
Date: Mon, 25 Nov 2024 10:06:53 +0300
Subject: [PATCH 08/11] chore(): revert typepolicy change

---
 libs/sdk/src/gql/index.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/libs/sdk/src/gql/index.ts b/libs/sdk/src/gql/index.ts
index 28ec2d9793..bc2fa15604 100644
--- a/libs/sdk/src/gql/index.ts
+++ b/libs/sdk/src/gql/index.ts
@@ -96,11 +96,6 @@ class Gql {
         CeramicAccount: {
           merge: true,
           fields: {
-            akashaProfile: {
-              merge(existing = {}, incoming) {
-                return { ...existing, ...incoming };
-              },
-            },
             akashaFollowList: relayStylePagination(['sorting', 'filters']),
             akashaBeamStreamList: relayStylePagination(['sorting', 'filters']),
             akashaReflectStreamList: relayStylePagination(['sorting', 'filters']),
@@ -108,6 +103,12 @@ class Gql {
             akashaAppList: relayStylePagination(['sorting', 'filters']),
           },
         },
+        AkashaProfile: {
+          merge: true,
+          fields: {
+            followers: relayStylePagination(['sorting', 'filters']),
+          },
+        },
         Query: {
           fields: {
             akashaBeamIndex: relayStylePagination(['sorting', 'filters']),

From 56bb40918a351c7d99223ca98283c98513ee49c9 Mon Sep 17 00:00:00 2001
From: Didd <didd.tuni@akasha.world>
Date: Mon, 25 Nov 2024 10:27:36 +0300
Subject: [PATCH 09/11] chore(): revert profile app changes

---
 .../src/components/app-routes/index.tsx       | 42 ++++++++-----------
 .../components/pages/edit-profile/index.tsx   | 14 ++++---
 .../src/components/profile-header/index.tsx   | 13 ++++--
 3 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/extensions/apps/profile/src/components/app-routes/index.tsx b/extensions/apps/profile/src/components/app-routes/index.tsx
index afdf1c3a0f..9ec57a82eb 100644
--- a/extensions/apps/profile/src/components/app-routes/index.tsx
+++ b/extensions/apps/profile/src/components/app-routes/index.tsx
@@ -52,13 +52,7 @@ const defaultRoute = createRoute({
 
 const profileInfoRoute = createRoute({
   getParentRoute: () => rootRoute,
-  path: '/$profileDID',
-  component: Outlet,
-});
-
-const profileInfoIndexRoute = createRoute({
-  getParentRoute: () => profileInfoRoute,
-  path: '/',
+  path: '$profileDID',
   loader: ({ context, params }) => {
     context.apolloClient.query({
       query: GetProfileByDidDocument,
@@ -80,8 +74,8 @@ const profileInfoIndexRoute = createRoute({
 });
 
 const profileEditRoute = createRoute({
-  getParentRoute: () => profileInfoRoute,
-  path: `${menuRoute[EDIT]}`,
+  getParentRoute: () => rootRoute,
+  path: `$profileDID${menuRoute[EDIT]}`,
   component: () => {
     const { profileDID } = profileEditRoute.useParams();
     return (
@@ -97,8 +91,8 @@ const profileEditRoute = createRoute({
 });
 
 const followersRoute = createRoute({
-  getParentRoute: () => profileInfoRoute,
-  path: `${menuRoute[FOLLOWERS]}`,
+  getParentRoute: () => rootRoute,
+  path: `$profileDID${menuRoute[FOLLOWERS]}`,
   loader: ({ context, params }) => {
     context.apolloClient.query({
       query: GetFollowersListByDidDocument,
@@ -124,8 +118,8 @@ const followersRoute = createRoute({
 });
 
 const followingRoute = createRoute({
-  getParentRoute: () => profileInfoRoute,
-  path: `${menuRoute[FOLLOWING]}`,
+  getParentRoute: () => rootRoute,
+  path: `$profileDID${menuRoute[FOLLOWING]}`,
   loader: ({ context, params }) => {
     context.apolloClient.query({
       query: GetFollowingListByDidDocument,
@@ -151,8 +145,8 @@ const followingRoute = createRoute({
 });
 
 const interestsRoute = createRoute({
-  getParentRoute: () => profileInfoRoute,
-  path: `${menuRoute[INTERESTS]}`,
+  getParentRoute: () => rootRoute,
+  path: `$profileDID${menuRoute[INTERESTS]}`,
   component: () => {
     const { profileDID } = interestsRoute.useParams();
     return (
@@ -167,8 +161,8 @@ const interestsRoute = createRoute({
 });
 
 const beamsRoute = createRoute({
-  getParentRoute: () => profileInfoRoute,
-  path: `${menuRoute[BEAMS]}`,
+  getParentRoute: () => rootRoute,
+  path: `$profileDID${menuRoute[BEAMS]}`,
   component: () => {
     const { profileDID } = beamsRoute.useParams();
     return (
@@ -184,14 +178,12 @@ const beamsRoute = createRoute({
 
 const routeTree = rootRoute.addChildren([
   defaultRoute,
-  profileInfoRoute.addChildren([
-    profileInfoIndexRoute,
-    profileEditRoute,
-    followersRoute,
-    followingRoute,
-    interestsRoute,
-    beamsRoute,
-  ]),
+  profileInfoRoute,
+  profileEditRoute,
+  followersRoute,
+  followingRoute,
+  interestsRoute,
+  beamsRoute,
 ]);
 
 export const router = ({ baseRouteName, apolloClient }: ICreateRouter) =>
diff --git a/extensions/apps/profile/src/components/pages/edit-profile/index.tsx b/extensions/apps/profile/src/components/pages/edit-profile/index.tsx
index 907500c80d..bad1d1d92f 100644
--- a/extensions/apps/profile/src/components/pages/edit-profile/index.tsx
+++ b/extensions/apps/profile/src/components/pages/edit-profile/index.tsx
@@ -21,7 +21,6 @@ import {
 } from '@akashaorg/typings/lib/ui';
 import { getAvatarImage, getCoverImage } from './get-profile-images';
 import { selectProfileData } from '@akashaorg/ui-awf-hooks/lib/selectors/get-profile-by-did-query';
-import { useNavigate } from '@tanstack/react-router';
 
 type EditProfilePageProps = {
   profileDID: string;
@@ -30,7 +29,7 @@ type EditProfilePageProps = {
 const EditProfilePage: React.FC<EditProfilePageProps> = props => {
   const { profileDID } = props;
   const { t } = useTranslation('app-profile');
-  const { logger, uiEvents } = useRootComponentProps();
+  const { getCorePlugins, logger, uiEvents } = useRootComponentProps();
   const {
     image: avatarImage,
     saveImage: saveAvatarImage,
@@ -44,7 +43,7 @@ const EditProfilePage: React.FC<EditProfilePageProps> = props => {
   const isSavingImage = isSavingAvatarImage || isSavingCoverImage;
   const [showNsfwModal, setShowNsfwModal] = useState(false);
   const [nsfwFormValues, setNsfwFormValues] = useState<PublishProfileData>();
-  const navigate = useNavigate();
+  const navigateTo = getCorePlugins().routing.navigateTo;
   const { data, error } = useGetProfileByDidSuspenseQuery({
     variables: { id: profileDID },
   });
@@ -88,7 +87,9 @@ const EditProfilePage: React.FC<EditProfilePageProps> = props => {
 
   const [createProfileMutation, { loading: createProfileProcessing }] = useCreateProfileMutation({
     context: { source: sdk.services.gql.contextSources.composeDB },
-    onCompleted: onSuccess,
+    onCompleted: () => {
+      onSuccess();
+    },
     onError: error => {
       onError();
       logger.error(`error in creating a profile: ${JSON.stringify(error)}`);
@@ -114,7 +115,10 @@ const EditProfilePage: React.FC<EditProfilePageProps> = props => {
     );
 
   const navigateToProfileInfoPage = () => {
-    navigate({ to: '/$profileDID', params: { profileDID } });
+    navigateTo({
+      appName: '@akashaorg/app-profile',
+      getNavigationUrl: () => `/${profileDID}`,
+    });
   };
 
   const createProfile = async (
diff --git a/extensions/apps/profile/src/components/profile-header/index.tsx b/extensions/apps/profile/src/components/profile-header/index.tsx
index b780a12bba..5106d589ac 100644
--- a/extensions/apps/profile/src/components/profile-header/index.tsx
+++ b/extensions/apps/profile/src/components/profile-header/index.tsx
@@ -1,4 +1,5 @@
 import React, { Suspense, useCallback, useMemo } from 'react';
+import routes, { EDIT } from '../../routes';
 import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
 import FollowProfileButton from '../follow-profile-button';
 import {
@@ -24,7 +25,6 @@ import {
 } from '@akashaorg/ui-awf-hooks';
 import { useGetProfileByDidSuspenseQuery } from '@akashaorg/ui-awf-hooks/lib/generated/apollo';
 import { selectProfileData } from '@akashaorg/ui-awf-hooks/lib/selectors/get-profile-by-did-query';
-import { useNavigate } from '@tanstack/react-router';
 
 type ProfileHeaderProps = {
   profileDID: string;
@@ -40,7 +40,6 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = props => {
     data: { authenticatedDID },
   } = useAkashaStore();
   const { uiEvents, navigateToModal, getCorePlugins } = useRootComponentProps();
-  const navigate = useNavigate();
 
   const { data, error } = useGetProfileByDidSuspenseQuery({
     fetchPolicy:
@@ -89,11 +88,17 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = props => {
   };
 
   const handleClickProfileName = () => {
-    navigate({ to: '/$profileDID', params: { profileDID } });
+    navigateTo({
+      appName: '@akashaorg/app-profile',
+      getNavigationUrl: () => `/${profileDID}`,
+    });
   };
 
   const handleEdit = () => {
-    navigate({ to: '/$profileDID/edit', params: { profileDID } });
+    navigateTo({
+      appName: '@akashaorg/app-profile',
+      getNavigationUrl: () => `/${profileDID}${routes[EDIT]}`,
+    });
   };
 
   const handleFlagProfile = () => {

From fc9a954150596fee1dac1c0cc5e622b39cb50839 Mon Sep 17 00:00:00 2001
From: Didd <didd.tuni@akasha.world>
Date: Mon, 25 Nov 2024 11:18:53 +0300
Subject: [PATCH 10/11] chore():

---
 .../src/components/ExtensionCard/index.tsx                  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/libs/design-system-components/src/components/ExtensionCard/index.tsx b/libs/design-system-components/src/components/ExtensionCard/index.tsx
index d7361cc43b..314c1d5f85 100644
--- a/libs/design-system-components/src/components/ExtensionCard/index.tsx
+++ b/libs/design-system-components/src/components/ExtensionCard/index.tsx
@@ -51,7 +51,7 @@ const ExtensionCard: React.FC<ExtensionCardProps> = props => {
 
   return (
     <Card elevation="1" padding={16} radius={20} customStyle={customStyle}>
-      <Stack spacing="gap-y-4">
+      <Stack spacing="gap-y-2">
         <AppCoverImage
           src={coverImageSrc}
           appType={applicationType}
@@ -113,7 +113,9 @@ const ExtensionCard: React.FC<ExtensionCardProps> = props => {
             />
             <DidField did={author?.profileDID} isValid={true} copiable={true} />
           </Stack>
-          <Text variant="body2">{description}</Text>
+          <Text variant="body2" {...(!featured && { lineClamp: 2 })}>
+            {description}
+          </Text>
         </Stack>
       </Stack>
     </Card>

From 93e3bc7deaa7ffebfeff1c5b7d3176e9c2f966ac Mon Sep 17 00:00:00 2001
From: Didd <didd.tuni@akasha.world>
Date: Mon, 25 Nov 2024 12:44:55 +0300
Subject: [PATCH 11/11] chore(): address design review

---
 .../src/components/ExtensionCard/index.tsx                    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/design-system-components/src/components/ExtensionCard/index.tsx b/libs/design-system-components/src/components/ExtensionCard/index.tsx
index 314c1d5f85..b4af7ed752 100644
--- a/libs/design-system-components/src/components/ExtensionCard/index.tsx
+++ b/libs/design-system-components/src/components/ExtensionCard/index.tsx
@@ -51,7 +51,7 @@ const ExtensionCard: React.FC<ExtensionCardProps> = props => {
 
   return (
     <Card elevation="1" padding={16} radius={20} customStyle={customStyle}>
-      <Stack spacing="gap-y-2">
+      <Stack spacing="gap-y-4">
         <AppCoverImage
           src={coverImageSrc}
           appType={applicationType}
@@ -94,7 +94,7 @@ const ExtensionCard: React.FC<ExtensionCardProps> = props => {
               />
             )}
           </Stack>
-          <Stack direction="row" align="center" spacing="gap-x-1">
+          <Stack direction="row" align="center" spacing="gap-x-2">
             <Avatar
               avatar={author?.avatar}
               alternativeAvatars={author?.alternativeAvatars}