feat: New navigation system

.github/workflows/ci.yml

@@ -3,7 +3,7 @@ name: CI
 on:
   pull_request:
     # we want to run the CI on every PR targetting those branches
-    branches: [master, dev, release/*]
+    branches: [master, dev, release/*, new-navigation]
 
   push:
     # We also run CI on dev in order to update the coverage monitoring

.github/workflows/publish.yml

@@ -61,6 +61,9 @@ jobs:
       - name: Install JS dependencies
         run: yarn --immutable
 
+      - name: Update configuration
+        run: yarn configure
+
       - name: Test
         run: |
           set -o pipefail
@@ -284,14 +287,11 @@ jobs:
           map: |
             {
               "dev": {
-                "targets": "[\"wire-webapp-dev\"]"
+                "targets": "[\"wire-webapp-dev\", \"wire-webapp-edge\"]"
               },
               "master": {
                 "targets": "[\"wire-webapp-main\"]"
               },
-              "new-navigation": {
-                "targets": "[\"wire-webapp-edge\"]"
-              },
               "production": {
                 "targets": "[\"wire-webapp-prod\"]"
               },

charts/webapp/values.yaml

@@ -2,11 +2,11 @@
 replicaCount: 1
 resources:
   requests:
-    memory: "128Mi"
-    cpu: "100m"
+    memory: '128Mi'
+    cpu: '100m'
   limits:
-    memory: "512Mi"
-    cpu: "1"
+    memory: '512Mi'
+    cpu: '1'
 image:
   repository: quay.io/wire/webapp
   # tag: override version defined in Chart.appVersion

server/config/client.config.ts

@@ -67,7 +67,7 @@
       SHOW_LOADING_INFORMATION: env.FEATURE_SHOW_LOADING_INFORMATION == 'true',
       USE_CORE_CRYPTO: env.FEATURE_USE_CORE_CRYPTO == 'true',
       MAX_USERS_TO_PING_WITHOUT_ALERT:
         (env.FEATURE_MAX_USERS_TO_PING_WITHOUT_ALERT && Number(env.FEATURE_MAX_USERS_TO_PING_WITHOUT_ALERT)) || 4,
     },
     MAX_GROUP_PARTICIPANTS: (env.MAX_GROUP_PARTICIPANTS && Number(env.MAX_GROUP_PARTICIPANTS)) || 500,
     MAX_VIDEO_PARTICIPANTS: (env.MAX_VIDEO_PARTICIPANTS && Number(env.MAX_VIDEO_PARTICIPANTS)) || 4,
@@ -96,6 +96,7 @@
         FEDERATION_STOP: env.URL_SUPPORT_FEDERATION_STOP,
         HISTORY: env.URL_SUPPORT_HISTORY,
         INDEX: env.URL_SUPPORT_INDEX,
+        FOLDERS: env.URL_SUPPORT_FOLDERS,
         LEARN_MORE_ABOUT_GUEST_LINKS: env.URL_LEARN_MORE_ABOUT_GUEST_LINKS,
         LEGAL_HOLD_BLOCK: env.URL_SUPPORT_LEGAL_HOLD_BLOCK,
         MICROPHONE_ACCESS_DENIED: env.URL_SUPPORT_MICROPHONE_ACCESS_DENIED,
@@ -108,6 +109,8 @@
         PRIVACY_WHY: env.URL_SUPPORT_PRIVACY_WHY,
         SCREEN_ACCESS_DENIED: env.URL_SUPPORT_SCREEN_ACCESS_DENIED,
         SYSTEM_KEYCHAIN_ACCESS: env.URL_SUPPORT_SYSTEM_KEYCHAIN_ACCESS,
+        URL_SUPPORT_FAVORITES: env.URL_SUPPORT_FAVORITES,
+        URL_SUPPORT_FOLDERS: env.URL_SUPPORT_FOLDERS,
       },
       TEAMS_BASE: env.URL_TEAMS_BASE,
       TEAMS_CREATE: env.URL_TEAMS_CREATE,

server/config/env.ts

@@ -227,6 +227,8 @@ export type Env = {
   /** Sets Support URLs to specific pages */
   URL_SUPPORT_INDEX: string;
 
+  URL_SUPPORT_FOLDERS: string;
+
   URL_SUPPORT_BUG_REPORT: string;
 
   URL_SUPPORT_CALLING: string;
@@ -255,6 +257,8 @@ export type Env = {
 
   URL_SUPPORT_SYSTEM_KEYCHAIN_ACCESS: string;
 
+  URL_SUPPORT_FAVORITES: string;
+
   URL_LEARN_MORE_ABOUT_GUEST_LINKS: string;
 
   URL_SUPPORT_NON_FEDERATING_INFO: string;

src/i18n/en-US.json

@@ -392,8 +392,10 @@
   "conversationAssetUploading": "Uploading…",
   "conversationAudioAssetRestricted": "Receiving audio messages is prohibited",
   "conversationButtonSeparator": "or",
-  "conversationClassified": "Security level: VS-NfD",
   "conversationConnectWithNewUsers": "Connect with People",
+  "conversationFavoritesTabEmptyMessage": "Select your favorite conversations, and you’ll find them here \uD83D\uDC4D",
+  "conversationGroupEmptyMessage": "You are not part of any group conversation yet.",
+  "conversationClassified": "Security level: VS-NfD",
   "conversationConnectionAccepted": "Connected",
   "conversationConnectionBlocked": "Blocked",
   "conversationConnectionCancelRequest": "Cancel connection request",
@@ -466,15 +468,13 @@
   "conversationDirectEmptyMessage": "You have no contacts yet. Search for people on {{brandName}} and get connected.",
   "conversationEditTimestamp": "Edited: {{date}}",
   "conversationFavoritesTabEmptyLinkText": "How to label conversations as favorites",
-  "conversationFavoritesTabEmptyMessage": "Select your favorite conversations, and you’ll find them here 👍",
   "conversationFederationIndicator": "Federated",
   "conversationFileAssetRestricted": "Receiving files is prohibited",
   "conversationFoldersEmptyText": "Add your conversations to folders to stay organized.",
   "conversationFoldersEmptyTextLearnMore": "Learn more",
   "conversationFooterArchive": "Archive",
   "conversationFooterContacts": "Contacts",
   "conversationGroupCreate": "Group",
-  "conversationGroupEmptyMessage": "You are not part of any group conversation yet.",
   "conversationGuestIndicator": "Guest",
   "conversationImageAssetRestricted": "Receiving images is prohibited",
   "conversationJoin.existentAccountJoinInBrowser": "Join in the browser",
@@ -1358,12 +1358,12 @@
   "roleAdmin": "Admin",
   "roleOwner": "Owner",
   "rolePartner": "External",
-  "searchArchivedConversations": "Search archived conversations",
   "searchConnect": "Connect",
   "searchConnectWithOtherDomain": "Connect with other domain",
   "searchConnections": "Connections",
   "searchContacts": "Contacts",
   "searchConversations": "Search conversations",
+  "searchArchivedConversations": "Search archived conversations",
   "searchConversationsNoResult": "No results found",
   "searchConversationsNoResultConnectSuggestion": "Connect with new users or start a new conversation",
   "searchCreateGroup": "Create group",
@@ -1400,7 +1400,6 @@
   "searchServiceConfirmButton": "Open Conversation",
   "searchServicePlaceholder": "Search by name",
   "searchServices": "Services",
-  "searchTeamGroups": "Team conversations",
   "searchTeamMembers": "Team members",
   "searchTopPeople": "Top people",
   "searchTrySearch": "Find people by\nname or username",

src/script/components/AvailabilityIcon/Availability.styles.tsx

@@ -0,0 +1,60 @@
+/*
+ * Wire
+ * Copyright (C) 2024 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {CSSObject} from '@emotion/react';
+
+import {Availability as AvailabilityProp} from '@wireapp/protocol-messaging';
+
+import {AVATAR_SIZE} from 'Components/Avatar';
+import {CSS_SQUARE} from 'Util/CSSMixin';
+
+const availabilityStateColors: Partial<Record<AvailabilityProp.Type, string>> = {
+  [AvailabilityProp.Type.AVAILABLE]: 'var(--green-500)',
+  [AvailabilityProp.Type.AWAY]: 'var(--red-500)',
+  [AvailabilityProp.Type.BUSY]: 'var(--amber-500)',
+};
+
+const getSquareIconSize = (): Partial<Record<AVATAR_SIZE, number>> => ({
+  [AVATAR_SIZE.X_SMALL]: 6,
+  [AVATAR_SIZE.SMALL]: 7,
+  [AVATAR_SIZE.MEDIUM]: 10,
+  [AVATAR_SIZE.LARGE]: 12,
+});
+
+export const iconStyles = (availabilityState: AvailabilityProp.Type, avatarSize: AVATAR_SIZE): CSSObject => {
+  const squareIconSize = getSquareIconSize();
+
+  return {
+    ...CSS_SQUARE(squareIconSize?.[avatarSize] || 8),
+    fill: availabilityStateColors[availabilityState],
+    stroke: availabilityStateColors[availabilityState],
+    borderRadius: '50%',
+  };
+};
+
+export const AvailabilityIcon: CSSObject = {
+  background: 'var(--app-bg)',
+  border: '2px solid var(--app-bg)',
+  borderRadius: '50%',
+  display: 'grid',
+  placeContent: 'center',
+  position: 'absolute',
+  bottom: '-2px',
+  right: '-2px',
+};

src/script/components/AvailabilityIcon/Availability.tsx

@@ -0,0 +1,68 @@
+/*
+ * Wire
+ * Copyright (C) 2024 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {ReactNode} from 'react';
+
+import {Availability as AvailabilityProp} from '@wireapp/protocol-messaging';
+
+import {AVATAR_SIZE} from 'Components/Avatar';
+
+import * as styles from './Availability.styles';
+
+import * as Icon from '../Icon';
+
+const availabilityIconBaseProps = {
+  'data-uie-name': 'status-availability-icon',
+};
+
+const availabilityIconRenderer: Record<AvailabilityProp.Type, (avatarSize: AVATAR_SIZE) => ReactNode> = {
+  [AvailabilityProp.Type.AVAILABLE]: avatarSize => (
+    <Icon.AvailabilityAvailableIcon
+      {...availabilityIconBaseProps}
+      css={styles.iconStyles(AvailabilityProp.Type.AVAILABLE, avatarSize)}
+      data-uie-value="available"
+    />
+  ),
+  [AvailabilityProp.Type.AWAY]: avatarSize => (
+    <Icon.AvailabilityAwayIcon
+      {...availabilityIconBaseProps}
+      css={styles.iconStyles(AvailabilityProp.Type.AWAY, avatarSize)}
+      data-uie-value="away"
+    />
+  ),
+  [AvailabilityProp.Type.BUSY]: avatarSize => (
+    <Icon.AvailabilityBusyIcon
+      {...availabilityIconBaseProps}
+      css={styles.iconStyles(AvailabilityProp.Type.BUSY, avatarSize)}
+      data-uie-value="busy"
+    />
+  ),
+  [AvailabilityProp.Type.NONE]: () => null,
+};
+
+interface AvailabilityIconProps {
+  availability: AvailabilityProp.Type;
+  avatarSize: AVATAR_SIZE;
+}
+
+export const AvailabilityIcon = ({availability, avatarSize}: AvailabilityIconProps) => (
+  <div css={styles.AvailabilityIcon} data-uie-name="status-availability" data-uie-value={availability}>
+    {availabilityIconRenderer[availability](avatarSize)}
+  </div>
+);

src/style/components/availability-state.less → src/script/components/AvailabilityIcon/index.ts

@@ -1,6 +1,6 @@
 /*
  * Wire
- * Copyright (C) 2018 Wire Swiss GmbH
+ * Copyright (C) 2024 Wire Swiss GmbH
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -17,11 +17,4 @@
  *
  */
 
-.availability-state {
-  display: flex;
-  align-items: center;
-
-  .conversation-badges {
-    margin-left: 4px;
-  }
-}
+export * from './Availability';

src/script/components/Avatar/Avatar.tsx

@@ -17,7 +17,7 @@
  *
  */
 
-import {FC, HTMLProps, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyBoardEvent} from 'react';
+import {HTMLProps, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyBoardEvent} from 'react';
 
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 import {handleKeyDown, isKeyboardEvent} from 'Util/KeyboardUtil';
@@ -79,17 +79,18 @@ export interface AvatarProps extends HTMLProps<HTMLDivElement> {
   noFilter?: boolean;
   isResponsive?: boolean;
   onAvatarClick?: (participant: User | ServiceEntity) => void;
+  hideAvailabilityStatus?: boolean;
 }
 
-const Avatar: FC<AvatarProps> = ({
+const Avatar = ({
   avatarSize = AVATAR_SIZE.LARGE,
   noBadge = false,
   noFilter = false,
   onAvatarClick,
   participant,
   isResponsive = false,
   ...props
-}) => {
+}: AvatarProps) => {
   const handleAvatarInteraction = (
     event: ReactMouseEvent<HTMLDivElement, MouseEvent> | ReactKeyBoardEvent<HTMLDivElement>,
   ) => {

src/script/components/Avatar/AvatarWrapper.tsx

@@ -42,7 +42,6 @@ const AvatarWrapper: React.FunctionComponent<AvatarWrapperProps> = ({
         ...CSS_SQUARE(avatarDiameter),
         color,
         display: 'inline-block',
-        overflow: 'hidden',
         position: 'relative',
         transform: 'translateZ(0)',
         userSelect: 'none',