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",
|
"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": {
|
||||||
|
|
|
||||||
|
|
@ -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": {
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue