[web] introduce app list header

Summary:
This diff introduces the app list header. This component will be used in the app list that I will introduce in subsquent diffs

For context here is what the app list header looks like in the figma designs:
{F997026}

Linear task: https://linear.app/comm/issue/ENG-5962/create-new-app-list-card-section

Depends on D10436

Test Plan:
**Please note that the placement of the app list is still getting fleshed out. The focus of this diff is just the UI/UX of the app list header**

Please see the demo video below

{F997012}

Reviewers: atul, rohan, kamil

Reviewed By: atul

Subscribers: ashoat, tomek

Differential Revision: https://phab.comm.dev/D10437

web/app-list/app-list-header.css

@@ -0,0 +1,15 @@
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--card-background-primary-default);
+  padding: 16px;
+  box-shadow: 0px 1px 3px 0px var(--card-headerShadow-primary-default);
+  z-index: 0;
+  border-radius: 8px 8px 0 0;
+}
+
+.headerLabel {
+  color: var(--text-background-primary-default);
+  font-weight: var(--semi-bold);
+}

web/app-list/app-list-header.react.js

@@ -0,0 +1,27 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+
+import css from './app-list-header.css';
+import AddButton from '../components/add-button.react.js';
+import AppsDirectory from '../modals/apps/apps-directory-modal.react.js';
+
+function AppListHeader(): React.Node {
+  const { pushModal } = useModalContext();
+
+  const onClickApps = React.useCallback(
+    () => pushModal(<AppsDirectory />),
+    [pushModal],
+  );
+
+  return (
+    <div className={css.container}>
+      <div className={css.headerLabel}>Your apps</div>
+      <AddButton onClick={onClickApps} />
+    </div>
+  );
+}
+
+export default AppListHeader;

web/theme.css

@@ -50,6 +50,9 @@
   --error-dark-50: #b62602;
   --error-dark-90: #4f1203;
 
+  --shadow-dark-35: #00000059;
+  --shadow-light-35: #ffffff59;
+
   --logo-bg: #111827;
   --spoiler-color: #33332c;
   --loading-foreground: #1b0e38;
@@ -262,6 +265,10 @@
   --text-background-tertiary-default: var(--shades-black-50);
   --text-background-danger-default: var(--error-primary);
 
+  /* Card */
+  --card-background-primary-default: var(--shades-black-85);
+  --card-headerShadow-primary-default: var(--shadow-dark-35);
+
   /* Button */
   --button-background-primary-default: var(--violet-dark-100);
   --button-background-secondary-default: var(--shades-black-75);
@@ -338,6 +345,11 @@
   --text-background-tertiary-default: var(--shades-black-50);
   --text-background-danger-default: var(--error-primary);
 
+  /* Card */
+  /* @GINSU: TODO double check these values after redesign is finished */
+  --card-background-primary-default: var(--shades-white-80);
+  --card-headerShadow-primary-default: var(--shadow-light-35);
+
   /* Button */
   --button-background-primary-default: var(--violet-dark-100);
   --button-background-secondary-default: var(--shades-black-50);