[POC] multi select drag and drop on record board (#13053)

closes https://github.com/twentyhq/twenty/issues/13036

Inspiration:
https://github.com/hello-pangea/dnd/blob/main/docs/patterns/multi-drag.md

Question: Should we have it for tables too? :)


https://github.com/user-attachments/assets/64a3c4c5-40bc-4ca4-b296-685027d08861

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-ui/src/navigation/index.ts

@@ -64,3 +64,4 @@ export {
 export type { MenuItemAccent } from './menu-item/types/MenuItemAccent';
 export { NavigationBar } from './navigation-bar/components/NavigationBar';
 export { NavigationBarItem } from './navigation-bar/components/NavigationBarItem';
+export { NotificationCounter } from './notification-counter/components/NotificationCounter';

packages/twenty-ui/src/navigation/notification-counter/components/NotificationCounter.tsx

@@ -0,0 +1,38 @@
+import styled from '@emotion/styled';
+
+const StyledNotificationCounter = styled.div<{
+  variant: 'primary' | 'secondary';
+}>`
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: ${({ theme }) => theme.font.size.xxs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  background: ${({ theme, variant }) =>
+    variant === 'primary'
+      ? theme.color.blue
+      : theme.background.transparent.light};
+  color: ${({ theme, variant }) =>
+    variant === 'primary' ? 'white' : theme.font.color.secondary};
+`;
+
+type NotificationCounterProps = {
+  count: number;
+  variant?: 'primary' | 'secondary';
+  className?: string;
+};
+
+export const NotificationCounter = ({
+  count,
+  variant = 'primary',
+  className,
+}: NotificationCounterProps) => {
+  return (
+    <StyledNotificationCounter variant={variant} className={className}>
+      {count}
+    </StyledNotificationCounter>
+  );
+};