chore(release): publish

- @standardnotes/[email protected]
 - @standardnotes/[email protected].1
 - @standardnotes/[email protected]
 - @standardnotes/[email protected].1

packages/api/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.15.1](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/api
+
+# [1.15.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+### Features
+
+* **api:** add listing workspace users ([fb41f65](https://github.com/standardnotes/app/commit/fb41f651eca45dd62314609c2f389d5dc683c36e))
+
+# [1.14.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+### Features
+
+* **api:** add access level to invitation requests ([49b3d27](https://github.com/standardnotes/app/commit/49b3d2714fbe4ac9f9242097b8df6b4e3d604513))
+
 # [1.13.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
 
 ### Features

packages/api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/api",
-  "version": "1.13.0",
+  "version": "1.15.1",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },
@@ -36,7 +36,7 @@
     "typescript": "*"
   },
   "dependencies": {
-    "@standardnotes/common": "^1.36.1",
+    "@standardnotes/common": "^1.39.0",
     "@standardnotes/encryption": "workspace:*",
     "@standardnotes/models": "workspace:*",
     "@standardnotes/responses": "workspace:*",

packages/api/src/Domain/Client/Workspace/WorkspaceApiOperations.ts

@@ -3,4 +3,5 @@ export enum WorkspaceApiOperations {
   Inviting,
   Accepting,
   ListingWorkspaces,
+  ListingWorkspaceUsers,
 }

packages/api/src/Domain/Client/Workspace/WorkspaceApiService.spec.ts

@@ -1,9 +1,10 @@
-import { WorkspaceType } from '@standardnotes/common'
+import { WorkspaceAccessLevel, WorkspaceType } from '@standardnotes/common'
 import { HttpStatusCode } from '../../Http'
 import { WorkspaceCreationResponse } from '../../Response/Workspace/WorkspaceCreationResponse'
 import { WorkspaceInvitationAcceptingResponse } from '../../Response/Workspace/WorkspaceInvitationAcceptingResponse'
 import { WorkspaceInvitationResponse } from '../../Response/Workspace/WorkspaceInvitationResponse'
 import { WorkspaceListResponse } from '../../Response/Workspace/WorkspaceListResponse'
+import { WorkspaceUserListResponse } from '../../Response/Workspace/WorkspaceUserListResponse'
 import { WorkspaceServerInterface } from '../../Server/Workspace/WorkspaceServerInterface'
 
 import { WorkspaceApiOperations } from './WorkspaceApiOperations'
@@ -29,6 +30,10 @@ describe('WorkspaceApiService', () => {
       status: HttpStatusCode.Success,
       data: { ownedWorkspaces: [], joinedWorkspaces: [] },
     } as jest.Mocked<WorkspaceListResponse>)
+    workspaceServer.listWorkspaceUsers = jest.fn().mockReturnValue({
+      status: HttpStatusCode.Success,
+      data: { users: [] },
+    } as jest.Mocked<WorkspaceUserListResponse>)
   })
 
   it('should create a workspace', async () => {
@@ -97,6 +102,7 @@ describe('WorkspaceApiService', () => {
     const response = await createService().inviteToWorkspace({
       workspaceUuid: 'w-1-2-3',
       inviteeEmail: '[email protected]',
+      accessLevel: WorkspaceAccessLevel.WriteAndRead,
     })
 
     expect(response).toEqual({
@@ -107,6 +113,7 @@ describe('WorkspaceApiService', () => {
     expect(workspaceServer.inviteToWorkspace).toHaveBeenCalledWith({
       workspaceUuid: 'w-1-2-3',
       inviteeEmail: '[email protected]',
+      accessLevel: 'write-and-read',
     })
   })
 
@@ -121,6 +128,7 @@ describe('WorkspaceApiService', () => {
       await service.inviteToWorkspace({
         workspaceUuid: 'w-1-2-3',
         inviteeEmail: '[email protected]',
+        accessLevel: WorkspaceAccessLevel.WriteAndRead,
       })
     } catch (caughtError) {
       error = caughtError
@@ -139,6 +147,7 @@ describe('WorkspaceApiService', () => {
       await createService().inviteToWorkspace({
         workspaceUuid: 'w-1-2-3',
         inviteeEmail: '[email protected]',
+        accessLevel: WorkspaceAccessLevel.WriteAndRead,
       })
     } catch (caughtError) {
       error = caughtError
@@ -252,4 +261,47 @@ describe('WorkspaceApiService', () => {
 
     expect(error).not.toBeNull()
   })
+
+  it('should list workspace users', async () => {
+    const response = await createService().listWorkspaceUsers({ workspaceUuid: 'w-1-2-3' })
+
+    expect(response).toEqual({
+      status: 200,
+      data: {
+        users: [],
+      },
+    })
+    expect(workspaceServer.listWorkspaceUsers).toHaveBeenCalledWith({ workspaceUuid: 'w-1-2-3' })
+  })
+
+  it('should not list workspace users if it is already listing them', async () => {
+    const service = createService()
+    Object.defineProperty(service, 'operationsInProgress', {
+      get: () => new Map([[WorkspaceApiOperations.ListingWorkspaceUsers, true]]),
+    })
+
+    let error = null
+    try {
+      await service.listWorkspaceUsers({ workspaceUuid: 'w-1-2-3' })
+    } catch (caughtError) {
+      error = caughtError
+    }
+
+    expect(error).not.toBeNull()
+  })
+
+  it('should not list workspace users if the server fails', async () => {
+    workspaceServer.listWorkspaceUsers = jest.fn().mockImplementation(() => {
+      throw new Error('Oops')
+    })
+
+    let error = null
+    try {
+      await createService().listWorkspaceUsers({ workspaceUuid: 'w-1-2-3' })
+    } catch (caughtError) {
+      error = caughtError
+    }
+
+    expect(error).not.toBeNull()
+  })
 })

packages/api/src/Domain/Client/Workspace/WorkspaceApiService.ts

@@ -1,4 +1,4 @@
-import { Uuid, WorkspaceType } from '@standardnotes/common'
+import { Uuid, WorkspaceAccessLevel, WorkspaceType } from '@standardnotes/common'
 
 import { ErrorMessage } from '../../Error/ErrorMessage'
 import { ApiCallError } from '../../Error/ApiCallError'
@@ -7,6 +7,7 @@ import { WorkspaceInvitationAcceptingResponse } from '../../Response/Workspace/W
 import { WorkspaceInvitationResponse } from '../../Response/Workspace/WorkspaceInvitationResponse'
 import { WorkspaceServerInterface } from '../../Server/Workspace/WorkspaceServerInterface'
 import { WorkspaceListResponse } from '../../Response/Workspace/WorkspaceListResponse'
+import { WorkspaceUserListResponse } from '../../Response/Workspace/WorkspaceUserListResponse'
 
 import { WorkspaceApiServiceInterface } from './WorkspaceApiServiceInterface'
 import { WorkspaceApiOperations } from './WorkspaceApiOperations'
@@ -18,6 +19,20 @@ export class WorkspaceApiService implements WorkspaceApiServiceInterface {
     this.operationsInProgress = new Map()
   }
 
+  async listWorkspaceUsers(dto: { workspaceUuid: string }): Promise<WorkspaceUserListResponse> {
+    this.lockOperation(WorkspaceApiOperations.ListingWorkspaceUsers)
+
+    try {
+      const response = await this.workspaceServer.listWorkspaceUsers({ workspaceUuid: dto.workspaceUuid })
+
+      this.unlockOperation(WorkspaceApiOperations.ListingWorkspaceUsers)
+
+      return response
+    } catch (error) {
+      throw new ApiCallError(ErrorMessage.GenericFail)
+    }
+  }
+
   async listWorkspaces(): Promise<WorkspaceListResponse> {
     this.lockOperation(WorkspaceApiOperations.ListingWorkspaces)
 
@@ -56,13 +71,18 @@ export class WorkspaceApiService implements WorkspaceApiServiceInterface {
     }
   }
 
-  async inviteToWorkspace(dto: { inviteeEmail: string; workspaceUuid: Uuid }): Promise<WorkspaceInvitationResponse> {
+  async inviteToWorkspace(dto: {
+    inviteeEmail: string
+    workspaceUuid: Uuid
+    accessLevel: WorkspaceAccessLevel
+  }): Promise<WorkspaceInvitationResponse> {
     this.lockOperation(WorkspaceApiOperations.Inviting)
 
     try {
       const response = await this.workspaceServer.inviteToWorkspace({
         inviteeEmail: dto.inviteeEmail,
         workspaceUuid: dto.workspaceUuid,
+        accessLevel: dto.accessLevel,
       })
 
       this.unlockOperation(WorkspaceApiOperations.Inviting)

packages/api/src/Domain/Client/Workspace/WorkspaceApiServiceInterface.ts

@@ -1,9 +1,10 @@
-import { Uuid, WorkspaceType } from '@standardnotes/common'
+import { Uuid, WorkspaceAccessLevel, WorkspaceType } from '@standardnotes/common'
 
 import { WorkspaceCreationResponse } from '../../Response/Workspace/WorkspaceCreationResponse'
 import { WorkspaceInvitationAcceptingResponse } from '../../Response/Workspace/WorkspaceInvitationAcceptingResponse'
 import { WorkspaceInvitationResponse } from '../../Response/Workspace/WorkspaceInvitationResponse'
 import { WorkspaceListResponse } from '../../Response/Workspace/WorkspaceListResponse'
+import { WorkspaceUserListResponse } from '../../Response/Workspace/WorkspaceUserListResponse'
 
 export interface WorkspaceApiServiceInterface {
   createWorkspace(dto: {
@@ -13,7 +14,11 @@ export interface WorkspaceApiServiceInterface {
     publicKey?: string
     workspaceName?: string
   }): Promise<WorkspaceCreationResponse>
-  inviteToWorkspace(dto: { inviteeEmail: string; workspaceUuid: Uuid }): Promise<WorkspaceInvitationResponse>
+  inviteToWorkspace(dto: {
+    inviteeEmail: string
+    workspaceUuid: Uuid
+    accessLevel: WorkspaceAccessLevel
+  }): Promise<WorkspaceInvitationResponse>
   acceptInvite(dto: {
     inviteUuid: Uuid
     userUuid: Uuid
@@ -21,4 +26,5 @@ export interface WorkspaceApiServiceInterface {
     encryptedPrivateKey: string
   }): Promise<WorkspaceInvitationAcceptingResponse>
   listWorkspaces(): Promise<WorkspaceListResponse>
+  listWorkspaceUsers(dto: { workspaceUuid: Uuid }): Promise<WorkspaceUserListResponse>
 }

packages/api/src/Domain/Request/Workspace/WorkspaceInvitationRequestParams.ts

@@ -1,7 +1,8 @@
-import { Uuid } from '@standardnotes/common'
+import { Uuid, WorkspaceAccessLevel } from '@standardnotes/common'
 
 export type WorkspaceInvitationRequestParams = {
   workspaceUuid: Uuid
   inviteeEmail: string
+  accessLevel: WorkspaceAccessLevel
   [additionalParam: string]: unknown
 }

packages/api/src/Domain/Request/Workspace/WorkspaceUserListRequestParams.ts

@@ -0,0 +1,6 @@
+import { Uuid } from '@standardnotes/common'
+
+export type WorkspaceUserListRequestParams = {
+  workspaceUuid: Uuid
+  [additionalParam: string]: unknown
+}

packages/api/src/Domain/Request/index.ts

@@ -10,3 +10,4 @@ export * from './Workspace/WorkspaceCreationRequestParams'
 export * from './Workspace/WorkspaceInvitationAcceptingRequestParams'
 export * from './Workspace/WorkspaceInvitationRequestParams'
 export * from './Workspace/WorkspaceListRequestParams'
+export * from './Workspace/WorkspaceUserListRequestParams'

packages/api/src/Domain/Response/Workspace/WorkspaceUserListResponse.ts

@@ -0,0 +1,9 @@
+import { Either } from '@standardnotes/common'
+
+import { HttpErrorResponseBody } from '../../Http/HttpErrorResponseBody'
+import { HttpResponse } from '../../Http/HttpResponse'
+import { WorkspaceUserListResponseBody } from './WorkspaceUserListResponseBody'
+
+export interface WorkspaceUserListResponse extends HttpResponse {
+  data: Either<WorkspaceUserListResponseBody, HttpErrorResponseBody>
+}

packages/api/src/Domain/Response/Workspace/WorkspaceUserListResponseBody.ts

@@ -0,0 +1,5 @@
+import { WorkspaceUser } from '@standardnotes/models'
+
+export type WorkspaceUserListResponseBody = {
+  users: Array<WorkspaceUser>
+}

packages/api/src/Domain/Server/Workspace/Paths.ts

@@ -3,6 +3,7 @@ import { Uuid } from '@standardnotes/common'
 const WorkspacePaths = {
   createWorkspace: '/v1/workspaces',
   listWorkspaces: '/v1/workspaces',
+  listWorkspaceUsers: (uuid: Uuid) => `/v1/workspaces/${uuid}/users`,
   inviteToWorkspace: (uuid: Uuid) => `/v1/workspaces/${uuid}/invites`,
   acceptInvite: (uuid: Uuid) => `/v1/invites/${uuid}/accept`,
 }

packages/api/src/Domain/Server/Workspace/WorkspaceServer.spec.ts

@@ -1,9 +1,10 @@
-import { WorkspaceType } from '@standardnotes/common'
+import { WorkspaceAccessLevel, WorkspaceType } from '@standardnotes/common'
 import { HttpServiceInterface, HttpStatusCode } from '../../Http'
 import { WorkspaceCreationResponse } from '../../Response/Workspace/WorkspaceCreationResponse'
 import { WorkspaceInvitationAcceptingResponse } from '../../Response/Workspace/WorkspaceInvitationAcceptingResponse'
 import { WorkspaceInvitationResponse } from '../../Response/Workspace/WorkspaceInvitationResponse'
 import { WorkspaceListResponse } from '../../Response/Workspace/WorkspaceListResponse'
+import { WorkspaceUserListResponse } from '../../Response/Workspace/WorkspaceUserListResponse'
 
 import { WorkspaceServer } from './WorkspaceServer'
 
@@ -42,6 +43,7 @@ describe('WorkspaceServer', () => {
     const response = await createServer().inviteToWorkspace({
       inviteeEmail: '[email protected]',
       workspaceUuid: 'w-1-2-3',
+      accessLevel: WorkspaceAccessLevel.WriteAndRead,
     })
 
     expect(response).toEqual({
@@ -83,4 +85,18 @@ describe('WorkspaceServer', () => {
       data: { ownedWorkspaces: [], joinedWorkspaces: [] },
     })
   })
+
+  it('should list workspace users', async () => {
+    httpService.get = jest.fn().mockReturnValue({
+      status: HttpStatusCode.Success,
+      data: { users: [] },
+    } as jest.Mocked<WorkspaceUserListResponse>)
+
+    const response = await createServer().listWorkspaceUsers({ workspaceUuid: 'w-1-2-3' })
+
+    expect(response).toEqual({
+      status: 200,
+      data: { users: [] },
+    })
+  })
 })

packages/api/src/Domain/Server/Workspace/WorkspaceServer.ts

@@ -7,6 +7,8 @@ import { WorkspaceInvitationAcceptingRequestParams } from '../../Request/Workspa
 import { WorkspaceInvitationAcceptingResponse } from '../../Response/Workspace/WorkspaceInvitationAcceptingResponse'
 import { WorkspaceListRequestParams } from '../../Request/Workspace/WorkspaceListRequestParams'
 import { WorkspaceListResponse } from '../../Response/Workspace/WorkspaceListResponse'
+import { WorkspaceUserListRequestParams } from '../../Request/Workspace/WorkspaceUserListRequestParams'
+import { WorkspaceUserListResponse } from '../../Response/Workspace/WorkspaceUserListResponse'
 
 import { Paths } from './Paths'
 import { WorkspaceServerInterface } from './WorkspaceServerInterface'
@@ -14,6 +16,12 @@ import { WorkspaceServerInterface } from './WorkspaceServerInterface'
 export class WorkspaceServer implements WorkspaceServerInterface {
   constructor(private httpService: HttpServiceInterface) {}
 
+  async listWorkspaceUsers(params: WorkspaceUserListRequestParams): Promise<WorkspaceUserListResponse> {
+    const response = await this.httpService.get(Paths.v1.listWorkspaceUsers(params.workspaceUuid), params)
+
+    return response as WorkspaceUserListResponse
+  }
+
   async listWorkspaces(params: WorkspaceListRequestParams): Promise<WorkspaceListResponse> {
     const response = await this.httpService.get(Paths.v1.listWorkspaces, params)
 

packages/api/src/Domain/Server/Workspace/WorkspaceServerInterface.ts

@@ -6,10 +6,13 @@ import { WorkspaceInvitationAcceptingRequestParams } from '../../Request/Workspa
 import { WorkspaceInvitationAcceptingResponse } from '../../Response/Workspace/WorkspaceInvitationAcceptingResponse'
 import { WorkspaceListRequestParams } from '../../Request/Workspace/WorkspaceListRequestParams'
 import { WorkspaceListResponse } from '../../Response/Workspace/WorkspaceListResponse'
+import { WorkspaceUserListRequestParams } from '../../Request/Workspace/WorkspaceUserListRequestParams'
+import { WorkspaceUserListResponse } from '../../Response/Workspace/WorkspaceUserListResponse'
 
 export interface WorkspaceServerInterface {
   createWorkspace(params: WorkspaceCreationRequestParams): Promise<WorkspaceCreationResponse>
   listWorkspaces(params: WorkspaceListRequestParams): Promise<WorkspaceListResponse>
+  listWorkspaceUsers(params: WorkspaceUserListRequestParams): Promise<WorkspaceUserListResponse>
   inviteToWorkspace(params: WorkspaceInvitationRequestParams): Promise<WorkspaceInvitationResponse>
   acceptInvite(params: WorkspaceInvitationAcceptingRequestParams): Promise<WorkspaceInvitationAcceptingResponse>
 }

packages/components/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.7.19](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/components-meta
+
 ## [2.7.18](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-10)
 
 **Note:** Version bump only for package @standardnotes/components-meta

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/components-meta",
-  "version": "2.7.18",
+  "version": "2.7.19",
   "private": true,
   "author": "Standard Notes.",
   "main": "dist",

packages/desktop/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.23.208](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
+## [3.23.207](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
+## [3.23.206](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
+## [3.23.205](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
+## [3.23.204](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
 ## [3.23.203](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
 
 **Note:** Version bump only for package @standardnotes/desktop

packages/desktop/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@standardnotes/desktop",
   "main": "./app/dist/index.js",
-  "version": "3.23.203",
+  "version": "3.23.208",
   "license": "AGPL-3.0-or-later",
   "author": "Standard Notes.",
   "private": true,

packages/encryption/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.17.1](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/encryption
+
+# [1.17.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+### Features
+
+* **api:** add listing workspace users ([fb41f65](https://github.com/standardnotes/app/commit/fb41f651eca45dd62314609c2f389d5dc683c36e))
+
 ## [1.16.3](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
 
 **Note:** Version bump only for package @standardnotes/encryption

packages/encryption/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/encryption",
-  "version": "1.16.3",
+  "version": "1.17.1",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },
@@ -35,7 +35,7 @@
     "typescript": "*"
   },
   "dependencies": {
-    "@standardnotes/common": "^1.36.1",
+    "@standardnotes/common": "^1.39.0",
     "@standardnotes/models": "workspace:*",
     "@standardnotes/responses": "workspace:*",
     "@standardnotes/sncrypto-common": "workspace:*",

packages/features/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.53.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+### Features
+
+* **api:** add listing workspace users ([fb41f65](https://github.com/standardnotes/app/commit/fb41f651eca45dd62314609c2f389d5dc683c36e))
+
 ## [1.52.4](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-10)
 
 ### Bug Fixes

packages/features/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/features",
-  "version": "1.52.4",
+  "version": "1.53.0",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@standardnotes/auth": "^3.19.4",
-    "@standardnotes/common": "^1.36.1",
+    "@standardnotes/common": "^1.39.0",
     "@standardnotes/security": "^1.2.0",
     "reflect-metadata": "^0.1.13"
   },

packages/filepicker/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.24.1](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/filepicker
+
+# [1.24.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+### Features
+
+* **api:** add listing workspace users ([fb41f65](https://github.com/standardnotes/app/commit/fb41f651eca45dd62314609c2f389d5dc683c36e))
+
 ## [1.23.15](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
 
 **Note:** Version bump only for package @standardnotes/filepicker

packages/filepicker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/filepicker",
-  "version": "1.23.15",
+  "version": "1.24.1",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },
@@ -31,7 +31,7 @@
     "ts-node": "^10.5.0"
   },
   "dependencies": {
-    "@standardnotes/common": "^1.36.1",
+    "@standardnotes/common": "^1.39.0",
     "@standardnotes/files": "workspace:*",
     "@standardnotes/utils": "workspace:*",
     "@types/wicg-file-system-access": "^2020.9.5",

packages/files/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.11.1](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/files
+
+# [1.11.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+### Features
+
+* **api:** add listing workspace users ([fb41f65](https://github.com/standardnotes/app/commit/fb41f651eca45dd62314609c2f389d5dc683c36e))
+
 ## [1.10.15](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
 
 **Note:** Version bump only for package @standardnotes/files

packages/files/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/files",
-  "version": "1.10.15",
+  "version": "1.11.1",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },
@@ -30,7 +30,7 @@
     "ts-jest": "^28.0.5"
   },
   "dependencies": {
-    "@standardnotes/common": "^1.36.1",
+    "@standardnotes/common": "^1.39.0",
     "@standardnotes/encryption": "workspace:*",
     "@standardnotes/models": "workspace:*",
     "@standardnotes/responses": "workspace:*",

packages/mobile/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.42.1](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
+# [3.42.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+### Features
+
+* item linking ([#1779](https://github.com/standardnotes/app/issues/1779)) ([e3f2842](https://github.com/standardnotes/app/commit/e3f28421ff042c635ad2ae645c102c27e3e3f9c7))
+
+## [3.41.10](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+### Bug Fixes
+
+* **mobile:** issue with black screen on iOS ([#1777](https://github.com/standardnotes/app/issues/1777)) ([9fc77d8](https://github.com/standardnotes/app/commit/9fc77d861e501d63ee97875bba2ddda51d14fd0b))
+
+## [3.41.9](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
+## [3.41.8](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
+## [3.41.7](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
 ## [3.41.6](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
 
 **Note:** Version bump only for package @standardnotes/mobile

packages/mobile/ios/Podfile.lock

@@ -302,7 +302,7 @@ PODS:
     - React
   - react-native-version-info (1.1.1):
     - React-Core
-  - react-native-webview (11.17.2):
+  - react-native-webview (11.23.1):
     - React-Core
   - React-perflogger (0.67.4)
   - React-RCTActionSheet (0.67.4):
@@ -719,7 +719,7 @@ SPEC CHECKSUMS:
   react-native-sodium-jsi: c8901320767d00385f9111bc95ba25aaa9a29890
   react-native-static-server: 880d9b697ef68722e6fa06ae06e6b843e906ed0b
   react-native-version-info: a106f23009ac0db4ee00de39574eb546682579b9
-  react-native-webview: 380c1a03ec94b7ed764dac8db1e7c9952d08c93a
+  react-native-webview: d33e2db8925d090871ffeb232dfa50cb3a727581
   React-perflogger: 0afaf2f01a47fd0fc368a93bfbb5bd3b26db6e7f
   React-RCTActionSheet: 59f35c4029e0b532fc42114241a06e170b7431a2
   React-RCTAnimation: aae4f4bed122e78bdab72f7118d291d70a932ce2

packages/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/mobile",
-  "version": "3.41.6",
+  "version": "3.42.1",
   "author": "Standard Notes.",
   "private": true,
   "license": "AGPL-3.0-or-later",
@@ -80,7 +80,7 @@
     "react-native-url-polyfill": "^1.3.0",
     "react-native-vector-icons": "^9.1.0",
     "react-native-version-info": "^1.1.1",
-    "react-native-webview": "11.17.2",
+    "react-native-webview": "11.23.1",
     "react-native-zip-archive": "^6.0.6",
     "react-navigation-header-buttons": "^9.0.1",
     "styled-components": "5.3.5"

packages/mobile/src/Hooks/useFiles.ts

@@ -68,7 +68,7 @@ export const useFiles = ({ note }: Props) => {
   const filesService = application.getFilesService()
 
   const reloadAttachedFiles = useCallback(() => {
-    setAttachedFiles(application.items.getFilesForNote(note).sort(filesService.sortByName))
+    setAttachedFiles(application.items.getSortedFilesForItem(note).sort(filesService.sortByName))
   }, [application.items, filesService.sortByName, note])
 
   const reloadAllFiles = useCallback(() => {

packages/mobile/src/MobileWebAppContainer.tsx

@@ -204,6 +204,12 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
       onError={(err) => console.error('An error has occurred', err)}
       onHttpError={() => console.error('An HTTP error occurred')}
       onMessage={onMessage}
+      onContentProcessDidTerminate={() => {
+        webViewRef.current?.reload()
+      }}
+      onRenderProcessGone={() => {
+        webViewRef.current?.reload()
+      }}
       allowFileAccess={true}
       allowUniversalAccessFromFileURLs={true}
       injectedJavaScriptBeforeContentLoaded={injectedJS}

packages/mobile/src/Screens/SideMenu/NoteSideMenu.tsx

@@ -139,7 +139,7 @@ export const NoteSideMenu = React.memo((props: Props) => {
       setAttachedFilesLength(0)
       return
     }
-    setAttachedFilesLength(application.items.getFilesForNote(note).length)
+    setAttachedFilesLength(application.items.getSortedFilesForItem(note).length)
   }, [application, note])
 
   useEffect(() => {
@@ -147,7 +147,7 @@ export const NoteSideMenu = React.memo((props: Props) => {
       return
     }
     const removeFilesObserver = application.streamItems(ContentType.File, () => {
-      setAttachedFilesLength(application.items.getFilesForNote(note).length)
+      setAttachedFilesLength(application.items.getSortedFilesForItem(note).length)
     })
     return () => {
       removeFilesObserver()

packages/models/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.27.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+### Features
+
+* item linking ([#1779](https://github.com/standardnotes/app/issues/1779)) ([e3f2842](https://github.com/standardnotes/app/commit/e3f28421ff042c635ad2ae645c102c27e3e3f9c7))
+
+# [1.26.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+### Features
+
+* **api:** add listing workspace users ([fb41f65](https://github.com/standardnotes/app/commit/fb41f651eca45dd62314609c2f389d5dc683c36e))
+
 # [1.25.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
 
 ### Features

packages/models/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/models",
-  "version": "1.25.0",
+  "version": "1.27.0",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },
@@ -31,7 +31,7 @@
     "typescript": "*"
   },
   "dependencies": {
-    "@standardnotes/common": "^1.36.1",
+    "@standardnotes/common": "^1.39.0",
     "@standardnotes/features": "workspace:*",
     "@standardnotes/responses": "workspace:*",
     "@standardnotes/utils": "workspace:*",

packages/models/src/Domain/Abstract/Reference/AnonymousReference.ts

@@ -1,8 +1,8 @@
 import { ContentType } from '@standardnotes/common'
-import { ContenteReferenceType } from './ContenteReferenceType'
+import { ContentReferenceType } from './ContenteReferenceType'
 
 export interface AnonymousReference {
   uuid: string
   content_type: ContentType
-  reference_type: ContenteReferenceType
+  reference_type: ContentReferenceType
 }

packages/models/src/Domain/Abstract/Reference/ContenteReferenceType.ts

@@ -1,5 +1,7 @@
-export enum ContenteReferenceType {
+export enum ContentReferenceType {
   TagToParentTag = 'TagToParentTag',
-  FileToNote = 'FileToNote',
   TagToFile = 'TagToFile',
+  FileToNote = 'FileToNote',
+  FileToFile = 'FileToFile',
+  NoteToNote = 'NoteToNote',
 }

packages/models/src/Domain/Abstract/Reference/FileToFileReference.ts

@@ -0,0 +1,8 @@
+import { ContentType } from '@standardnotes/common'
+import { AnonymousReference } from './AnonymousReference'
+import { ContentReferenceType } from './ContenteReferenceType'
+
+export interface FileToFileReference extends AnonymousReference {
+  content_type: ContentType.File
+  reference_type: ContentReferenceType.FileToFile
+}

packages/models/src/Domain/Abstract/Reference/FileToNoteReference.ts

@@ -1,8 +1,8 @@
 import { ContentType } from '@standardnotes/common'
 import { AnonymousReference } from './AnonymousReference'
-import { ContenteReferenceType } from './ContenteReferenceType'
+import { ContentReferenceType } from './ContenteReferenceType'
 
 export interface FileToNoteReference extends AnonymousReference {
   content_type: ContentType.Note
-  reference_type: ContenteReferenceType.FileToNote
+  reference_type: ContentReferenceType.FileToNote
 }

packages/models/src/Domain/Abstract/Reference/Functions.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ContentType } from '@standardnotes/common'
 import { ItemInterface } from '../Item/Interfaces/ItemInterface'
-import { ContenteReferenceType } from './ContenteReferenceType'
+import { ContentReferenceType } from './ContenteReferenceType'
 import { ContentReference } from './ContentReference'
 import { LegacyAnonymousReference } from './LegacyAnonymousReference'
 import { LegacyTagToNoteReference } from './LegacyTagToNoteReference'
@@ -26,5 +26,5 @@ export const isLegacyTagToNoteReference = (
 }
 
 export const isTagToParentTagReference = (x: ContentReference): x is TagToParentTagReference => {
-  return isReference(x) && x.reference_type === ContenteReferenceType.TagToParentTag
+  return isReference(x) && x.reference_type === ContentReferenceType.TagToParentTag
 }

packages/models/src/Domain/Abstract/Reference/NoteToNoteReference.ts

@@ -0,0 +1,8 @@
+import { ContentType } from '@standardnotes/common'
+import { AnonymousReference } from './AnonymousReference'
+import { ContentReferenceType } from './ContenteReferenceType'
+
+export interface NoteToNoteReference extends AnonymousReference {
+  content_type: ContentType.Note
+  reference_type: ContentReferenceType.NoteToNote
+}

packages/models/src/Domain/Abstract/Reference/TagToFileReference.ts

@@ -1,8 +1,8 @@
 import { ContentType } from '@standardnotes/common'
 import { AnonymousReference } from './AnonymousReference'
-import { ContenteReferenceType } from './ContenteReferenceType'
+import { ContentReferenceType } from './ContenteReferenceType'
 
 export interface TagToFileReference extends AnonymousReference {
   content_type: ContentType.File
-  reference_type: ContenteReferenceType.TagToFile
+  reference_type: ContentReferenceType.TagToFile
 }

packages/models/src/Domain/Abstract/Reference/TagToParentTagReference.ts

@@ -1,8 +1,8 @@
 import { ContentType } from '@standardnotes/common'
 import { AnonymousReference } from './AnonymousReference'
-import { ContenteReferenceType } from './ContenteReferenceType'
+import { ContentReferenceType } from './ContenteReferenceType'
 
 export interface TagToParentTagReference extends AnonymousReference {
   content_type: ContentType.Tag
-  reference_type: ContenteReferenceType.TagToParentTag
+  reference_type: ContentReferenceType.TagToParentTag
 }

packages/models/src/Domain/Api/Workspace/WorkspaceUser.ts

@@ -0,0 +1,16 @@
+import { Uuid, WorkspaceAccessLevel, WorkspaceUserStatus } from '@standardnotes/common'
+
+export type WorkspaceUser = {
+  uuid: Uuid
+  accessLevel: WorkspaceAccessLevel
+  userUuid: Uuid
+  userDisplayName: string | null
+  workspaceUuid: Uuid
+  encryptedWorkspaceKey: string | null
+  publicKey: string | null
+  encryptedPrivateKey: string | null
+  status: WorkspaceUserStatus
+  keyRotationIndex: number
+  createdAt: number
+  updatedAt: number
+}

packages/models/src/Domain/Runtime/Collection/Item/TagItemsIndex.spec.ts

@@ -1,10 +1,10 @@
-import { NoteContent } from './../../../Syncable/Note/NoteContent'
+import { NoteContent } from '../../../Syncable/Note/NoteContent'
 import { ContentType } from '@standardnotes/common'
 import { DecryptedItem, EncryptedItem } from '../../../Abstract/Item'
 import { DecryptedPayload, EncryptedPayload, PayloadTimestampDefaults } from '../../../Abstract/Payload'
 import { ItemCollection } from './ItemCollection'
 import { FillItemContent } from '../../../Abstract/Content/ItemContent'
-import { TagNotesIndex } from './TagNotesIndex'
+import { TagItemsIndex } from './TagItemsIndex'
 import { ItemDelta } from '../../Index/ItemDelta'
 import { AnyItemInterface } from '../../../Abstract/Item/Interfaces/UnionTypes'
 
@@ -24,10 +24,10 @@ describe('tag notes index', () => {
     return new EncryptedItem(payload)
   }
 
-  const createDecryptedItem = (uuid?: string) => {
+  const createDecryptedItem = (uuid?: string, content_type = ContentType.Note) => {
     const payload = new DecryptedPayload({
       uuid: uuid || String(Math.random()),
-      content_type: ContentType.Note,
+      content_type,
       content: FillItemContent<NoteContent>({
         title: 'foo',
       }),
@@ -46,20 +46,33 @@ describe('tag notes index', () => {
     }
   }
 
+  it('should count both notes and files', () => {
+    const collection = new ItemCollection()
+    const index = new TagItemsIndex(collection)
+
+    const decryptedNote = createDecryptedItem('note')
+    const decryptedFile = createDecryptedItem('file')
+    collection.set([decryptedNote, decryptedFile])
+    index.onChange(createChangeDelta(decryptedNote))
+    index.onChange(createChangeDelta(decryptedFile))
+
+    expect(index.allCountableItemsCount()).toEqual(2)
+  })
+
   it('should decrement count after decrypted note becomes errored', () => {
     const collection = new ItemCollection()
-    const index = new TagNotesIndex(collection)
+    const index = new TagItemsIndex(collection)
 
     const decryptedItem = createDecryptedItem()
     collection.set(decryptedItem)
     index.onChange(createChangeDelta(decryptedItem))
 
-    expect(index.allCountableNotesCount()).toEqual(1)
+    expect(index.allCountableItemsCount()).toEqual(1)
 
     const encryptedItem = createEncryptedItem(decryptedItem.uuid)
     collection.set(encryptedItem)
     index.onChange(createChangeDelta(encryptedItem))
 
-    expect(index.allCountableNotesCount()).toEqual(0)
+    expect(index.allCountableItemsCount()).toEqual(0)
   })
 })

packages/models/src/Domain/Runtime/Collection/Item/TagItemsIndex.ts

@@ -7,22 +7,22 @@ import { ItemDelta } from '../../Index/ItemDelta'
 import { isDecryptedItem, ItemInterface } from '../../../Abstract/Item'
 
 type AllNotesUuidSignifier = undefined
-export type TagNoteCountChangeObserver = (tagUuid: Uuid | AllNotesUuidSignifier) => void
+export type TagItemCountChangeObserver = (tagUuid: Uuid | AllNotesUuidSignifier) => void
 
-export class TagNotesIndex implements SNIndex {
-  private tagToNotesMap: Partial<Record<Uuid, Set<Uuid>>> = {}
-  private allCountableNotes = new Set<Uuid>()
+export class TagItemsIndex implements SNIndex {
+  private tagToItemsMap: Partial<Record<Uuid, Set<Uuid>>> = {}
+  private allCountableItems = new Set<Uuid>()
 
-  constructor(private collection: ItemCollection, public observers: TagNoteCountChangeObserver[] = []) {}
+  constructor(private collection: ItemCollection, public observers: TagItemCountChangeObserver[] = []) {}
 
-  private isNoteCountable = (note: ItemInterface) => {
-    if (isDecryptedItem(note)) {
-      return !note.archived && !note.trashed
+  private isItemCountable = (item: ItemInterface) => {
+    if (isDecryptedItem(item)) {
+      return !item.archived && !item.trashed
     }
     return false
   }
 
-  public addCountChangeObserver(observer: TagNoteCountChangeObserver): () => void {
+  public addCountChangeObserver(observer: TagItemCountChangeObserver): () => void {
     this.observers.push(observer)
 
     const thislessEventObservers = this.observers
@@ -37,30 +37,32 @@ export class TagNotesIndex implements SNIndex {
     }
   }
 
-  public allCountableNotesCount(): number {
-    return this.allCountableNotes.size
+  public allCountableItemsCount(): number {
+    return this.allCountableItems.size
   }
 
-  public countableNotesForTag(tag: SNTag): number {
-    return this.tagToNotesMap[tag.uuid]?.size || 0
+  public countableItemsForTag(tag: SNTag): number {
+    return this.tagToItemsMap[tag.uuid]?.size || 0
   }
 
   public onChange(delta: ItemDelta): void {
-    const notes = [...delta.changed, ...delta.inserted, ...delta.discarded].filter(
-      (i) => i.content_type === ContentType.Note,
+    const items = [...delta.changed, ...delta.inserted, ...delta.discarded].filter(
+      (i) => i.content_type === ContentType.Note || i.content_type === ContentType.File,
     )
     const tags = [...delta.changed, ...delta.inserted].filter(isDecryptedItem).filter(isTag)
 
-    this.receiveNoteChanges(notes)
+    this.receiveItemChanges(items)
     this.receiveTagChanges(tags)
   }
 
   private receiveTagChanges(tags: SNTag[]): void {
     for (const tag of tags) {
-      const uuids = tag.noteReferences.map((ref) => ref.uuid)
-      const countableUuids = uuids.filter((uuid) => this.allCountableNotes.has(uuid))
-      const previousSet = this.tagToNotesMap[tag.uuid]
-      this.tagToNotesMap[tag.uuid] = new Set(countableUuids)
+      const uuids = tag.references
+        .filter((ref) => ref.content_type === ContentType.Note || ref.content_type === ContentType.File)
+        .map((ref) => ref.uuid)
+      const countableUuids = uuids.filter((uuid) => this.allCountableItems.has(uuid))
+      const previousSet = this.tagToItemsMap[tag.uuid]
+      this.tagToItemsMap[tag.uuid] = new Set(countableUuids)
 
       if (previousSet?.size !== countableUuids.length) {
         this.notifyObservers(tag.uuid)
@@ -68,26 +70,26 @@ export class TagNotesIndex implements SNIndex {
     }
   }
 
-  private receiveNoteChanges(notes: ItemInterface[]): void {
-    const previousAllCount = this.allCountableNotes.size
+  private receiveItemChanges(items: ItemInterface[]): void {
+    const previousAllCount = this.allCountableItems.size
 
-    for (const note of notes) {
-      const isCountable = this.isNoteCountable(note)
+    for (const item of items) {
+      const isCountable = this.isItemCountable(item)
       if (isCountable) {
-        this.allCountableNotes.add(note.uuid)
+        this.allCountableItems.add(item.uuid)
       } else {
-        this.allCountableNotes.delete(note.uuid)
+        this.allCountableItems.delete(item.uuid)
       }
 
-      const associatedTagUuids = this.collection.uuidsThatReferenceUuid(note.uuid)
+      const associatedTagUuids = this.collection.uuidsThatReferenceUuid(item.uuid)
 
       for (const tagUuid of associatedTagUuids) {
         const set = this.setForTag(tagUuid)
         const previousCount = set.size
         if (isCountable) {
-          set.add(note.uuid)
+          set.add(item.uuid)
         } else {
-          set.delete(note.uuid)
+          set.delete(item.uuid)
         }
         if (previousCount !== set.size) {
           this.notifyObservers(tagUuid)
@@ -95,16 +97,16 @@ export class TagNotesIndex implements SNIndex {
       }
     }
 
-    if (previousAllCount !== this.allCountableNotes.size) {
+    if (previousAllCount !== this.allCountableItems.size) {
       this.notifyObservers(undefined)
     }
   }
 
   private setForTag(uuid: Uuid): Set<Uuid> {
-    let set = this.tagToNotesMap[uuid]
+    let set = this.tagToItemsMap[uuid]
     if (!set) {
       set = new Set()
-      this.tagToNotesMap[uuid] = set
+      this.tagToItemsMap[uuid] = set
     }
     return set
   }

packages/models/src/Domain/Syncable/File/FileMutator.ts

@@ -1,9 +1,10 @@
 import { ContentType } from '@standardnotes/common'
 import { SNNote } from '../Note/Note'
-import { FileContent } from './File'
+import { FileContent, FileItem } from './File'
 import { FileToNoteReference } from '../../Abstract/Reference/FileToNoteReference'
-import { ContenteReferenceType } from '../../Abstract/Reference/ContenteReferenceType'
+import { ContentReferenceType } from '../../Abstract/Reference/ContenteReferenceType'
 import { DecryptedItemMutator } from '../../Abstract/Item/Mutator/DecryptedItemMutator'
+import { FileToFileReference } from '../../Abstract/Reference/FileToFileReference'
 
 export class FileMutator extends DecryptedItemMutator<FileContent> {
   set name(newName: string) {
@@ -16,7 +17,7 @@ export class FileMutator extends DecryptedItemMutator<FileContent> {
 
   public addNote(note: SNNote): void {
     const reference: FileToNoteReference = {
-      reference_type: ContenteReferenceType.FileToNote,
+      reference_type: ContentReferenceType.FileToNote,
       content_type: ContentType.Note,
       uuid: note.uuid,
     }
@@ -30,4 +31,22 @@ export class FileMutator extends DecryptedItemMutator<FileContent> {
     const references = this.immutableItem.references.filter((ref) => ref.uuid !== note.uuid)
     this.mutableContent.references = references
   }
+
+  public addFile(file: FileItem): void {
+    if (this.immutableItem.isReferencingItem(file)) {
+      return
+    }
+
+    const reference: FileToFileReference = {
+      uuid: file.uuid,
+      content_type: ContentType.File,
+      reference_type: ContentReferenceType.FileToFile,
+    }
+
+    this.mutableContent.references.push(reference)
+  }
+
+  public removeFile(file: FileItem): void {
+    this.mutableContent.references = this.mutableContent.references.filter((r) => r.uuid !== file.uuid)
+  }
 }

packages/models/src/Domain/Syncable/Note/NoteMutator.ts

@@ -1,6 +1,10 @@
 import { AppDataField } from '../../Abstract/Item/Types/AppDataField'
 import { NoteContent } from './NoteContent'
 import { DecryptedItemMutator } from '../../Abstract/Item/Mutator/DecryptedItemMutator'
+import { SNNote } from './Note'
+import { NoteToNoteReference } from '../../Abstract/Reference/NoteToNoteReference'
+import { ContentType } from '@standardnotes/common'
+import { ContentReferenceType } from '../../Abstract/Item'
 
 export class NoteMutator extends DecryptedItemMutator<NoteContent> {
   set title(title: string) {
@@ -38,4 +42,22 @@ export class NoteMutator extends DecryptedItemMutator<NoteContent> {
       this.mutableContent.spellcheck = !this.mutableContent.spellcheck
     }
   }
+
+  public addNote(note: SNNote): void {
+    if (this.immutableItem.isReferencingItem(note)) {
+      return
+    }
+
+    const reference: NoteToNoteReference = {
+      uuid: note.uuid,
+      content_type: ContentType.Note,
+      reference_type: ContentReferenceType.NoteToNote,
+    }
+
+    this.mutableContent.references.push(reference)
+  }
+
+  public removeNote(note: SNNote): void {
+    this.mutableContent.references = this.mutableContent.references.filter((r) => r.uuid !== note.uuid)
+  }
 }

packages/models/src/Domain/Syncable/Tag/TagMutator.spec.ts

@@ -1,5 +1,5 @@
 import { ContentType } from '@standardnotes/common'
-import { ContenteReferenceType, MutationType } from '../../Abstract/Item'
+import { ContentReferenceType, MutationType } from '../../Abstract/Item'
 import { createFile, createTag } from '../../Utilities/Test/SpecUtils'
 import { SNTag } from './Tag'
 import { TagMutator } from './TagMutator'
@@ -16,7 +16,7 @@ describe('tag mutator', () => {
     expect(result.content.references[0]).toEqual({
       uuid: file.uuid,
       content_type: ContentType.File,
-      reference_type: ContenteReferenceType.TagToFile,
+      reference_type: ContentReferenceType.TagToFile,
     })
   })
 

packages/models/src/Domain/Syncable/Tag/TagMutator.ts

@@ -4,7 +4,7 @@ import { FileItem } from '../File'
 import { SNNote } from '../Note'
 import { isTagToParentTagReference } from '../../Abstract/Reference/Functions'
 import { TagToParentTagReference } from '../../Abstract/Reference/TagToParentTagReference'
-import { ContenteReferenceType } from '../../Abstract/Reference/ContenteReferenceType'
+import { ContentReferenceType } from '../../Abstract/Reference/ContenteReferenceType'
 import { DecryptedItemMutator } from '../../Abstract/Item/Mutator/DecryptedItemMutator'
 import { TagToFileReference } from '../../Abstract/Reference/TagToFileReference'
 
@@ -21,7 +21,7 @@ export class TagMutator extends DecryptedItemMutator<TagContent> {
     const references = this.immutableItem.references.filter((ref) => !isTagToParentTagReference(ref))
 
     const reference: TagToParentTagReference = {
-      reference_type: ContenteReferenceType.TagToParentTag,
+      reference_type: ContentReferenceType.TagToParentTag,
       content_type: ContentType.Tag,
       uuid: tag.uuid,
     }
@@ -41,7 +41,7 @@ export class TagMutator extends DecryptedItemMutator<TagContent> {
     }
 
     const reference: TagToFileReference = {
-      reference_type: ContenteReferenceType.TagToFile,
+      reference_type: ContentReferenceType.TagToFile,
       content_type: ContentType.File,
       uuid: file.uuid,
     }

packages/models/src/Domain/index.ts

@@ -29,6 +29,7 @@ export * from './Api/Subscription/InvitationStatus'
 export * from './Api/Subscription/InviteeIdentifierType'
 export * from './Api/Subscription/InviterIdentifierType'
 export * from './Api/Workspace/Workspace'
+export * from './Api/Workspace/WorkspaceUser'
 export * from './Device/Environment'
 export * from './Device/Platform'
 export * from './Local/KeyParams/RootKeyParamsInterface'
@@ -37,7 +38,7 @@ export * from './Local/RootKey/RootKeyContent'
 export * from './Local/RootKey/RootKeyInterface'
 export * from './Runtime/Collection/CollectionSort'
 export * from './Runtime/Collection/Item/ItemCollection'
-export * from './Runtime/Collection/Item/TagNotesIndex'
+export * from './Runtime/Collection/Item/TagItemsIndex'
 export * from './Runtime/Collection/Payload/ImmutablePayloadCollection'
 export * from './Runtime/Collection/Payload/PayloadCollection'
 export * from './Runtime/Deltas'

packages/releases/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.136](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.3.135](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.3.134](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.3.133](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.3.132](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.3.131](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/releases
+
 ## [1.3.130](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
 
 **Note:** Version bump only for package @standardnotes/releases

packages/releases/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/releases",
-  "version": "1.3.130",
+  "version": "1.3.136",
   "license": "AGPL-3.0-or-later",
   "main": "dist/releases.json",
   "types": "dist/index.d.ts",

packages/responses/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.11.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+### Features
+
+* **api:** add listing workspace users ([fb41f65](https://github.com/standardnotes/app/commit/fb41f651eca45dd62314609c2f389d5dc683c36e))
+
 ## [1.10.6](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-10)
 
 **Note:** Version bump only for package @standardnotes/responses

packages/responses/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/responses",
-  "version": "1.10.6",
+  "version": "1.11.0",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },
@@ -31,7 +31,7 @@
     "ts-jest": "^28.0.5"
   },
   "dependencies": {
-    "@standardnotes/common": "^1.36.1",
+    "@standardnotes/common": "^1.39.0",
     "@standardnotes/features": "workspace:*",
     "@standardnotes/security": "^1.1.0",
     "reflect-metadata": "^0.1.13"

packages/services/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.31.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+### Features
+
+* item linking ([#1779](https://github.com/standardnotes/app/issues/1779)) ([e3f2842](https://github.com/standardnotes/app/commit/e3f28421ff042c635ad2ae645c102c27e3e3f9c7))
+
+# [1.30.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+### Features
+
+* **api:** add listing workspace users ([fb41f65](https://github.com/standardnotes/app/commit/fb41f651eca45dd62314609c2f389d5dc683c36e))
+
+# [1.29.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+### Features
+
+* **api:** add access level to invitation requests ([49b3d27](https://github.com/standardnotes/app/commit/49b3d2714fbe4ac9f9242097b8df6b4e3d604513))
+
 # [1.28.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
 
 ### Features

packages/services/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/services",
-  "version": "1.28.0",
+  "version": "1.31.0",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },
@@ -26,7 +26,7 @@
   "dependencies": {
     "@standardnotes/api": "workspace:^",
     "@standardnotes/auth": "^3.19.4",
-    "@standardnotes/common": "^1.36.1",
+    "@standardnotes/common": "^1.39.0",
     "@standardnotes/encryption": "workspace:^",
     "@standardnotes/files": "workspace:^",
     "@standardnotes/models": "workspace:^",

packages/services/src/Domain/Item/ItemsClientInterface.ts

@@ -4,7 +4,7 @@ import {
   FileItem,
   SNTag,
   SmartView,
-  TagNoteCountChangeObserver,
+  TagItemCountChangeObserver,
   DecryptedPayloadInterface,
   EncryptedItemInterface,
   DecryptedTransferPayload,
@@ -14,6 +14,7 @@ import {
   SNTheme,
   DisplayOptions,
   ItemsKeyInterface,
+  ItemContent,
 } from '@standardnotes/models'
 
 export interface ItemsClientInterface {
@@ -23,12 +24,12 @@ export interface ItemsClientInterface {
 
   disassociateFileWithNote(file: FileItem, note: SNNote): Promise<FileItem>
 
-  getFilesForNote(note: SNNote): FileItem[]
-
   renameFile(file: FileItem, name: string): Promise<FileItem>
 
   addTagToNote(note: SNNote, tag: SNTag, addHierarchy: boolean): Promise<SNTag[]>
 
+  addTagToFile(file: FileItem, tag: SNTag, addHierarchy: boolean): Promise<SNTag[]>
+
   /** Creates an unmanaged, un-inserted item from a payload. */
   createItemFromPayload(payload: DecryptedPayloadInterface): DecryptedItemInterface
 
@@ -54,7 +55,7 @@ export interface ItemsClientInterface {
 
   notesMatchingSmartView(view: SmartView): SNNote[]
 
-  addNoteCountChangeObserver(observer: TagNoteCountChangeObserver): () => void
+  addNoteCountChangeObserver(observer: TagItemCountChangeObserver): () => void
 
   allCountableNotesCount(): number
 
@@ -72,6 +73,14 @@ export interface ItemsClientInterface {
 
   itemsReferencingItem(itemToLookupUuidFor: DecryptedItemInterface, contentType?: ContentType): DecryptedItemInterface[]
 
+  linkNoteToNote(note: SNNote, otherNote: SNNote): Promise<SNNote>
+  linkFileToFile(file: FileItem, otherFile: FileItem): Promise<FileItem>
+
+  unlinkItem(
+    item: DecryptedItemInterface<ItemContent>,
+    itemToUnlink: DecryptedItemInterface<ItemContent>,
+  ): Promise<DecryptedItemInterface<ItemContent>>
+
   /**
    * Finds tags with title or component starting with a search query and (optionally) not associated with a note
    * @param searchQuery - The query string to match
@@ -101,10 +110,14 @@ export interface ItemsClientInterface {
 
   /**
    * Get tags for a note sorted in natural order
-   * @param note - The note whose tags will be returned
-   * @returns Array containing tags associated with a note
+   * @param item - The item whose tags will be returned
+   * @returns Array containing tags associated with an item
    */
-  getSortedTagsForNote(note: SNNote): SNTag[]
+  getSortedTagsForItem(item: DecryptedItemInterface<ItemContent>): SNTag[]
+  getSortedFilesForItem(item: DecryptedItemInterface<ItemContent>): FileItem[]
+
+  getSortedLinkedNotesForItem(item: DecryptedItemInterface<ItemContent>): SNNote[]
+  getSortedNotesLinkingToItem(item: DecryptedItemInterface<ItemContent>): SNNote[]
 
   isSmartViewTitle(title: string): boolean
 
@@ -137,4 +150,12 @@ export interface ItemsClientInterface {
    * @returns Whether the item is a template (unmanaged)
    */
   isTemplateItem(item: DecryptedItemInterface): boolean
+
+  /**
+   * @returns `'direct'` if `itemOne` has the reference to `itemTwo`, `'indirect'` if `itemTwo` has the reference to `itemOne`, `'unlinked'` if neither reference each other
+   */
+  relationshipTypeForItems(
+    itemOne: DecryptedItemInterface,
+    itemTwo: DecryptedItemInterface,
+  ): 'direct' | 'indirect' | 'unlinked'
 }

packages/services/src/Domain/Workspace/WorkspaceClientInterface.ts

@@ -1,5 +1,5 @@
-import { Uuid, WorkspaceType } from '@standardnotes/common'
-import { Workspace } from '@standardnotes/models'
+import { Uuid, WorkspaceAccessLevel, WorkspaceType } from '@standardnotes/common'
+import { Workspace, WorkspaceUser } from '@standardnotes/models'
 
 export interface WorkspaceClientInterface {
   createWorkspace(dto: {
@@ -9,7 +9,11 @@ export interface WorkspaceClientInterface {
     publicKey?: string
     workspaceName?: string
   }): Promise<{ uuid: string } | null>
-  inviteToWorkspace(dto: { inviteeEmail: string; workspaceUuid: Uuid }): Promise<{ uuid: string } | null>
+  inviteToWorkspace(dto: {
+    inviteeEmail: string
+    workspaceUuid: Uuid
+    accessLevel: WorkspaceAccessLevel
+  }): Promise<{ uuid: string } | null>
   acceptInvite(dto: {
     inviteUuid: Uuid
     userUuid: Uuid
@@ -17,4 +21,5 @@ export interface WorkspaceClientInterface {
     encryptedPrivateKey: string
   }): Promise<{ success: boolean }>
   listWorkspaces(): Promise<{ ownedWorkspaces: Array<Workspace>; joinedWorkspaces: Array<Workspace> }>
+  listWorkspaceUsers(dto: { workspaceUuid: Uuid }): Promise<{ users: Array<WorkspaceUser> }>
 }

packages/services/src/Domain/Workspace/WorkspaceManager.ts

@@ -1,6 +1,6 @@
 import { WorkspaceApiServiceInterface } from '@standardnotes/api'
-import { Uuid, WorkspaceType } from '@standardnotes/common'
-import { Workspace } from '@standardnotes/models'
+import { Uuid, WorkspaceAccessLevel, WorkspaceType } from '@standardnotes/common'
+import { Workspace, WorkspaceUser } from '@standardnotes/models'
 
 import { InternalEventBusInterface } from '../Internal/InternalEventBusInterface'
 import { AbstractService } from '../Service/AbstractService'
@@ -14,6 +14,20 @@ export class WorkspaceManager extends AbstractService implements WorkspaceClient
     super(internalEventBus)
   }
 
+  async listWorkspaceUsers(dto: { workspaceUuid: string }): Promise<{ users: WorkspaceUser[] }> {
+    try {
+      const result = await this.workspaceApiService.listWorkspaceUsers(dto)
+
+      if (result.data.error !== undefined) {
+        return { users: [] }
+      }
+
+      return result.data
+    } catch (error) {
+      return { users: [] }
+    }
+  }
+
   async listWorkspaces(): Promise<{ ownedWorkspaces: Workspace[]; joinedWorkspaces: Workspace[] }> {
     try {
       const result = await this.workspaceApiService.listWorkspaces()
@@ -47,7 +61,11 @@ export class WorkspaceManager extends AbstractService implements WorkspaceClient
     }
   }
 
-  async inviteToWorkspace(dto: { inviteeEmail: string; workspaceUuid: Uuid }): Promise<{ uuid: string } | null> {
+  async inviteToWorkspace(dto: {
+    inviteeEmail: string
+    workspaceUuid: Uuid
+    accessLevel: WorkspaceAccessLevel
+  }): Promise<{ uuid: string } | null> {
     try {
       const result = await this.workspaceApiService.inviteToWorkspace(dto)
 

packages/snjs/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.138.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+### Features
+
+* item linking ([#1779](https://github.com/standardnotes/app/issues/1779)) ([e3f2842](https://github.com/standardnotes/app/commit/e3f28421ff042c635ad2ae645c102c27e3e3f9c7))
+
+# [2.137.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+### Features
+
+* **api:** add listing workspace users ([fb41f65](https://github.com/standardnotes/app/commit/fb41f651eca45dd62314609c2f389d5dc683c36e))
+
+## [2.136.4](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/snjs
+
 ## [2.136.3](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
 
 **Note:** Version bump only for package @standardnotes/snjs

packages/snjs/lib/Services/Items/ItemManager.spec.ts

@@ -405,41 +405,6 @@ describe('itemManager', () => {
       const notes = itemManager.getDisplayableNotes()
       expect(notes).toHaveLength(1)
     })
-
-    it('adding a note to a tag hierarchy should add the note to its parent too', async () => {
-      itemManager = createService()
-      const parentTag = createTag('parent')
-      const childTag = createTag('child')
-      const note = createNote('note')
-
-      await itemManager.insertItems([parentTag, childTag, note])
-      await itemManager.setTagParent(parentTag, childTag)
-
-      await itemManager.addTagToNote(note, childTag, true)
-
-      const tags = itemManager.getSortedTagsForNote(note)
-
-      expect(tags).toHaveLength(2)
-      expect(tags[0].uuid).toEqual(childTag.uuid)
-      expect(tags[1].uuid).toEqual(parentTag.uuid)
-    })
-
-    it('adding a note to a tag hierarchy should not add the note to its parent if hierarchy option is disabled', async () => {
-      itemManager = createService()
-      const parentTag = createTag('parent')
-      const childTag = createTag('child')
-      const note = createNote('note')
-
-      await itemManager.insertItems([parentTag, childTag, note])
-      await itemManager.setTagParent(parentTag, childTag)
-
-      await itemManager.addTagToNote(note, childTag, false)
-
-      const tags = itemManager.getSortedTagsForNote(note)
-
-      expect(tags).toHaveLength(1)
-      expect(tags[0].uuid).toEqual(childTag.uuid)
-    })
   })
 
   describe('template items', () => {
@@ -703,47 +668,6 @@ describe('itemManager', () => {
   })
 
   describe('files', () => {
-    it('associates with note', async () => {
-      itemManager = createService()
-      const note = createNote('invoices')
-      const file = createFile('invoice_1.pdf')
-      await itemManager.insertItems([note, file])
-
-      const resultingFile = await itemManager.associateFileWithNote(file, note)
-      const references = resultingFile.references
-
-      expect(references).toHaveLength(1)
-      expect(references[0].uuid).toEqual(note.uuid)
-    })
-
-    it('disassociates with note', async () => {
-      itemManager = createService()
-      const note = createNote('invoices')
-      const file = createFile('invoice_1.pdf')
-      await itemManager.insertItems([note, file])
-
-      const associatedFile = await itemManager.associateFileWithNote(file, note)
-      const disassociatedFile = await itemManager.disassociateFileWithNote(associatedFile, note)
-      const references = disassociatedFile.references
-
-      expect(references).toHaveLength(0)
-    })
-
-    it('should get files associated with note', async () => {
-      itemManager = createService()
-      const note = createNote('invoices')
-      const file = createFile('invoice_1.pdf')
-      const secondFile = createFile('unrelated-file.xlsx')
-      await itemManager.insertItems([note, file, secondFile])
-
-      await itemManager.associateFileWithNote(file, note)
-
-      const filesAssociatedWithNote = itemManager.getFilesForNote(note)
-
-      expect(filesAssociatedWithNote).toHaveLength(1)
-      expect(filesAssociatedWithNote[0].uuid).toBe(file.uuid)
-    })
-
     it('should correctly rename file to filename that has extension', async () => {
       itemManager = createService()
       const file = createFile('initialName.ext')
@@ -774,4 +698,231 @@ describe('itemManager', () => {
       expect(renamedFile.name).toBe('anotherName')
     })
   })
+
+  describe('linking', () => {
+    it('adding a note to a tag hierarchy should add the note to its parent too', async () => {
+      itemManager = createService()
+      const parentTag = createTag('parent')
+      const childTag = createTag('child')
+      const note = createNote('note')
+
+      await itemManager.insertItems([parentTag, childTag, note])
+      await itemManager.setTagParent(parentTag, childTag)
+
+      await itemManager.addTagToNote(note, childTag, true)
+
+      const tags = itemManager.getSortedTagsForItem(note)
+
+      expect(tags).toHaveLength(2)
+      expect(tags[0].uuid).toEqual(childTag.uuid)
+      expect(tags[1].uuid).toEqual(parentTag.uuid)
+    })
+
+    it('adding a note to a tag hierarchy should not add the note to its parent if hierarchy option is disabled', async () => {
+      itemManager = createService()
+      const parentTag = createTag('parent')
+      const childTag = createTag('child')
+      const note = createNote('note')
+
+      await itemManager.insertItems([parentTag, childTag, note])
+      await itemManager.setTagParent(parentTag, childTag)
+
+      await itemManager.addTagToNote(note, childTag, false)
+
+      const tags = itemManager.getSortedTagsForItem(note)
+
+      expect(tags).toHaveLength(1)
+      expect(tags[0].uuid).toEqual(childTag.uuid)
+    })
+
+    it('adding a file to a tag hierarchy should add the file to its parent too', async () => {
+      itemManager = createService()
+      const parentTag = createTag('parent')
+      const childTag = createTag('child')
+      const file = createFile('file')
+
+      await itemManager.insertItems([parentTag, childTag, file])
+      await itemManager.setTagParent(parentTag, childTag)
+
+      await itemManager.addTagToFile(file, childTag, true)
+
+      const tags = itemManager.getSortedTagsForItem(file)
+
+      expect(tags).toHaveLength(2)
+      expect(tags[0].uuid).toEqual(childTag.uuid)
+      expect(tags[1].uuid).toEqual(parentTag.uuid)
+    })
+
+    it('adding a file to a tag hierarchy should not add the file to its parent if hierarchy option is disabled', async () => {
+      itemManager = createService()
+      const parentTag = createTag('parent')
+      const childTag = createTag('child')
+      const file = createFile('file')
+
+      await itemManager.insertItems([parentTag, childTag, file])
+      await itemManager.setTagParent(parentTag, childTag)
+
+      await itemManager.addTagToFile(file, childTag, false)
+
+      const tags = itemManager.getSortedTagsForItem(file)
+
+      expect(tags).toHaveLength(1)
+      expect(tags[0].uuid).toEqual(childTag.uuid)
+    })
+
+    it('should link file with note', async () => {
+      itemManager = createService()
+      const note = createNote('invoices')
+      const file = createFile('invoice_1.pdf')
+      await itemManager.insertItems([note, file])
+
+      const resultingFile = await itemManager.associateFileWithNote(file, note)
+      const references = resultingFile.references
+
+      expect(references).toHaveLength(1)
+      expect(references[0].uuid).toEqual(note.uuid)
+    })
+
+    it('should unlink file from note', async () => {
+      itemManager = createService()
+      const note = createNote('invoices')
+      const file = createFile('invoice_1.pdf')
+      await itemManager.insertItems([note, file])
+
+      const associatedFile = await itemManager.associateFileWithNote(file, note)
+      const disassociatedFile = await itemManager.disassociateFileWithNote(associatedFile, note)
+      const references = disassociatedFile.references
+
+      expect(references).toHaveLength(0)
+    })
+
+    it('should get files linked with note', async () => {
+      itemManager = createService()
+      const note = createNote('invoices')
+      const file = createFile('invoice_1.pdf')
+      const secondFile = createFile('unrelated-file.xlsx')
+      await itemManager.insertItems([note, file, secondFile])
+
+      await itemManager.associateFileWithNote(file, note)
+
+      const filesAssociatedWithNote = itemManager.getSortedFilesForItem(note)
+
+      expect(filesAssociatedWithNote).toHaveLength(1)
+      expect(filesAssociatedWithNote[0].uuid).toBe(file.uuid)
+    })
+
+    it('should link note to note', async () => {
+      itemManager = createService()
+      const note = createNote('research')
+      const note2 = createNote('citation')
+      await itemManager.insertItems([note, note2])
+
+      const resultingNote = await itemManager.linkNoteToNote(note, note2)
+      const references = resultingNote.references
+
+      expect(references).toHaveLength(1)
+      expect(references[0].uuid).toEqual(note2.uuid)
+    })
+
+    it('should link file to file', async () => {
+      itemManager = createService()
+      const file = createFile('research')
+      const file2 = createFile('citation')
+      await itemManager.insertItems([file, file2])
+
+      const resultingfile = await itemManager.linkFileToFile(file, file2)
+      const references = resultingfile.references
+
+      expect(references).toHaveLength(1)
+      expect(references[0].uuid).toEqual(file2.uuid)
+    })
+
+    it('should get the relationship type for two items', async () => {
+      itemManager = createService()
+      const firstNote = createNote('First note')
+      const secondNote = createNote('Second note')
+      const unlinkedNote = createNote('Unlinked note')
+      await itemManager.insertItems([firstNote, secondNote, unlinkedNote])
+
+      const firstNoteLinkedToSecond = await itemManager.linkNoteToNote(firstNote, secondNote)
+
+      const relationshipOfFirstNoteToSecond = itemManager.relationshipTypeForItems(firstNoteLinkedToSecond, secondNote)
+      const relationshipOfSecondNoteToFirst = itemManager.relationshipTypeForItems(secondNote, firstNoteLinkedToSecond)
+      const relationshipOfFirstNoteToUnlinked = itemManager.relationshipTypeForItems(
+        firstNoteLinkedToSecond,
+        unlinkedNote,
+      )
+
+      expect(relationshipOfFirstNoteToSecond).toBe('direct')
+      expect(relationshipOfSecondNoteToFirst).toBe('indirect')
+      expect(relationshipOfFirstNoteToUnlinked).toBe('unlinked')
+    })
+
+    it('should unlink itemToUnlink from item', async () => {
+      itemManager = createService()
+      const note = createNote('Note 1')
+      const note2 = createNote('Note 2')
+      await itemManager.insertItems([note, note2])
+
+      const linkedItem = await itemManager.linkNoteToNote(note, note2)
+      const unlinkedItem = await itemManager.unlinkItem(linkedItem, note2)
+      const references = unlinkedItem.references
+
+      expect(references).toHaveLength(0)
+    })
+
+    it('should get all linked files for item', async () => {
+      itemManager = createService()
+      const note = createNote('note')
+      const file = createFile('A1')
+      const file2 = createFile('B2')
+
+      await itemManager.insertItems([note, file, file2])
+
+      await itemManager.associateFileWithNote(file2, note)
+      await itemManager.associateFileWithNote(file, note)
+
+      const sortedFilesForItem = itemManager.getSortedFilesForItem(note)
+
+      expect(sortedFilesForItem).toHaveLength(2)
+      expect(sortedFilesForItem[0].uuid).toEqual(file.uuid)
+      expect(sortedFilesForItem[1].uuid).toEqual(file2.uuid)
+    })
+
+    it('should get all linked notes for item', async () => {
+      itemManager = createService()
+      const baseNote = createNote('note')
+      const noteToLink1 = createNote('A1')
+      const noteToLink2 = createNote('B2')
+
+      await itemManager.insertItems([baseNote, noteToLink1, noteToLink2])
+
+      await itemManager.linkNoteToNote(baseNote, noteToLink2)
+      await itemManager.linkNoteToNote(baseNote, noteToLink1)
+
+      const sortedFilesForItem = itemManager.getSortedLinkedNotesForItem(baseNote)
+
+      expect(sortedFilesForItem).toHaveLength(2)
+      expect(sortedFilesForItem[0].uuid).toEqual(noteToLink1.uuid)
+      expect(sortedFilesForItem[1].uuid).toEqual(noteToLink2.uuid)
+    })
+
+    it('should get all notes linking to item', async () => {
+      itemManager = createService()
+      const baseNote = createNote('note')
+      const noteToLink1 = createNote('A1')
+      const noteToLink2 = createNote('B2')
+
+      await itemManager.insertItems([baseNote, noteToLink1, noteToLink2])
+
+      await itemManager.linkNoteToNote(noteToLink2, baseNote)
+      await itemManager.linkNoteToNote(noteToLink1, baseNote)
+
+      const sortedFilesForItem = itemManager.getSortedNotesLinkingToItem(baseNote)
+
+      expect(sortedFilesForItem).toHaveLength(2)
+      expect(sortedFilesForItem[0].uuid).toEqual(noteToLink1.uuid)
+      expect(sortedFilesForItem[1].uuid).toEqual(noteToLink2.uuid)
+    })
+  })
 })

packages/snjs/lib/Services/Items/ItemManager.ts

@@ -9,7 +9,7 @@ import * as Services from '@standardnotes/services'
 import { PayloadManagerChangeData } from '../Payloads'
 import { DiagnosticInfo, ItemsClientInterface } from '@standardnotes/services'
 import { ApplicationDisplayOptions } from '@Lib/Application/Options/OptionalOptions'
-import { CollectionSort } from '@standardnotes/models'
+import { CollectionSort, DecryptedItemInterface, ItemContent } from '@standardnotes/models'
 
 type ItemsChangeObserver<I extends Models.DecryptedItemInterface = Models.DecryptedItemInterface> = {
   contentType: ContentType[]
@@ -32,7 +32,7 @@ export class ItemManager
   private observers: ItemsChangeObserver[] = []
   private collection!: Models.ItemCollection
   private systemSmartViews: Models.SmartView[]
-  private tagNotesIndex!: Models.TagNotesIndex
+  private tagItemsIndex!: Models.TagItemsIndex
 
   private navigationDisplayController!: Models.ItemDisplayController<Models.SNNote | Models.FileItem>
   private tagDisplayController!: Models.ItemDisplayController<Models.SNTag>
@@ -96,7 +96,7 @@ export class ItemManager
       sortDirection: 'asc',
     })
 
-    this.tagNotesIndex = new Models.TagNotesIndex(this.collection, this.tagNotesIndex?.observers)
+    this.tagItemsIndex = new Models.TagItemsIndex(this.collection, this.tagItemsIndex?.observers)
   }
 
   private get allDisplayControllers(): Models.ItemDisplayController<Models.DisplayItem>[] {
@@ -219,7 +219,7 @@ export class ItemManager
     ;(this.unsubChangeObserver as unknown) = undefined
     ;(this.payloadManager as unknown) = undefined
     ;(this.collection as unknown) = undefined
-    ;(this.tagNotesIndex as unknown) = undefined
+    ;(this.tagItemsIndex as unknown) = undefined
     ;(this.tagDisplayController as unknown) = undefined
     ;(this.navigationDisplayController as unknown) = undefined
     ;(this.itemsKeyDisplayController as unknown) = undefined
@@ -284,23 +284,23 @@ export class ItemManager
     return TagsToFoldersMigrationApplicator.isApplicableToCurrentData(this)
   }
 
-  public addNoteCountChangeObserver(observer: Models.TagNoteCountChangeObserver): () => void {
-    return this.tagNotesIndex.addCountChangeObserver(observer)
+  public addNoteCountChangeObserver(observer: Models.TagItemCountChangeObserver): () => void {
+    return this.tagItemsIndex.addCountChangeObserver(observer)
   }
 
   public allCountableNotesCount(): number {
-    return this.tagNotesIndex.allCountableNotesCount()
+    return this.tagItemsIndex.allCountableItemsCount()
   }
 
   public countableNotesForTag(tag: Models.SNTag | Models.SmartView): number {
     if (tag instanceof Models.SmartView) {
       if (tag.uuid === Models.SystemViewId.AllNotes) {
-        return this.tagNotesIndex.allCountableNotesCount()
+        return this.tagItemsIndex.allCountableItemsCount()
       }
 
-      throw Error('countableNotesForTag is not meant to be used for smart views.')
+      throw Error('countableItemsForTag is not meant to be used for smart views.')
     }
-    return this.tagNotesIndex.countableNotesForTag(tag)
+    return this.tagItemsIndex.countableItemsForTag(tag)
   }
 
   public getNoteCount(): number {
@@ -406,7 +406,7 @@ export class ItemManager
     }
 
     this.collection.onChange(delta)
-    this.tagNotesIndex.onChange(delta)
+    this.tagItemsIndex.onChange(delta)
 
     const affectedContentTypesArray = Array.from(affectedContentTypes.values())
     for (const controller of this.allDisplayControllers) {
@@ -1140,20 +1140,97 @@ export class ItemManager
     )
   }
 
+  public async addTagToFile(file: Models.FileItem, tag: Models.SNTag, addHierarchy: boolean): Promise<Models.SNTag[]> {
+    let tagsToAdd = [tag]
+
+    if (addHierarchy) {
+      const parentChainTags = this.getTagParentChain(tag)
+      tagsToAdd = [...parentChainTags, tag]
+    }
+
+    return Promise.all(
+      tagsToAdd.map((tagToAdd) => {
+        return this.changeTag(tagToAdd, (mutator) => {
+          mutator.addFile(file)
+        }) as Promise<Models.SNTag>
+      }),
+    )
+  }
+
+  public async linkNoteToNote(note: Models.SNNote, otherNote: Models.SNNote): Promise<Models.SNNote> {
+    return this.changeItem<Models.NoteMutator, Models.SNNote>(note, (mutator) => {
+      mutator.addNote(otherNote)
+    })
+  }
+
+  public async linkFileToFile(file: Models.FileItem, otherFile: Models.FileItem): Promise<Models.FileItem> {
+    return this.changeItem<Models.FileMutator, Models.FileItem>(file, (mutator) => {
+      mutator.addFile(otherFile)
+    })
+  }
+
+  public async unlinkItem(
+    item: DecryptedItemInterface<ItemContent>,
+    itemToUnlink: DecryptedItemInterface<ItemContent>,
+  ) {
+    return this.changeItem(item, (mutator) => {
+      mutator.removeItemAsRelationship(itemToUnlink)
+    })
+  }
+
   /**
    * Get tags for a note sorted in natural order
-   * @param note - The note whose tags will be returned
-   * @returns Array containing tags associated with a note
+   * @param item - The item whose tags will be returned
+   * @returns Array containing tags associated with an item
    */
-  public getSortedTagsForNote(note: Models.SNNote): Models.SNTag[] {
+  public getSortedTagsForItem(item: DecryptedItemInterface<ItemContent>): Models.SNTag[] {
     return naturalSort(
-      this.itemsReferencingItem(note).filter((ref) => {
+      this.itemsReferencingItem(item).filter((ref) => {
         return ref?.content_type === ContentType.Tag
       }) as Models.SNTag[],
       'title',
     )
   }
 
+  public getSortedFilesForItem(item: DecryptedItemInterface<ItemContent>): Models.FileItem[] {
+    if (this.isTemplateItem(item)) {
+      return []
+    }
+
+    const filesReferencingItem = this.itemsReferencingItem(item).filter(
+      (ref) => ref.content_type === ContentType.File,
+    ) as Models.FileItem[]
+    const filesReferencedByItem = this.referencesForItem(item).filter(
+      (ref) => ref.content_type === ContentType.File,
+    ) as Models.FileItem[]
+
+    return naturalSort(filesReferencingItem.concat(filesReferencedByItem), 'title')
+  }
+
+  public getSortedLinkedNotesForItem(item: DecryptedItemInterface<ItemContent>): Models.SNNote[] {
+    if (this.isTemplateItem(item)) {
+      return []
+    }
+
+    const notesReferencedByItem = this.referencesForItem(item).filter(
+      (ref) => ref.content_type === ContentType.Note,
+    ) as Models.SNNote[]
+
+    return naturalSort(notesReferencedByItem, 'title')
+  }
+
+  public getSortedNotesLinkingToItem(item: Models.DecryptedItemInterface<Models.ItemContent>): Models.SNNote[] {
+    if (this.isTemplateItem(item)) {
+      return []
+    }
+
+    const notesReferencingItem = this.itemsReferencingItem(item).filter(
+      (ref) => ref.content_type === ContentType.Note,
+    ) as Models.SNNote[]
+
+    return naturalSort(notesReferencingItem, 'title')
+  }
+
   public async createTag(title: string, parentItemToLookupUuidFor?: Models.SNTag): Promise<Models.SNTag> {
     const newTag = await this.createItem<Models.SNTag>(
       ContentType.Tag,
@@ -1312,12 +1389,6 @@ export class ItemManager
     }
   }
 
-  public getFilesForNote(note: Models.SNNote): Models.FileItem[] {
-    return (
-      this.itemsReferencingItem(note).filter((ref) => ref.content_type === ContentType.File) as Models.FileItem[]
-    ).sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1))
-  }
-
   public renameFile(file: Models.FileItem, name: string): Promise<Models.FileItem> {
     return this.changeItem<Models.FileMutator, Models.FileItem>(file, (mutator) => {
       mutator.name = name
@@ -1353,6 +1424,23 @@ export class ItemManager
     return this.findAnyItems(uuids) as (Models.DecryptedItemInterface | Models.DeletedItemInterface)[]
   }
 
+  /**
+   * @returns `'direct'` if `itemOne` has the reference to `itemTwo`, `'indirect'` if `itemTwo` has the reference to `itemOne`, `'unlinked'` if neither reference each other
+   */
+  public relationshipTypeForItems(
+    itemOne: Models.DecryptedItemInterface<Models.ItemContent>,
+    itemTwo: Models.DecryptedItemInterface<Models.ItemContent>,
+  ): 'direct' | 'indirect' | 'unlinked' {
+    const itemOneReferencesItemTwo = !!this.referencesForItem(itemOne).find(
+      (reference) => reference.uuid === itemTwo.uuid,
+    )
+    const itemTwoReferencesItemOne = !!this.referencesForItem(itemTwo).find(
+      (reference) => reference.uuid === itemOne.uuid,
+    )
+
+    return itemOneReferencesItemTwo ? 'direct' : itemTwoReferencesItemOne ? 'indirect' : 'unlinked'
+  }
+
   override getDiagnostics(): Promise<DiagnosticInfo | undefined> {
     return Promise.resolve({
       items: {

packages/snjs/mocha/item_manager.test.js

@@ -570,7 +570,7 @@ describe('item manager', function () {
         })
       })
 
-      const results = this.itemManager.getSortedTagsForNote(note)
+      const results = this.itemManager.getSortedTagsForItem(note)
 
       expect(results).lengthOf(tags.length)
       expect(results[0].title).to.equal(tags[1].title)

packages/snjs/mocha/model_tests/notes_tags_folders.test.js

@@ -77,8 +77,8 @@ describe('tags as folders', () => {
     await this.application.items.addTagToNote(note2, tags.another, true)
 
     // ## The note has been added to other tags
-    const note1Tags = await this.application.items.getSortedTagsForNote(note1)
-    const note2Tags = await this.application.items.getSortedTagsForNote(note2)
+    const note1Tags = await this.application.items.getSortedTagsForItem(note1)
+    const note2Tags = await this.application.items.getSortedTagsForItem(note2)
 
     expect(note1Tags.length).to.equal(3)
     expect(note2Tags.length).to.equal(1)

packages/snjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/snjs",
-  "version": "2.136.3",
+  "version": "2.138.0",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },
@@ -68,7 +68,7 @@
   },
   "dependencies": {
     "@standardnotes/api": "workspace:*",
-    "@standardnotes/common": "^1.36.1",
+    "@standardnotes/common": "^1.39.0",
     "@standardnotes/domain-events": "^2.39.0",
     "@standardnotes/encryption": "workspace:*",
     "@standardnotes/features": "workspace:*",

packages/ui-services/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.7.2](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/ui-services
+
+## [1.7.1](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+### Bug Fixes
+
+* package import location ([b82eac0](https://github.com/standardnotes/app/commit/b82eac09a822ce1a97167b8b63ab258e2abc9034))
+
+# [1.7.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+### Features
+
+* **api:** add listing workspace users ([fb41f65](https://github.com/standardnotes/app/commit/fb41f651eca45dd62314609c2f389d5dc683c36e))
+
+## [1.6.6](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/ui-services
+
 ## [1.6.5](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
 
 **Note:** Version bump only for package @standardnotes/ui-services

packages/ui-services/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/ui-services",
-  "version": "1.6.5",
+  "version": "1.7.2",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },
@@ -23,7 +23,8 @@
     "test": "jest spec --coverage --passWithNoTests"
   },
   "dependencies": {
-    "@standardnotes/common": "^1.36.1",
+    "@standardnotes/common": "^1.39.0",
+    "@standardnotes/features": "workspace:^",
     "@standardnotes/filepicker": "workspace:^",
     "@standardnotes/services": "workspace:^",
     "@standardnotes/styles": "workspace:^",

packages/ui-services/src/Theme/ThemeManager.ts

@@ -16,7 +16,7 @@ import {
   StorageValueModes,
   FeatureStatus,
 } from '@standardnotes/services'
-import { FeatureIdentifier } from '@standardnotes/snjs'
+import { FeatureIdentifier } from '@standardnotes/features'
 
 const CachedThemesKey = 'cachedThemes'
 const TimeBeforeApplyingColorScheme = 5

packages/utils/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.10.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+### Features
+
+* **api:** add listing workspace users ([fb41f65](https://github.com/standardnotes/app/commit/fb41f651eca45dd62314609c2f389d5dc683c36e))
+
 ## [1.9.1](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-10)
 
 ### Bug Fixes

packages/utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/utils",
-  "version": "1.9.1",
+  "version": "1.10.0",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },
@@ -25,7 +25,7 @@
     "test": "jest spec"
   },
   "dependencies": {
-    "@standardnotes/common": "^1.36.1",
+    "@standardnotes/common": "^1.39.0",
     "dompurify": "^2.3.8",
     "lodash": "^4.17.21",
     "reflect-metadata": "^0.1.13"

packages/web/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.72.1](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+### Bug Fixes
+
+* viewport height-related issue on mobile ([9909393](https://github.com/standardnotes/app/commit/990939318f572fe2226784f5ecbd83d5f1709397))
+
+# [3.72.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+### Features
+
+* item linking ([#1779](https://github.com/standardnotes/app/issues/1779)) ([e3f2842](https://github.com/standardnotes/app/commit/e3f28421ff042c635ad2ae645c102c27e3e3f9c7))
+
+## [3.71.8](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/web
+
+## [3.71.7](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/web
+
+## [3.71.6](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
+
+**Note:** Version bump only for package @standardnotes/web
+
 ## [3.71.5](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-11)
 
 **Note:** Version bump only for package @standardnotes/web

packages/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/web",
-  "version": "3.71.5",
+  "version": "3.72.1",
   "license": "AGPL-3.0-or-later",
   "main": "dist/app.js",
   "author": "Standard Notes.",

packages/web/src/javascripts/App.tsx

@@ -1,6 +1,6 @@
 'use strict'
 
-import { disableIosTextFieldZoom } from '@/Utils'
+import { disableIosTextFieldZoom, isDev } from '@/Utils'
 
 declare global {
   interface Window {
@@ -42,22 +42,27 @@ const getKey = () => {
   return keyCount++
 }
 
-let initialCorrectViewportHeight: number | null = null
+const ViewportHeightKey = '--viewport-height'
 
-export const setViewportHeightWithFallback = (isOrientationChange = false) => {
+export const setViewportHeightWithFallback = () => {
+  const currentHeight = parseInt(document.documentElement.style.getPropertyValue(ViewportHeightKey))
   const newValue = visualViewport && visualViewport.height > 0 ? visualViewport.height : window.innerHeight
 
-  if (initialCorrectViewportHeight && newValue < initialCorrectViewportHeight && !isOrientationChange) {
+  if (isDev) {
+    // eslint-disable-next-line no-console
+    console.log(`currentHeight: ${currentHeight}, newValue: ${newValue}`)
+  }
+
+  if (currentHeight && newValue < currentHeight) {
     return
   }
 
   if (!newValue) {
-    document.documentElement.style.setProperty('--viewport-height', '100vh')
+    document.documentElement.style.setProperty(ViewportHeightKey, '100vh')
     return
   }
 
-  initialCorrectViewportHeight = newValue
-  document.documentElement.style.setProperty('--viewport-height', `${newValue}px`)
+  document.documentElement.style.setProperty(ViewportHeightKey, `${newValue}px`)
 }
 
 const setDefaultMonospaceFont = (platform?: Platform) => {
@@ -84,26 +89,18 @@ const startApplication: StartApplication = async function startApplication(
     device.environment === Environment.Desktop ||
     (matchMedia(MediaQueryBreakpoints.md).matches && matchMedia(MediaQueryBreakpoints.pointerFine))
 
-  const orientationChangeHandler = () => {
-    setViewportHeightWithFallback(true)
-  }
-
-  const resizeHandler = () => {
-    setViewportHeightWithFallback(false)
-  }
-
   const setupViewportHeightListeners = () => {
     if (!isDesktop) {
       setViewportHeightWithFallback()
-      window.addEventListener('orientationchange', orientationChangeHandler)
-      window.addEventListener('resize', resizeHandler)
+      window.addEventListener('orientationchange', setViewportHeightWithFallback)
+      window.addEventListener('resize', setViewportHeightWithFallback)
     }
   }
 
   const removeViewportHeightListeners = () => {
     if (!isDesktop) {
-      window.removeEventListener('orientationchange', orientationChangeHandler)
-      window.removeEventListener('resize', resizeHandler)
+      window.removeEventListener('orientationchange', setViewportHeightWithFallback)
+      window.removeEventListener('resize', setViewportHeightWithFallback)
     }
   }
 

packages/web/src/javascripts/Components/ApplicationView/ApplicationView.tsx

@@ -209,7 +209,6 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
                   itemListController={viewControllerManager.itemListController}
                   navigationController={viewControllerManager.navigationController}
                   noAccountWarningController={viewControllerManager.noAccountWarningController}
-                  noteTagsController={viewControllerManager.noteTagsController}
                   notesController={viewControllerManager.notesController}
                   selectionController={viewControllerManager.selectionController}
                   searchOptionsController={viewControllerManager.searchOptionsController}
@@ -238,7 +237,7 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
                 application={application}
                 navigationController={viewControllerManager.navigationController}
                 notesController={viewControllerManager.notesController}
-                noteTagsController={viewControllerManager.noteTagsController}
+                linkingController={viewControllerManager.linkingController}
                 historyModalController={viewControllerManager.historyModalController}
               />
               <TagContextMenuWrapper

packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx

@@ -144,7 +144,7 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
           }
         }}
       >
-        <Icon type="attachment-file" />
+        <Icon type="folder" />
         {attachedFilesCount > 0 && <span className="ml-2 text-sm">{attachedFilesCount}</span>}
       </button>
       <Popover

packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx

@@ -11,6 +11,8 @@ import { PopoverFileItemActionType } from './PopoverFileItemAction'
 import { PopoverTabs } from './PopoverTabs'
 import { FilesController } from '@/Controllers/FilesController'
 import { StreamingFileReader } from '@standardnotes/filepicker'
+import ClearInputButton from '../ClearInputButton/ClearInputButton'
+import DecoratedInput from '../Input/DecoratedInput'
 
 type Props = {
   application: WebApplication
@@ -116,29 +118,24 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
       <div className="max-h-110 min-h-0 overflow-y-auto">
         {filteredList.length > 0 || searchQuery.length > 0 ? (
           <div className="sticky top-0 left-0 border-b border-solid border-border bg-default p-3">
-            <div className="relative">
-              <input
-                type="text"
-                className="w-full rounded border border-solid border-border bg-default py-1.5 px-3 text-sm text-text"
-                placeholder="Search files..."
-                value={searchQuery}
-                onInput={(e) => {
-                  setSearchQuery((e.target as HTMLInputElement).value)
-                }}
-                ref={searchInputRef}
-              />
-              {searchQuery.length > 0 && (
-                <button
-                  className="absolute right-2 top-1/2 flex -translate-y-1/2 cursor-pointer border-0 bg-transparent p-0"
-                  onClick={() => {
-                    setSearchQuery('')
-                    searchInputRef.current?.focus()
-                  }}
-                >
-                  <Icon type="clear-circle-filled" className="text-neutral" />
-                </button>
-              )}
-            </div>
+            <DecoratedInput
+              type="text"
+              className={{ container: searchQuery.length < 1 ? 'py-1.5 px-0.5' : 'py-0' }}
+              placeholder="Search items..."
+              value={searchQuery}
+              onChange={setSearchQuery}
+              ref={searchInputRef}
+              right={[
+                searchQuery.length > 0 && (
+                  <ClearInputButton
+                    onClick={() => {
+                      setSearchQuery('')
+                      searchInputRef.current?.focus()
+                    }}
+                  />
+                ),
+              ]}
+            />
           </div>
         ) : null}
         {filteredList.length > 0 ? (

packages/web/src/javascripts/Components/ClearInputButton/ClearInputButton.tsx

@@ -0,0 +1,15 @@
+import { classNames } from '@/Utils/ConcatenateClassNames'
+import { ComponentPropsWithoutRef } from 'react'
+import Icon from '../Icon/Icon'
+
+type Props = ComponentPropsWithoutRef<'button'>
+
+const ClearInputButton = ({ className, ...props }: Props) => {
+  return (
+    <button className={classNames('flex cursor-pointer border-0 bg-transparent p-0', className)} {...props}>
+      <Icon type="clear-circle-filled" className="text-neutral" />
+    </button>
+  )
+}
+
+export default ClearInputButton

packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx

@@ -11,7 +11,6 @@ import { ItemListController } from '@/Controllers/ItemList/ItemListController'
 import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import { FilesController } from '@/Controllers/FilesController'
-import { NoteTagsController } from '@/Controllers/NoteTagsController'
 import { NoAccountWarningController } from '@/Controllers/NoAccountWarningController'
 import { NotesController } from '@/Controllers/NotesController'
 import { AccountMenuController } from '@/Controllers/AccountMenu/AccountMenuController'
@@ -33,7 +32,6 @@ type Props = {
   itemListController: ItemListController
   navigationController: NavigationController
   noAccountWarningController: NoAccountWarningController
-  noteTagsController: NoteTagsController
   notesController: NotesController
   selectionController: SelectedItemsController
   searchOptionsController: SearchOptionsController
@@ -46,7 +44,6 @@ const ContentListView: FunctionComponent<Props> = ({
   itemListController,
   navigationController,
   noAccountWarningController,
-  noteTagsController,
   notesController,
   selectionController,
   searchOptionsController,
@@ -167,16 +164,11 @@ const ContentListView: FunctionComponent<Props> = ({
   const panelResizeFinishCallback: ResizeFinishCallback = useCallback(
     (width, _lastLeft, _isMaxWidth, isCollapsed) => {
       application.setPreference(PrefKey.NotesPanelWidth, width).catch(console.error)
-      noteTagsController.reloadTagsContainerMaxWidth()
       application.publishPanelDidResizeEvent(PANEL_NAME_NOTES, isCollapsed)
     },
-    [application, noteTagsController],
+    [application],
   )
 
-  const panelWidthEventCallback = useCallback(() => {
-    noteTagsController.reloadTagsContainerMaxWidth()
-  }, [noteTagsController])
-
   const addButtonLabel = useMemo(
     () => (isFilesSmartView ? 'Upload file' : 'Create a new note in the selected tag'),
     [isFilesSmartView],
@@ -259,7 +251,6 @@ const ContentListView: FunctionComponent<Props> = ({
           side={PanelSide.Right}
           type={PanelResizeType.WidthOnly}
           resizeFinishCallback={panelResizeFinishCallback}
-          widthEventCallback={panelWidthEventCallback}
           width={panelWidth}
           left={0}
         />

packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx

@@ -32,7 +32,7 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
   const editorForNote = application.componentManager.editorForNote(item as SNNote)
   const editorName = editorForNote?.name ?? PLAIN_EDITOR_NAME
   const [icon, tint] = application.iconsController.getIconAndTintForNoteType(editorForNote?.package_info.note_type)
-  const hasFiles = application.items.getFilesForNote(item as SNNote).length > 0
+  const hasFiles = application.items.getSortedFilesForItem(item).length > 0
 
   const openNoteContextMenu = (posX: number, posY: number) => {
     notesController.setContextMenuOpen(false)

packages/web/src/javascripts/Components/FileView/FileViewWithoutProtection.tsx

@@ -5,6 +5,8 @@ import FileOptionsPanel from '@/Components/FileContextMenu/FileOptionsPanel'
 import FilePreview from '@/Components/FilePreview/FilePreview'
 import { FileViewProps } from './FileViewProps'
 import MobileItemsListButton from '../NoteGroupView/MobileItemsListButton'
+import LinkedItemsButton from '../LinkedItems/LinkedItemsButton'
+import LinkedItemBubblesContainer from '../LinkedItems/LinkedItemBubblesContainer'
 import Icon from '../Icon/Icon'
 import Popover from '../Popover/Popover'
 import FilePreviewInfoPanel from '../FilePreview/FilePreviewInfoPanel'
@@ -63,6 +65,10 @@ const FileViewWithoutProtection = ({ application, viewControllerManager, file }:
               </div>
             </div>
             <div className="flex items-center gap-3">
+              <LinkedItemsButton
+                filesController={viewControllerManager.filesController}
+                linkingController={viewControllerManager.linkingController}
+              />
               <button
                 className="bg-text-padding flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border text-neutral hover:bg-contrast focus:bg-contrast"
                 title="File information panel"
@@ -87,6 +93,7 @@ const FileViewWithoutProtection = ({ application, viewControllerManager, file }:
               />
             </div>
           </div>
+          <LinkedItemBubblesContainer linkingController={viewControllerManager.linkingController} />
         </div>
       </div>
       <div className="flex min-h-0 flex-grow flex-col">

packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx

@@ -0,0 +1,172 @@
+import {
+  ChangeEventHandler,
+  FocusEventHandler,
+  FormEventHandler,
+  KeyboardEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import { Disclosure, DisclosurePanel } from '@reach/disclosure'
+import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
+import { observer } from 'mobx-react-lite'
+import { classNames } from '@/Utils/ConcatenateClassNames'
+import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
+import LinkedItemSearchResults from './LinkedItemSearchResults'
+import { LinkingController } from '@/Controllers/LinkingController'
+import { KeyboardKey } from '@standardnotes/ui-services'
+import { ElementIds } from '@/Constants/ElementIDs'
+import Menu from '../Menu/Menu'
+
+type Props = {
+  linkingController: LinkingController
+  focusPreviousItem: () => void
+  focusedId: string | undefined
+  setFocusedId: (id: string) => void
+}
+
+const ItemLinkAutocompleteInput = ({ linkingController, focusPreviousItem, focusedId, setFocusedId }: Props) => {
+  const {
+    tags,
+    getTitleForLinkedTag,
+    getLinkedItemIcon,
+    getSearchResults,
+    linkItemToSelectedItem,
+    createAndAddNewTag,
+    isEntitledToNoteLinking,
+  } = linkingController
+
+  const [searchQuery, setSearchQuery] = useState('')
+  const { unlinkedResults, shouldShowCreateTag } = getSearchResults(searchQuery)
+
+  const [dropdownVisible, setDropdownVisible] = useState(false)
+  const [dropdownMaxHeight, setDropdownMaxHeight] = useState<number | 'auto'>('auto')
+
+  const containerRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const searchResultsMenuRef = useRef<HTMLMenuElement>(null)
+
+  const [closeOnBlur] = useCloseOnBlur(containerRef, (visible: boolean) => {
+    setDropdownVisible(visible)
+    setSearchQuery('')
+  })
+
+  const showDropdown = () => {
+    const { clientHeight } = document.documentElement
+    const inputRect = inputRef.current?.getBoundingClientRect()
+    if (inputRect) {
+      setDropdownMaxHeight(clientHeight - inputRect.bottom - 32 * 2)
+      setDropdownVisible(true)
+    }
+  }
+
+  const onSearchQueryChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+    setSearchQuery(event.currentTarget.value)
+  }
+
+  const onFormSubmit: FormEventHandler = async (event) => {
+    event.preventDefault()
+    if (searchQuery !== '') {
+      await createAndAddNewTag(searchQuery)
+    }
+  }
+
+  const handleFocus = () => {
+    if (focusedId !== ElementIds.ItemLinkAutocompleteInput) {
+      setFocusedId(ElementIds.ItemLinkAutocompleteInput)
+    }
+    showDropdown()
+  }
+
+  const onBlur: FocusEventHandler = (event) => {
+    closeOnBlur(event)
+  }
+
+  const onKeyDown: KeyboardEventHandler = (event) => {
+    switch (event.key) {
+      case KeyboardKey.Left:
+        if (searchQuery.length === 0) {
+          focusPreviousItem()
+        }
+        break
+      case KeyboardKey.Down:
+        if (searchQuery.length > 0) {
+          searchResultsMenuRef.current?.focus()
+        }
+        break
+    }
+  }
+
+  useEffect(() => {
+    if (focusedId === ElementIds.ItemLinkAutocompleteInput) {
+      inputRef.current?.focus()
+    }
+  }, [focusedId])
+
+  const areSearchResultsVisible = dropdownVisible && (unlinkedResults.length > 0 || shouldShowCreateTag)
+
+  const handleMenuKeyDown: KeyboardEventHandler<HTMLMenuElement> = useCallback((event) => {
+    if (event.key === KeyboardKey.Escape) {
+      inputRef.current?.focus()
+    }
+  }, [])
+
+  return (
+    <div ref={containerRef}>
+      <form onSubmit={onFormSubmit}>
+        <Disclosure open={dropdownVisible} onChange={showDropdown}>
+          <input
+            ref={inputRef}
+            className={`${tags.length > 0 ? 'w-80' : 'mr-10 w-70'} no-border h-7
+            bg-transparent text-xs text-text focus:border-b-2 focus:border-solid focus:border-info focus:shadow-none focus:outline-none`}
+            value={searchQuery}
+            onChange={onSearchQueryChange}
+            type="text"
+            placeholder="Link tags, notes, files..."
+            onBlur={onBlur}
+            onFocus={handleFocus}
+            onKeyDown={onKeyDown}
+            id={ElementIds.ItemLinkAutocompleteInput}
+            autoComplete="off"
+          />
+          {areSearchResultsVisible && (
+            <DisclosurePanel
+              className={classNames(
+                tags.length > 0 ? 'w-80' : 'mr-10 w-70',
+                'absolute z-dropdown-menu flex flex-col overflow-y-auto rounded bg-default py-2 shadow-main',
+              )}
+              style={{
+                maxHeight: dropdownMaxHeight,
+              }}
+              onBlur={closeOnBlur}
+              tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
+            >
+              <Menu
+                isOpen={areSearchResultsVisible}
+                a11yLabel="Unlinked items search results"
+                onKeyDown={handleMenuKeyDown}
+                ref={searchResultsMenuRef}
+                shouldAutoFocus={false}
+              >
+                <LinkedItemSearchResults
+                  createAndAddNewTag={createAndAddNewTag}
+                  getLinkedItemIcon={getLinkedItemIcon}
+                  getTitleForLinkedTag={getTitleForLinkedTag}
+                  linkItemToSelectedItem={linkItemToSelectedItem}
+                  results={unlinkedResults}
+                  searchQuery={searchQuery}
+                  shouldShowCreateTag={shouldShowCreateTag}
+                  onClickCallback={() => setSearchQuery('')}
+                  isEntitledToNoteLinking={isEntitledToNoteLinking}
+                />
+              </Menu>
+            </DisclosurePanel>
+          )}
+        </Disclosure>
+      </form>
+    </div>
+  )
+}
+
+export default observer(ItemLinkAutocompleteInput)

packages/web/src/javascripts/Components/LinkedItems/LinkedFileMenuOptions.tsx

@@ -0,0 +1,98 @@
+import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
+import { FilesController } from '@/Controllers/FilesController'
+import { FileItem } from '@standardnotes/snjs'
+import { useState } from 'react'
+import { PopoverFileItemActionType } from '../AttachedFilesPopover/PopoverFileItemAction'
+import Icon from '../Icon/Icon'
+import HorizontalSeparator from '../Shared/HorizontalSeparator'
+import Switch from '../Switch/Switch'
+
+type Props = {
+  file: FileItem
+  closeMenu: () => void
+  handleFileAction: FilesController['handleFileAction']
+  setIsRenamingFile: (set: boolean) => void
+}
+
+const LinkedFileMenuOptions = ({ file, closeMenu, handleFileAction, setIsRenamingFile }: Props) => {
+  const [isFileProtected, setIsFileProtected] = useState(file.protected)
+
+  return (
+    <>
+      <button
+        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        onClick={() => {
+          void handleFileAction({
+            type: PopoverFileItemActionType.PreviewFile,
+            payload: {
+              file,
+              otherFiles: [],
+            },
+          })
+          closeMenu()
+        }}
+      >
+        <Icon type="file" className="mr-2 text-neutral" />
+        Preview file
+      </button>
+      <HorizontalSeparator classes="my-1" />
+      <button
+        className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        onClick={() => {
+          handleFileAction({
+            type: PopoverFileItemActionType.ToggleFileProtection,
+            payload: { file },
+            callback: (isProtected: boolean) => {
+              setIsFileProtected(isProtected)
+            },
+          }).catch(console.error)
+        }}
+      >
+        <span className="flex items-center">
+          <Icon type="password" className="mr-2 text-neutral" />
+          Password protection
+        </span>
+        <Switch className="pointer-events-none px-0" tabIndex={FOCUSABLE_BUT_NOT_TABBABLE} checked={isFileProtected} />
+      </button>
+      <HorizontalSeparator classes="my-1" />
+      <button
+        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        onClick={() => {
+          handleFileAction({
+            type: PopoverFileItemActionType.DownloadFile,
+            payload: { file },
+          }).catch(console.error)
+          closeMenu()
+        }}
+      >
+        <Icon type="download" className="mr-2 text-neutral" />
+        Download
+      </button>
+      <button
+        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        onClick={() => {
+          setIsRenamingFile(true)
+          closeMenu()
+        }}
+      >
+        <Icon type="pencil" className="mr-2 text-neutral" />
+        Rename
+      </button>
+      <button
+        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        onClick={() => {
+          handleFileAction({
+            type: PopoverFileItemActionType.DeleteFile,
+            payload: { file },
+          }).catch(console.error)
+          closeMenu()
+        }}
+      >
+        <Icon type="trash" className="mr-2 text-danger" />
+        <span className="text-danger">Delete permanently</span>
+      </button>
+    </>
+  )
+}
+
+export default LinkedFileMenuOptions

packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx

@@ -0,0 +1,118 @@
+import { LinkableItem, LinkingController } from '@/Controllers/LinkingController'
+import { classNames } from '@/Utils/ConcatenateClassNames'
+import { KeyboardKey } from '@standardnotes/ui-services'
+import { observer } from 'mobx-react-lite'
+import { KeyboardEventHandler, MouseEventHandler, useEffect, useRef, useState } from 'react'
+import Icon from '../Icon/Icon'
+
+type Props = {
+  item: LinkableItem
+  getItemIcon: LinkingController['getLinkedItemIcon']
+  getTitleForLinkedTag: LinkingController['getTitleForLinkedTag']
+  activateItem: (item: LinkableItem) => Promise<void>
+  unlinkItem: (item: LinkableItem) => void
+  focusPreviousItem: () => void
+  focusNextItem: () => void
+  focusedId: string | undefined
+  setFocusedId: (id: string) => void
+}
+
+const LinkedItemBubble = ({
+  item,
+  getItemIcon,
+  getTitleForLinkedTag,
+  activateItem,
+  unlinkItem,
+  focusPreviousItem,
+  focusNextItem,
+  focusedId,
+  setFocusedId,
+}: Props) => {
+  const ref = useRef<HTMLButtonElement>(null)
+
+  const [showUnlinkButton, setShowUnlinkButton] = useState(false)
+  const unlinkButtonRef = useRef<HTMLAnchorElement | null>(null)
+
+  const [wasClicked, setWasClicked] = useState(false)
+
+  const handleFocus = () => {
+    if (focusedId !== item.uuid) {
+      setFocusedId(item.uuid)
+    }
+    setShowUnlinkButton(true)
+  }
+
+  const onBlur = () => {
+    setShowUnlinkButton(false)
+    setWasClicked(false)
+  }
+
+  const onClick: MouseEventHandler = (event) => {
+    if (wasClicked && event.target !== unlinkButtonRef.current) {
+      setWasClicked(false)
+      void activateItem(item)
+    } else {
+      setWasClicked(true)
+    }
+  }
+
+  const onUnlinkClick: MouseEventHandler = (event) => {
+    event.stopPropagation()
+    unlinkItem(item)
+  }
+
+  const onKeyDown: KeyboardEventHandler = (event) => {
+    switch (event.key) {
+      case KeyboardKey.Backspace: {
+        focusPreviousItem()
+        unlinkItem(item)
+        break
+      }
+      case KeyboardKey.Left:
+        focusPreviousItem()
+        break
+      case KeyboardKey.Right:
+        focusNextItem()
+        break
+    }
+  }
+
+  const [icon, iconClassName] = getItemIcon(item)
+  const tagTitle = getTitleForLinkedTag(item)
+
+  useEffect(() => {
+    if (item.uuid === focusedId) {
+      ref.current?.focus()
+    }
+  }, [focusedId, item.uuid])
+
+  return (
+    <button
+      ref={ref}
+      className="flex h-6 cursor-pointer items-center rounded border-0 bg-passive-4-opacity-variant py-2 pl-1 pr-2 text-xs text-text hover:bg-contrast focus:bg-contrast"
+      onFocus={handleFocus}
+      onBlur={onBlur}
+      onClick={onClick}
+      title={tagTitle ? tagTitle.longTitle : item.title}
+      onKeyDown={onKeyDown}
+    >
+      <Icon type={icon} className={classNames('mr-1 flex-shrink-0', iconClassName)} size="small" />
+      <span className="max-w-290px overflow-hidden overflow-ellipsis whitespace-nowrap">
+        {tagTitle && <span className="text-passive-1">{tagTitle.titlePrefix}</span>}
+        {item.title}
+      </span>
+      {showUnlinkButton && (
+        <a
+          ref={unlinkButtonRef}
+          role="button"
+          className="ml-2 -mr-1 flex cursor-pointer border-0 bg-transparent p-0"
+          onClick={onUnlinkClick}
+        >
+          <Icon type="close" className="text-neutral hover:text-info" size="small" />
+        </a>
+      )}
+    </button>
+  )
+}
+
+export default observer(LinkedItemBubble)

packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx

@@ -0,0 +1,87 @@
+import { observer } from 'mobx-react-lite'
+import ItemLinkAutocompleteInput from './ItemLinkAutocompleteInput'
+import { LinkableItem, LinkingController } from '@/Controllers/LinkingController'
+import LinkedItemBubble from './LinkedItemBubble'
+import { useCallback, useState } from 'react'
+import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
+import { ElementIds } from '@/Constants/ElementIDs'
+import { classNames } from '@/Utils/ConcatenateClassNames'
+
+type Props = {
+  linkingController: LinkingController
+}
+
+const LinkedItemBubblesContainer = ({ linkingController }: Props) => {
+  const { toggleAppPane } = useResponsiveAppPane()
+  const {
+    allLinkedItems,
+    notesLinkingToItem,
+    unlinkItemFromSelectedItem: unlinkItem,
+    getTitleForLinkedTag,
+    getLinkedItemIcon: getItemIcon,
+    activateItem,
+  } = linkingController
+
+  const [focusedId, setFocusedId] = useState<string>()
+  const focusableIds = allLinkedItems.map((item) => item.uuid).concat([ElementIds.ItemLinkAutocompleteInput])
+
+  const focusPreviousItem = useCallback(() => {
+    const currentFocusedIndex = focusableIds.findIndex((id) => id === focusedId)
+    const previousIndex = currentFocusedIndex - 1
+
+    if (previousIndex > -1) {
+      setFocusedId(focusableIds[previousIndex])
+    }
+  }, [focusableIds, focusedId])
+
+  const focusNextItem = useCallback(() => {
+    const currentFocusedIndex = focusableIds.findIndex((id) => id === focusedId)
+    const nextIndex = currentFocusedIndex + 1
+
+    if (nextIndex < focusableIds.length) {
+      setFocusedId(focusableIds[nextIndex])
+    }
+  }, [focusableIds, focusedId])
+
+  const activateItemAndTogglePane = useCallback(
+    async (item: LinkableItem) => {
+      const paneId = await activateItem(item)
+      if (paneId) {
+        toggleAppPane(paneId)
+      }
+    },
+    [activateItem, toggleAppPane],
+  )
+
+  return (
+    <div
+      className={classNames(
+        'hidden min-w-80 max-w-full flex-wrap items-center gap-2 bg-transparent md:-mr-2 md:flex',
+        allLinkedItems.length || notesLinkingToItem.length ? 'mt-1' : 'mt-0.5',
+      )}
+    >
+      {allLinkedItems.concat(notesLinkingToItem).map((item) => (
+        <LinkedItemBubble
+          item={item}
+          key={item.uuid}
+          getItemIcon={getItemIcon}
+          getTitleForLinkedTag={getTitleForLinkedTag}
+          activateItem={activateItemAndTogglePane}
+          unlinkItem={unlinkItem}
+          focusPreviousItem={focusPreviousItem}
+          focusNextItem={focusNextItem}
+          focusedId={focusedId}
+          setFocusedId={setFocusedId}
+        />
+      ))}
+      <ItemLinkAutocompleteInput
+        focusedId={focusedId}
+        linkingController={linkingController}
+        focusPreviousItem={focusPreviousItem}
+        setFocusedId={setFocusedId}
+      />
+    </div>
+  )
+}
+
+export default observer(LinkedItemBubblesContainer)

packages/web/src/javascripts/Components/LinkedItems/LinkedItemMeta.tsx

@@ -0,0 +1,46 @@
+import { LinkableItem, LinkingController } from '@/Controllers/LinkingController'
+import { splitQueryInString } from '@/Utils'
+import { classNames } from '@/Utils/ConcatenateClassNames'
+import { observer } from 'mobx-react-lite'
+import Icon from '../Icon/Icon'
+
+const LinkedItemMeta = ({
+  item,
+  getItemIcon,
+  getTitleForLinkedTag,
+  searchQuery,
+}: {
+  item: LinkableItem
+  getItemIcon: LinkingController['getLinkedItemIcon']
+  getTitleForLinkedTag: LinkingController['getTitleForLinkedTag']
+  searchQuery?: string
+}) => {
+  const [icon, className] = getItemIcon(item)
+  const tagTitle = getTitleForLinkedTag(item)
+  const title = item.title ?? ''
+
+  return (
+    <>
+      <Icon type={icon} className={classNames('flex-shrink-0', className)} />
+      <div className="min-w-0 flex-grow break-words text-left text-sm">
+        {tagTitle && <span className="text-passive-1">{tagTitle.titlePrefix}</span>}
+        {searchQuery
+          ? splitQueryInString(title, searchQuery).map((substring, index) => (
+              <span
+                key={index}
+                className={`${
+                  substring.toLowerCase() === searchQuery.toLowerCase()
+                    ? 'whitespace-pre-wrap font-bold'
+                    : 'whitespace-pre-wrap '
+                }`}
+              >
+                {substring}
+              </span>
+            ))
+          : title}
+      </div>
+    </>
+  )
+}
+
+export default observer(LinkedItemMeta)

packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResults.tsx

@@ -0,0 +1,80 @@
+import { LinkableItem, LinkingController } from '@/Controllers/LinkingController'
+import { usePremiumModal } from '@/Hooks/usePremiumModal'
+import { observer } from 'mobx-react-lite'
+import { SNNote } from '@standardnotes/snjs'
+import Icon from '../Icon/Icon'
+import { PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
+import LinkedItemMeta from './LinkedItemMeta'
+
+type Props = {
+  createAndAddNewTag: LinkingController['createAndAddNewTag']
+  getLinkedItemIcon: LinkingController['getLinkedItemIcon']
+  getTitleForLinkedTag: LinkingController['getTitleForLinkedTag']
+  linkItemToSelectedItem: LinkingController['linkItemToSelectedItem']
+  results: LinkableItem[]
+  searchQuery: string
+  shouldShowCreateTag: boolean
+  onClickCallback?: () => void
+  isEntitledToNoteLinking: boolean
+}
+
+const LinkedItemSearchResults = ({
+  createAndAddNewTag,
+  getLinkedItemIcon,
+  getTitleForLinkedTag,
+  linkItemToSelectedItem,
+  results,
+  searchQuery,
+  shouldShowCreateTag,
+  onClickCallback,
+  isEntitledToNoteLinking,
+}: Props) => {
+  const premiumModal = usePremiumModal()
+
+  return (
+    <div className="my-1">
+      {results.map((result) => {
+        const cannotLinkItem = !isEntitledToNoteLinking && result instanceof SNNote
+        return (
+          <button
+            key={result.uuid}
+            className="flex w-full items-center justify-between gap-4 overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground focus:bg-info-backdrop"
+            onClick={() => {
+              if (cannotLinkItem) {
+                premiumModal.activate('Note linking')
+              } else {
+                linkItemToSelectedItem(result)
+                onClickCallback?.()
+              }
+            }}
+          >
+            <LinkedItemMeta
+              item={result}
+              getItemIcon={getLinkedItemIcon}
+              getTitleForLinkedTag={getTitleForLinkedTag}
+              searchQuery={searchQuery}
+            />
+            {cannotLinkItem && <Icon type={PremiumFeatureIconName} className="ml-auto flex-shrink-0 text-info" />}
+          </button>
+        )
+      })}
+      {shouldShowCreateTag && (
+        <button
+          className="group flex w-full items-center gap-2 overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground focus:bg-info-backdrop"
+          onClick={() => {
+            createAndAddNewTag(searchQuery)
+            onClickCallback?.()
+          }}
+        >
+          <span className="flex-shrink-0 align-middle">Create &amp; add tag</span>{' '}
+          <span className="inline-flex min-w-0 items-center gap-1 rounded bg-contrast py-1 pl-1 pr-2 align-middle text-xs text-text group-hover:bg-info group-hover:text-info-contrast">
+            <Icon type="hashtag" className="flex-shrink-0 text-info group-hover:text-info-contrast" size="small" />
+            <span className="min-w-0 overflow-hidden text-ellipsis">{searchQuery}</span>
+          </span>
+        </button>
+      )}
+    </div>
+  )
+}
+
+export default observer(LinkedItemSearchResults)

packages/web/src/javascripts/Components/LinkedItems/LinkedItemsButton.tsx

@@ -0,0 +1,51 @@
+import { FilesController } from '@/Controllers/FilesController'
+import { LinkingController } from '@/Controllers/LinkingController'
+import { observer } from 'mobx-react-lite'
+import { useRef, useCallback } from 'react'
+import Icon from '../Icon/Icon'
+import Popover from '../Popover/Popover'
+import StyledTooltip from '../StyledTooltip/StyledTooltip'
+import LinkedItemsPanel from './LinkedItemsPanel'
+
+type Props = {
+  linkingController: LinkingController
+  onClickPreprocessing?: () => Promise<void>
+  filesController: FilesController
+}
+
+const LinkedItemsButton = ({ linkingController, filesController, onClickPreprocessing }: Props) => {
+  const { isLinkingPanelOpen, setIsLinkingPanelOpen } = linkingController
+  const buttonRef = useRef<HTMLButtonElement>(null)
+
+  const toggleMenu = useCallback(async () => {
+    const willMenuOpen = !isLinkingPanelOpen
+    if (willMenuOpen && onClickPreprocessing) {
+      await onClickPreprocessing()
+    }
+    setIsLinkingPanelOpen(willMenuOpen)
+  }, [isLinkingPanelOpen, onClickPreprocessing, setIsLinkingPanelOpen])
+
+  return (
+    <>
+      <StyledTooltip label="Linked items panel">
+        <button
+          className="bg-text-padding flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border text-neutral hover:bg-contrast focus:bg-contrast"
+          aria-label="Linked items panel"
+          onClick={toggleMenu}
+          ref={buttonRef}
+        >
+          <Icon type="link" />
+        </button>
+      </StyledTooltip>
+      <Popover togglePopover={toggleMenu} anchorElement={buttonRef.current} open={isLinkingPanelOpen} className="pb-2">
+        <LinkedItemsPanel
+          isOpen={isLinkingPanelOpen}
+          linkingController={linkingController}
+          filesController={filesController}
+        />
+      </Popover>
+    </>
+  )
+}
+
+export default observer(LinkedItemsButton)

packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx

@@ -0,0 +1,352 @@
+import { FilesController } from '@/Controllers/FilesController'
+import { LinkableItem, LinkingController } from '@/Controllers/LinkingController'
+import { classNames } from '@/Utils/ConcatenateClassNames'
+import { formatDateForContextMenu } from '@/Utils/DateUtils'
+import { formatSizeToReadableString } from '@standardnotes/filepicker'
+import { FileItem } from '@standardnotes/snjs'
+import { KeyboardKey } from '@standardnotes/ui-services'
+import { observer } from 'mobx-react-lite'
+import { useEffect, useRef, useState } from 'react'
+import { PopoverFileItemActionType } from '../AttachedFilesPopover/PopoverFileItemAction'
+import ClearInputButton from '../ClearInputButton/ClearInputButton'
+import Icon from '../Icon/Icon'
+import DecoratedInput from '../Input/DecoratedInput'
+import MenuItem from '../Menu/MenuItem'
+import { MenuItemType } from '../Menu/MenuItemType'
+import Popover from '../Popover/Popover'
+import HorizontalSeparator from '../Shared/HorizontalSeparator'
+import LinkedFileMenuOptions from './LinkedFileMenuOptions'
+import LinkedItemMeta from './LinkedItemMeta'
+import LinkedItemSearchResults from './LinkedItemSearchResults'
+
+const LinkedItemsSectionItem = ({
+  activateItem,
+  getItemIcon,
+  getTitleForLinkedTag,
+  item,
+  searchQuery,
+  unlinkItem,
+  handleFileAction,
+}: {
+  activateItem: LinkingController['activateItem']
+  getItemIcon: LinkingController['getLinkedItemIcon']
+  getTitleForLinkedTag: LinkingController['getTitleForLinkedTag']
+  item: LinkableItem
+  searchQuery?: string
+  unlinkItem: LinkingController['unlinkItemFromSelectedItem']
+  handleFileAction: FilesController['handleFileAction']
+}) => {
+  const menuButtonRef = useRef<HTMLButtonElement>(null)
+
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const toggleMenu = () => setIsMenuOpen((open) => !open)
+
+  const [isRenamingFile, setIsRenamingFile] = useState(false)
+
+  const [icon, className] = getItemIcon(item)
+  const title = item.title ?? ''
+
+  const renameFile = async (name: string) => {
+    if (!(item instanceof FileItem)) {
+      return
+    }
+    await handleFileAction({
+      type: PopoverFileItemActionType.RenameFile,
+      payload: {
+        file: item,
+        name: name,
+      },
+    })
+    setIsRenamingFile(false)
+  }
+
+  return (
+    <div className="relative flex items-center justify-between">
+      {isRenamingFile && item instanceof FileItem ? (
+        <div className="flex flex-grow items-center gap-4 py-2 pl-3 pr-12">
+          <Icon type={icon} className={classNames('flex-shrink-0', className)} />
+          <input
+            className="min-w-0 flex-grow text-sm"
+            defaultValue={title}
+            onKeyDown={(event) => {
+              if (event.key === KeyboardKey.Escape) {
+                setIsRenamingFile(false)
+              } else if (event.key === KeyboardKey.Enter) {
+                const newTitle = event.currentTarget.value
+                void renameFile(newTitle)
+              }
+            }}
+            ref={(node) => {
+              if (node) {
+                node.focus()
+              }
+            }}
+          />
+        </div>
+      ) : (
+        <button
+          className="flex flex-grow items-center justify-between gap-4 py-2 pl-3 pr-12 text-sm hover:bg-info-backdrop focus:bg-info-backdrop"
+          onClick={() => activateItem(item)}
+          onContextMenu={(event) => {
+            event.preventDefault()
+            toggleMenu()
+          }}
+        >
+          <LinkedItemMeta
+            item={item}
+            getItemIcon={getItemIcon}
+            getTitleForLinkedTag={getTitleForLinkedTag}
+            searchQuery={searchQuery}
+          />
+        </button>
+      )}
+      <button
+        className="absolute right-3 top-1/2 h-7 w-7 -translate-y-1/2 cursor-pointer rounded-full border-0 bg-transparent p-1 hover:bg-contrast"
+        onClick={toggleMenu}
+        ref={menuButtonRef}
+      >
+        <Icon type="more" className="text-neutral" />
+      </button>
+      <Popover
+        open={isMenuOpen}
+        togglePopover={toggleMenu}
+        anchorElement={menuButtonRef.current}
+        side="bottom"
+        align="center"
+        className="py-2"
+      >
+        <MenuItem
+          type={MenuItemType.IconButton}
+          onClick={() => {
+            unlinkItem(item)
+            toggleMenu()
+          }}
+        >
+          <Icon type="link-off" className="mr-2 text-danger" />
+          Unlink
+        </MenuItem>
+        {item instanceof FileItem && (
+          <LinkedFileMenuOptions
+            file={item}
+            closeMenu={toggleMenu}
+            handleFileAction={handleFileAction}
+            setIsRenamingFile={setIsRenamingFile}
+          />
+        )}
+        <HorizontalSeparator classes="my-2" />
+        <div className="mt-1 px-3 py-1 text-xs font-medium text-neutral">
+          <div className="mb-1">
+            <span className="font-semibold">Created at:</span> {formatDateForContextMenu(item.created_at)}
+          </div>
+          <div className="mb-1">
+            <span className="font-semibold">Modified at:</span> {formatDateForContextMenu(item.userModifiedDate)}
+          </div>
+          <div className="mb-1">
+            <span className="font-semibold">ID:</span> {item.uuid}
+          </div>
+          {item instanceof FileItem && (
+            <div>
+              <span className="font-semibold">Size:</span> {formatSizeToReadableString(item.decryptedSize)}
+            </div>
+          )}
+        </div>
+      </Popover>
+    </div>
+  )
+}
+
+const LinkedItemsPanel = ({
+  linkingController,
+  filesController,
+  isOpen,
+}: {
+  linkingController: LinkingController
+  filesController: FilesController
+  isOpen: boolean
+}) => {
+  const {
+    tags,
+    files,
+    notesLinkedToItem,
+    notesLinkingToItem,
+    allLinkedItems,
+    getTitleForLinkedTag,
+    getLinkedItemIcon,
+    getSearchResults,
+    linkItemToSelectedItem,
+    unlinkItemFromSelectedItem,
+    activateItem,
+    createAndAddNewTag,
+    isEntitledToNoteLinking,
+  } = linkingController
+
+  const searchInputRef = useRef<HTMLInputElement | null>(null)
+  const [searchQuery, setSearchQuery] = useState('')
+  const isSearching = !!searchQuery.length
+  const { linkedResults, unlinkedResults, shouldShowCreateTag } = getSearchResults(searchQuery)
+
+  useEffect(() => {
+    if (isOpen && searchInputRef.current) {
+      searchInputRef.current.focus()
+    }
+  }, [isOpen])
+
+  return (
+    <div>
+      <form
+        className={classNames(
+          'sticky top-0 z-10 bg-default px-2.5 pt-2.5',
+          allLinkedItems.length || linkedResults.length || unlinkedResults.length || notesLinkingToItem.length
+            ? 'border-b border-border pb-2.5'
+            : 'pb-1',
+        )}
+      >
+        <DecoratedInput
+          type="text"
+          className={{ container: !isSearching ? 'py-1.5 px-0.5' : 'py-0', input: 'placeholder:text-passive-0' }}
+          placeholder="Search items to link..."
+          value={searchQuery}
+          onChange={setSearchQuery}
+          ref={searchInputRef}
+          right={[
+            isSearching && (
+              <ClearInputButton
+                onClick={() => {
+                  setSearchQuery('')
+                  searchInputRef.current?.focus()
+                }}
+              />
+            ),
+          ]}
+        />
+      </form>
+      <div className="divide-y divide-border">
+        {isSearching ? (
+          <>
+            {(!!unlinkedResults.length || shouldShowCreateTag) && (
+              <div>
+                <div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Unlinked</div>
+                <LinkedItemSearchResults
+                  createAndAddNewTag={createAndAddNewTag}
+                  getLinkedItemIcon={getLinkedItemIcon}
+                  getTitleForLinkedTag={getTitleForLinkedTag}
+                  linkItemToSelectedItem={linkItemToSelectedItem}
+                  results={unlinkedResults}
+                  searchQuery={searchQuery}
+                  shouldShowCreateTag={shouldShowCreateTag}
+                  isEntitledToNoteLinking={isEntitledToNoteLinking}
+                  onClickCallback={() => {
+                    setSearchQuery('')
+                    searchInputRef.current?.focus()
+                  }}
+                />
+              </div>
+            )}
+            {!!linkedResults.length && (
+              <div>
+                <div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked</div>
+                <div className="my-1">
+                  {linkedResults.map((item) => (
+                    <LinkedItemsSectionItem
+                      key={item.uuid}
+                      item={item}
+                      getItemIcon={getLinkedItemIcon}
+                      getTitleForLinkedTag={getTitleForLinkedTag}
+                      searchQuery={searchQuery}
+                      unlinkItem={unlinkItemFromSelectedItem}
+                      activateItem={activateItem}
+                      handleFileAction={filesController.handleFileAction}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+          </>
+        ) : (
+          <>
+            {!!tags.length && (
+              <div>
+                <div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked Tags</div>
+                <div className="my-1">
+                  {tags.map((item) => (
+                    <LinkedItemsSectionItem
+                      key={item.uuid}
+                      item={item}
+                      getItemIcon={getLinkedItemIcon}
+                      getTitleForLinkedTag={getTitleForLinkedTag}
+                      searchQuery={searchQuery}
+                      unlinkItem={unlinkItemFromSelectedItem}
+                      activateItem={activateItem}
+                      handleFileAction={filesController.handleFileAction}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+            {!!files.length && (
+              <div>
+                <div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked Files</div>
+                <div className="my-1">
+                  {files.map((item) => (
+                    <LinkedItemsSectionItem
+                      key={item.uuid}
+                      item={item}
+                      getItemIcon={getLinkedItemIcon}
+                      getTitleForLinkedTag={getTitleForLinkedTag}
+                      searchQuery={searchQuery}
+                      unlinkItem={unlinkItemFromSelectedItem}
+                      activateItem={activateItem}
+                      handleFileAction={filesController.handleFileAction}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+            {!!notesLinkedToItem.length && (
+              <div>
+                <div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked Notes</div>
+                <div className="my-1">
+                  {notesLinkedToItem.map((item) => (
+                    <LinkedItemsSectionItem
+                      key={item.uuid}
+                      item={item}
+                      getItemIcon={getLinkedItemIcon}
+                      getTitleForLinkedTag={getTitleForLinkedTag}
+                      searchQuery={searchQuery}
+                      unlinkItem={unlinkItemFromSelectedItem}
+                      activateItem={activateItem}
+                      handleFileAction={filesController.handleFileAction}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+            {!!notesLinkingToItem.length && (
+              <div>
+                <div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">
+                  Notes Linking To This Note
+                </div>
+                <div className="my-1">
+                  {notesLinkingToItem.map((item) => (
+                    <LinkedItemsSectionItem
+                      key={item.uuid}
+                      item={item}
+                      getItemIcon={getLinkedItemIcon}
+                      getTitleForLinkedTag={getTitleForLinkedTag}
+                      searchQuery={searchQuery}
+                      unlinkItem={unlinkItemFromSelectedItem}
+                      activateItem={activateItem}
+                      handleFileAction={filesController.handleFileAction}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default observer(LinkedItemsPanel)

packages/web/src/javascripts/Components/Menu/Menu.tsx

@@ -1,14 +1,7 @@
-import {
-  CSSProperties,
-  FunctionComponent,
-  KeyboardEventHandler,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useRef,
-} from 'react'
+import { CSSProperties, forwardRef, KeyboardEventHandler, ReactNode, Ref, useCallback, useEffect, useRef } from 'react'
 import { KeyboardKey } from '@standardnotes/ui-services'
 import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
+import { mergeRefs } from '@/Hooks/mergeRefs'
 
 type MenuProps = {
   className?: string
@@ -18,50 +11,61 @@ type MenuProps = {
   closeMenu?: () => void
   isOpen: boolean
   initialFocus?: number
+  onKeyDown?: KeyboardEventHandler<HTMLMenuElement>
+  shouldAutoFocus?: boolean
 }
 
-const Menu: FunctionComponent<MenuProps> = ({
-  children,
-  className = '',
-  style,
-  a11yLabel,
-  closeMenu,
-  isOpen,
-  initialFocus,
-}: MenuProps) => {
-  const menuElementRef = useRef<HTMLMenuElement>(null)
+const Menu = forwardRef(
+  (
+    {
+      children,
+      className = '',
+      style,
+      a11yLabel,
+      closeMenu,
+      isOpen,
+      initialFocus,
+      onKeyDown,
+      shouldAutoFocus = true,
+    }: MenuProps,
+    forwardedRef: Ref<HTMLMenuElement>,
+  ) => {
+    const menuElementRef = useRef<HTMLMenuElement>(null)
 
-  const handleKeyDown: KeyboardEventHandler<HTMLMenuElement> = useCallback(
-    (event) => {
-      if (event.key === KeyboardKey.Escape) {
-        closeMenu?.()
-        return
+    const handleKeyDown: KeyboardEventHandler<HTMLMenuElement> = useCallback(
+      (event) => {
+        onKeyDown?.(event)
+
+        if (event.key === KeyboardKey.Escape) {
+          closeMenu?.()
+          return
+        }
+      },
+      [closeMenu, onKeyDown],
+    )
+
+    useListKeyboardNavigation(menuElementRef, initialFocus)
+
+    useEffect(() => {
+      if (isOpen && shouldAutoFocus) {
+        setTimeout(() => {
+          menuElementRef.current?.focus()
+        })
       }
-    },
-    [closeMenu],
-  )
+    }, [isOpen, shouldAutoFocus])
 
-  useListKeyboardNavigation(menuElementRef, initialFocus)
-
-  useEffect(() => {
-    if (isOpen) {
-      setTimeout(() => {
-        menuElementRef.current?.focus()
-      })
-    }
-  }, [isOpen])
-
-  return (
-    <menu
-      className={`m-0 list-none pl-0 focus:shadow-none ${className}`}
-      onKeyDown={handleKeyDown}
-      ref={menuElementRef}
-      style={style}
-      aria-label={a11yLabel}
-    >
-      {children}
-    </menu>
-  )
-}
+    return (
+      <menu
+        className={`m-0 list-none pl-0 focus:shadow-none ${className}`}
+        onKeyDown={handleKeyDown}
+        ref={mergeRefs([menuElementRef, forwardedRef])}
+        style={style}
+        aria-label={a11yLabel}
+      >
+        {children}
+      </menu>
+    )
+  },
+)
 
 export default Menu

packages/web/src/javascripts/Components/MultipleSelectedNotes/MultipleSelectedNotes.tsx

@@ -12,8 +12,8 @@ import { FilesController } from '@/Controllers/FilesController'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import { NotesController } from '@/Controllers/NotesController'
 import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
-import { NoteTagsController } from '@/Controllers/NoteTagsController'
 import { HistoryModalController } from '@/Controllers/NoteHistory/HistoryModalController'
+import { LinkingController } from '@/Controllers/LinkingController'
 
 type Props = {
   application: WebApplication
@@ -22,9 +22,9 @@ type Props = {
   filesController: FilesController
   navigationController: NavigationController
   notesController: NotesController
-  noteTagsController: NoteTagsController
   selectionController: SelectedItemsController
   historyModalController: HistoryModalController
+  linkingController: LinkingController
 }
 
 const MultipleSelectedNotes = ({
@@ -34,7 +34,7 @@ const MultipleSelectedNotes = ({
   filesController,
   navigationController,
   notesController,
-  noteTagsController,
+  linkingController,
   selectionController,
   historyModalController,
 }: Props) => {
@@ -67,7 +67,7 @@ const MultipleSelectedNotes = ({
             application={application}
             navigationController={navigationController}
             notesController={notesController}
-            noteTagsController={noteTagsController}
+            linkingController={linkingController}
             historyModalController={historyModalController}
           />
         </div>

packages/web/src/javascripts/Components/Navigation/Navigation.tsx

@@ -49,16 +49,11 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
   const panelResizeFinishCallback: ResizeFinishCallback = useCallback(
     (width, _lastLeft, _isMaxWidth, isCollapsed) => {
       application.setPreference(PrefKey.TagsPanelWidth, width).catch(console.error)
-      viewControllerManager.noteTagsController.reloadTagsContainerMaxWidth()
       application.publishPanelDidResizeEvent(PANEL_NAME_NAVIGATION, isCollapsed)
     },
-    [application, viewControllerManager],
+    [application],
   )
 
-  const panelWidthEventCallback = useCallback(() => {
-    viewControllerManager.noteTagsController.reloadTagsContainerMaxWidth()
-  }, [viewControllerManager])
-
   return (
     <div
       id="navigation"
@@ -157,7 +152,6 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
           side={PanelSide.Right}
           type={PanelResizeType.WidthOnly}
           resizeFinishCallback={panelResizeFinishCallback}
-          widthEventCallback={panelWidthEventCallback}
           width={panelWidth}
           left={0}
         />

packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx

@@ -103,7 +103,7 @@ class NoteGroupView extends PureComponent<Props, State> {
               filePreviewModalController={this.viewControllerManager.filePreviewModalController}
               navigationController={this.viewControllerManager.navigationController}
               notesController={this.viewControllerManager.notesController}
-              noteTagsController={this.viewControllerManager.noteTagsController}
+              linkingController={this.viewControllerManager.linkingController}
               historyModalController={this.viewControllerManager.historyModalController}
             />
           )}

packages/web/src/javascripts/Components/NoteTags/NoteTag.tsx

@@ -1,156 +0,0 @@
-import Icon from '@/Components/Icon/Icon'
-import {
-  FocusEventHandler,
-  KeyboardEventHandler,
-  MouseEventHandler,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
-import { SNTag } from '@standardnotes/snjs'
-import { observer } from 'mobx-react-lite'
-import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
-import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
-import { NoteTagsController } from '@/Controllers/NoteTagsController'
-import { NavigationController } from '@/Controllers/Navigation/NavigationController'
-
-type Props = {
-  noteTagsController: NoteTagsController
-  navigationController: NavigationController
-  tag: SNTag
-}
-
-const NoteTag = ({ noteTagsController, navigationController, tag }: Props) => {
-  const { toggleAppPane } = useResponsiveAppPane()
-
-  const noteTags = noteTagsController
-
-  const { autocompleteInputFocused, focusedTagUuid, tags } = noteTags
-
-  const [showDeleteButton, setShowDeleteButton] = useState(false)
-  const [tagClicked, setTagClicked] = useState(false)
-  const deleteTagRef = useRef<HTMLAnchorElement>(null)
-
-  const tagRef = useRef<HTMLButtonElement>(null)
-
-  const title = tag.title
-  const prefixTitle = noteTags.getPrefixTitle(tag)
-  const longTitle = noteTags.getLongTitle(tag)
-
-  const deleteTag = useCallback(() => {
-    noteTagsController.focusPreviousTag(tag)
-    noteTagsController.removeTagFromActiveNote(tag).catch(console.error)
-  }, [noteTagsController, tag])
-
-  const onDeleteTagClick: MouseEventHandler = useCallback(
-    (event) => {
-      event.stopPropagation()
-      deleteTag()
-    },
-    [deleteTag],
-  )
-
-  const onTagClick: MouseEventHandler = useCallback(
-    async (event) => {
-      if (tagClicked && event.target !== deleteTagRef.current) {
-        setTagClicked(false)
-        await navigationController.setSelectedTag(tag)
-        toggleAppPane(AppPaneId.Items)
-      } else {
-        setTagClicked(true)
-        tagRef.current?.focus()
-      }
-    },
-    [tagClicked, navigationController, tag, toggleAppPane],
-  )
-
-  const onFocus = useCallback(() => {
-    noteTagsController.setFocusedTagUuid(tag.uuid)
-    setShowDeleteButton(true)
-  }, [noteTagsController, tag])
-
-  const onBlur: FocusEventHandler = useCallback(
-    (event) => {
-      const relatedTarget = event.relatedTarget as Node
-      if (relatedTarget !== deleteTagRef.current) {
-        noteTagsController.setFocusedTagUuid(undefined)
-        setShowDeleteButton(false)
-      }
-    },
-    [noteTagsController],
-  )
-
-  const getTabIndex = useCallback(() => {
-    if (focusedTagUuid) {
-      return focusedTagUuid === tag.uuid ? 0 : -1
-    }
-    if (autocompleteInputFocused) {
-      return -1
-    }
-    return tags[0]?.uuid === tag.uuid ? 0 : -1
-  }, [autocompleteInputFocused, tags, tag, focusedTagUuid])
-
-  const onKeyDown: KeyboardEventHandler = useCallback(
-    (event) => {
-      const tagIndex = noteTagsController.getTagIndex(tag, tags)
-      switch (event.key) {
-        case 'Backspace':
-          deleteTag()
-          break
-        case 'ArrowLeft':
-          noteTagsController.focusPreviousTag(tag)
-          break
-        case 'ArrowRight':
-          if (tagIndex === tags.length - 1) {
-            noteTagsController.setAutocompleteInputFocused(true)
-          } else {
-            noteTagsController.focusNextTag(tag)
-          }
-          break
-        default:
-          return
-      }
-    },
-    [noteTagsController, deleteTag, tag, tags],
-  )
-
-  useEffect(() => {
-    if (focusedTagUuid === tag.uuid) {
-      tagRef.current?.focus()
-    }
-  }, [noteTagsController, focusedTagUuid, tag])
-
-  return (
-    <button
-      ref={tagRef}
-      className="mt-2 mr-2 flex h-6 cursor-pointer items-center rounded border-0 bg-passive-4-opacity-variant py-2 pl-1 pr-2 text-xs text-text hover:bg-contrast focus:bg-contrast"
-      onClick={onTagClick}
-      onKeyDown={onKeyDown}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      tabIndex={getTabIndex()}
-      title={longTitle}
-    >
-      <Icon type="hashtag" className="mr-1 text-info" size="small" />
-      <span className="max-w-290px overflow-hidden overflow-ellipsis whitespace-nowrap">
-        {prefixTitle && <span className="text-passive-1">{prefixTitle}</span>}
-        {title}
-      </span>
-      {showDeleteButton && (
-        <a
-          ref={deleteTagRef}
-          role="button"
-          className="ml-2 -mr-1 flex cursor-pointer border-0 bg-transparent p-0"
-          onBlur={onBlur}
-          onClick={onDeleteTagClick}
-          tabIndex={-1}
-        >
-          <Icon type="close" className="text-neutral hover:text-info" size="small" />
-        </a>
-      )}
-    </button>
-  )
-}
-
-export default observer(NoteTag)

packages/web/src/javascripts/Components/NoteTags/NoteTagsContainer.tsx

@@ -1,35 +0,0 @@
-import { observer } from 'mobx-react-lite'
-import AutocompleteTagInput from '@/Components/TagAutocomplete/AutocompleteTagInput'
-import NoteTag from './NoteTag'
-import { useEffect } from 'react'
-import { NoteTagsController } from '@/Controllers/NoteTagsController'
-import { NavigationController } from '@/Controllers/Navigation/NavigationController'
-
-type Props = {
-  noteTagsController: NoteTagsController
-  navigationController: NavigationController
-}
-
-const NoteTagsContainer = ({ noteTagsController, navigationController }: Props) => {
-  const { tags } = noteTagsController
-
-  useEffect(() => {
-    noteTagsController.reloadTagsContainerMaxWidth()
-  }, [noteTagsController])
-
-  return (
-    <div className="hidden min-w-80 max-w-full flex-wrap bg-transparent md:-mr-2 md:flex">
-      {tags.map((tag) => (
-        <NoteTag
-          key={tag.uuid}
-          noteTagsController={noteTagsController}
-          navigationController={navigationController}
-          tag={tag}
-        />
-      ))}
-      <AutocompleteTagInput noteTagsController={noteTagsController} />
-    </div>
-  )
-}
-
-export default observer(NoteTagsContainer)

packages/web/src/javascripts/Components/NoteTags/NoteTagsPanel.tsx

@@ -1,170 +0,0 @@
-import { NoteTagsController } from '@/Controllers/NoteTagsController'
-import { MediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
-import { splitQueryInString } from '@/Utils'
-import { SNTag } from '@standardnotes/snjs'
-import { observer } from 'mobx-react-lite'
-import { ChangeEventHandler, FormEventHandler, useCallback, useEffect, useRef, useState } from 'react'
-import Icon from '../Icon/Icon'
-import Popover from '../Popover/Popover'
-
-const ListItem = ({
-  tag,
-  isSearching,
-  noteTagsController,
-  autocompleteSearchQuery,
-}: {
-  tag: SNTag
-  isSearching: boolean
-  noteTagsController: NoteTagsController
-  autocompleteSearchQuery: string
-}) => {
-  const handleSearchResultClick = useCallback(async () => {
-    await noteTagsController.addTagToActiveNote(tag)
-    noteTagsController.clearAutocompleteSearch()
-    noteTagsController.setAutocompleteInputFocused(true)
-  }, [noteTagsController, tag])
-
-  const handleNoteTagRemove = useCallback(() => {
-    noteTagsController.removeTagFromActiveNote(tag).catch(console.error)
-  }, [noteTagsController, tag])
-
-  const longTitle = noteTagsController.getLongTitle(tag)
-
-  return isSearching ? (
-    <button
-      onClick={handleSearchResultClick}
-      className="max-w-80 flex w-full items-center border-0 bg-transparent px-3 py-2 text-left text-mobile-menu-item text-text hover:bg-info-backdrop focus:bg-info-backdrop md:text-menu-item"
-    >
-      {splitQueryInString(longTitle, autocompleteSearchQuery).map((substring, index) => (
-        <span
-          key={index}
-          className={
-            substring.toLowerCase() === autocompleteSearchQuery.toLowerCase()
-              ? 'whitespace-pre-wrap font-bold'
-              : 'whitespace-pre-wrap'
-          }
-        >
-          {substring}
-        </span>
-      ))}
-    </button>
-  ) : (
-    <div className="max-w-80 flex w-full items-center justify-between border-0 bg-transparent px-3 py-2 text-left text-mobile-menu-item text-text md:text-menu-item">
-      <span className="overflow-hidden overflow-ellipsis whitespace-nowrap">{longTitle}</span>
-      <button
-        onClick={handleNoteTagRemove}
-        className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-danger hover:bg-info-backdrop focus:bg-info-backdrop"
-      >
-        <Icon type="trash" size="small" />
-      </button>
-    </div>
-  )
-}
-
-const NoteTagsPanel = ({
-  noteTagsController,
-  onClickPreprocessing,
-}: {
-  noteTagsController: NoteTagsController
-  onClickPreprocessing?: () => Promise<void>
-}) => {
-  const isDesktopScreen = useMediaQuery(MediaQueryBreakpoints.md)
-
-  const [isOpen, setIsOpen] = useState(false)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-
-  const { tags, autocompleteTagResults, autocompleteSearchQuery, autocompleteTagHintVisible } = noteTagsController
-  const isSearching = autocompleteSearchQuery.length > 0
-  const visibleTagsList = isSearching ? autocompleteTagResults : tags
-
-  const toggleMenu = useCallback(async () => {
-    const willMenuOpen = !isOpen
-    if (willMenuOpen && onClickPreprocessing) {
-      await onClickPreprocessing()
-    }
-    setIsOpen(willMenuOpen)
-  }, [onClickPreprocessing, isOpen])
-
-  const onSearchQueryChange: ChangeEventHandler<HTMLInputElement> = (event) => {
-    const query = event.target.value
-
-    if (query === '') {
-      noteTagsController.clearAutocompleteSearch()
-    } else {
-      noteTagsController.setAutocompleteSearchQuery(query)
-      noteTagsController.searchActiveNoteAutocompleteTags()
-    }
-  }
-
-  const onFormSubmit: FormEventHandler = async (event) => {
-    event.preventDefault()
-    if (autocompleteSearchQuery !== '') {
-      await noteTagsController.createAndAddNewTag()
-    }
-  }
-
-  useEffect(() => {
-    if (isDesktopScreen) {
-      setIsOpen(false)
-    }
-  }, [isDesktopScreen])
-
-  return (
-    <>
-      <button
-        className="bg-text-padding flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border text-neutral hover:bg-contrast focus:bg-contrast md:hidden"
-        title="Note options menu"
-        aria-label="Note options menu"
-        onClick={toggleMenu}
-        ref={buttonRef}
-      >
-        <Icon type="hashtag" />
-      </button>
-      <Popover togglePopover={toggleMenu} anchorElement={buttonRef.current} open={isOpen} className="pb-2">
-        <form onSubmit={onFormSubmit} className="sticky top-0 border-b border-border bg-default px-2.5 py-2.5">
-          <input
-            type="text"
-            className="w-full rounded border border-solid border-border bg-default py-1.5 px-3 text-sm text-text"
-            placeholder="Create or search tag..."
-            value={autocompleteSearchQuery}
-            onChange={onSearchQueryChange}
-            ref={(node) => {
-              if (isOpen && node) {
-                node.focus()
-              }
-            }}
-          />
-        </form>
-        <div className="pt-2.5">
-          {visibleTagsList.map((tag) => (
-            <ListItem
-              key={tag.uuid}
-              tag={tag}
-              isSearching={isSearching}
-              noteTagsController={noteTagsController}
-              autocompleteSearchQuery={autocompleteSearchQuery}
-            />
-          ))}
-          {autocompleteTagHintVisible && (
-            <button
-              onClick={async () => {
-                await noteTagsController.createAndAddNewTag()
-              }}
-              className="max-w-80 flex w-full items-center border-0 bg-transparent px-3 py-2 text-left text-mobile-menu-item text-text hover:bg-info-backdrop focus:bg-info-backdrop md:text-menu-item"
-            >
-              <span>Create new tag:</span>
-              <span className="ml-2 flex items-center rounded bg-contrast py-1 pl-1 pr-2 text-xs text-text">
-                <Icon type="hashtag" className="mr-1 text-neutral" size="small" />
-                <span className="max-w-40 overflow-hidden overflow-ellipsis whitespace-nowrap">
-                  {autocompleteSearchQuery}
-                </span>
-              </span>
-            </button>
-          )}
-        </div>
-      </Popover>
-    </>
-  )
-}
-
-export default observer(NoteTagsPanel)

packages/web/src/javascripts/Components/NoteView/NoteView.tsx

@@ -41,10 +41,10 @@ import IndicatorCircle from '../IndicatorCircle/IndicatorCircle'
 import { classNames } from '@/Utils/ConcatenateClassNames'
 import AutoresizingNoteViewTextarea from './AutoresizingTextarea'
 import MobileItemsListButton from '../NoteGroupView/MobileItemsListButton'
-import NoteTagsPanel from '../NoteTags/NoteTagsPanel'
-import NoteTagsContainer from '../NoteTags/NoteTagsContainer'
+import LinkedItemBubblesContainer from '../LinkedItems/LinkedItemBubblesContainer'
 import NoteStatusIndicator, { NoteStatus } from './NoteStatusIndicator'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
+import LinkedItemsButton from '../LinkedItems/LinkedItemsButton'
 
 const MinimumStatusDuration = 400
 const TextareaDebounce = 100
@@ -999,9 +999,10 @@ class NoteView extends PureComponent<NoteViewProps, State> {
               </div>
               {!this.state.shouldStickyHeader && (
                 <div className="flex items-center gap-3">
-                  <NoteTagsPanel
+                  <LinkedItemsButton
+                    filesController={this.viewControllerManager.filesController}
+                    linkingController={this.viewControllerManager.linkingController}
                     onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
-                    noteTagsController={this.viewControllerManager.noteTagsController}
                   />
                   <AttachedFilesButton
                     application={this.application}
@@ -1026,7 +1027,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
                     application={this.application}
                     navigationController={this.viewControllerManager.navigationController}
                     notesController={this.viewControllerManager.notesController}
-                    noteTagsController={this.viewControllerManager.noteTagsController}
+                    linkingController={this.viewControllerManager.linkingController}
                     historyModalController={this.viewControllerManager.historyModalController}
                     onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
                   />
@@ -1034,10 +1035,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
               )}
             </div>
             {!this.state.shouldStickyHeader && (
-              <NoteTagsContainer
-                noteTagsController={this.viewControllerManager.noteTagsController}
-                navigationController={this.viewControllerManager.navigationController}
-              />
+              <LinkedItemBubblesContainer linkingController={this.viewControllerManager.linkingController} />
             )}
           </div>
         )}