Merge pull request #5822 from thematters/develop

Release: v6.6.0

Author: zeckli

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "6.5.0",
+  "version": "6.6.0",
   "description": "codebase of Matters' website",
   "author": "Matters <hi@matters.town>",
   "engines": {
@@ -84,7 +84,7 @@
     "lodash": "^4.17.21",
     "lottie-react": "^2.4.1",
     "multiformats": "^13.3.7",
-    "next": "^15.3.3",
+    "next": "15.3.6",
     "next-pwa": "^5.6.0",
     "next-seo": "^6.8.0",
     "nprogress": "^0.2.0",

package.json

@@ -6,6 +6,8 @@ export const STORAGE_KEY_BILLBOARD = '__BILLBOARD'
 
 export const STORAGE_KEY_CIRCLE_BANNER = '__CIRCLE_BANNER'
 
+export const STORAGE_KEY_EDITOR_OPTION_DRAWER = '__EDITOR_OPTION_DRAWER'
+
 export const STORAGE_KEY_SEARCH_HISTORY = '__SEARCH_HISTORY'
 
 export const REFERRAL_QUERY_REFERRAL_KEY = 'referral'

src/common/enums/storage.ts

@@ -2,7 +2,7 @@ import { Button, ButtonProps } from '~/components'
 
 export type DrawerTextButtonProps = {
   text: React.ReactNode
-  color?: 'black'
+  color?: 'black' | 'greyDarker'
 } & ButtonProps
 
 export const TextButton: React.FC<DrawerTextButtonProps> = ({
@@ -19,6 +19,13 @@ export const TextButton: React.FC<DrawerTextButtonProps> = ({
         textActiveColor: 'greyDarker',
       }
       break
+    case 'greyDarker':
+      buttonProps = {
+        ...buttonProps,
+        textColor: 'greyDarker',
+        textActiveColor: 'black',
+      }
+      break
   }
 
   return <Button {...buttonProps}>{text}</Button>

src/components/Drawer/Buttons.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react'
-import { useIntl } from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
 
+import IconRight from '@/public/static/icons/24px/right.svg'
 import { KEYVALUE } from '~/common/enums'
-import { Drawer, useNativeEventListener } from '~/components'
+import { Drawer, Icon, TextIcon, useNativeEventListener } from '~/components'
 
 import { getOptionTabByType, OptionTab } from '../Hooks'
 import { OptionContent, OptionContentProps } from '../OptionContent'
@@ -71,6 +72,25 @@ export const OptionDrawer: React.FC<OptionDrawerProps> = ({
       <Drawer.Header
         title={title || defaultTitle}
         closeDrawer={toggleDrawer}
+        rightBtn={
+          <Drawer.TextButton
+            color="greyDarker"
+            onClick={toggleDrawer}
+            aria-label={intl.formatMessage({
+              defaultMessage: 'Collapse',
+              id: 'W/V6+Y',
+            })}
+            text={
+              <TextIcon
+                size={20}
+                icon={<Icon icon={IconRight} size={24} />}
+                placement="left"
+              >
+                <FormattedMessage defaultMessage="Collapse" id="W/V6+Y" />
+              </TextIcon>
+            }
+          />
+        }
         fixedWidth
       />
       <Drawer.Content fixedWidth>