Dragging on blocks rather than paragraphs (#1354)

* register p2p (mttnet) methods locally as well * wip: calling .well-known * wip: cleaning warnings * wip: using more secure random generator * update protos with changes in documentation * Init mttnet server sepparately * Check permissions on remote (local mocked) calls * update protos according to PR comments * wip: publish + unpublish + list mockups * get and update remote site info * Fixes to listing and unpublishing webPubs * ListWebPublicationRecords * Make a local site by default. Just for tests * change default site name * Site Settings invite+members UI revamp * fix(frontend): empty list button draft creation the button was opening a new window after creating a draft. that's not the desired experience. we do change the route of the same window after the draft is created. * get path mocked * fix: handle errors when getpath not found * token only * Invite workflow frontend fixes * Log RPC from front end client * Cleaner publish/share dialog when published * Invalidate queries to affect other windows * Provide member_role=editor when inviting * useNavigation for new draft * update document on duplicate path (and same docID) * redeem token (if provided) in add site * basic invite page on gateway * gateway fix missing env, log mode * Add Site invite token + error handling * update slate packages * highlight conversation context wip * remove panelSend event causing infinite loop * Clicking Conv Bubble opens Activity * Unpublish only if you are site owner or doc author * List members get members and delete member mockups * adding site owner to the db at init time * fix shared build (ts-ignore) * fix share button dissappear * fix draft scroll error * docs(tauri): merge docs from #1202 Closes #1202 * defining well-known message in doc * If not site flag provided daemon is a regular node * serve .well-known content * wip: connect with site via p2p when adding it * feat(comments): comments first iteration done - rendering selectors on publications - list conversation on activity panel - render selectors on conversation item - reply to conversations - proper transform between api <-> slate * resolve conflicts with master * fix tsc build * wip: remote calls with hardcoded redeemtoken * proxy add site with no hardcodings * proxy all calls to remote site if headers found. * wip: harden tokens and improve debug comments * check path is a valid URL * Send site hostname header * SSR web publish with pretty path * Work around tauri dots in params * flag 2 create random acc. w/out user intervention * Supports publishing home page * Web gateway to support home screen * proxy ListWebPublicationRecords for each site * hostname with mandatory protocol (http(s)://) * forward metadata in proxied calls * fix automatic acc. generation when already exists * Start supporting protocol in site hostname * manually cherry-pick conversations styles this is from the Nostr branch * Gateway Env variable: GW_NEXT_HOST * Gateway env: GW_GPRC_ENDPOINT * wip: include sync comments * Dockerfile to containerize the daemon * wip:contanerize gateway * fix(backend/ipfs): switch to inmemory datastore again Trying to fix database locking issues. Closes #1200. * fix mintter.com website with hardcoded document * add .vercel to gitignore * fixes on env variables for gateway * fix envs again * pasing transport tpo getPublication * forcing gateway as host * clientside again for gateway * fix metadata formatted date * fix comments workflow + design * Nostr experiment to staging (behind flag) * nostr true by default * update mintter homepage pub version * update frontend deps * testing ssr on ids page * testing nodejs runtime on ids * rollback to clientside rendering * wip: tests * wip: site tests * site db schema * enable wss in build (wip) * add click selector click event * fix(comments): control better when to add/remove conversations * fix(comments): bidirectional highlight for conversations * fix(comments): scrollIntoView working in both publication and conversations * gw vercel check and render client side pub * docker file for nextjs site self host * server side render 100% * fetch redirect mode * vercel test * 😵‍💫 * 🤠 * 👾 * 🌈 interceptor * 📢 * gw: server render by default * Site title * Clean up unused settings tabs * Improvements to site members * Fixing site hostname labels + urls * sites db schema (no breaking change yet) * protect early exits to not panic * fix: not error on normal shutdown * lint * remove references table and renaming * create site transactions * fix: wrong token table * wip: improve token sql functions * wip:sql tests * change database compatibility * well known api draft * remove the need to build shared pkg * Revert "remove the need to build shared pkg" This reverts commit 8e729d2. * fix build step for gw * setup env variables correctly * wip: add member * force vercel to use gateway.mintter.com * set new homepage doc for gateway * force gateway url * 🤌 * 😔 * 😢 * 😢😢 * allow unpublish by path * Build13/drag and drop (#1308) * fix(tauri): fix daemon flags pasing WIP * added drag and drop hook implementation. added drag context to blocktools * added drag machine. added drag event handlers to blocktools and editor. removed usedragdrop hook * drag and drop WIP - rebase with build13/staging - code cleanup - create custom drag context utils * moved dragover handling to phrasing props. added style handling to drag machine * blocktools inside blocks * added prevention of dragging parent inside it's children list * added drag attributes and handlers to editor blocks and blocktools * moved ondragover to paragraph. added editor parameter to drag machine * wip * added mouseup to blocktools to enable mouse machine back. added removing group if dragging the only child of a group * rebase with build13/staging * fix validate --------- Co-authored-by: Horacio Herrera <hi@horacioh.com> * remove log interceptor from prod transform * enable everyone to edit enything * remove publication blocktools red background * feat(frontend): drag and drop working added checking and removing empty groups Merge branch 'build13/staging' into build13/drag-and-drop disabled drag and drop if editor in dragging state. removed comments and console logs. renamed selection catching plugin added mouseup to blocktools to enable mouse machine back. added removing group if dragging the only child of a group moved ondragover to paragraph. added editor parameter to drag machine added prevention of dragging parent inside it's children list blocktools inside blocks moved dragover handling to phrasing props. added style handling to drag machine added drag machine. added drag event handlers to blocktools and editor. removed usedragdrop hook added drag and drop hook implementation. added drag context to blocktools * wip: site member management in db * fix: consume grpc port properly * fix nextjs responses * fix: returning proper role on existing accounts * log ids params for debugging * check documentId params check * wip: change site opts in db * wip: managing sites in the db * wip: web publication records db (not tested) * prevent same document to be published twice * unpublish by docid (+ version) only * wip: web publication db testing (no references) * wip: account for references in published documents * Sites db persistence (breaking change) * wip: commenting * replace existing site * tokens db * site members db * sites db * update site info (title+description) * publish and unpublish db * linting * change compatibility date and linting * allow adding a site without token (and no owner) * fix site tests * test proxy members * wip: site info test * fix(frontend): fix publishing redirection it was not happening because we were not calling the appropiate actions * test(backend): add tests for block revisions Add test to reproduce #1301. Seems to be working fine though. * Error adding a site without token if not an owner * version id provided on unpublish * Security pack own words support comma * fix(frontend): add zomm in and out * Publish/share dialog: Fix url of home path * gw: author server rendered * gw: env port for development * gw: well known endpoint for nextjs * wip: site deployment documentation * disable nostr * documentID unique key + test suite update * add author data on comments * added top and bottom lines when dragging based on the paths * wip: site syncs-in provided documents only * fix(frontend): fix drag and drop in Mac * some frontend fixes * site syncing tests * wip:syncing comments * fix(frontend): fix publish share popover alignment * fix: multiple identical site members * wip: less autorelay verbosity * site only syncs out with site members * wip on new sidepanel * feat(frontend): add activepanel to sidepanele * fixed bug where blocks would be dragged to top when the bottom line was showed. added nested groups code (WIP) * add footer import on sites page * take into account lists in tests * change site bio when updating site info * wip: publish tests * wip: improve site tests * wip: make linter happy * wip: unify db constraints * error getpath on blank path + improve test suite * fix(backend): don't panic on nil datoms iterator Closes #1310. * Citations and Versions sidebar prototype * test(rust): fix clippy lint issues * wip: improve error messages on document finding * check multiple devices in parallel when publishing * identify supporting materials by ID + Version * fix(front): provide supporting material properly * wip: linting and messaging * look at nextjs .well-known path when adding a site * site deployment * fix(frontend): minor fixes on dragging * fix(frontend): transformation to api now respects revision solves #1301 * unify hover effect + cleanup imports * make script portable * fix(frontend): remove shared api client calls * uncomment correct index page ids * member management for owners, remove member * gw: Remove client side fallback * Gateway Dev port fix * gw: query for author on page slug * settings + share hostname display no protocol * publish success message * republish notification * not exposing daemon http ports to the outside * remove the ERROR * added nested groups drag and drop functionality * fix(gateway): fix gateway wrong calls * cleanup imports * remove citation numbers for now * using a more portable curl command to deploy sites * wip: some comments on difficult-to-follow code * fix mnemonics call in onboarding * Fix double https in invite sender * add logs to production build * upgrade to the more advanced script * wip: not defining latest to pull from repo * gw: Minor logging / cleanup * citations number in blocks * Improving sites settings UI * not exposing addresses over http in regular nodes * wip: test docker build action * fix: docker action * Include site docker images in nightlies 6 AM * add temporary docker nightly releases in staging * added styling for nested group drag * added nested groups drag and drop functionality * merge with master * fixed github conflicts * fixed last conflicts * WIP fixing the nested group line * fixed nested group dragging for blocks with multiple children not on the same level * cleanup after mege * commit after pnpm format * WIP dragover on list items * a working version with dragover on list items. WIP, nested group dragging lines don't appear immediately * fixed nested group dragging. works immediately on drag over now. * added styling for nester group dragging. removed comments and logs * removed unused code, comments and logs. pnpm format * ran pnpm format * fmt --------- Co-authored-by: juligasa <11684004+juligasa@users.noreply.github.com> Co-authored-by: Eric Vicenti <eric@vicenti.net> Co-authored-by: Horacio Herrera <hi@horacioh.com> Co-authored-by: Alexandr Burdiyan <burdiyan@gmail.com>
MintterHypermedia · Apr 5, 2023 · eedc5cf · eedc5cf · vercel · Apr 5, 2023
1 parent 3523d0f
commit eedc5cf
Show file tree

Hide file tree

Showing 31 changed files with 36,581 additions and 28,664 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -12,7 +12,9 @@ services:
     volumes:
       - ${MTT_SITE_WORKSPACE:-~/.mtt-site}/proxy/data:/data
       - ${MTT_SITE_WORKSPACE:-~/.mtt-site}/proxy/config:/config
-    command: caddy reverse-proxy --from ${MTT_SITE_HOSTNAME:-http://nextjs} --to :${MTT_SITE_LOCAL_PORT:-3000}
+    command:
+      caddy reverse-proxy --from ${MTT_SITE_HOSTNAME:-http://nextjs} --to
+      :${MTT_SITE_LOCAL_PORT:-3000}
 
   nextjs:
     container_name: nextjs

diff --git a/frontend/app/cypress/support/component.tsx b/frontend/app/cypress/support/component.tsx
@@ -19,13 +19,12 @@ import './commands'
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
-import {Router} from '@app/components/router'
-import {globalStyles} from '@app/stitches.config'
+import {globalStyles} from '../../src/stitches.config'
 import {
   createTestQueryClient,
   CustomMountOptions,
   TestProvider,
-} from '@app/test/utils'
+} from '../../src/test/utils'
 import {MountOptions, MountReturn} from 'cypress/react'
 import {mount} from 'cypress/react18'
 
@@ -62,11 +61,7 @@ Cypress.Commands.add('mount', (component, options: CustomMountOptions = {}) => {
 
   globalStyles()
 
-  const wrapped = (
-    <Router hook={() => [path ?? '/', setLocation]}>
-      <TestProvider client={client}>{component}</TestProvider>
-    </Router>
-  )
+  const wrapped = <TestProvider client={client}>{component}</TestProvider>
   // const wrapped = <div>{component}</div>
 
   return mount(wrapped, mountOptions)

diff --git a/frontend/app/package.json b/frontend/app/package.json
@@ -44,6 +44,7 @@
     "@stitches/react": "1.2.8",
     "@tanstack/react-query": "4.19.1",
     "@tauri-apps/api": "1.2.0",
+    "@types/lodash.debounce": "^4.0.7",
     "@xstate/react": "3.1.1",
     "allotment": "1.17.1",
     "autosize": "5.0.2",
@@ -67,6 +68,7 @@
     "is-plain-object": "5.0.0",
     "is-url": "1.2.4",
     "js-video-url-parser": "0.5.1",
+    "lodash.debounce": "^4.0.8",
     "long": "5.2.1",
     "nanoid": "4.0.0",
     "navaid": "1.2.0",

diff --git a/frontend/app/src/app-banner.tsx b/frontend/app/src/app-banner.tsx
@@ -1,7 +1,6 @@
 import {Box} from '@components/box'
-import {Text, TextProps} from '@components/text'
+import {Text} from '@components/text'
 import {keyframes} from '@stitches/react'
-import {CSS, styled} from '@app/stitches.config'
 import {MouseEventHandler, ReactNode} from 'react'
 
 const slideDown = keyframes({

diff --git a/frontend/app/src/components/conversations.tsx b/frontend/app/src/components/conversations.tsx
@@ -1,17 +1,14 @@
 import {changesClient, commentsClient} from '@app/api-clients'
 import {useConversations} from '@app/editor/comments/conversations-context'
 import {useAuthor} from '@app/hooks'
-import {copyTextToClipboard} from '@app/utils/copy-to-clipboard'
-import {EXPERIMENTS} from '@app/utils/experimental'
 import {useNavigate} from '@app/utils/navigation'
 // import {
 //   useNostr,
 //   useNostrPostsOnDoc,
 //   useNostrProfile,
 //   useNostrReplies,
 // } from '@app/utils/nostr'
-import {Timestamp} from '@bufbuild/protobuf'
-import {Avatar, getRandomColor} from '@components/avatar'
+import {Avatar} from '@components/avatar'
 import {Box} from '@components/box'
 import {Button} from '@components/button'
 import {Text} from '@components/text'
@@ -165,12 +162,10 @@ function ConversationItem({
               display: 'flex',
               flexDirection: 'column',
               gap: '$3',
-              // paddingTop: selectors ? '$5' : '$3',
               width: '$full',
               paddingTop: '$5',
               marginRight: '$4',
               position: 'relative',
-              // paddingLeft: 48,
               '&:hover': {
                 cursor: 'default',
               },

diff --git a/frontend/app/src/components/delete-draft-dialog.tsx b/frontend/app/src/components/delete-draft-dialog.tsx
@@ -19,46 +19,52 @@ export function useDeleteDraftDialog(
   return (
     <Alert.Root open={isOpen} onOpenChange={setIsOpen}>
       <Alert.Trigger asChild>
-        {renderTrigger({onClick: () => {}})}
+        {renderTrigger({
+          onClick: () => {
+            /* noop */
+          },
+        })}
       </Alert.Trigger>
       <Alert.Portal>
         <Alert.Overlay className={overlayStyles()} />
         <Alert.Content>
-          <Alert.Title color="danger" data-testid="delete-draft-dialog-title">
-            Discard Draft
-          </Alert.Title>
-          <Alert.Description>
-            Permanently delete this draft document?
-          </Alert.Description>
-          {deleteDraft.error && (
-            <Alert.Description
-              data-testid="delete-draft-dialog-error"
-              color="danger"
-            >
-              Something went wrong on deletion
+          <>
+            <Alert.Title color="danger" data-testid="delete-draft-dialog-title">
+              Discard Draft
+            </Alert.Title>
+            <Alert.Description>
+              Permanently delete this draft document?
             </Alert.Description>
-          )}
-          <Alert.Actions>
-            <Alert.Cancel
-              data-testid="delete-draft-dialog-cancel"
-              disabled={deleteDraft.isLoading}
-            >
-              Cancel
-            </Alert.Cancel>
-            <Alert.Action
-              color="danger"
-              data-testid="delete-draft-dialog-confirm"
-              disabled={deleteDraft.isLoading}
-              onClick={(e: React.MouseEvent) => {
-                e.stopPropagation()
-                e.preventDefault()
-                deleteDraft.mutate(docId)
-                // DO MUTATE
-              }}
-            >
-              Delete
-            </Alert.Action>
-          </Alert.Actions>
+            {deleteDraft.error && (
+              <Alert.Description
+                data-testid="delete-draft-dialog-error"
+                color="danger"
+              >
+                Something went wrong on deletion
+              </Alert.Description>
+            )}
+            <Alert.Actions>
+              <Alert.Cancel
+                data-testid="delete-draft-dialog-cancel"
+                disabled={deleteDraft.isLoading}
+              >
+                Cancel
+              </Alert.Cancel>
+              <Alert.Action
+                color="danger"
+                data-testid="delete-draft-dialog-confirm"
+                disabled={deleteDraft.isLoading}
+                onClick={(e: React.MouseEvent) => {
+                  e.stopPropagation()
+                  e.preventDefault()
+                  deleteDraft.mutate(docId)
+                  // DO MUTATE
+                }}
+              >
+                Delete
+              </Alert.Action>
+            </Alert.Actions>
+          </>
         </Alert.Content>
       </Alert.Portal>
     </Alert.Root>

diff --git a/frontend/app/src/components/footer.tsx b/frontend/app/src/components/footer.tsx
@@ -1,26 +1,25 @@
-import {ConnectionStatus} from '@mintter/shared'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
+import {networkingClient} from '@app/api-clients'
 import {AccountWithRef, contactsListMachine} from '@app/contact-list-machine'
+import {useConnectionSummary} from '@app/hooks/contacts'
+import {useDaemonReady, useOnline} from '@app/node-status-context'
 import {keyframes, styled} from '@app/stitches.config'
+import {useNavigate, useNavRoute} from '@app/utils/navigation'
 import {ObjectKeys} from '@app/utils/object-keys'
 import {Avatar} from '@components/avatar'
 import {Box} from '@components/box'
 import {Button} from '@components/button'
 import {Icon} from '@components/icon'
 import {Text} from '@components/text'
 import {TextField} from '@components/text-field'
+import {ConnectionStatus} from '@mintter/shared'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
 import * as HoverCard from '@radix-ui/react-hover-card'
 import {useActor} from '@xstate/react'
 import {ReactNode, useMemo, useState} from 'react'
 import toast from 'react-hot-toast'
 import {InterpreterFrom} from 'xstate'
-import {Prompt} from './prompt'
-import {networkingClient} from '@app/api-clients'
-import {useDaemonReady, useOnline} from '@app/node-status-context'
-import {emit} from '@tauri-apps/api/event'
 import {OnlineIndicator} from './indicator'
-import {useConnectionSummary} from '@app/hooks/contacts'
-import {useNavigate, useNavRoute} from '@app/utils/navigation'
+import {Prompt} from './prompt'
 
 const LabelWrap = styled('div', {
   marginHorizontal: 6,
@@ -158,7 +157,7 @@ export default function Footer({children}: {children?: ReactNode}) {
               userSelect: 'none',
             }}
           >
-            You're Offline
+            You are Offline
           </Text>
         </Box>
       ) : null}

diff --git a/frontend/app/src/components/publication-list-item.tsx b/frontend/app/src/components/publication-list-item.tsx
@@ -6,20 +6,20 @@ import {prefetchPublication, queryKeys, useAuthor} from '@app/hooks'
 import {copyTextToClipboard} from '@app/utils/copy-to-clipboard'
 import {PublicationRoute, useNavigate} from '@app/utils/navigation'
 import {
+  Document,
   formattedDate,
   MINTTER_LINK_PREFIX,
   Publication,
-  Document,
 } from '@mintter/shared'
 import {useQueryClient} from '@tanstack/react-query'
 import {useActor, useInterpret} from '@xstate/react'
 import Highlighter from 'react-highlight-words'
 import {toast} from 'react-hot-toast'
+import '../styles/file-list.scss'
 import {Button} from './button'
 import {DeleteDialog} from './delete-dialog'
 import {Icon} from './icon'
 import {Text} from './text'
-import '../styles/file-list.scss'
 
 export function PublicationListItem({
   publication,

diff --git a/frontend/app/src/components/titlebar/title.tsx b/frontend/app/src/components/titlebar/title.tsx
@@ -1,5 +1,4 @@
-import {draftsClient} from '@app/api-clients'
-import {queryKeys, useAuthor, useDraft, usePublication} from '@app/hooks'
+import {useAuthor, useDraft, usePublication} from '@app/hooks'
 import {
   DraftRoute,
   PublicationRoute,
@@ -10,9 +9,6 @@ import {hostnameStripProtocol} from '@app/utils/site-hostname'
 import {Button} from '@components/button'
 import {Icon} from '@components/icon'
 import {Text} from '@components/text'
-import {useQuery} from '@tanstack/react-query'
-import {listen} from '@tauri-apps/api/event'
-import {useEffect} from 'react'
 
 export function TitleContent() {
   const route = useNavRoute()

diff --git a/frontend/app/src/conversation-machine.ts b/frontend/app/src/conversation-machine.ts
@@ -1,9 +1,9 @@
-import {Account, Publication, blockNodeToSlate, MttLink} from '@mintter/shared'
+import {accountsClient, publicationsClient} from '@app/api-clients'
 import {queryKeys} from '@app/hooks'
 import {ClientPublication} from '@app/publication-machine'
+import {Account, blockNodeToSlate, MttLink, Publication} from '@mintter/shared'
 import {QueryClient} from '@tanstack/react-query'
 import {assign, createMachine} from 'xstate'
-import {accountsClient, publicationsClient} from '@app/api-clients'
 
 type CreateConversationMachineProps = {
   client: QueryClient

diff --git a/frontend/app/src/draft-machine.ts b/frontend/app/src/draft-machine.ts
@@ -16,7 +16,6 @@ import {draftsClient} from '@app/api-clients'
 import {queryKeys} from '@app/hooks'
 import {getTitleFromContent} from '@app/utils/get-document-title'
 import {QueryClient} from '@tanstack/react-query'
-import {invoke} from '@tauri-apps/api'
 import {Editor} from 'slate'
 import {actions, assign, createMachine, InterpreterFrom} from 'xstate'
 import {MintterEditor} from './editor/mintter-changes/plugin'

diff --git a/frontend/app/src/drag-context.tsx b/frontend/app/src/drag-context.tsx
@@ -1,8 +1,6 @@
 import {dragMachine} from '@app/drag-machine'
-import {useSelector} from '@xstate/react'
-import {useContext, createContext, PropsWithChildren} from 'react'
+import {createContext, PropsWithChildren, useContext} from 'react'
 import {InterpreterFrom} from 'xstate'
-import {createInterpreterContext} from './utils/machine-utils'
 
 /**
  * we are not using the machine-utils here because we want the `useDrag` hook to be able to return undefined. this is because we should not be able to drag any block inside a publication, and we are calling this hook on each paragraph