refactor: settings tab and shortcut setter (#418)

* refactor: settings tab and shortcut setter

* more key codes

* disable->disappear

* unnecessary memo

* make linter happy

src/manager/components/Settings/InfoCell.tsx

@@ -0,0 +1,24 @@
+import { Flex, IconButton, Popover, Table, Text } from "@radix-ui/themes";
+import { PropsWithChildren } from "react";
+import { MdInfoOutline } from "react-icons/md";
+
+const InfoCell = ({ children }: PropsWithChildren) => {
+  return (
+    <Table.Cell width="0">
+      <Popover.Root>
+        <Popover.Trigger>
+          <Flex align="center">
+            <IconButton size="1" variant="ghost">
+              <MdInfoOutline size="16" />
+            </IconButton>
+          </Flex>
+        </Popover.Trigger>
+        <Popover.Content size="1">
+          <Text size="2">{children}</Text>
+        </Popover.Content>
+      </Popover.Root>
+    </Table.Cell>
+  );
+};
+
+export default InfoCell;

src/manager/components/Settings/SectionTable.tsx

@@ -0,0 +1,51 @@
+import { Box, Heading, Table } from "@radix-ui/themes";
+import { PropsWithChildren } from "react";
+
+interface SectionTableProps {
+  title: string;
+}
+
+const SectionTable = ({
+  title,
+  children,
+}: PropsWithChildren<SectionTableProps>) => {
+  return (
+    <Box
+      position="relative"
+      mt="2"
+      pt="4"
+      pb="2"
+      px="1"
+      css={{
+        border: "1px solid var(--gray-a6)",
+        borderRadius: "var(--radius-2)",
+      }}
+    >
+      <Box
+        position="absolute"
+        top="calc(-0.5 * var(--heading-line-height-2))"
+        left="2"
+        px="2"
+        css={{ backgroundColor: "var(--gray-1)" }}
+        asChild
+      >
+        <Heading size="2" color="gray" weight="medium">
+          {title}
+        </Heading>
+      </Box>
+      <Table.Root
+        size="1"
+        css={{
+          "--table-cell-padding": "var(--space-1) var(--space-2)",
+          "--table-cell-min-height": 0,
+          "& tr": { "--table-row-box-shadow": "none" },
+          "& th": { width: "120px" },
+        }}
+      >
+        <Table.Body>{children}</Table.Body>
+      </Table.Root>
+    </Box>
+  );
+};
+
+export default SectionTable;