['Files'] redesigned the side nav & the main content (#6044)

frontend/src/app.js

@@ -231,7 +231,6 @@ class App extends Component {
                 path={siteRoot + 'group/:groupID'}
                 onShowSidePanel={this.onShowSidePanel}
                 onSearchedClick={this.onSearchedClick}
-                onTabNavClick={this.tabItemClick}
                 onGroupChanged={this.onGroupChanged}
               />
               <Wikis path={siteRoot + 'published'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>

frontend/src/components/main-side-nav.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@gatsbyjs/reach-router';
-import { gettext, siteRoot, canAddRepo, canGenerateShareLink, canGenerateUploadLink, canInvitePeople, enableOCM, enableOCMViaWebdav } from '../utils/constants';
+import { gettext, siteRoot, canAddRepo, canGenerateShareLink, canGenerateUploadLink, canInvitePeople } from '../utils/constants';
 import { seafileAPI } from '../utils/seafile-api';
 import { Utils } from '../utils/utils';
 import toaster from './toast';
@@ -19,24 +19,15 @@ class MainSideNav extends React.Component {
     super(props);
     this.state = {
       FilesNavUnfolded: false,
-      groupsExtended: false,
       sharedExtended: false,
       closeSideBar:false,
       groupItems: [],
     };
 
     this.listHeight = 24; //for caculate tabheight
-    this.groupsHeight = 0;
     this.adminHeight = 0;
   }
 
-  grpsExtend = () => {
-    this.setState({
-      groupsExtended: !this.state.groupsExtended,
-    });
-    this.loadGroups();
-  };
-
   shExtend = () => {
     this.setState({
       sharedExtended: !this.state.sharedExtended,
@@ -51,7 +42,6 @@ class MainSideNav extends React.Component {
         return group;
       });
 
-      this.groupsHeight = (groupList.length + 1) * _this.listHeight;
       _this.setState({
         groupItems: groupList.sort((a, b) => {
           return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
@@ -81,23 +71,13 @@ class MainSideNav extends React.Component {
   };
 
   renderSharedGroups() {
-    let style = {height: 0};
-    if (this.state.groupsExtended) {
-      style = {height: this.groupsHeight};
-    }
     return (
-      <ul className={`nav sub-nav nav-pills flex-column grp-list ${this.state.groupsExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style}>
-        <li className="nav-item">
-          <Link to={siteRoot + 'groups/'}  className={`nav-link ellipsis ${this.getActiveClass('groups')}`} onClick={(e) => this.tabItemClick(e, 'groups')}>
-            <span className="sharp" aria-hidden="true">#</span>
-            <span className="nav-text">{gettext('All Groups')}</span>
-          </Link>
-        </li>
+      <ul className={'nav sub-nav nav-pills flex-column grp-list'}>
         {this.state.groupItems.map(item => {
           return (
             <li key={item.id} className="nav-item">
               <Link to={siteRoot + 'group/' + item.id + '/'} className={`nav-link ellipsis ${this.getActiveClass(item.name)}`} onClick={(e) => this.tabItemClick(e, item.name, item.id)}>
-                <span className="sharp" aria-hidden="true">#</span>
+                <span className="sf3-font-group sf3-font nav-icon" aria-hidden="true"></span>
                 <span className="nav-text">{item.name}</span>
               </Link>
             </li>
@@ -178,6 +158,10 @@ class MainSideNav extends React.Component {
     e.stopPropagation();
     this.setState({
       FilesNavUnfolded: !this.state.FilesNavUnfolded
+    }, () => {
+      if (this.state.FilesNavUnfolded) {
+        this.loadGroups();
+      }
     });
   };
 
@@ -198,43 +182,28 @@ class MainSideNav extends React.Component {
                 {canAddRepo && (
                   <li className="nav-item">
                     <Link to={ siteRoot + 'my-libs/' } className={`nav-link ellipsis ${this.getActiveClass('my-libs') || this.getActiveClass('deleted') }`} title={gettext('My Libraries')} onClick={(e) => this.tabItemClick(e, 'my-libs')}>
+                      <span className="sf3-font-mine sf3-font nav-icon" aria-hidden="true"></span>
                       <span className="nav-text">{gettext('My Libraries')}</span>
                     </Link>
                   </li>
                 )}
                 <li className="nav-item">
                   <Link to={siteRoot + 'shared-libs/'} className={`nav-link ellipsis ${this.getActiveClass('shared-libs')}`} title={gettext('Shared with me')} onClick={(e) => this.tabItemClick(e, 'shared-libs')}>
+                    <span className="sf3-font-share-with-me sf3-font nav-icon" aria-hidden="true"></span>
                     <span className="nav-text">{gettext('Shared with me')}</span>
                   </Link>
                 </li>
                 {canViewOrg &&
                 <li className="nav-item" onClick={(e) => this.tabItemClick(e, 'org')}>
                   <Link to={ siteRoot + 'org/' } className={`nav-link ellipsis ${this.getActiveClass('org')}`} title={gettext('Shared with all')}>
+                    <span className="sf3-font-share-with-all sf3-font nav-icon" aria-hidden="true"></span>
                     <span className="nav-text">{gettext('Shared with all')}</span>
                   </Link>
                 </li>
                 }
                 <li className="nav-item flex-column" id="group-nav">
-                  <a className="nav-link ellipsis d-flex pr-1" title={gettext('Shared with groups')} onClick={this.grpsExtend}>
-                    <span className="nav-text">{gettext('Shared with groups')}</span>
-                    <span className={`toggle-icon fas ${this.state.groupsExtended ?'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
-                  </a>
                   {this.renderSharedGroups()}
                 </li>
-                {enableOCM &&
-                <li className="nav-item">
-                  <Link to={siteRoot + 'shared-with-ocm/'} className={`nav-link ellipsis ${this.getActiveClass('shared-with-ocm')}`} title={gettext('Shared from other servers')} onClick={(e) => this.tabItemClick(e, 'shared-with-ocm')}>
-                    <span className="nav-text">{gettext('Shared from other servers')}</span>
-                  </Link>
-                </li>
-                }
-                {enableOCMViaWebdav &&
-                <li className="nav-item">
-                  <Link to={siteRoot + 'ocm-via-webdav/'} className={`nav-link ellipsis ${this.getActiveClass('ocm-via-webdav')}`} title={gettext('Shared from other servers')} onClick={(e) => this.tabItemClick(e, 'ocm-via-webdav')}>
-                    <span className="nav-text">{gettext('Shared from other servers')}</span>
-                  </Link>
-                </li>
-                }
               </ul>
             </li>
 

frontend/src/components/shared-repo-list-view/shared-repo-list-view.js

@@ -20,6 +20,7 @@ const propTypes = {
   onItemRename: PropTypes.func,
   hasNextPage: PropTypes.bool,
   onMonitorRepo: PropTypes.func,
+  theadHidden: PropTypes.bool,
 };
 
 class SharedRepoListView extends React.Component {
@@ -115,12 +116,12 @@ class SharedRepoListView extends React.Component {
         <thead>
           <tr>
             <th width="4%"></th>
-            <th width="4%"><span className="sr-only">{gettext('Library Type')}</span></th>
-            <th width="36%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
-            <th width="12%"><span className="sr-only">{gettext('Actions')}</span></th>
-            <th width={'14%'}><a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {sortBySize && sortIcon}</a></th>
-            <th width={'14%'}><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
-            <th width="16%">{gettext('Owner')}</th>
+            <th width="3%"><span className="sr-only">{gettext('Library Type')}</span></th>
+            <th width="35%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
+            <th width="10%"><span className="sr-only">{gettext('Actions')}</span></th>
+            <th width="14%"><a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {sortBySize && sortIcon}</a></th>
+            <th width="17%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
+            <th width="17%">{gettext('Owner')}</th>
           </tr>
         </thead>
         <tbody>

frontend/src/components/toolbar/groups-toolbar.js

@@ -29,7 +29,7 @@ class GroupsToolbar extends React.Component {
         {Utils.isDesktop() ? (
           <div className="operation">
             <button className="btn btn-secondary operation-item" onClick={this.toggleDialog}>
-              <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Group')}
+              <i className="sf3-font-new-group1 sf3-font text-secondary mr-1"></i>{gettext('New Group')}
             </button>
           </div>
         ) : (

frontend/src/pages/groups/group-item.js

@@ -73,10 +73,13 @@ class GroupItem extends React.Component {
     const { group } = this.props;
     const emptyTip = <p className="group-item-empty-tip">{gettext('No libraries')}</p>;
     return (
-      <div className="group-list-panel">
-        <h4 className="group-item-heading ellipsis">
+      <div className="pb-3">
+        <div className="d-flex justify-content-between mt-3 p-1 border-bottom">
+          <h4 className="sf-heading m-0 ellipsis">
+            <span className="sf3-font-group sf3-font nav-icon" aria-hidden="true"></span>
             <a href={`${siteRoot}group/${group.id}/`} title={group.name}>{group.name}</a>
           </h4>
+        </div>
         {group.repos.length === 0 ?
           emptyTip :
           <SharedRepoListView

frontend/src/pages/groups/group-view.js

@@ -1,8 +1,7 @@
 import React,{ Fragment } from 'react';
 import PropTypes from 'prop-types';
 import cookie from 'react-cookies';
-import { gettext, siteRoot, username, canAddRepo } from '../../utils/constants';
-import { Link } from '@gatsbyjs/reach-router';
+import { gettext, username, canAddRepo } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import Loading from '../../components/loading';
@@ -29,7 +28,6 @@ const propTypes = {
   onShowSidePanel: PropTypes.func.isRequired,
   onSearchedClick: PropTypes.func.isRequired,
   onGroupChanged: PropTypes.func.isRequired,
-  onTabNavClick: PropTypes.func.isRequired,
   groupID: PropTypes.string,
 };
 
@@ -259,10 +257,6 @@ class GroupView extends React.Component {
     this.setState({repoList: repoList});
   };
 
-  onTabNavClick = (tabName) => {
-    this.props.onTabNavClick(tabName);
-  };
-
   toggleGroupDropdown = () => {
     this.setState({
       showGroupDropdown: !this.state.showGroupDropdown
@@ -432,8 +426,6 @@ class GroupView extends React.Component {
               {currentGroup && (
                 <Fragment>
                   <div className="path-container">
-                    <Link to={`${siteRoot}groups/`} onClick={() => this.onTabNavClick('groups')}>{gettext('Groups')}</Link>
-                    <span className="path-split">/</span>
                     <span>{currentGroup.name}</span>
                     {isDepartmentGroup && (
                       <Fragment>

frontend/src/pages/libraries/index.js

@@ -225,10 +225,28 @@ class Libraries extends Component {
               <h3 className="sf-heading m-0">{gettext('Files')}</h3>
             </div>
             <div className="cur-view-content">
+
+              <table aria-hidden={true} className="my-3">
+                <thead>
+                  <tr>
+                    <th width="4%"></th>
+                    <th width="3%"><span className="sr-only">{gettext('Library Type')}</span></th>
+                    <th width="35%">{gettext('Name')}</th>
+                    <th width="10%"><span className="sr-only">{gettext('Actions')}</span></th>
+                    <th width="14%">{gettext('Size')}</th>
+                    <th width="17%">{gettext('Last Update')}</th>
+                    <th width="17%">{gettext('Owner')}</th>
+                  </tr>
+                </thead>
+              </table>
+
               {canAddRepo && (
-                <div className="pb-4">
+                <div className="pb-3">
                   <div className="d-flex justify-content-between mt-3 p-1 border-bottom">
-                    <h4 className="sf-heading m-0">{gettext('My Libraries')}</h4>
+                    <h4 className="sf-heading m-0">
+                      <span className="sf3-font-mine sf3-font nav-icon" aria-hidden="true"></span>
+                      {gettext('My Libraries')}
+                    </h4>
                     {(!Utils.isDesktop() && this.state.repoList.length > 0) && <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
                   </div>
                   {this.state.isLoading ? <Loading /> : (
@@ -244,26 +262,23 @@ class Libraries extends Component {
                           onMonitorRepo={this.onMonitorRepo}
                           onRepoClick={this.onRepoClick}
                           sortRepoList={this.sortRepoList}
-                          theadHidden={true}
+                          inAllLibs={true}
                         />
                       )))}
                 </div>
               )}
 
-              <div className="pb-4">
+              <div className="pb-3">
                 <SharedLibs inAllLibs={true} />
               </div>
 
               {canViewOrg && (
-                <div className="pb-4">
+                <div className="pb-3">
                   <SharedWithAll inAllLibs={true} />
                 </div>
               )}
 
-              <div className="pb-4">
-                <div className="d-flex justify-content-between mt-3 p-1 border-bottom">
-                  <h4 className="sf-heading m-0">{gettext('Shared with groups')}</h4>
-                </div>
+              <div className="group-list-panel">
                 {this.state.isGroupsLoading? <Loading /> : (
                   this.state.groupsErrorMsg ? <p className="error text-center mt-8">{this.state.groupsErrorMsg}</p> : (
                     this.state.groupList.length === 0 ? groupsEmptyTip : (

frontend/src/pages/my-libs/mylib-repo-list-view.js

@@ -14,7 +14,7 @@ const propTypes = {
   onDeleteRepo: PropTypes.func.isRequired,
   onTransferRepo: PropTypes.func.isRequired,
   onMonitorRepo: PropTypes.func.isRequired,
-  theadHidden : PropTypes.bool, // for 'My Libraries' in 'Files' page
+  inAllLibs: PropTypes.bool, // for 'My Libraries' in 'Files' page
 };
 
 class MylibRepoListView extends React.Component {
@@ -78,20 +78,21 @@ class MylibRepoListView extends React.Component {
   };
 
   renderPCUI = () => {
-    const { theadHidden } = this.props;
-    const showStorageBackend = storages.length > 0;
+    const { inAllLibs } = this.props;
+    const showStorageBackend = !inAllLibs && storages.length > 0;
     const sortIcon = this.props.sortOrder === 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
+
     return (
-      <table className={theadHidden ? 'table-thead-hidden' : ''}>
+      <table className={inAllLibs ? 'table-thead-hidden' : ''}>
         <thead>
           <tr>
             <th width="4%"></th>
-            <th width="4%"><span className="sr-only">{gettext('Library Type')}</span></th>
-            <th width={showStorageBackend ? '33%' : '38%'}><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {this.props.sortBy === 'name' && sortIcon}</a></th>
-            <th width="14%"><span className="sr-only">{gettext('Actions')}</span></th>
-            <th width={showStorageBackend ? '15%' : '20%'}><a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {this.props.sortBy === 'size' && sortIcon}</a></th>
-            {showStorageBackend ? <th width="15%">{gettext('Storage Backend')}</th> : null}
-            <th width={showStorageBackend ? '15%' : '20%'}><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {this.props.sortBy === 'time' && sortIcon}</a></th>
+            <th width="3%"><span className="sr-only">{gettext('Library Type')}</span></th>
+            <th width={showStorageBackend ? '36%' : '35%'}><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {this.props.sortBy === 'name' && sortIcon}</a></th>
+            <th width="10%"><span className="sr-only">{gettext('Actions')}</span></th>
+            <th width={showStorageBackend ? '15%' : '14%'}><a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {this.props.sortBy === 'size' && sortIcon}</a></th>
+            {showStorageBackend ? <th width="17%">{gettext('Storage Backend')}</th> : null}
+            <th width={showStorageBackend ? '15%' : '34%'}><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {this.props.sortBy === 'time' && sortIcon}</a></th>
           </tr>
         </thead>
         <tbody>

frontend/src/pages/shared-libs/shared-libs.js

@@ -78,12 +78,12 @@ class Content extends Component {
         <thead>
           <tr>
             <th width="4%"></th>
-            <th width="4%"><span className="sr-only">{gettext('Library Type')}</span></th>
-            <th width="34%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
+            <th width="3%"><span className="sr-only">{gettext('Library Type')}</span></th>
+            <th width="35%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
             <th width="10%"><span className="sr-only">{gettext('Actions')}</span></th>
             <th width="14%"><a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {sortBySize && sortIcon}</a></th>
-            <th width="18%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
-            <th width="16%">{gettext('Owner')}</th>
+            <th width="17%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
+            <th width="17%">{gettext('Owner')}</th>
           </tr>
         </thead>
       );
@@ -479,7 +479,10 @@ class SharedLibraries extends Component {
         {inAllLibs ? (
           <>
             <div className="d-flex justify-content-between mt-3 p-1 border-bottom">
-              <h4 className="sf-heading m-0">{gettext('Shared with me')}</h4>
+              <h4 className="sf-heading m-0">
+                {inAllLibs && <span className="sf3-font-share-with-me sf3-font nav-icon" aria-hidden="true"></span>}
+                {gettext('Shared with me')}
+              </h4>
               {this.renderSortIconInMobile()}
             </div>
             {this.renderContent()}

frontend/src/pages/shared-with-all/index.js

@@ -155,7 +155,10 @@ class PublicSharedView extends React.Component {
       return (
         <>
           <div className="d-flex justify-content-between mt-3 p-1 border-bottom">
-            <h4 className="sf-heading m-0">{gettext('Shared with all')}</h4>
+            <h4 className="sf-heading m-0">
+              <span className="sf3-font-share-with-all sf3-font nav-icon" aria-hidden="true"></span>
+              {gettext('Shared with all')}
+            </h4>
             {this.renderSortIconInMobile()}
           </div>
           {this.renderContent()}

media/css/seahub_react.css

@@ -151,6 +151,13 @@ a, a:hover { color: #ec8000; }
   margin: 0;
 }
 
+.sf-heading .nav-icon {
+  font-size: .875rem;
+  margin-right: 6px;
+  line-height: 1;
+  color: #999;
+}
+
 .sf-link {
     color: #ee8204 !important;
     cursor: pointer;
@@ -580,7 +587,7 @@ a, a:hover { color: #ec8000; }
 
 .side-nav-con {
     flex: 1;
-    padding:12px;
+    padding: .75rem .5rem;
     overflow: hidden;
 }
 
@@ -648,13 +655,13 @@ a, a:hover { color: #ec8000; }
 
 .side-nav-con .nav .nav-item,
 .side-nav-con .nav .nav-item .nav-link {
-    padding-left: 0;
-    margin-right: 0;
     width: 100%;
 }
 
 .side-nav-con .nav .nav-item .nav-link {
-    height: 36px;
+    height: 38px;
+    padding: 0 .5rem;
+    margin: 0;
 }
 
 .side-nav-con .active .sharp,
@@ -670,14 +677,10 @@ a, a:hover { color: #ec8000; }
 
 .side-nav-con [class^="sf2-icon-"],
 .side-nav-con [class^="sf3-font-"] {
-    display:inline-block;
-    width:2.625rem;
-    margin-right:0.325rem;
-    text-align:center;
-    vertical-align:middle;
-    font-size:1.5rem;
-    line-height:1;
-    color:#999;
+    font-size: 1.5rem;
+    line-height: 1;
+    color: #999;
+    margin-right: 0.5rem;
 }
 
 .side-nav-con .sharp {
@@ -720,12 +723,17 @@ a, a:hover { color: #ec8000; }
     height: auto;
 }
 .side-nav-con .sub-nav#files-sub-nav .nav-item .nav-link {
-    padding-left: 3rem;
+    padding-left: 2.5rem;
+    height: 28px;
+    display: flex;
+    align-items: center;
 }
 
-.side-nav-con .sub-nav#files-sub-nav .sub-nav .nav-item .nav-link {
-    padding-left: 2rem;
+.side-nav-con .sub-nav#files-sub-nav .nav-item .nav-link .nav-icon {
+  font-size: .875rem;
+  margin-right: 6px;
 }
+
 .side-panel-slide {
     transition: all .3s ease-in-out;
 }

media/css/sf_font3/iconfont.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: "sf3-font"; /* Project id 1230969 */
-  src: url('iconfont.eot?t=1706682203259'); /* IE9 */
-  src: url('iconfont.eot?t=1706682203259#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('iconfont.woff2?t=1706682203259') format('woff2'),
-       url('iconfont.woff?t=1706682203259') format('woff'),
-       url('iconfont.ttf?t=1706682203259') format('truetype'),
-       url('iconfont.svg?t=1706682203259#sf3-font') format('svg');
+  src: url('iconfont.eot?t=1713953465004'); /* IE9 */
+  src: url('iconfont.eot?t=1713953465004#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('iconfont.woff2?t=1713953465004') format('woff2'),
+       url('iconfont.woff?t=1713953465004') format('woff'),
+       url('iconfont.ttf?t=1713953465004') format('truetype'),
+       url('iconfont.svg?t=1713953465004#sf3-font') format('svg');
 }
 
 .sf3-font {
@@ -16,6 +16,34 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.sf3-font-share-with-all:before {
+  content: "\e807";
+}
+
+.sf3-font-new-group1:before {
+  content: "\e803";
+}
+
+.sf3-font-share-with-me:before {
+  content: "\e804";
+}
+
+.sf3-font-group:before {
+  content: "\e805";
+}
+
+.sf3-font-mine:before {
+  content: "\e806";
+}
+
+.sf3-font-ai-search:before {
+  content: "\e801";
+}
+
+.sf3-font-search:before {
+  content: "\e802";
+}
+
 .sf3-font-set-up:before {
   content: "\e800";
 }

media/css/sf_font3/iconfont.svg

@@ -14,6 +14,20 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="share-with-all" unicode="&#59399;" d="M876.8 390.4c89.6-44.8 147.2-144 147.2-249.6 0-38.4-57.6-64-134.4-76.8 0 3.2 3.2 9.6 3.2 12.8 0 108.8-44.8 208-124.8 278.4 38.4 0 76.8 12.8 108.8 35.2zM761.6 736c60.8 0 115.2-35.2 144-89.6s28.8-121.6 0-176-83.2-89.6-144-89.6c-19.2 0-41.6 3.2-57.6 12.8 99.2 83.2 118.4 233.6 44.8 342.4h12.8zM147.2 384c32-22.4 67.2-35.2 105.6-35.2-76.8-67.2-121.6-169.6-121.6-278.4 0-6.4 0-9.6 3.2-12.8C57.6 70.4 0 96 0 134.4c0 108.8 57.6 204.8 147.2 249.6zM262.4 729.6h16c-32-41.6-48-92.8-48-147.2 0-76.8 32-147.2 89.6-195.2-19.2-6.4-38.4-12.8-57.6-12.8-44.8 0-86.4 19.2-118.4 51.2S96 505.6 96 550.4c0 99.2 73.6 179.2 166.4 179.2zM512-32c-166.4 0-329.6 32-329.6 102.4 0 124.8 73.6 208 185.6 262.4h3.2c86.4-57.6 195.2-57.6 281.6 0 115.2-54.4 185.6-137.6 185.6-262.4 3.2-67.2-160-102.4-326.4-102.4z m0 390.4c-121.6 0-220.8 99.2-220.8 220.8S390.4 800 512 800c121.6 0 220.8-99.2 220.8-220.8s-99.2-220.8-220.8-220.8z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="new-group1" unicode="&#59395;" d="M496 364.8c25.6-12.8 51.2-28.8 73.6-48-32-44.8-48-102.4-48-160 0-73.6 25.6-137.6 70.4-188.8-192-57.6-592-32-592 80 0 137.6 80 259.2 198.4 316.8 41.6-25.6 96-44.8 150.4-44.8 48 0 102.4 16 147.2 44.8z m198.4 422.4c28.8-9.6 51.2-25.6 70.4-44.8 41.6-38.4 64-92.8 64-147.2 0-25.6-6.4-54.4-16-80s-28.8-51.2-48-70.4l-9.6-9.6c-44.8-6.4-83.2-25.6-118.4-51.2-32-3.2-64 0-92.8 9.6 16 9.6 28.8 19.2 41.6 32 22.4 22.4 41.6 48 54.4 76.8 12.8 28.8 19.2 60.8 19.2 89.6 0 64-25.6 121.6-70.4 166.4-12.8 12.8-25.6 22.4-38.4 32l9.6 3.2c41.6 16 89.6 12.8 134.4-6.4z m-262.4 28.8c28.8-9.6 54.4-28.8 73.6-48 41.6-41.6 67.2-99.2 67.2-156.8 0-28.8-6.4-54.4-16-83.2-12.8-28.8-28.8-54.4-51.2-73.6-19.2-19.2-44.8-35.2-73.6-48-57.6-22.4-118.4-22.4-176 0-25.6 9.6-51.2 28.8-73.6 48s-38.4 44.8-51.2 73.6c-12.8 25.6-16 54.4-16 83.2s6.4 54.4 16 83.2 32 54.4 54.4 73.6c19.2 19.2 44.8 35.2 70.4 48 57.6 22.4 118.4 22.4 176 0zM800 384c124.8 0 224-99.2 224-224s-99.2-224-224-224-224 99.2-224 224 99.2 224 224 224z m22.4-73.6h-41.6c-9.6 0-16-6.4-16-16v-96h-96c-9.6 0-16-6.4-16-16v-41.6c0-9.6 6.4-16 16-16h96v-96c0-9.6 6.4-16 16-16h41.6c9.6 0 16 6.4 16 16v96h96c9.6 0 16 6.4 16 16v41.6c0 9.6-6.4 16-16 16h-96v96c0 6.4-9.6 16-16 16z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="share-with-me" unicode="&#59396;" d="M428.8 118.4c0 67.2 25.6 182.4 92.8 214.4-32 9.6-80 12.8-150.4 9.6C156.8 323.2 32 188.8 32 3.2v-19.2c0-96 150.4-96 339.2-96h176c-67.2 38.4-118.4 163.2-118.4 230.4z m35.2 246.4c147.2 0 268.8 118.4 268.8 265.6S611.2 896 464 896 192 777.6 192 630.4s121.6-265.6 272-265.6zM736 384c-140.8 0-256-115.2-256-256s115.2-256 256-256 256 115.2 256 256-115.2 256-256 256z m54.4-112c25.6 0 48-22.4 48-48s-22.4-48-48-48-48 22.4-48 48 19.2 48 48 48z m-134.4-121.6l89.6 57.6c3.2-9.6 6.4-16 16-22.4L672 124.8c-3.2 9.6-9.6 19.2-16 25.6zM576 112c0 25.6 22.4 48 48 48s48-22.4 48-48-22.4-48-48-48-48 22.4-48 48z m86.4-32c6.4 6.4 9.6 12.8 9.6 22.4l105.6-57.6c-6.4-6.4-9.6-12.8-12.8-25.6l-102.4 60.8z m105.6-64c0 25.6 22.4 48 48 48s48-22.4 48-48-22.4-48-48-48c-28.8 0-48 22.4-48 48z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="group" unicode="&#59397;" d="M761.6 3.2c25.6 16 41.6 32 41.6 54.4 0 105.6-51.2 201.6-131.2 265.6h3.2c51.2 0 102.4 12.8 147.2 38.4 115.2-48 198.4-150.4 198.4-265.6 3.2-51.2-118.4-83.2-259.2-92.8z m-192 793.6c48 12.8 99.2 12.8 147.2-6.4 25.6-9.6 51.2-25.6 70.4-44.8 41.6-38.4 64-92.8 64-147.2 0-25.6-6.4-51.2-16-76.8s-25.6-51.2-48-67.2c-19.2-19.2-44.8-35.2-70.4-44.8-48-19.2-102.4-19.2-150.4-6.4 16 9.6 28.8 19.2 41.6 32 22.4 19.2 41.6 48 54.4 76.8 12.8 28.8 19.2 57.6 19.2 89.6 0 60.8-25.6 121.6-70.4 166.4-12.8 6.4-25.6 19.2-41.6 28.8zM518.4 371.2c115.2-57.6 195.2-176 195.2-313.6 0-144-688-147.2-688 0 0 134.4 80 256 195.2 313.6 41.6-25.6 92.8-44.8 147.2-44.8s105.6 16 150.4 44.8z m-307.2 89.6c-22.4 19.2-41.6 41.6-51.2 70.4-12.8 25.6-16 54.4-16 83.2s3.2 54.4 16 83.2c9.6 25.6 28.8 51.2 51.2 70.4 19.2 19.2 44.8 35.2 73.6 48 54.4 22.4 118.4 22.4 172.8 0 28.8-9.6 54.4-28.8 73.6-48 41.6-41.6 67.2-96 67.2-153.6 0-28.8-6.4-54.4-16-83.2s-28.8-51.2-51.2-70.4c-19.2-19.2-44.8-35.2-73.6-48-54.4-22.4-118.4-22.4-172.8 0-28.8 12.8-51.2 28.8-73.6 48z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="mine" unicode="&#59398;" d="M703.774784 359.030603c-57.532435-38.354957-127.849856-54.336189-191.774784-54.336189-67.121175 0-137.438596 19.177478-191.774784 54.336189-150.223581-70.317421-252.503466-185.382292-252.503467-351.587104 0-182.186045 894.948994-178.989799 894.948995 0-6.392493 166.204813-111.868624 281.269684-258.89596 351.587104z m-380.353322 99.083639c28.766218-22.373725 54.336189-41.551203 86.298653-54.336189 63.924928-28.766218 137.438596-28.766218 201.363524 0 35.15871 12.784986 60.728682 31.962464 86.298653 54.336189 28.766218 22.373725 44.74745 51.139943 57.532435 86.298653 12.784986 31.962464 19.177478 63.924928 19.177478 95.887392 0 67.121175-31.962464 134.242349-79.90616 182.186046-25.569971 22.373725-51.139943 41.551203-86.298653 54.336189-63.924928 28.766218-137.438596 28.766218-201.363523 0-35.15871-12.784986-60.728682-31.962464-86.298653-54.336189-25.569971-25.569971-44.74745-57.532435-57.532436-86.298653-9.588739-35.15871-15.981232-63.924928-15.981232-99.083639s6.392493-67.121175 19.177479-95.887392c9.588739-31.962464 28.766218-60.728682 57.532435-83.102407z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="ai-search" unicode="&#59393;" d="M448.099844 896c246.015601 0 447.301092-201.285491 447.301092-447.301092 0-95.850234-28.75507-182.115445-79.875195-255.600624l182.115445-182.115445c31.950078-31.950078 31.950078-83.070203 0-115.02028s-83.070203-31.950078-115.020281 0L703.700468 78.078003c-73.485179-51.120125-159.75039-79.875195-255.600624-79.875195-246.015601 0-447.301092 201.285491-447.301092 447.301092C0.798752 694.714509 202.084243 896 448.099844 896z m0-127.800312C272.374415 768.199688 128.599064 624.424337 128.599064 448.698908s143.775351-319.50078 319.50078-319.50078 319.50078 143.775351 319.50078 319.50078S623.825273 768.199688 448.099844 768.199688zM396.979719 640.399376c15.975039 0 28.75507-9.585023 35.145086-25.560062l99.045242-309.915757c6.390016-22.365055-9.585023-47.925117-35.145086-47.925117h-3.195008c-15.975039 0-31.950078 9.585023-35.145086 25.560062l-19.170046 70.290172H317.104524l-19.170047-70.290172c-6.390016-15.975039-19.170047-25.560062-38.340093-25.560062-25.560062 0-41.535101 25.560062-35.145086 47.925117l99.045242 309.915757c6.390016 15.975039 22.365055 25.560062 38.340093 25.560062h35.145086z m-19.170047-57.51014c-12.780031-41.535101-22.365055-86.265211-35.145085-124.605305l-12.780032-41.535101h92.655227l-12.780032 41.535101c-9.585023 38.340094-19.170047 83.070203-31.950078 124.605305zM636.605304 640.399376c19.170047 0 35.145086-15.975039 35.145086-35.145086v-309.915756c0-19.170047-15.975039-35.145086-35.145086-35.145086h-3.195008c-19.170047 0-35.145086 15.975039-35.145085 35.145086V605.25429c0 19.170047 15.975039 35.145086 35.145085 35.145086h3.195008z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="search" unicode="&#59394;" d="M448.099844 896c246.015601 0 447.301092-201.285491 447.301092-447.301092 0-95.850234-28.75507-182.115445-79.875195-255.600624l182.115445-182.115445c31.950078-31.950078 31.950078-83.070203 0-115.02028s-83.070203-31.950078-115.020281 0L703.700468 78.078003c-73.485179-51.120125-159.75039-79.875195-255.600624-79.875195-246.015601 0-447.301092 201.285491-447.301092 447.301092C0.798752 694.714509 202.084243 896 448.099844 896z m0-127.800312C272.374415 768.199688 128.599064 624.424337 128.599064 448.698908s143.775351-319.50078 319.50078-319.50078 319.50078 143.775351 319.50078 319.50078S623.825273 768.199688 448.099844 768.199688z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="set-up" unicode="&#59392;" d="M512 592c115.2 0 208-92.8 208-208s-92.8-208-208-208-208 92.8-208 208 92.8 208 208 208z m0-128c-44.8 0-80-35.2-80-80s35.2-80 80-80 80 35.2 80 80-35.2 80-80 80zM432 838.4c-9.6 19.2-32 28.8-51.2 22.4-80-19.2-150.4-60.8-208-112-12.8-16-16-35.2-9.6-54.4 6.4-12.8 9.6-25.6 9.6-41.6 0-51.2-41.6-92.8-89.6-92.8-19.2 0-38.4-12.8-41.6-32C22.4 486.4 16 435.2 16 384c0-35.2 3.2-67.2 9.6-99.2 3.2-22.4 25.6-38.4 48-35.2h9.6c51.2 0 89.6-41.6 89.6-92.8 0-22.4-9.6-41.6-22.4-57.6-16-16-12.8-41.6 3.2-60.8 57.6-60.8 131.2-105.6 214.4-131.2 22.4-6.4 48 6.4 54.4 28.8 12.8 38.4 44.8 64 86.4 64s73.6-25.6 86.4-64c6.4-22.4 32-35.2 54.4-28.8 83.2 25.6 156.8 70.4 214.4 131.2 16 16 16 41.6 3.2 60.8-12.8 16-22.4 35.2-22.4 57.6 0 51.2 41.6 92.8 89.6 92.8h9.6c22.4-3.2 44.8 12.8 48 35.2 6.4 32 9.6 67.2 9.6 99.2 0 51.2-6.4 102.4-22.4 150.4-6.4 19.2-22.4 32-41.6 32-51.2 0-89.6 41.6-89.6 92.8 0 16 3.2 28.8 9.6 41.6 9.6 16 3.2 38.4-9.6 51.2-57.6 54.4-128 92.8-204.8 115.2-19.2 0-41.6-9.6-51.2-28.8-16-28.8-44.8-51.2-80-51.2s-67.2 22.4-80 51.2zM288 633.6c0 16-3.2 28.8-6.4 41.6 32 25.6 67.2 44.8 105.6 60.8 28.8-38.4 73.6-60.8 124.8-60.8s96 22.4 124.8 60.8c38.4-12.8 73.6-35.2 105.6-60.8-3.2-12.8-6.4-28.8-6.4-41.6 0-80 57.6-150.4 134.4-163.2 6.4-28.8 9.6-57.6 9.6-86.4 0-16 0-28.8-3.2-44.8-80-9.6-140.8-80-140.8-163.2 0-25.6 6.4-51.2 16-73.6-32-28.8-67.2-51.2-105.6-67.2-28.8 48-80 76.8-137.6 76.8s-108.8-32-137.6-76.8c-38.4 16-73.6 38.4-105.6 67.2 9.6 22.4 16 48 16 73.6 0 83.2-60.8 153.6-140.8 163.2 3.2 12.8 3.2 28.8 3.2 41.6 0 28.8 3.2 57.6 9.6 86.4C230.4 483.2 288 550.4 288 633.6z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="language" unicode="&#59391;" d="M982.4 582.4C905.6 768 723.2 896 512 896 230.4 896 0 665.6 0 384s230.4-512 512-512 512 230.4 512 512c0 96-41.6 198.4-41.6 198.4zM76.8 384c0 54.4 9.6 105.6 28.8 153.6 22.4-12.8 54.4-16 54.4-41.6 0-86.4 3.2-179.2 86.4-179.2 3.2 0 44.8-16 67.2-67.2 6.4-19.2 35.2 0 67.2 0 16 0 0-25.6 0-80s121.6-134.4 121.6-134.4c0-35.2 0-64 3.2-86.4C265.6-48 76.8 147.2 76.8 384z m540.8-422.4c16 70.4 25.6 108.8 60.8 137.6 51.2 41.6 6.4 89.6-32 83.2-32-3.2-12.8 35.2-38.4 38.4-28.8 3.2-64 54.4-102.4 73.6-22.4 9.6-41.6 35.2-73.6 35.2-28.8 0-70.4-22.4-70.4-3.2 0 60.8-6.4 102.4-6.4 121.6 0 12.8-9.6 3.2 28.8 3.2 22.4 0 9.6 41.6 32 41.6 19.2 0 70.4-19.2 83.2-9.6 12.8 6.4 86.4-185.6 86.4-32 0 19.2-9.6 48 0 67.2 38.4 67.2 76.8 124.8 73.6 131.2-3.2 3.2-41.6 9.6-70.4 0-9.6-3.2 3.2-19.2-12.8-22.4-57.6-12.8-105.6 12.8-86.4 38.4 16 25.6 83.2 9.6 86.4 60.8 3.2 28.8 6.4 64 6.4 86.4 156.8-22.4 284.8-128 339.2-272-147.2-108.8-108.8-182.4-60.8-227.2 25.6-22.4 51.2-57.6 67.2-83.2-57.6-128-169.6-233.6-310.4-268.8z"  horiz-adv-x="1024" />