From c2cf326142ba1380188eba1269f65a399b67180b Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 12 Sep 2025 11:54:33 +0530
Subject: [PATCH] extract sidebar component

---
 .../components/emoji-board/EmojiBoard.css.tsx | 20 ------
 .../emoji-board/components/Sidebar.tsx        | 72 +++++++++++++++++++
 .../emoji-board/components/styles.css.ts      | 22 ++++++
 3 files changed, 94 insertions(+), 20 deletions(-)
 create mode 100644 src/app/components/emoji-board/components/Sidebar.tsx
 create mode 100644 src/app/components/emoji-board/components/styles.css.ts

diff --git a/src/app/components/emoji-board/EmojiBoard.css.tsx b/src/app/components/emoji-board/EmojiBoard.css.tsx
index ef5f4bd0..20af52e7 100644
--- a/src/app/components/emoji-board/EmojiBoard.css.tsx
+++ b/src/app/components/emoji-board/EmojiBoard.css.tsx
@@ -13,32 +13,12 @@ export const Base = style({
   overflow: 'hidden',
 });
 
-export const Sidebar = style({
-  width: toRem(54),
-  backgroundColor: color.Surface.Container,
-  color: color.Surface.OnContainer,
-  position: 'relative',
-});
-
-export const SidebarContent = style({
-  padding: `${config.space.S200} 0`,
-});
-
-export const SidebarStack = style({
-  width: '100%',
-  backgroundColor: color.Surface.Container,
-});
-
 export const NativeEmojiSidebarStack = style({
   position: 'sticky',
   bottom: '-67%',
   zIndex: 1,
 });
 
-export const SidebarDivider = style({
-  width: toRem(18),
-});
-
 export const Header = style({
   padding: config.space.S300,
   paddingBottom: 0,
diff --git a/src/app/components/emoji-board/components/Sidebar.tsx b/src/app/components/emoji-board/components/Sidebar.tsx
new file mode 100644
index 00000000..2dee0b0a
--- /dev/null
+++ b/src/app/components/emoji-board/components/Sidebar.tsx
@@ -0,0 +1,72 @@
+import React, { ReactNode } from 'react';
+import { Box, Scroll, Line, as, TooltipProvider, Tooltip, Text, IconButton } from 'folds';
+import classNames from 'classnames';
+import * as css from './styles.css';
+
+export function Sidebar({ children }: { children: ReactNode }) {
+  return (
+    <Box className={css.Sidebar} shrink="No">
+      <Scroll size="0">
+        <Box className={css.SidebarContent} direction="Column" alignItems="Center" gap="100">
+          {children}
+        </Box>
+      </Scroll>
+    </Box>
+  );
+}
+
+export const SidebarStack = as<'div'>(({ className, children, ...props }, ref) => (
+  <Box
+    className={classNames(css.SidebarStack, className)}
+    direction="Column"
+    alignItems="Center"
+    gap="100"
+    {...props}
+    ref={ref}
+  >
+    {children}
+  </Box>
+));
+export function SidebarDivider() {
+  return <Line className={css.SidebarDivider} size="300" variant="Surface" />;
+}
+
+export function SidebarBtn<T extends string>({
+  active,
+  label,
+  id,
+  onItemClick,
+  children,
+}: {
+  active?: boolean;
+  label: string;
+  id: T;
+  onItemClick: (id: T) => void;
+  children: ReactNode;
+}) {
+  return (
+    <TooltipProvider
+      delay={500}
+      position="Left"
+      tooltip={
+        <Tooltip id={`SidebarStackItem-${id}-label`}>
+          <Text size="T300">{label}</Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton
+          aria-pressed={active}
+          aria-labelledby={`SidebarStackItem-${id}-label`}
+          ref={ref}
+          onClick={() => onItemClick(id)}
+          size="400"
+          radii="300"
+          variant="Surface"
+        >
+          {children}
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
diff --git a/src/app/components/emoji-board/components/styles.css.ts b/src/app/components/emoji-board/components/styles.css.ts
new file mode 100644
index 00000000..5855d51a
--- /dev/null
+++ b/src/app/components/emoji-board/components/styles.css.ts
@@ -0,0 +1,22 @@
+import { style } from '@vanilla-extract/css';
+import { toRem, color, config } from 'folds';
+
+export const Sidebar = style({
+  width: toRem(54),
+  backgroundColor: color.Surface.Container,
+  color: color.Surface.OnContainer,
+  position: 'relative',
+});
+
+export const SidebarContent = style({
+  padding: `${config.space.S200} 0`,
+});
+
+export const SidebarStack = style({
+  width: '100%',
+  backgroundColor: color.Surface.Container,
+});
+
+export const SidebarDivider = style({
+  width: toRem(18),
+});