feat: Added FileSend links to general account menu and preferences menu

packages/ui-services/src/Preferences/PreferenceId.ts

@@ -10,6 +10,7 @@ const PREFERENCE_IDS = [
   'get-free-month',
   'help-feedback',
   'whats-new',
+  'filesend',
 ] as const
 
 export type PreferenceId = typeof PREFERENCE_IDS[number]

packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx

@@ -84,6 +84,17 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({
     setMenuPane(AccountMenuPane.SignIn)
   }, [setMenuPane])
 
+  const openFileSend = useCallback(() => {
+    const link = 'https://filesend.standardnotes.com/'
+
+    if (application.isNativeMobileWeb()) {
+      application.mobileDevice().openUrl(link)
+      return
+    }
+
+    window.open(link, '_blank')
+  }, [application])
+
   const CREATE_ACCOUNT_INDEX = 1
   const SWITCHER_INDEX = 0
 
@@ -172,6 +183,10 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({
           </div>
           <span className="text-neutral">v{application.version}</span>
         </MenuItem>
+        <MenuItem onClick={openFileSend}>
+          <Icon type="open-in" className={iconClassName} />
+          Open FileSend
+        </MenuItem>
         {user ? (
           <>
             <MenuItemSeparator />

packages/web/src/javascripts/Components/Icon/IconNameToSvgMapping.tsx

@@ -2,19 +2,19 @@ import * as icons from '@standardnotes/icons'
 
 export const IconNameToSvgMapping = {
   'account-circle': icons.AccountCircleIcon,
-  'arrow-up': icons.ArrowUpIcon,
   'arrow-down': icons.ArrowDownIcon,
   'arrow-left': icons.ArrowLeftIcon,
   'arrow-right': icons.ArrowRightIcon,
+  'arrow-up': icons.ArrowUpIcon,
   'arrows-sort-down': icons.ArrowsSortDownIcon,
   'arrows-sort-up': icons.ArrowsSortUpIcon,
   'attachment-file': icons.AttachmentFileIcon,
   'check-bold': icons.CheckBoldIcon,
   'check-circle': icons.CheckCircleIcon,
-  'chevron-up': icons.ChevronUpIcon,
   'chevron-down': icons.ChevronDownIcon,
   'chevron-left': icons.ChevronLeftIcon,
   'chevron-right': icons.ChevronRightIcon,
+  'chevron-up': icons.ChevronUpIcon,
   'clear-circle-filled': icons.ClearCircleFilledIcon,
   'cloud-off': icons.CloudOffIcon,
   'diamond-filled': icons.DiamondFilledIcon,
@@ -28,6 +28,11 @@ export const IconNameToSvgMapping = {
   'file-ppt': icons.FilePptIcon,
   'file-xls': icons.FileXlsIcon,
   'file-zip': icons.FileZipIcon,
+  'format-align-center': icons.FormatAlignCenterIcon,
+  'format-align-justify': icons.FormatAlignJustifyIcon,
+  'format-align-left': icons.FormatAlignLeftIcon,
+  'format-align-right': icons.FormatAlignRightIcon,
+  'fullscreen-exit': icons.FullscreenExitIcon,
   'hashtag-off': icons.HashtagOffIcon,
   'link-off': icons.LinkOffIcon,
   'list-bulleted': icons.ListBulleted,
@@ -38,27 +43,22 @@ export const IconNameToSvgMapping = {
   'menu-close': icons.MenuCloseIcon,
   'menu-variant': icons.MenuVariantIcon,
   'notes-filled': icons.NotesFilledIcon,
+  'open-in': icons.OpenInIcon,
   'pencil-filled': icons.PencilFilledIcon,
   'pencil-off': icons.PencilOffIcon,
   'pin-filled': icons.PinFilledIcon,
   'plain-text': icons.PlainTextIcon,
   'premium-feature': icons.PremiumFeatureIcon,
   'rich-text': icons.RichTextIcon,
+  'safe-square': icons.SafeSquareIcon,
   'sort-descending': icons.SortDescendingIcon,
   'star-circle-filled': icons.StarCircleFilled,
   'star-filled': icons.StarFilledIcon,
   'star-variant-filled': icons.StarVariantFilledIcon,
-  'safe-square': icons.SafeSquareIcon,
   'trash-filled': icons.TrashFilledIcon,
   'trash-sweep': icons.TrashSweepIcon,
   'user-add': icons.UserAddIcon,
   'user-switch': icons.UserSwitch,
-  'fullscreen-exit': icons.FullscreenExitIcon,
-  'format-align-left': icons.FormatAlignLeftIcon,
-  'format-align-center': icons.FormatAlignCenterIcon,
-  'format-align-right': icons.FormatAlignRightIcon,
-  'format-align-justify': icons.FormatAlignJustifyIcon,
-  drag: icons.DragIcon,
   accessibility: icons.AccessibilityIcon,
   add: icons.AddIcon,
   archive: icons.ArchiveIcon,
@@ -72,6 +72,7 @@ export const IconNameToSvgMapping = {
   dashboard: icons.DashboardIcon,
   diamond: icons.DiamondIcon,
   download: icons.DownloadIcon,
+  drag: icons.DragIcon,
   editor: icons.EditorIcon,
   email: icons.EmailIcon,
   eye: icons.EyeIcon,

packages/web/src/javascripts/Components/Preferences/PreferencesMenu.ts

@@ -42,6 +42,7 @@ const READY_PREFERENCES_MENU_ITEMS: PreferencesMenuItem[] = [
   { id: 'appearance', label: 'Appearance', icon: 'themes' },
   { id: 'listed', label: 'Listed', icon: 'listed' },
   { id: 'help-feedback', label: 'Help & feedback', icon: 'help' },
+  { id: 'filesend', label: 'FileSend', icon: 'open-in' },
 ]
 
 export class PreferencesMenu {

packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx

@@ -1,11 +1,12 @@
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent, useMemo } from 'react'
+import { FunctionComponent, useCallback, useMemo } from 'react'
 import styled from 'styled-components'
 import Dropdown from '../Dropdown/Dropdown'
 import { DropdownItem } from '../Dropdown/DropdownItem'
 import PreferencesMenuItem from './PreferencesComponents/MenuItem'
 import { PreferencesMenu } from './PreferencesMenu'
 import { PreferenceId } from '@standardnotes/ui-services'
+import { useApplication } from '../ApplicationProvider'
 
 type Props = {
   menu: PreferencesMenu
@@ -25,18 +26,32 @@ const StyledDropdown = styled(Dropdown)`
 `
 
 const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
+  const application = useApplication()
   const { selectedPaneId, selectPane, menuItems } = menu
 
   const dropdownMenuItems: DropdownItem[] = useMemo(
     () =>
-      menuItems.map((menuItem) => ({
+      menuItems
-        icon: menuItem.icon,
+        .filter((pref) => pref.id !== 'filesend')
-        label: menuItem.label,
+        .map((menuItem) => ({
-        value: menuItem.id,
+          icon: menuItem.icon,
-      })),
+          label: menuItem.label,
+          value: menuItem.id,
+        })),
     [menuItems],
   )
 
+  const openFileSend = useCallback(() => {
+    const link = 'https://filesend.standardnotes.com/'
+
+    if (application.isNativeMobileWeb()) {
+      application.mobileDevice().openUrl(link)
+      return
+    }
+
+    window.open(link, '_blank')
+  }, [application])
+
   return (
     <div className="border-t border-border bg-default px-5 pt-2 md:border-0 md:bg-contrast md:px-0 md:py-0">
       <div className="hidden min-w-55 flex-col overflow-y-auto px-3 py-6 md:flex">
@@ -47,7 +62,13 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
             label={pref.label}
             selected={pref.selected}
             hasBubble={pref.hasBubble}
-            onClick={() => selectPane(pref.id)}
+            onClick={() => {
+              if (pref.id === 'filesend') {
+                openFileSend()
+                return
+              }
+              selectPane(pref.id)
+            }}
           />
         ))}
       </div>