feat(#28): add welcome page

src/app/components/index.ts

@@ -13,3 +13,4 @@ export * from './info-label';
 export * from './kbar';
 export * from './menu';
 export * from './buttons';
+export * from './kbd';

src/app/components/kbar/kbar.styled.ts

@@ -67,11 +67,3 @@ export const StyledShortcutWrapper = styled('div', {
   gridAutoFlow: 'column',
   gap: '1px',
 });
-
-export const StyledKbd = styled('kbd', {
-  padding: '4px 6px',
-  background: 'rgba(0 0 0 / .1)',
-  borderRadius: '4px',
-  fontSize: 14,
-  margin: 0,
-});

src/app/components/kbar/kbar.tsx

@@ -2,13 +2,14 @@ import { ActionId, ActionImpl, KBarPortal, KBarResults, useMatches } from '@gete
 import { Container } from '@nextui-org/react';
 import React, { PropsWithChildren } from 'react';
 
+import { Kbd } from '@components';
+
 import {
   StyledActionWrapper,
   StyledGroupName,
   StyledKBarAnimator,
   StyledKBarPositioner,
   StyledKBarSearch,
-  StyledKbd,
   StyledResultItem,
   StyledShortcutWrapper,
 } from './kbar.styled';
@@ -84,7 +85,7 @@ const ResultItem = React.forwardRef(
         {action.shortcut?.length ? (
           <StyledShortcutWrapper>
             {action.shortcut.map((shortcut) =>
-              makeOsRelatedShortcut(os, shortcut).map((sc) => <StyledKbd key={sc}>{sc}</StyledKbd>)
+              makeOsRelatedShortcut(os, shortcut).map((sc) => <Kbd key={sc}>{sc}</Kbd>)
             )}
           </StyledShortcutWrapper>
         ) : null}

src/app/components/kbd/index.ts

@@ -0,0 +1 @@
+export * from './kbd';

src/app/components/kbd/kbd.ts

@@ -0,0 +1,9 @@
+import { styled } from '@nextui-org/react';
+
+export const Kbd = styled('kbd', {
+  padding: '4px 6px',
+  background: 'rgba(0 0 0 / .1)',
+  borderRadius: '4px',
+  fontSize: 14,
+  margin: 0,
+});

src/app/pages/tabs-container/tabs-container.tsx

@@ -1,10 +1,10 @@
-import { Container, Text } from '@nextui-org/react';
 import React from 'react';
 
 import { Tab, Tabs } from '@components';
 import { CollectionType, useTabsStore } from '@storage';
 
 import { GrpcTabContainer } from './collection-types';
+import { WelcomeContainer } from './welcome';
 
 export const TabsContainer = (): JSX.Element => {
   const { activeTabId, closeTab, activateTab, moveTab, tabs } = useTabsStore((store) => store);
@@ -27,8 +27,6 @@ export const TabsContainer = (): JSX.Element => {
       {tabsContent}
     </Tabs>
   ) : (
-    <Container display="flex" justify="center" alignItems="center">
-      <Text css={{ color: '$accents6', userSelect: 'none' }}>No tabs</Text>
-    </Container>
+    <WelcomeContainer />
   );
 };

src/app/pages/tabs-container/welcome/index.ts

@@ -0,0 +1 @@
+export * from './welcome-container';

src/app/pages/tabs-container/welcome/welcome-container.tsx

@@ -0,0 +1,55 @@
+import { Col, Container, Row, Spacer, Text } from '@nextui-org/react';
+import React from 'react';
+
+import { Kbd } from '@components';
+
+const shortcuts = [
+  {
+    key: '⌘+K',
+    description: 'Open command bar',
+  },
+  {
+    key: '⌘+Shift+C',
+    description: 'Create new collection',
+  },
+  {
+    key: '⌘+Shift+S',
+    description: 'Synchronize collections',
+  },
+  {
+    key: '⌘+T',
+    description: 'New gRPC tab',
+  },
+];
+
+export const WelcomeContainer: React.FC = () => (
+  <Container
+    display="flex"
+    justify="center"
+    alignItems="center"
+    wrap="nowrap"
+    direction="row"
+    css={{ userSelect: 'none' }}
+  >
+    <Container gap={0} display="flex" css={{ width: 400 }}>
+      <Text size="$xl" css={{ color: '$accents9' }}>
+        Shortcuts
+      </Text>
+      <Spacer y={2} />
+      {shortcuts.map((shortcut) => (
+        <Row>
+          <Col>
+            <Text size="$sm" css={{ color: '$accents8' }}>
+              {shortcut.description}
+            </Text>
+          </Col>
+          <Spacer x={2} />
+          <Col>
+            <Kbd key={shortcut.key}>{shortcut.key}</Kbd>
+          </Col>
+          <Spacer y={1.5} />
+        </Row>
+      ))}
+    </Container>
+  </Container>
+);