fuuuuck

initial piddly commit for navbar shit
2024-10-01 01:14:29 +00:00 · 2024-09-27 23:18:26 +00:00
6 changed files with 368 additions and 19 deletions
--- a/app/javascript/flavours/glitch/features/ui/components/columns_area.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/columns_area.jsx
@ -27,8 +27,10 @@ import BundleColumnError from './bundle_column_error';
 import { ColumnLoading } from './column_loading';
 import ComposePanel from './compose_panel';
 import DrawerLoading from './drawer_loading';
+import HeaderNavigation from './header_navigation';
 import NavigationPanel from './navigation_panel';

+
 const componentMap = {
  'COMPOSE': Compose,
  'HOME': HomeTimeline,
@ -151,21 +153,27 @@ export default class ColumnsArea extends ImmutablePureComponent {

    if (singleColumn) {
      return (
-        <div className='columns-area__panels'>
-          <div className='columns-area__panels__pane columns-area__panels__pane--compositional'>
-            <div className='columns-area__panels__pane__inner'>
-              {renderComposePanel && <ComposePanel />}
+        <div className='columns-area__layout'>         
+          <div className='columns-area__header'>
+            <HeaderNavigation onOpenSettings={openSettings} />
+          </div>
+
+          <div className='columns-area__panels'>
+            <div className='columns-area__panels__pane columns-area__panels__pane--compositional'>
+              <div className='columns-area__panels__pane__inner'>
+                {renderComposePanel && <ComposePanel />}
+              </div>
            </div>
-          </div>

-          <div className='columns-area__panels__main'>
-            <div className='tabs-bar__wrapper'><TabsBarPortal /></div>
-            <div className='columns-area columns-area--mobile'>{children}</div>
-          </div>
+            <div className='columns-area__panels__main'>
+              <div className='tabs-bar__wrapper'><TabsBarPortal /></div>
+              <div className='columns-area columns-area--mobile'>{children}</div>
+            </div>

-          <div className='columns-area__panels__pane columns-area__panels__pane--start columns-area__panels__pane--navigational'>
-            <div className='columns-area__panels__pane__inner'>
-              <NavigationPanel onOpenSettings={openSettings} />
+            <div className='columns-area__panels__pane columns-area__panels__pane--start columns-area__panels__pane--navigational'>
+              <div className='columns-area__panels__pane__inner'>
+                <NavigationPanel onOpenSettings={openSettings} />
+              </div>
            </div>
          </div>
        </div>
--- a/app/javascript/flavours/glitch/features/ui/components/header.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/header.jsx
@ -12,7 +12,6 @@ import { openModal } from 'flavours/glitch/actions/modal';
 import { fetchServer } from 'flavours/glitch/actions/server';
 import { Avatar } from 'flavours/glitch/components/avatar';
 import { Icon } from 'flavours/glitch/components/icon';
-import { WordmarkLogo, SymbolLogo } from 'flavours/glitch/components/logo';
 import { Permalink } from 'flavours/glitch/components/permalink';
 import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
 import { registrationsOpen, me, sso_redirect } from 'flavours/glitch/initial_state';
@ -66,6 +65,7 @@ class Header extends PureComponent {
    if (signedIn) {
      content = (
        <>
+
          {location.pathname !== '/search' && <Link to='/search' className='button button-secondary' aria-label={intl.formatMessage(messages.search)}><Icon id='search' icon={SearchIcon} /></Link>}
          {location.pathname !== '/publish' && <Link to='/publish' className='button button-secondary'><FormattedMessage id='compose_form.publish_form' defaultMessage='New post' /></Link>}
          <Account />
@ -105,11 +105,6 @@ class Header extends PureComponent {

    return (
      <div className='ui__header'>
-        <Link to='/' className='ui__header__logo'>
-          <WordmarkLogo />
-          <SymbolLogo />
-        </Link>
-
        <div className='ui__header__links'>
          {content}
        </div>
--- a/app/javascript/flavours/glitch/features/ui/components/header_nav_link.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/header_nav_link.jsx
@ -0,0 +1,60 @@
+import PropTypes from 'prop-types';
+
+import classNames from 'classnames';
+import { useRouteMatch, NavLink } from 'react-router-dom';
+
+import { Icon }  from 'flavours/glitch/components/icon';
+
+const HeaderNavLink = ({ icon, activeIcon, iconComponent, activeIconComponent, text, to, onClick, href, method, badge, transparent, ...other }) => {
+  const match = useRouteMatch(to);
+  const className = classNames('header-nav-link', { 'header-nav-link--transparent': transparent });
+  const badgeElement = typeof badge !== 'undefined' ? <span className='header-nav-link__badge'>{badge}</span> : null;
+  const iconElement = (typeof icon === 'string' || iconComponent) ? <Icon id={icon} icon={iconComponent} className='header-nav-link__icon' /> : icon;
+  const activeIconElement = activeIcon ?? (activeIconComponent ? <Icon id={icon} icon={activeIconComponent} className='header-nav-link__icon' /> : iconElement);
+  const active = match?.isExact;
+
+  if (href) {
+    return (
+      <a href={href} className={className} data-method={method} title={text} {...other}>
+        {active ? activeIconElement : iconElement}
+        {badgeElement}
+      </a>
+    );
+  } else if (to) {
+    return (
+      <NavLink to={to} className={className} title={text} exact {...other}>
+        {active ? activeIconElement : iconElement}
+        {badgeElement}
+      </NavLink>
+    );
+  } else {
+    const handleOnClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      return onClick(e);
+    };
+    return (
+      // eslint-disable-next-line jsx-a11y/anchor-is-valid -- intentional to have the same look and feel as other menu items
+      <a href='#' onClick={onClick && handleOnClick} className={className} title={text} {...other} tabIndex={0}>
+        {iconElement}
+        {badgeElement}
+      </a>
+    );
+  }
+};
+
+HeaderNavLink.propTypes = {
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  iconComponent: PropTypes.func,
+  activeIcon: PropTypes.node,
+  activeIconComponent: PropTypes.func,
+  text: PropTypes.string.isRequired,
+  to: PropTypes.string,
+  onClick: PropTypes.func,
+  href: PropTypes.string,
+  method: PropTypes.string,
+  badge: PropTypes.node,
+  transparent: PropTypes.bool,
+};
+
+export default HeaderNavLink;
--- a/app/javascript/flavours/glitch/features/ui/components/header_navigation.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/header_navigation.jsx
@ -0,0 +1,271 @@
+import PropTypes from 'prop-types';
+import { Component, useEffect } from 'react';
+
+import { defineMessages, injectIntl, useIntl, FormattedMessage} from 'react-intl';
+
+import { useSelector, useDispatch, connect } from 'react-redux';
+
+
+import BookmarksActiveIcon from '@/material-icons/400-24px/bookmarks-fill.svg?react';
+import BookmarksIcon from '@/material-icons/400-24px/bookmarks.svg?react';
+import ModerationIcon from '@/material-icons/400-24px/gavel.svg?react';
+import HomeActiveIcon from '@/material-icons/400-24px/home-fill.svg?react';
+import HomeIcon from '@/material-icons/400-24px/home.svg?react';
+import ListAltActiveIcon from '@/material-icons/400-24px/list_alt-fill.svg?react';
+import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
+import MailActiveIcon from '@/material-icons/400-24px/mail-fill.svg?react';
+import MailIcon from '@/material-icons/400-24px/mail.svg?react';
+import AdministrationIcon from '@/material-icons/400-24px/manufacturing.svg?react';
+import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
+import NotificationsActiveIcon from '@/material-icons/400-24px/notifications-fill.svg?react';
+import NotificationsIcon from '@/material-icons/400-24px/notifications.svg?react';
+import PersonAddActiveIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
+import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
+import PublicIcon from '@/material-icons/400-24px/public.svg?react';
+import SearchIcon from '@/material-icons/400-24px/search.svg?react';
+import SettingsIcon from '@/material-icons/400-24px/settings.svg?react';
+import StarActiveIcon from '@/material-icons/400-24px/star-fill.svg?react';
+import StarIcon from '@/material-icons/400-24px/star.svg?react';
+import { fetchFollowRequests } from 'flavours/glitch/actions/accounts';
+import { Avatar } from 'flavours/glitch/components/avatar';
+import { CollapseButton } from 'flavours/glitch/components/collapse_button';
+import { IconWithBadge } from 'flavours/glitch/components/icon_with_badge';
+import { Permalink } from 'flavours/glitch/components/permalink';
+import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
+import { timelinePreview, registrationsOpen, me, sso_redirect } from 'flavours/glitch/initial_state';
+import { transientSingleColumn } from 'flavours/glitch/is_mobile';
+import { canManageReports, canViewAdminDashboard } from 'flavours/glitch/permissions';
+import { selectUnreadNotificationGroupsCount } from 'flavours/glitch/selectors/notifications';
+import { selectUseGroupedNotifications } from 'flavours/glitch/selectors/settings';
+import { preferencesLink } from 'flavours/glitch/utils/backend_links';
+
+import DisabledAccountBanner from './disabled_account_banner';
+import HeaderNavLink from './header_nav_link';
+import { ListPanel } from './list_panel';
+import SignInBanner from './sign_in_banner';
+
+const messages = defineMessages({
+  home: { id: 'tabs_bar.home', defaultMessage: 'Home' },
+  notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' },
+  explore: { id: 'explore.title', defaultMessage: 'Explore' },
+  firehose: { id: 'column.firehose', defaultMessage: 'Live feeds' },
+  direct: { id: 'navigation_bar.direct', defaultMessage: 'Private mentions' },
+  favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favorites' },
+  bookmarks: { id: 'navigation_bar.bookmarks', defaultMessage: 'Bookmarks' },
+  lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' },
+  preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
+  administration: { id: 'navigation_bar.administration', defaultMessage: 'Administration' },
+  moderation: { id: 'navigation_bar.moderation', defaultMessage: 'Moderation' },
+  followsAndFollowers: { id: 'navigation_bar.follows_and_followers', defaultMessage: 'Follows and followers' },
+  about: { id: 'navigation_bar.about', defaultMessage: 'About' },
+  search: { id: 'navigation_bar.search', defaultMessage: 'Search' },
+  advancedInterface: { id: 'navigation_bar.advanced_interface', defaultMessage: 'Open in advanced web interface' },
+  openedInClassicInterface: { id: 'navigation_bar.opened_in_classic_interface', defaultMessage: 'Posts, accounts, and other specific pages are opened by default in the classic web interface.' },
+  app_settings: { id: 'navigation_bar.app_settings', defaultMessage: 'App settings' },
+  followRequests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
+});
+
+const NotificationsLink = () => {
+  const optedInGroupedNotifications = useSelector(selectUseGroupedNotifications);
+  const count = useSelector(state => state.getIn(['local_settings', 'notifications', 'tab_badge']) ? state.getIn(['notifications', 'unread']) : 0);
+  const intl = useIntl();
+
+  const newCount = useSelector(selectUnreadNotificationGroupsCount);
+
+  return (
+    <HeaderNavLink
+      key='notifications'
+      transparent
+      to='/notifications'
+      icon={<IconWithBadge id='bell' icon={NotificationsIcon} count={optedInGroupedNotifications ? newCount : count} className='column-link__icon' />}
+      activeIcon={<IconWithBadge id='bell' icon={NotificationsActiveIcon} count={optedInGroupedNotifications ? newCount : count} className='column-link__icon' />}
+      text={intl.formatMessage(messages.notifications)}
+    />
+  );
+};
+
+const FollowRequestsLink = () => {
+  const count = useSelector(state => state.getIn(['user_lists', 'follow_requests', 'items'])?.size ?? 0);
+  const intl = useIntl();
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(fetchFollowRequests());
+  }, [dispatch]);
+
+  if (count === 0) {
+    return null;
+  }
+
+  return (
+    <HeaderNavLink
+      transparent
+      to='/follow_requests'
+      icon={<IconWithBadge id='user-plus' icon={PersonAddIcon} count={count} className='column-link__icon' />}
+      activeIcon={<IconWithBadge id='user-plus' icon={PersonAddActiveIcon} count={count} className='column-link__icon' />}
+      text={intl.formatMessage(messages.followRequests)}
+    />
+  );
+};
+
+const Account = connect(state => ({
+  account: state.getIn(['accounts', me]),
+}))(({ account }) => (
+  <Permalink href={account.get('url')} to={`/@${account.get('acct')}`} title={account.get('acct')}>
+    <Avatar account={account} size={35} />
+  </Permalink>
+));
+
+
+class HeaderNavigation extends Component {
+  static propTypes = {
+    identity: identityContextPropShape,
+    intl: PropTypes.object.isRequired,
+    onOpenSettings: PropTypes.func,
+    location: PropTypes.object,
+    openClosedRegistrationsModal: PropTypes.func,
+    signupUrl: PropTypes.string.isRequired,
+  };
+
+  isFirehoseActive = (match, location) => {
+    return match || location.pathname.startsWith('/public');
+  };
+
+  state = {
+    collapsed: true,
+    animating: false
+  };
+
+  handleToggleClick = (e) => {
+    e.stopPropagation();
+    this.setState(function(state) {
+      return {
+        collapsed: !state.collapsed,
+        animating: true
+      };
+    });
+  };
+
+  handleTransitionEnd = () => {
+    this.setState({
+      animating: false
+    });
+  };
+
+  render () {
+    const { intl, onOpenSettings, location, openClosedRegistrationsModal, signupUrl  } = this.props;
+    const { signedIn, disabledAccountId, permissions } = this.props.identity;
+
+    let banner = undefined;
+
+    let content;
+
+    if (signedIn) {
+      content = (
+        <Account />
+      );
+    } else {
+
+      if (sso_redirect) {
+        content = (
+          <a href={sso_redirect} data-method='post' className='button button--block button-tertiary'><FormattedMessage id='sign_in_banner.sso_redirect' defaultMessage='Login or Register' /></a>
+        );
+      } else {
+        let signupButton;
+
+        if (registrationsOpen) {
+          signupButton = (
+            <a href={signupUrl} className='button'>
+              <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
+            </a>
+          );
+        } else {
+          signupButton = (
+            <button className='button' onClick={openClosedRegistrationsModal}>
+              <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
+            </button>
+          );
+        }
+
+        content = (
+          <>
+            {signupButton}
+            <a href='/auth/sign_in' className='button button-tertiary'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Login' /></a>
+          </>
+        );
+      }
+    }
+
+    if(transientSingleColumn)
+      banner = (<div className='switch-to-advanced'>
+        {intl.formatMessage(messages.openedInClassicInterface)}
+        {" "}
+        <a href={`/deck${location.pathname}`} className='switch-to-advanced__toggle'>
+          {intl.formatMessage(messages.advancedInterface)}
+        </a>
+      </div>);
+
+    return (
+      <div className='header-navigation-panel'>
+        {banner &&
+          <div className='header-navigation-panel__banner'>
+            {banner}
+          </div>
+        }
+
+        {content}
+
+        {signedIn && (
+          <>
+            <HeaderNavLink transparent to='/home' icon='home' iconComponent={HomeIcon} activeIconComponent={HomeActiveIcon} text={intl.formatMessage(messages.home)} />
+            <NotificationsLink />
+            <FollowRequestsLink />
+          </>
+        )}
+
+        <HeaderNavLink transparent to='/search' icon='search' iconComponent={SearchIcon} text={intl.formatMessage(messages.search)} />
+
+        {(signedIn || timelinePreview) && (
+          <HeaderNavLink transparent to='/public/local' isActive={this.isFirehoseActive} icon='globe' iconComponent={PublicIcon} text={intl.formatMessage(messages.firehose)} />
+        )}
+
+        {!signedIn && (
+          <div className='header-navigation-panel__sign-in-banner'>
+            { disabledAccountId ? <DisabledAccountBanner /> : <SignInBanner /> }
+          </div>
+        )}
+
+        <CollapseButton collapsed={this.state.collapsed} setCollapsed={this.handleToggleClick} />
+        
+        <ul className={'header-dropdown ' + this.state.collapsed ? 'visible' : 'hidden' } onTransitionEnd={this.handleTransitionEnd}>
+          {(!this.state.collapsed || this.state.animating) && (
+            <>
+              {signedIn && (
+                <>
+                  <li> <HeaderNavLink transparent to='/conversations' icon='at' iconComponent={MailIcon} activeIconComponent={MailActiveIcon} text={intl.formatMessage(messages.direct)} /> </li>
+                
+                  <li> <HeaderNavLink transparent to='/bookmarks' icon='bookmarks' iconComponent={BookmarksIcon} activeIconComponent={BookmarksActiveIcon} text={intl.formatMessage(messages.bookmarks)} /> </li>
+                  <li> <HeaderNavLink transparent to='/favourites' icon='star' iconComponent={StarIcon} activeIconComponent={StarActiveIcon} text={intl.formatMessage(messages.favourites)} /> </li>
+                  <li> <HeaderNavLink transparent to='/lists' icon='list-ul' iconComponent={ListAltIcon} activeIconComponent={ListAltActiveIcon} text={intl.formatMessage(messages.lists)} /> </li>
+
+                  <li> <HeaderNavLink transparent onClick={onOpenSettings} icon='cogs' iconComponent={AdministrationIcon} text={intl.formatMessage(messages.app_settings)} /> </li>
+
+                  {canManageReports(permissions) && <li> <HeaderNavLink transparent href='/admin/reports' icon='flag' iconComponent={ModerationIcon} text={intl.formatMessage(messages.moderation)} /> </li>}
+                  {canViewAdminDashboard(permissions) && <li> <HeaderNavLink transparent href='/admin/dashboard' icon='tachometer' iconComponent={AdministrationIcon} text={intl.formatMessage(messages.administration)} /> </li>}
+                </>
+              )}
+              {!!preferencesLink && <li> <HeaderNavLink transparent href={preferencesLink} icon='cog' iconComponent={SettingsIcon} text={intl.formatMessage(messages.preferences)} /> </li>}
+              <li> <HeaderNavLink transparent to='/about' icon='ellipsis-h' iconComponent={MoreHorizIcon} text={intl.formatMessage(messages.about)} /> </li>
+            </>
+          )}
+        </ul>
+
+        {signedIn && (
+          <ListPanel />
+        )}
+      </div>
+    );
+  }
+}
+
+export default injectIntl(withIdentity(HeaderNavigation));
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@ -3147,11 +3147,23 @@ $ui-header-logo-wordmark-width: 99px;

  .layout-single-column {
    .ui__header {
-      display: flex;
+      // lol turn this shit off
+      display: none;
      background: var(--background-color);
      border-bottom: 1px solid var(--background-border-color);
    }

+    .header-dropdown {
+      display: none;
+      top: -100%;
+      transition: all 0.5s;
+    }
+
+    .header-dropdown.visible {
+      display: block;
+      top: 0;
+    }
+
    .column > .scrollable,
    .tabs-bar__wrapper .column-header,
    .tabs-bar__wrapper .column-back-button {
--- a/reload.sh
+++ b/reload.sh
@ -0,0 +1,3 @@
+#!/bin/bash
+sudo su - mastodon -c 'cd live && RAILS_ENV=development bundle exec rails tmp:cache:clear && RAILS_ENV=development bundle exec rails assets:precompile'
+sudo systemctl restart mastodon-*
Author	SHA1	Message	Date
Ruby Tartakovsky	e1c224da0a	fuuuuck	2024-10-01 01:14:29 +00:00
Ruby Tartakovsky	f729c8ee71	initial piddly commit for navbar shit	2024-09-27 23:18:26 +00:00