Tabs sidepanel settings on dashboards (#15454)

question -- should we have confirmation modal on delete -- if yes -- should it appear on save -- or on delete? figma - https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=79469-817497&t=5gFTRiI5f8nPyzc6-0 Note - Figma has a new side panel header, which is unavailable for now, so I used the existing one In a follow-up, we could even have icons for tabs -- would be cool -- and an icon picker for the icons? followups which could be addressed in separate PRs - - ~~tabs being edited state (select state?) -- this would have blue border around tab~~ done - add icons on tabs -- need to update the entity to add icon -- and set a default (dashboard) -- at least - icon picker in the sidepanel header closes - https://discord.com/channels/1130383047699738754/1430204556884836532 video QA https://github.com/user-attachments/assets/a4ad4b93-911d-46ce-9b68-347fd48fe933
2025-10-30 18:45:31 +05:30
parent f367bd6072
commit 369b1b19af
22 changed files with 602 additions and 23 deletions
@@ -0,0 +1,97 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { type MouseEvent, useState } from 'react';
+
+import { TabAvatar } from '@/ui/layout/tab-list/components/TabAvatar';
+import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
+import { IconPencil } from 'twenty-ui/display';
+import { LightIconButton } from 'twenty-ui/input';
+import {
+  StyledHoverableMenuItemBase,
+  StyledMenuItemIconCheck,
+  StyledMenuItemLabel,
+  StyledMenuItemLeftContent,
+} from 'twenty-ui/navigation';
+
+const StyledTextContainer = styled.div`
+  display: flex;
+  align-items: center;
+  flex: 1 0 0;
+  gap: ${({ theme }) => theme.spacing(1)};
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
+const StyledRightContent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+type PageLayoutTabMenuItemSelectAvatarProps = {
+  tab: SingleTabProps;
+  selected: boolean;
+  onClick?: (event?: MouseEvent) => void;
+  disabled?: boolean;
+  showEditButton?: boolean;
+  onEditClick?: (tabId: string) => void;
+  testId?: string;
+};
+
+export const PageLayoutTabMenuItemSelectAvatar = ({
+  tab,
+  selected,
+  onClick,
+  disabled,
+  showEditButton = false,
+  onEditClick,
+  testId,
+}: PageLayoutTabMenuItemSelectAvatarProps) => {
+  const theme = useTheme();
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleEditClick = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    onEditClick?.(tab.id);
+  };
+
+  return (
+    <StyledHoverableMenuItemBase
+      onClick={onClick}
+      disabled={disabled}
+      data-testid={testId}
+      role="option"
+      aria-selected={selected}
+      aria-disabled={disabled}
+      isIconDisplayedOnHoverOnly={showEditButton}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <StyledMenuItemLeftContent>
+        <TabAvatar tab={tab} />
+        <StyledTextContainer>
+          <StyledMenuItemLabel>{tab.title}</StyledMenuItemLabel>
+        </StyledTextContainer>
+      </StyledMenuItemLeftContent>
+
+      <StyledRightContent>
+        {selected && !isHovered && (
+          <StyledMenuItemIconCheck size={theme.icon.size.md} />
+        )}
+
+        {isHovered && showEditButton && (
+          <div className="hoverable-buttons">
+            <LightIconButton
+              Icon={IconPencil}
+              size="small"
+              accent="tertiary"
+              onClick={handleEditClick}
+            />
+          </div>
+        )}
+      </StyledRightContent>
+    </StyledHoverableMenuItemBase>
+  );
+};