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
This commit is contained in:
nitin
2025-10-30 18:45:31 +05:30
committed by GitHub
parent f367bd6072
commit 369b1b19af
22 changed files with 602 additions and 23 deletions
@@ -14,6 +14,7 @@ export type TabContentProps = {
RightIcon?: IconComponent;
pill?: string | ReactElement;
contentSize?: 'sm' | 'md';
className?: string;
};
export const TabContent = ({
@@ -25,6 +26,7 @@ export const TabContent = ({
RightIcon,
pill,
contentSize = 'sm',
className,
}: TabContentProps) => {
const { theme } = useContext(ThemeContext);
const iconColor = active
@@ -34,7 +36,7 @@ export const TabContent = ({
: theme.font.color.secondary;
return (
<StyledTabHover contentSize={contentSize}>
<StyledTabHover contentSize={contentSize} className={className}>
{LeftIcon && <LeftIcon color={iconColor} size={theme.icon.size.md} />}
{logo && <Avatar avatarUrl={logo} size="md" placeholder={title} />}
{title}