feat(channels): drop NEW badge from Каналы segment per product call
This commit is contained in:
parent
c243495d4e
commit
72d426ef74
3 changed files with 4 additions and 63 deletions
|
|
@ -394,7 +394,6 @@
|
|||
"explore_cta": "Find a community",
|
||||
"pick_channel_title": "Pick a channel",
|
||||
"pick_channel_desc": "Choose a channel from the list on the left to start reading.",
|
||||
"badge_new": "New",
|
||||
"root_category": "Channels"
|
||||
},
|
||||
"Call": {
|
||||
|
|
|
|||
|
|
@ -396,7 +396,6 @@
|
|||
"explore_cta": "Найти сообщество",
|
||||
"pick_channel_title": "Выберите канал",
|
||||
"pick_channel_desc": "Откройте канал из списка слева, чтобы начать читать.",
|
||||
"badge_new": "Новое",
|
||||
"root_category": "Каналы"
|
||||
},
|
||||
"Call": {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { forwardRef, useEffect, useState } from 'react';
|
||||
import React, { forwardRef } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useMatch, useNavigate } from 'react-router-dom';
|
||||
import { Box, color, toRem } from 'folds';
|
||||
|
|
@ -7,17 +7,14 @@ import { BOTS_PATH, CHANNELS_PATH, DIRECT_PATH } from '../../paths';
|
|||
import { isNativePlatform } from '../../../utils/capacitor';
|
||||
import { useBotPresets } from '../../../features/bots/catalog';
|
||||
|
||||
const CHANNELS_TOOLTIP_SEEN_KEY = 'vojo.channelsTooltipSeen';
|
||||
|
||||
type SegmentProps = {
|
||||
active: boolean;
|
||||
disabled?: boolean;
|
||||
label: string;
|
||||
badge?: string;
|
||||
onClick?: () => void;
|
||||
};
|
||||
const Segment = forwardRef<HTMLButtonElement, SegmentProps>(
|
||||
({ active, disabled, label, badge, onClick }, ref) => (
|
||||
({ active, disabled, label, onClick }, ref) => (
|
||||
<button
|
||||
ref={ref}
|
||||
type="button"
|
||||
|
|
@ -37,29 +34,9 @@ const Segment = forwardRef<HTMLButtonElement, SegmentProps>(
|
|||
fontWeight: active ? 600 : 500,
|
||||
fontSize: toRem(13),
|
||||
lineHeight: 1.2,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: toRem(6),
|
||||
}}
|
||||
>
|
||||
<span>{label}</span>
|
||||
{badge && (
|
||||
<span
|
||||
style={{
|
||||
background: color.Primary.Main,
|
||||
color: color.Primary.OnMain,
|
||||
fontSize: toRem(10),
|
||||
fontWeight: 700,
|
||||
lineHeight: 1,
|
||||
padding: `${toRem(2)} ${toRem(5)}`,
|
||||
borderRadius: toRem(4),
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: toRem(0.4),
|
||||
}}
|
||||
>
|
||||
{badge}
|
||||
</span>
|
||||
)}
|
||||
{label}
|
||||
</button>
|
||||
)
|
||||
);
|
||||
|
|
@ -74,41 +51,8 @@ export function DirectStreamHeader() {
|
|||
const channelsMatch = useMatch({ path: CHANNELS_PATH, caseSensitive: true, end: false });
|
||||
const showBotsSegment = bots.length > 0 || !!botsMatch;
|
||||
|
||||
// Migration "NEW" badge — one-shot promo for the new Channels surface.
|
||||
// Replaces the old "Coming soon" disabled state. Hidden once the user has
|
||||
// visited /channels/* or already saw it in a prior session (persisted in
|
||||
// localStorage). Visible default until first interaction.
|
||||
const [showBadge, setShowBadge] = useState(false);
|
||||
useEffect(() => {
|
||||
if (channelsMatch) {
|
||||
try {
|
||||
localStorage.setItem(CHANNELS_TOOLTIP_SEEN_KEY, '1');
|
||||
} catch {
|
||||
/* private mode — non-fatal, badge just keeps showing */
|
||||
}
|
||||
setShowBadge(false);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
if (localStorage.getItem(CHANNELS_TOOLTIP_SEEN_KEY) === '1') return;
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
setShowBadge(true);
|
||||
}, [channelsMatch]);
|
||||
|
||||
const navOpts = { replace: isNativePlatform() };
|
||||
|
||||
const handleChannelsClick = () => {
|
||||
setShowBadge(false);
|
||||
try {
|
||||
localStorage.setItem(CHANNELS_TOOLTIP_SEEN_KEY, '1');
|
||||
} catch {
|
||||
/* private mode */
|
||||
}
|
||||
navigate(CHANNELS_PATH, navOpts);
|
||||
};
|
||||
|
||||
return (
|
||||
<PageNavHeader>
|
||||
<Box alignItems="Center" grow="Yes" gap="100">
|
||||
|
|
@ -120,8 +64,7 @@ export function DirectStreamHeader() {
|
|||
<Segment
|
||||
active={!!channelsMatch}
|
||||
label={t('Direct.segment_channels')}
|
||||
badge={showBadge ? t('Channels.badge_new') : undefined}
|
||||
onClick={handleChannelsClick}
|
||||
onClick={() => navigate(CHANNELS_PATH, navOpts)}
|
||||
/>
|
||||
{showBotsSegment && (
|
||||
<Segment
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue