feat(channels): drop NEW badge from Каналы segment per product call

This commit is contained in:
v.lagerev 2026-05-09 15:09:24 +03:00
parent c243495d4e
commit 72d426ef74
3 changed files with 4 additions and 63 deletions

View file

@ -394,7 +394,6 @@
"explore_cta": "Find a community", "explore_cta": "Find a community",
"pick_channel_title": "Pick a channel", "pick_channel_title": "Pick a channel",
"pick_channel_desc": "Choose a channel from the list on the left to start reading.", "pick_channel_desc": "Choose a channel from the list on the left to start reading.",
"badge_new": "New",
"root_category": "Channels" "root_category": "Channels"
}, },
"Call": { "Call": {

View file

@ -396,7 +396,6 @@
"explore_cta": "Найти сообщество", "explore_cta": "Найти сообщество",
"pick_channel_title": "Выберите канал", "pick_channel_title": "Выберите канал",
"pick_channel_desc": "Откройте канал из списка слева, чтобы начать читать.", "pick_channel_desc": "Откройте канал из списка слева, чтобы начать читать.",
"badge_new": "Новое",
"root_category": "Каналы" "root_category": "Каналы"
}, },
"Call": { "Call": {

View file

@ -1,4 +1,4 @@
import React, { forwardRef, useEffect, useState } from 'react'; import React, { forwardRef } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useMatch, useNavigate } from 'react-router-dom'; import { useMatch, useNavigate } from 'react-router-dom';
import { Box, color, toRem } from 'folds'; 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 { isNativePlatform } from '../../../utils/capacitor';
import { useBotPresets } from '../../../features/bots/catalog'; import { useBotPresets } from '../../../features/bots/catalog';
const CHANNELS_TOOLTIP_SEEN_KEY = 'vojo.channelsTooltipSeen';
type SegmentProps = { type SegmentProps = {
active: boolean; active: boolean;
disabled?: boolean; disabled?: boolean;
label: string; label: string;
badge?: string;
onClick?: () => void; onClick?: () => void;
}; };
const Segment = forwardRef<HTMLButtonElement, SegmentProps>( const Segment = forwardRef<HTMLButtonElement, SegmentProps>(
({ active, disabled, label, badge, onClick }, ref) => ( ({ active, disabled, label, onClick }, ref) => (
<button <button
ref={ref} ref={ref}
type="button" type="button"
@ -37,29 +34,9 @@ const Segment = forwardRef<HTMLButtonElement, SegmentProps>(
fontWeight: active ? 600 : 500, fontWeight: active ? 600 : 500,
fontSize: toRem(13), fontSize: toRem(13),
lineHeight: 1.2, lineHeight: 1.2,
display: 'inline-flex',
alignItems: 'center',
gap: toRem(6),
}} }}
> >
<span>{label}</span> {label}
{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>
)}
</button> </button>
) )
); );
@ -74,41 +51,8 @@ export function DirectStreamHeader() {
const channelsMatch = useMatch({ path: CHANNELS_PATH, caseSensitive: true, end: false }); const channelsMatch = useMatch({ path: CHANNELS_PATH, caseSensitive: true, end: false });
const showBotsSegment = bots.length > 0 || !!botsMatch; 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 navOpts = { replace: isNativePlatform() };
const handleChannelsClick = () => {
setShowBadge(false);
try {
localStorage.setItem(CHANNELS_TOOLTIP_SEEN_KEY, '1');
} catch {
/* private mode */
}
navigate(CHANNELS_PATH, navOpts);
};
return ( return (
<PageNavHeader> <PageNavHeader>
<Box alignItems="Center" grow="Yes" gap="100"> <Box alignItems="Center" grow="Yes" gap="100">
@ -120,8 +64,7 @@ export function DirectStreamHeader() {
<Segment <Segment
active={!!channelsMatch} active={!!channelsMatch}
label={t('Direct.segment_channels')} label={t('Direct.segment_channels')}
badge={showBadge ? t('Channels.badge_new') : undefined} onClick={() => navigate(CHANNELS_PATH, navOpts)}
onClick={handleChannelsClick}
/> />
{showBotsSegment && ( {showBotsSegment && (
<Segment <Segment