feat: table details drawer

Author: emrberk

e2e/questdb

@@ -6,6 +6,7 @@ export enum BadgeType {
   INFO = "info",
   WARNING = "warning",
   ERROR = "error",
+  DISABLED = "disabled",
 }
 
 type Props = {
@@ -38,7 +39,7 @@ const Root = styled.span<Pick<Props, "type" | "pulsate">>`
   position: relative;
   padding: 0 1rem;
   border: 1px solid transparent;
-  border-radius: ${({ theme }) => theme.borderRadius};
+  border-radius: 0.8rem;
   line-height: 1.15;
   height: 3rem;
   color: ${({ theme }) => theme.color.white};
@@ -52,13 +53,13 @@ const Root = styled.span<Pick<Props, "type" | "pulsate">>`
     left: 0;
     top: 0;
     opacity: 0.075;
-    border-radius: ${({ theme }) => theme.borderRadius};
+    border-radius: 0.7rem;
   }
 
   ${({ type, theme }) =>
     type === BadgeType.INFO &&
     css`
-      color: ${theme.color.foreground};
+      color: ${theme.color.cyan};
     `}
 
   ${({ type, theme }) =>
@@ -91,6 +92,16 @@ const Root = styled.span<Pick<Props, "type" | "pulsate">>`
       }
     `}
 
+  ${({ type, theme }) =>
+    type === BadgeType.DISABLED &&
+    css`
+      color: ${theme.color.gray2};
+
+      &:after {
+        background: transparent;
+      }
+    `}
+
   ${(props) =>
     props.pulsate &&
     css`
@@ -108,7 +119,7 @@ const Icon = styled.div<{ hasGap: boolean }>`
   ${({ hasGap }) =>
     hasGap &&
     css`
-      margin-right: 0.75rem;
+      margin-right: 0.5rem;
     `}
 `
 

src/components/Badge/index.tsx

@@ -15,6 +15,7 @@ const EditorWrapper = styled.div<{ $noBorder?: boolean }>`
   border: ${({ $noBorder, theme }) =>
     $noBorder ? "none" : `1px solid ${theme.color.selection}`};
   background: ${({ theme }) => theme.color.backgroundDarker};
+  overflow: hidden;
 
   .monaco-editor-background {
     background: ${({ theme }) => theme.color.backgroundDarker};

src/components/LiteEditor/index.tsx

@@ -280,7 +280,7 @@ const getIcon = (type: string) => {
   return <IconWrapper icon={iconConfig?.icon ?? DotIcon} type={type} />
 }
 
-const ColumnIcon = ({
+export const ColumnIcon = ({
   isDesignatedTimestamp,
   type,
 }: {