2022-10-09 22:55:32 +09:00
import PropTypes from 'prop-types' ;
2023-05-28 23:38:10 +09:00
import { Component } from 'react' ;
2022-10-09 22:55:32 +09:00
import { defineMessages , injectIntl } from 'react-intl' ;
2023-05-28 23:38:10 +09:00
import NavigationPortal from 'flavours/glitch/components/navigation_portal' ;
2023-07-09 03:00:12 +09:00
import { timelinePreview , trendsEnabled } from 'flavours/glitch/initial_state' ;
2023-07-14 00:18:09 +09:00
import { transientSingleColumn } from 'flavours/glitch/is_mobile' ;
2023-05-28 23:38:10 +09:00
import { preferencesLink } from 'flavours/glitch/utils/backend_links' ;
2023-05-08 01:22:25 +09:00
import ColumnLink from './column_link' ;
2022-11-06 02:28:13 +09:00
import DisabledAccountBanner from './disabled_account_banner' ;
2022-10-09 22:55:32 +09:00
import FollowRequestsColumnLink from './follow_requests_column_link' ;
2019-05-26 04:27:00 +09:00
import ListPanel from './list_panel' ;
2022-10-09 10:49:51 +09:00
import NotificationsCounterIcon from './notifications_counter_icon' ;
2022-09-29 11:39:33 +09:00
import SignInBanner from './sign_in_banner' ;
2022-10-09 22:55:32 +09:00
const messages = defineMessages ( {
home : { id : 'tabs_bar.home' , defaultMessage : 'Home' } ,
notifications : { id : 'tabs_bar.notifications' , defaultMessage : 'Notifications' } ,
explore : { id : 'explore.title' , defaultMessage : 'Explore' } ,
2023-07-02 07:05:10 +09:00
firehose : { id : 'column.firehose' , defaultMessage : 'Live feeds' } ,
2023-06-11 20:33:45 +09:00
direct : { id : 'navigation_bar.direct' , defaultMessage : 'Private mentions' } ,
2023-07-22 02:09:13 +09:00
favourites : { id : 'navigation_bar.favourites' , defaultMessage : 'Favorites' } ,
2022-10-09 22:55:32 +09:00
bookmarks : { id : 'navigation_bar.bookmarks' , defaultMessage : 'Bookmarks' } ,
lists : { id : 'navigation_bar.lists' , defaultMessage : 'Lists' } ,
preferences : { id : 'navigation_bar.preferences' , defaultMessage : 'Preferences' } ,
followsAndFollowers : { id : 'navigation_bar.follows_and_followers' , defaultMessage : 'Follows and followers' } ,
about : { id : 'navigation_bar.about' , defaultMessage : 'About' } ,
2022-10-26 02:03:16 +09:00
search : { id : 'navigation_bar.search' , defaultMessage : 'Search' } ,
2023-07-14 00:18:09 +09:00
advancedInterface : { id : 'navigation_bar.advanced_interface' , defaultMessage : 'Open in advanced web interface' } ,
2023-08-31 19:18:46 +09:00
openedInClassicInterface : { id : 'navigation_bar.opened_in_classic_interface' , defaultMessage : 'Posts, accounts, and other specific pages are opened by default in the classic web interface.' } ,
2022-10-09 22:55:32 +09:00
app _settings : { id : 'navigation_bar.app_settings' , defaultMessage : 'App settings' } ,
} ) ;
2019-05-26 04:27:00 +09:00
2023-05-28 21:18:23 +09:00
class NavigationPanel extends Component {
2019-05-26 04:27:00 +09:00
2022-09-29 11:39:33 +09:00
static contextTypes = {
router : PropTypes . object . isRequired ,
identity : PropTypes . object . isRequired ,
} ;
2019-05-26 04:27:00 +09:00
2022-09-29 11:39:33 +09:00
static propTypes = {
2023-05-08 01:22:25 +09:00
intl : PropTypes . object . isRequired ,
2022-09-29 11:39:33 +09:00
onOpenSettings : PropTypes . func ,
} ;
2019-05-26 04:27:00 +09:00
2023-07-02 07:05:10 +09:00
isFirehoseActive = ( match , location ) => {
return match || location . pathname . startsWith ( '/public' ) ;
} ;
2022-09-29 11:39:33 +09:00
render ( ) {
2022-10-09 22:55:32 +09:00
const { intl , onOpenSettings } = this . props ;
2022-11-06 02:28:13 +09:00
const { signedIn , disabledAccountId } = this . context . identity ;
2019-08-07 00:57:52 +09:00
2022-09-29 11:39:33 +09:00
return (
< div className = 'navigation-panel' >
2023-07-14 00:18:09 +09:00
{ transientSingleColumn && (
2023-07-23 00:22:04 +09:00
< div className = 'navigation-panel__logo' >
2023-08-31 19:18:46 +09:00
< div class = 'switch-to-advanced' >
{ intl . formatMessage ( messages . openedInClassicInterface ) }
{ " " }
< a href = { ` /deck ${ location . pathname } ` } class = 'switch-to-advanced__toggle' >
{ intl . formatMessage ( messages . advancedInterface ) }
< / a >
< / div >
2023-07-14 00:18:09 +09:00
< hr / >
2023-07-23 00:22:04 +09:00
< / div >
2023-07-14 00:18:09 +09:00
) }
2022-09-29 11:39:33 +09:00
{ signedIn && (
2023-05-28 21:56:24 +09:00
< >
2022-10-09 22:55:32 +09:00
< ColumnLink transparent to = '/home' icon = 'home' text = { intl . formatMessage ( messages . home ) } / >
< ColumnLink transparent to = '/notifications' icon = { < NotificationsCounterIcon className = 'column-link__icon' / > } text = { intl . formatMessage ( messages . notifications ) } / >
< FollowRequestsColumnLink / >
2023-05-28 21:56:24 +09:00
< / >
2022-09-29 11:39:33 +09:00
) }
2019-05-26 04:27:00 +09:00
2023-07-09 03:00:12 +09:00
{ trendsEnabled ? (
2022-10-26 02:03:16 +09:00
< ColumnLink transparent to = '/explore' icon = 'hashtag' text = { intl . formatMessage ( messages . explore ) } / >
) : (
< ColumnLink transparent to = '/search' icon = 'search' text = { intl . formatMessage ( messages . search ) } / >
) }
2022-10-10 02:26:14 +09:00
{ ( signedIn || timelinePreview ) && (
2023-07-02 07:05:10 +09:00
< ColumnLink transparent to = '/public/local' isActive = { this . isFirehoseActive } icon = 'globe' text = { intl . formatMessage ( messages . firehose ) } / >
2022-10-09 10:49:51 +09:00
) }
2022-09-29 11:39:33 +09:00
{ ! signedIn && (
2022-10-05 03:13:23 +09:00
< div className = 'navigation-panel__sign-in-banner' >
2022-09-29 11:39:33 +09:00
< hr / >
2022-11-06 02:28:13 +09:00
{ disabledAccountId ? < DisabledAccountBanner / > : < SignInBanner / > }
2022-10-05 03:13:23 +09:00
< / div >
2022-09-29 11:39:33 +09:00
) }
{ signedIn && (
2023-05-28 21:56:24 +09:00
< >
2022-10-09 22:55:32 +09:00
< ColumnLink transparent to = '/conversations' icon = 'at' text = { intl . formatMessage ( messages . direct ) } / >
< ColumnLink transparent to = '/bookmarks' icon = 'bookmark' text = { intl . formatMessage ( messages . bookmarks ) } / >
2023-03-04 04:37:49 +09:00
< ColumnLink transparent to = '/favourites' icon = 'star' text = { intl . formatMessage ( messages . favourites ) } / >
2022-10-09 22:55:32 +09:00
< ColumnLink transparent to = '/lists' icon = 'list-ul' text = { intl . formatMessage ( messages . lists ) } / >
2022-09-29 11:39:33 +09:00
< ListPanel / >
< hr / >
2022-10-09 22:55:32 +09:00
{ ! ! preferencesLink && < ColumnLink transparent href = { preferencesLink } icon = 'cog' text = { intl . formatMessage ( messages . preferences ) } / > }
2022-11-01 17:38:55 +09:00
< ColumnLink transparent onClick = { onOpenSettings } icon = 'cogs' text = { intl . formatMessage ( messages . app _settings ) } / >
2023-05-28 21:56:24 +09:00
< / >
2022-09-29 11:39:33 +09:00
) }
2022-10-05 03:13:23 +09:00
< div className = 'navigation-panel__legal' >
< hr / >
2022-10-29 00:14:02 +09:00
< ColumnLink transparent to = '/about' icon = 'ellipsis-h' text = { intl . formatMessage ( messages . about ) } / >
2022-10-05 03:13:23 +09:00
< / div >
2022-10-19 18:30:59 +09:00
< NavigationPortal / >
2022-09-29 11:39:33 +09:00
< / div >
) ;
}
}
2023-03-25 07:15:25 +09:00
export default injectIntl ( NavigationPanel ) ;