Introduce AppInspect

Summary:
This diff introduces the AppInspect pane.

I didn't get very fare, and it is markup only, but while at it made a bunch of other improvement in the component lib, so figured to prematurely submit to don't make the diffs too big.

Improvements
- Separated sidebar and Layout.X, as it was to much responsibility for one component, and made customization hard. Also caused state loss when switching between resizable and not.
- Setup a basic top level selection. Maybe will move it into redux in the future, but for now it suffices.
- Introduced Layout.Horizontal and `Layout.Vertical` as alternative to Ant design's space. The reason is that the latter can't stretching children, which we use quite frequently. (that is because they use wrappers to create spacing, but since we run on Electron, we can use CSS `gap` instead, which handles that much more elegantly).
- Fixed issue where gutter handle could disappear when dragging to far.

Reviewed By: cekkaewnumchai

Differential Revision: D23867265

fbshipit-source-id: e872b7f48b868e255f2c34d45e811b8ed93d0b00

desktop/app/src/sandy-chrome/AppInspect.tsx

@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React from 'react';
+import {Button, Dropdown, Menu, Radio, Input} from 'antd';
+import {shell} from 'electron';
+import {LeftSidebar, SidebarTitle, InfoIcon} from './LeftSidebar';
+import {
+  AppleOutlined,
+  AndroidOutlined,
+  SettingOutlined,
+} from '@ant-design/icons';
+import {Layout, styled} from '../ui';
+import {theme} from './theme';
+
+const appTooltip = (
+  <>
+    Inspect apps by selecting connected devices and emulators. Navigate and
+    bookmark frequent destinations in the app. Refresh, screenshot and
+    screenrecord is also available.
+    {
+      <Button
+        size="small"
+        type="link"
+        onClick={() => {
+          shell.openExternal(
+            'https://fbflipper.com/docs/getting-started/index',
+          );
+        }}>
+        Learn More
+      </Button>
+    }
+  </>
+);
+
+export function AppInspect() {
+  return (
+    <LeftSidebar>
+      <Layout.Top scrollable>
+        <>
+          <SidebarTitle actions={<InfoIcon>{appTooltip}</InfoIcon>}>
+            App Inspect
+          </SidebarTitle>
+          <TopSection fillx>
+            <DeviceDropdown />
+            <Input addonAfter={<SettingOutlined />} defaultValue="mysite" />
+            <Layout.Horizontal gap={theme.space.small}>
+              <Button icon={<SettingOutlined />} type="link" />
+              <Button icon={<SettingOutlined />} type="link" />
+              <Button icon={<SettingOutlined />} type="link" />
+            </Layout.Horizontal>
+          </TopSection>
+        </>
+        <div>Dynamic section</div>
+      </Layout.Top>
+    </LeftSidebar>
+  );
+}
+
+const TopSection = styled(Layout.Vertical)({
+  boxShadow: `inset 0px -1px 0px ${theme.dividerColor}`,
+  padding: `8px 12px`,
+  gap: theme.space.middle,
+});
+
+function DeviceDropdown() {
+  return (
+    <Radio.Group value={1} size="small">
+      <Dropdown
+        overlay={
+          <Menu>
+            <Menu.Item icon={<AppleOutlined />} style={{fontWeight: 'bold'}}>
+              IPhone 11
+            </Menu.Item>
+            <Menu.Item>
+              <Radio value={1}>Facebook</Radio>
+            </Menu.Item>
+            <Menu.Item>
+              <Radio value={3}>Instagram</Radio>
+            </Menu.Item>
+            <Menu.Item icon={<AndroidOutlined />} style={{fontWeight: 'bold'}}>
+              Android
+            </Menu.Item>
+          </Menu>
+        }>
+        <Button icon={<AppleOutlined />} style={{width: '100%'}}>
+          Facebook Iphone11
+        </Button>
+      </Dropdown>
+    </Radio.Group>
+  );
+}