refactor: mobile modals (#2173)

packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModal.tsx

@@ -1,15 +1,11 @@
-import Button from '@/Components/Button/Button'
 import Icon from '@/Components/Icon/Icon'
 import IconPicker from '@/Components/Icon/IconPicker'
 import Popover from '@/Components/Popover/Popover'
-import ModalDialog from '@/Components/Shared/ModalDialog'
-import ModalDialogButtons from '@/Components/Shared/ModalDialogButtons'
-import ModalDialogDescription from '@/Components/Shared/ModalDialogDescription'
-import ModalDialogLabel from '@/Components/Shared/ModalDialogLabel'
+import Modal, { ModalAction } from '@/Components/Shared/Modal'
 import Spinner from '@/Components/Spinner/Spinner'
 import { Platform, SmartViewDefaultIconName, VectorIconNameOrEmoji } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { EditSmartViewModalController } from './EditSmartViewModalController'
 
 type Props = {
@@ -63,15 +59,40 @@ const EditSmartViewModal = ({ controller, platform }: Props) => {
     }
   }, [isPredicateJsonValid])
 
+  const modalActions = useMemo(
+    (): ModalAction[] => [
+      {
+        label: 'Delete',
+        onClick: deleteView,
+        disabled: isSaving,
+        type: 'destructive',
+      },
+      {
+        label: 'Cancel',
+        onClick: closeDialog,
+        disabled: isSaving,
+        type: 'cancel',
+        mobileSlot: 'left',
+      },
+      {
+        label: isSaving ? <Spinner className="h-4.5 w-4.5" /> : 'Save',
+        onClick: saveSmartView,
+        disabled: isSaving,
+        type: 'primary',
+        mobileSlot: 'right',
+      },
+    ],
+    [closeDialog, deleteView, isSaving, saveSmartView],
+  )
+
   if (!view) {
     return null
   }
 
   return (
-    <ModalDialog>
-      <ModalDialogLabel closeDialog={closeDialog}>Edit Smart View "{view.title}"</ModalDialogLabel>
-      <ModalDialogDescription>
-        <div className="flex flex-col gap-4">
+    <Modal title={`Edit Smart View "${view.title}"`} close={closeDialog} actions={modalActions}>
+      <div className="px-4 py-4">
+        <div className="flex h-full flex-col gap-4">
           <div className="flex items-center gap-2.5">
             <div className="text-sm font-semibold">Title:</div>
             <input
@@ -115,9 +136,9 @@ const EditSmartViewModal = ({ controller, platform }: Props) => {
               </div>
             </Popover>
           </div>
-          <div className="flex flex-col gap-2.5">
+          <div className="flex flex-grow flex-col gap-2.5">
             <div className="text-sm font-semibold">Predicate:</div>
-            <div className="flex flex-col overflow-hidden rounded-md border border-border">
+            <div className="flex flex-grow flex-col overflow-hidden rounded-md border border-border">
               <textarea
                 className="h-full min-h-[10rem] w-full flex-grow resize-none bg-default py-1.5 px-2.5 font-mono text-sm"
                 value={predicateJson}
@@ -136,19 +157,8 @@ const EditSmartViewModal = ({ controller, platform }: Props) => {
             </div>
           </div>
         </div>
-      </ModalDialogDescription>
-      <ModalDialogButtons>
-        <Button className="mr-auto" disabled={isSaving} onClick={deleteView} colorStyle="danger">
-          Delete
-        </Button>
-        <Button disabled={isSaving} onClick={saveSmartView} primary colorStyle="info">
-          {isSaving ? <Spinner className="h-4.5 w-4.5" /> : 'Save'}
-        </Button>
-        <Button disabled={isSaving} onClick={closeDialog}>
-          Cancel
-        </Button>
-      </ModalDialogButtons>
-    </ModalDialog>
+      </div>
+    </Modal>
   )
 }
 

packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/SmartViewItem.tsx

@@ -14,8 +14,8 @@ const SmartViewItem = ({ view, onEdit, onDelete }: Props) => {
 
   return (
     <div className="flex items-center gap-2 py-1.5">
-      <Icon type={view.iconString} size="custom" className="h-5.5 w-5.5" />
-      <span className="mr-auto text-sm">{view.title}</span>
+      <Icon type={view.iconString} size="custom" className="h-5.5 w-5.5 flex-shrink-0" />
+      <span className="mr-auto overflow-hidden text-ellipsis text-sm">{view.title}</span>
       <Button small onClick={onEdit}>
         Edit
       </Button>

packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/SmartViews.tsx

@@ -15,6 +15,7 @@ import NoSubscriptionBanner from '@/Components/NoSubscriptionBanner/NoSubscripti
 import { EditSmartViewModalController } from './EditSmartViewModalController'
 import { STRING_DELETE_TAG } from '@/Constants/Strings'
 import { confirmDialog } from '@standardnotes/ui-services'
+import ModalOverlay from '@/Components/Shared/ModalOverlay'
 
 type NewType = {
   application: WebApplication
@@ -88,12 +89,15 @@ const SmartViews = ({ application, featuresController }: Props) => {
           )}
         </PreferencesSegment>
       </PreferencesGroup>
-      {!!editSmartViewModalController.view && (
+      <ModalOverlay isOpen={!!editSmartViewModalController.view} onDismiss={editSmartViewModalController.closeDialog}>
         <EditSmartViewModal controller={editSmartViewModalController} platform={application.platform} />
-      )}
-      {addSmartViewModalController.isAddingSmartView && (
+      </ModalOverlay>
+      <ModalOverlay
+        isOpen={addSmartViewModalController.isAddingSmartView}
+        onDismiss={addSmartViewModalController.closeModal}
+      >
         <AddSmartViewModal controller={addSmartViewModalController} platform={application.platform} />
-      )}
+      </ModalOverlay>
     </>
   )
 }