Basic app logo fixes (#20919)

as title, took the quick win fixes from
https://github.com/twentyhq/twenty/pull/20909/changes#diff-3367344412b2f44f0273d8019c1bc36396198244b9558d02921b135f62522baaR180
and leave the main fix for later as it requires an architectural update

packages/twenty-front/src/modules/settings/config-variables/components/ConfigVariableEdit.tsx

@@ -9,7 +9,6 @@ import { SettingsPageContainer } from '@/settings/components/SettingsPageContain
 import { type Dispatch, type SetStateAction, useState } from 'react';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useModal } from '@/ui/layout/modal/hooks/useModal';
-import { SettingsSkeletonLoader } from '@/settings/components/SettingsSkeletonLoader';
 
 const RESET_VARIABLE_MODAL_ID =
   'reset-application-registration-config-variable-modal';

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx

@@ -6,7 +6,7 @@ import { useNavigationDrawerTooltip } from '@/ui/navigation/navigation-drawer/ho
 import { type NavigationDrawerSubItemState } from '@/ui/navigation/navigation-drawer/types/NavigationDrawerSubItemState';
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
+import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { isNonEmptyString } from '@sniptt/guards';
@@ -261,8 +261,9 @@ export const NavigationDrawerItem = ({
   const { theme } = useContext(ThemeContext);
   const isMobile = useIsMobile();
   const isExpanded = useNavigationDrawerExpanded();
-  const [isNavigationDrawerExpanded, setIsNavigationDrawerExpanded] =
-    useAtomState(isNavigationDrawerExpandedState);
+  const setIsNavigationDrawerExpanded = useSetAtomState(
+    isNavigationDrawerExpandedState,
+  );
 
   const { navigationItemId } = useNavigationDrawerTooltip(label, to);
 

packages/twenty-front/src/pages/settings/admin-panel/SettingsAdminApplicationRegistrationDetail.tsx

@@ -9,6 +9,7 @@ import { useApolloAdminClient } from '@/settings/admin-panel/apollo/hooks/useApo
 import { APPLICATION_REGISTRATION_ADMIN_PATH } from '@/settings/admin-panel/apps/constants/ApplicationRegistrationAdminPath';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import {
+  Avatar,
   IconInfoCircle,
   IconKey,
   IconSettings,
@@ -21,10 +22,18 @@ import { SettingsApplicationRegistrationGeneralTab } from '~/pages/settings/appl
 import { TabList } from '@/ui/layout/tab-list/components/TabList';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { styled } from '@linaria/react';
 
 const REGISTRATION_DETAIL_TAB_LIST_ID =
   'admin-application-registration-detail-tab-list';
 
+const StyledTitleContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${themeCssVariables.spacing[2]};
+`;
+
 export const SettingsAdminApplicationRegistrationDetail = () => {
   const { t } = useLingui();
   const apolloAdminClient = useApolloAdminClient();
@@ -94,7 +103,18 @@ export const SettingsAdminApplicationRegistrationDetail = () => {
 
   return (
     <SubMenuTopBarContainer
-      title={registration.name}
+      title={
+        <StyledTitleContainer>
+          <Avatar
+            type="app"
+            size="md"
+            avatarUrl={registration.logoUrl ?? undefined}
+            placeholder={registration.name}
+            placeholderColorSeed={registration.name}
+          />
+          {registration.name}
+        </StyledTitleContainer>
+      }
       links={[
         {
           children: t`Other`,

packages/twenty-front/src/pages/settings/applications/SettingsApplicationRegistrationDetails.tsx

@@ -9,6 +9,7 @@ import { Tag } from 'twenty-ui/components';
 import { TabList } from '@/ui/layout/tab-list/components/TabList';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import {
+  Avatar,
   IconInfoCircle,
   IconKey,
   IconSettings,
@@ -20,10 +21,18 @@ import { SettingsApplicationRegistrationDistributionTab } from '~/pages/settings
 import { SettingsApplicationRegistrationGeneralTab } from '~/pages/settings/applications/tabs/SettingsApplicationRegistrationGeneralTab';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
+import { styled } from '@linaria/react';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const REGISTRATION_DETAIL_TAB_LIST_ID =
   'application-registration-detail-tab-list';
 
+const StyledTitleContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${themeCssVariables.spacing[2]};
+`;
+
 export const SettingsApplicationRegistrationDetails = () => {
   const { t } = useLingui();
 
@@ -86,7 +95,18 @@ export const SettingsApplicationRegistrationDetails = () => {
 
   return (
     <SubMenuTopBarContainer
-      title={registration.name}
+      title={
+        <StyledTitleContainer>
+          <Avatar
+            type="app"
+            size="md"
+            avatarUrl={registration.logoUrl ?? undefined}
+            placeholder={registration.name}
+            placeholderColorSeed={registration.name}
+          />
+          {registration.name}
+        </StyledTitleContainer>
+      }
       tag={<Tag text={t`Owner`} color={'gray'} />}
       links={[
         {

packages/twenty-front/src/pages/settings/applications/tabs/SettingsApplicationsDeveloperTab.tsx

@@ -177,8 +177,8 @@ export const SettingsApplicationsDeveloperTab = () => {
             <TableRow
               gridTemplateColumns={APPLICATION_TABLE_ROW_GRID_TEMPLATE_COLUMNS}
             >
-              <TableHeader> {t`Name`}</TableHeader>
-              <TableHeader>{''}</TableHeader>
+              <TableHeader>{t`Name`}</TableHeader>
+              <TableHeader>{t`Type`}</TableHeader>
               <TableHeader>{''}</TableHeader>
               <TableHeader />
             </TableRow>
@@ -188,6 +188,7 @@ export const SettingsApplicationsDeveloperTab = () => {
                   <SettingsApplicationTableRow
                     key={registration.id}
                     application={registration}
+                    sourceType={registration.sourceType}
                     action={
                       <IconChevronRight
                         size={theme.icon.size.md}

packages/twenty-server/src/engine/core-modules/application/application-development/application-development.resolver.ts

@@ -302,10 +302,11 @@ export class ApplicationDevelopmentResolver {
         `${serverUrl}/public-assets/${workspaceId}/${applicationId}/${filePath}`,
     );
 
-    await this.applicationRegistrationService.updateFromManifest(
+    await this.applicationRegistrationService.updateFromManifest({
       applicationRegistrationId,
-      manifestWithResolvedUrls,
-    );
+      manifest: manifestWithResolvedUrls,
+      sourceType: ApplicationRegistrationSourceType.LOCAL,
+    });
 
     if (manifest.application.serverVariables) {
       await this.applicationRegistrationVariableService.syncVariableSchemas(

packages/twenty-server/src/engine/core-modules/application/application-registration/application-registration.service.ts

@@ -211,10 +211,15 @@ export class ApplicationRegistrationService {
     return this.findOneById(id, ownerWorkspaceId);
   }
 
-  async updateFromManifest(
-    applicationRegistrationId: string,
-    manifest: Manifest,
-  ): Promise<void> {
+  async updateFromManifest({
+    applicationRegistrationId,
+    manifest,
+    sourceType,
+  }: {
+    applicationRegistrationId: string;
+    manifest: Manifest;
+    sourceType?: ApplicationRegistrationSourceType;
+  }): Promise<void> {
     const existing = await this.applicationRegistrationRepository.findOneOrFail(
       { where: { id: applicationRegistrationId } },
     );
@@ -223,6 +228,7 @@ export class ApplicationRegistrationService {
       ...existing,
       name: manifest.application.displayName,
       manifest,
+      ...(sourceType !== undefined && { sourceType }),
     });
   }