chore(release): publish

- @standardnotes/[email protected].1
 - @standardnotes/[email protected]
 - @standardnotes/[email protected].0
 - @standardnotes/[email protected].2
 - @standardnotes/[email protected].2
 - @standardnotes/[email protected].5
 - @standardnotes/[email protected]
 - @standardnotes/[email protected].2
 - @standardnotes/[email protected].0
 - @standardnotes/[email protected]
 - @standardnotes/[email protected].0

packages/api/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.16.1](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+**Note:** Version bump only for package @standardnotes/api
+
+# [1.16.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+### Features
+
+* **api:** add keyshare initiation for workspaces ([fabce1f](https://github.com/standardnotes/app/commit/fabce1f7aca5c9caaa5bb3908b2dc68063c690d0))
+
+## [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

packages/api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/api",
-  "version": "1.15.0",
+  "version": "1.16.1",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

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

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

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

@@ -1,4 +1,5 @@
 import { WorkspaceAccessLevel, WorkspaceType } from '@standardnotes/common'
+
 import { HttpStatusCode } from '../../Http'
 import { WorkspaceCreationResponse } from '../../Response/Workspace/WorkspaceCreationResponse'
 import { WorkspaceInvitationAcceptingResponse } from '../../Response/Workspace/WorkspaceInvitationAcceptingResponse'
@@ -6,6 +7,7 @@ import { WorkspaceInvitationResponse } from '../../Response/Workspace/WorkspaceI
 import { WorkspaceListResponse } from '../../Response/Workspace/WorkspaceListResponse'
 import { WorkspaceUserListResponse } from '../../Response/Workspace/WorkspaceUserListResponse'
 import { WorkspaceServerInterface } from '../../Server/Workspace/WorkspaceServerInterface'
+import { WorkspaceKeyshareInitiatingResponse } from '../../Response/Workspace/WorkspaceKeyshareInitiatingResponse'
 
 import { WorkspaceApiOperations } from './WorkspaceApiOperations'
 import { WorkspaceApiService } from './WorkspaceApiService'
@@ -34,6 +36,10 @@ describe('WorkspaceApiService', () => {
       status: HttpStatusCode.Success,
       data: { users: [] },
     } as jest.Mocked<WorkspaceUserListResponse>)
+    workspaceServer.initiateKeyshare = jest.fn().mockReturnValue({
+      status: HttpStatusCode.Success,
+      data: { success: true },
+    } as jest.Mocked<WorkspaceKeyshareInitiatingResponse>)
   })
 
   it('should create a workspace', async () => {
@@ -304,4 +310,59 @@ describe('WorkspaceApiService', () => {
 
     expect(error).not.toBeNull()
   })
+
+  it('should initiate keyshare in workspace for user', async () => {
+    const response = await createService().initiateKeyshare({
+      workspaceUuid: 'w-1-2-3',
+      userUuid: 'u-1-2-3',
+      encryptedWorkspaceKey: 'foobar',
+    })
+
+    expect(response).toEqual({
+      status: 200,
+      data: {
+        success: true,
+      },
+    })
+    expect(workspaceServer.initiateKeyshare).toHaveBeenCalledWith({
+      workspaceUuid: 'w-1-2-3',
+      userUuid: 'u-1-2-3',
+      encryptedWorkspaceKey: 'foobar',
+    })
+  })
+
+  it('should not initiate keyshare in workspace if it is already initiating', async () => {
+    const service = createService()
+    Object.defineProperty(service, 'operationsInProgress', {
+      get: () => new Map([[WorkspaceApiOperations.InitiatingKeyshare, true]]),
+    })
+
+    let error = null
+    try {
+      await service.initiateKeyshare({ workspaceUuid: 'w-1-2-3', userUuid: 'u-1-2-3', encryptedWorkspaceKey: 'foobar' })
+    } catch (caughtError) {
+      error = caughtError
+    }
+
+    expect(error).not.toBeNull()
+  })
+
+  it('should not initiate keyshare in workspace if the server fails', async () => {
+    workspaceServer.initiateKeyshare = jest.fn().mockImplementation(() => {
+      throw new Error('Oops')
+    })
+
+    let error = null
+    try {
+      await createService().initiateKeyshare({
+        workspaceUuid: 'w-1-2-3',
+        userUuid: 'u-1-2-3',
+        encryptedWorkspaceKey: 'foobar',
+      })
+    } catch (caughtError) {
+      error = caughtError
+    }
+
+    expect(error).not.toBeNull()
+  })
 })

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

@@ -8,6 +8,7 @@ import { WorkspaceInvitationResponse } from '../../Response/Workspace/WorkspaceI
 import { WorkspaceServerInterface } from '../../Server/Workspace/WorkspaceServerInterface'
 import { WorkspaceListResponse } from '../../Response/Workspace/WorkspaceListResponse'
 import { WorkspaceUserListResponse } from '../../Response/Workspace/WorkspaceUserListResponse'
+import { WorkspaceKeyshareInitiatingResponse } from '../../Response/Workspace/WorkspaceKeyshareInitiatingResponse'
 
 import { WorkspaceApiServiceInterface } from './WorkspaceApiServiceInterface'
 import { WorkspaceApiOperations } from './WorkspaceApiOperations'
@@ -19,6 +20,28 @@ export class WorkspaceApiService implements WorkspaceApiServiceInterface {
     this.operationsInProgress = new Map()
   }
 
+  async initiateKeyshare(dto: {
+    workspaceUuid: string
+    userUuid: string
+    encryptedWorkspaceKey: string
+  }): Promise<WorkspaceKeyshareInitiatingResponse> {
+    this.lockOperation(WorkspaceApiOperations.InitiatingKeyshare)
+
+    try {
+      const response = await this.workspaceServer.initiateKeyshare({
+        workspaceUuid: dto.workspaceUuid,
+        userUuid: dto.userUuid,
+        encryptedWorkspaceKey: dto.encryptedWorkspaceKey,
+      })
+
+      this.unlockOperation(WorkspaceApiOperations.InitiatingKeyshare)
+
+      return response
+    } catch (error) {
+      throw new ApiCallError(ErrorMessage.GenericFail)
+    }
+  }
+
   async listWorkspaceUsers(dto: { workspaceUuid: string }): Promise<WorkspaceUserListResponse> {
     this.lockOperation(WorkspaceApiOperations.ListingWorkspaceUsers)
 

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

@@ -1,5 +1,6 @@
 import { Uuid, WorkspaceAccessLevel, WorkspaceType } from '@standardnotes/common'
 
+import { WorkspaceKeyshareInitiatingResponse } from '../../Response/Workspace/WorkspaceKeyshareInitiatingResponse'
 import { WorkspaceCreationResponse } from '../../Response/Workspace/WorkspaceCreationResponse'
 import { WorkspaceInvitationAcceptingResponse } from '../../Response/Workspace/WorkspaceInvitationAcceptingResponse'
 import { WorkspaceInvitationResponse } from '../../Response/Workspace/WorkspaceInvitationResponse'
@@ -27,4 +28,9 @@ export interface WorkspaceApiServiceInterface {
   }): Promise<WorkspaceInvitationAcceptingResponse>
   listWorkspaces(): Promise<WorkspaceListResponse>
   listWorkspaceUsers(dto: { workspaceUuid: Uuid }): Promise<WorkspaceUserListResponse>
+  initiateKeyshare(dto: {
+    workspaceUuid: Uuid
+    userUuid: Uuid
+    encryptedWorkspaceKey: string
+  }): Promise<WorkspaceKeyshareInitiatingResponse>
 }

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

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

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

@@ -9,5 +9,6 @@ export * from './WebSocket/WebSocketConnectionTokenRequestParams'
 export * from './Workspace/WorkspaceCreationRequestParams'
 export * from './Workspace/WorkspaceInvitationAcceptingRequestParams'
 export * from './Workspace/WorkspaceInvitationRequestParams'
+export * from './Workspace/WorkspaceKeyshareInitiatingRequestParams'
 export * from './Workspace/WorkspaceListRequestParams'
 export * from './Workspace/WorkspaceUserListRequestParams'

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

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

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

@@ -0,0 +1,3 @@
+export type WorkspaceKeyshareInitiatingResponseBody = {
+  success: boolean
+}

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

@@ -16,7 +16,11 @@ export * from './Workspace/WorkspaceCreationResponse'
 export * from './Workspace/WorkspaceCreationResponseBody'
 export * from './Workspace/WorkspaceInvitationAcceptingResponse'
 export * from './Workspace/WorkspaceInvitationAcceptingResponseBody'
+export * from './Workspace/WorkspaceKeyshareInitiatingResponse'
+export * from './Workspace/WorkspaceKeyshareInitiatingResponseBody'
 export * from './Workspace/WorkspaceInvitationResponse'
 export * from './Workspace/WorkspaceInvitationResponseBody'
 export * from './Workspace/WorkspaceListResponse'
 export * from './Workspace/WorkspaceListResponseBody'
+export * from './Workspace/WorkspaceUserListResponse'
+export * from './Workspace/WorkspaceUserListResponseBody'

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

@@ -4,6 +4,8 @@ const WorkspacePaths = {
   createWorkspace: '/v1/workspaces',
   listWorkspaces: '/v1/workspaces',
   listWorkspaceUsers: (uuid: Uuid) => `/v1/workspaces/${uuid}/users`,
+  initiateKeyshare: (worksapceUuid: Uuid, userUuid: Uuid) =>
+    `/v1/workspaces/${worksapceUuid}/users/${userUuid}/keyshare`,
   inviteToWorkspace: (uuid: Uuid) => `/v1/workspaces/${uuid}/invites`,
   acceptInvite: (uuid: Uuid) => `/v1/invites/${uuid}/accept`,
 }

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

@@ -1,8 +1,10 @@
 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 { WorkspaceKeyshareInitiatingResponse } from '../../Response/Workspace/WorkspaceKeyshareInitiatingResponse'
 import { WorkspaceListResponse } from '../../Response/Workspace/WorkspaceListResponse'
 import { WorkspaceUserListResponse } from '../../Response/Workspace/WorkspaceUserListResponse'
 
@@ -99,4 +101,24 @@ describe('WorkspaceServer', () => {
       data: { users: [] },
     })
   })
+
+  it('should initiate keyshare for user in a workspace', async () => {
+    httpService.post = jest.fn().mockReturnValue({
+      status: HttpStatusCode.Success,
+      data: { success: true },
+    } as jest.Mocked<WorkspaceKeyshareInitiatingResponse>)
+
+    const response = await createServer().initiateKeyshare({
+      workspaceUuid: 'w-1-2-3',
+      userUuid: 'u-1-2-3',
+      encryptedWorkspaceKey: 'foobar',
+    })
+
+    expect(response).toEqual({
+      status: 200,
+      data: {
+        success: true,
+      },
+    })
+  })
 })

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

@@ -9,6 +9,8 @@ import { WorkspaceListRequestParams } from '../../Request/Workspace/WorkspaceLis
 import { WorkspaceListResponse } from '../../Response/Workspace/WorkspaceListResponse'
 import { WorkspaceUserListRequestParams } from '../../Request/Workspace/WorkspaceUserListRequestParams'
 import { WorkspaceUserListResponse } from '../../Response/Workspace/WorkspaceUserListResponse'
+import { WorkspaceKeyshareInitiatingRequestParams } from '../../Request/Workspace/WorkspaceKeyshareInitiatingRequestParams'
+import { WorkspaceKeyshareInitiatingResponse } from '../../Response/Workspace/WorkspaceKeyshareInitiatingResponse'
 
 import { Paths } from './Paths'
 import { WorkspaceServerInterface } from './WorkspaceServerInterface'
@@ -16,6 +18,17 @@ import { WorkspaceServerInterface } from './WorkspaceServerInterface'
 export class WorkspaceServer implements WorkspaceServerInterface {
   constructor(private httpService: HttpServiceInterface) {}
 
+  async initiateKeyshare(
+    params: WorkspaceKeyshareInitiatingRequestParams,
+  ): Promise<WorkspaceKeyshareInitiatingResponse> {
+    const response = await this.httpService.post(
+      Paths.v1.initiateKeyshare(params.workspaceUuid, params.userUuid),
+      params,
+    )
+
+    return response as WorkspaceKeyshareInitiatingResponse
+  }
+
   async listWorkspaceUsers(params: WorkspaceUserListRequestParams): Promise<WorkspaceUserListResponse> {
     const response = await this.httpService.get(Paths.v1.listWorkspaceUsers(params.workspaceUuid), params)
 

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

@@ -8,6 +8,8 @@ import { WorkspaceListRequestParams } from '../../Request/Workspace/WorkspaceLis
 import { WorkspaceListResponse } from '../../Response/Workspace/WorkspaceListResponse'
 import { WorkspaceUserListRequestParams } from '../../Request/Workspace/WorkspaceUserListRequestParams'
 import { WorkspaceUserListResponse } from '../../Response/Workspace/WorkspaceUserListResponse'
+import { WorkspaceKeyshareInitiatingRequestParams } from '../../Request/Workspace/WorkspaceKeyshareInitiatingRequestParams'
+import { WorkspaceKeyshareInitiatingResponse } from '../../Response/Workspace/WorkspaceKeyshareInitiatingResponse'
 
 export interface WorkspaceServerInterface {
   createWorkspace(params: WorkspaceCreationRequestParams): Promise<WorkspaceCreationResponse>
@@ -15,4 +17,5 @@ export interface WorkspaceServerInterface {
   listWorkspaceUsers(params: WorkspaceUserListRequestParams): Promise<WorkspaceUserListResponse>
   inviteToWorkspace(params: WorkspaceInvitationRequestParams): Promise<WorkspaceInvitationResponse>
   acceptInvite(params: WorkspaceInvitationAcceptingRequestParams): Promise<WorkspaceInvitationAcceptingResponse>
+  initiateKeyshare(params: WorkspaceKeyshareInitiatingRequestParams): Promise<WorkspaceKeyshareInitiatingResponse>
 }

packages/desktop/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.23.212](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
+## [3.23.211](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
+## [3.23.210](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
+## [3.23.209](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+**Note:** Version bump only for package @standardnotes/desktop
+
+## [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

packages/desktop/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@standardnotes/desktop",
   "main": "./app/dist/index.js",
-  "version": "3.23.206",
+  "version": "3.23.212",
   "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.18.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+### Features
+
+* replace private workspaces with private usernames ([#1783](https://github.com/standardnotes/app/issues/1783)) ([18c821d](https://github.com/standardnotes/app/commit/18c821d8eb51beb6f54211eb1d6eb454303044f5))
+
+## [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

packages/encryption/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/encryption",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/encryption/src/Domain/Username/PrivateUsername.ts

@@ -0,0 +1,19 @@
+import { PureCryptoInterface } from '@standardnotes/sncrypto-common'
+
+const PrivateUserNameV1 = 'StandardNotes-PrivateUsername-V1'
+
+export async function ComputePrivateUsername(
+  crypto: PureCryptoInterface,
+  usernameInput: string,
+): Promise<string | undefined> {
+  const result = await crypto.hmac256(
+    await crypto.sha256(PrivateUserNameV1),
+    await crypto.sha256(usernameInput.trim().toLowerCase()),
+  )
+
+  if (result == undefined) {
+    return undefined
+  }
+
+  return result
+}

packages/encryption/src/Domain/Workspace/PrivateWorkspace.ts

@@ -1,18 +0,0 @@
-import { PureCryptoInterface } from '@standardnotes/sncrypto-common'
-
-export async function ComputePrivateWorkspaceIdentifier(
-  crypto: PureCryptoInterface,
-  userphrase: string,
-  name: string,
-): Promise<string | undefined> {
-  const identifier = await crypto.hmac256(
-    await crypto.sha256(name.trim().toLowerCase()),
-    await crypto.sha256(userphrase.trim().toLowerCase()),
-  )
-
-  if (identifier == undefined) {
-    return undefined
-  }
-
-  return identifier
-}

packages/encryption/src/Domain/index.ts

@@ -34,4 +34,4 @@ export * from './Types/EncryptedParameters'
 export * from './Types/ItemAuthenticatedData'
 export * from './Types/LegacyAttachedData'
 export * from './Types/RootKeyEncryptedAuthenticatedData'
-export * from './Workspace/PrivateWorkspace'
+export * from './Username/PrivateUsername'

packages/filepicker/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.24.2](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+**Note:** Version bump only for package @standardnotes/filepicker
+
+## [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

packages/filepicker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/filepicker",
-  "version": "1.24.0",
+  "version": "1.24.2",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/files/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.11.2](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+**Note:** Version bump only for package @standardnotes/files
+
+## [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

packages/files/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/files",
-  "version": "1.11.0",
+  "version": "1.11.2",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/mobile/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.42.5](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
+## [3.42.4](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
+## [3.42.3](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
+## [3.42.2](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+**Note:** Version bump only for package @standardnotes/mobile
+
+## [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

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.9",
+  "version": "3.42.5",
   "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.getSortedFilesLinkingToItem(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.getSortedFilesLinkingToItem(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.getSortedFilesLinkingToItem(note).length)
     })
     return () => {
       removeFilesObserver()

packages/models/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.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

packages/models/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/models",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

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/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

@@ -38,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,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.140](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.3.139](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.3.138](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [1.3.137](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+**Note:** Version bump only for package @standardnotes/releases
+
+## [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

packages/releases/package.json

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

packages/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.32.2](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+**Note:** Version bump only for package @standardnotes/services
+
+## [1.32.1](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+**Note:** Version bump only for package @standardnotes/services
+
+# [1.32.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+### Features
+
+* **api:** add keyshare initiation for workspaces ([fabce1f](https://github.com/standardnotes/app/commit/fabce1f7aca5c9caaa5bb3908b2dc68063c690d0))
+
+# [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

packages/services/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/services",
-  "version": "1.30.0",
+  "version": "1.32.2",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

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,16 @@ 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[]
+
+  getSortedLinkedFilesForItem(item: DecryptedItemInterface<ItemContent>): FileItem[]
+  getSortedFilesLinkingToItem(item: DecryptedItemInterface<ItemContent>): FileItem[]
+
+  getSortedLinkedNotesForItem(item: DecryptedItemInterface<ItemContent>): SNNote[]
+  getSortedNotesLinkingToItem(item: DecryptedItemInterface<ItemContent>): SNNote[]
 
   isSmartViewTitle(title: string): boolean
 
@@ -137,4 +152,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

@@ -22,4 +22,9 @@ export interface WorkspaceClientInterface {
   }): Promise<{ success: boolean }>
   listWorkspaces(): Promise<{ ownedWorkspaces: Array<Workspace>; joinedWorkspaces: Array<Workspace> }>
   listWorkspaceUsers(dto: { workspaceUuid: Uuid }): Promise<{ users: Array<WorkspaceUser> }>
+  initiateKeyshare(dto: {
+    workspaceUuid: Uuid
+    userUuid: Uuid
+    encryptedWorkspaceKey: string
+  }): Promise<{ success: boolean }>
 }

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

@@ -14,6 +14,24 @@ export class WorkspaceManager extends AbstractService implements WorkspaceClient
     super(internalEventBus)
   }
 
+  async initiateKeyshare(dto: {
+    workspaceUuid: string
+    userUuid: string
+    encryptedWorkspaceKey: string
+  }): Promise<{ success: boolean }> {
+    try {
+      const result = await this.workspaceApiService.initiateKeyshare(dto)
+
+      if (result.data.error !== undefined) {
+        return { success: false }
+      }
+
+      return result.data
+    } catch (error) {
+      return { success: false }
+    }
+  }
+
   async listWorkspaceUsers(dto: { workspaceUuid: string }): Promise<{ users: WorkspaceUser[] }> {
     try {
       const result = await this.workspaceApiService.listWorkspaceUsers(dto)

packages/snjs/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.
 
+# [2.139.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+### Features
+
+* replace private workspaces with private usernames ([#1783](https://github.com/standardnotes/app/issues/1783)) ([18c821d](https://github.com/standardnotes/app/commit/18c821d8eb51beb6f54211eb1d6eb454303044f5))
+
+## [2.138.2](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+**Note:** Version bump only for package @standardnotes/snjs
+
+## [2.138.1](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+**Note:** Version bump only for package @standardnotes/snjs
+
+# [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

packages/snjs/lib/Application/Application.ts

@@ -53,7 +53,7 @@ import {
   WorkspaceManager,
 } from '@standardnotes/services'
 import { FilesClientInterface } from '@standardnotes/files'
-import { ComputePrivateWorkspaceIdentifier } from '@standardnotes/encryption'
+import { ComputePrivateUsername } from '@standardnotes/encryption'
 import { useBoolean } from '@standardnotes/utils'
 import {
   BackupFile,
@@ -272,8 +272,8 @@ export class SNApplication
     return this.componentManagerService
   }
 
-  public computePrivateWorkspaceIdentifier(userphrase: string, name: string): Promise<string | undefined> {
-    return ComputePrivateWorkspaceIdentifier(this.options.crypto, userphrase, name)
+  public computePrivateUsername(username: string): Promise<string | undefined> {
+    return ComputePrivateUsername(this.options.crypto, username)
   }
 
   /**

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,249 @@ 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.getSortedFilesLinkingToItem(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 file = createFile('A1')
+      const file2 = createFile('B2')
+      const file3 = createFile('C3')
+
+      await itemManager.insertItems([file, file2, file3])
+
+      await itemManager.linkFileToFile(file, file3)
+      await itemManager.linkFileToFile(file, file2)
+
+      const sortedFilesForItem = itemManager.getSortedLinkedFilesForItem(file)
+
+      expect(sortedFilesForItem).toHaveLength(2)
+      expect(sortedFilesForItem[0].uuid).toEqual(file2.uuid)
+      expect(sortedFilesForItem[1].uuid).toEqual(file3.uuid)
+    })
+
+    it('should get all files linking to item', async () => {
+      itemManager = createService()
+      const baseFile = createFile('file')
+      const fileToLink1 = createFile('A1')
+      const fileToLink2 = createFile('B2')
+
+      await itemManager.insertItems([baseFile, fileToLink1, fileToLink2])
+
+      await itemManager.linkFileToFile(fileToLink2, baseFile)
+      await itemManager.linkFileToFile(fileToLink1, baseFile)
+
+      const sortedFilesForItem = itemManager.getSortedFilesLinkingToItem(baseFile)
+
+      expect(sortedFilesForItem).toHaveLength(2)
+      expect(sortedFilesForItem[0].uuid).toEqual(fileToLink1.uuid)
+      expect(sortedFilesForItem[1].uuid).toEqual(fileToLink2.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,106 @@ 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 getSortedLinkedFilesForItem(item: DecryptedItemInterface<ItemContent>): Models.FileItem[] {
+    if (this.isTemplateItem(item)) {
+      return []
+    }
+
+    const filesReferencedByItem = this.referencesForItem(item).filter(
+      (ref) => ref.content_type === ContentType.File,
+    ) as Models.FileItem[]
+
+    return naturalSort(filesReferencedByItem, 'title')
+  }
+
+  public getSortedFilesLinkingToItem(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[]
+
+    return naturalSort(filesReferencingItem, '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 +1398,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 +1433,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/mocha/test.html

@@ -43,7 +43,7 @@
   <script type="module" src="002.test.js"></script>
   <script type="module" src="003.test.js"></script>
   <script type="module" src="004.test.js"></script>
-  <script type="module" src="workspaces.test.js"></script>
+  <script type="module" src="username.test.js"></script>
   <script type="module" src="app-group.test.js"></script>
   <script type="module" src="application.test.js"></script>
   <script type="module" src="payload.test.js"></script>

packages/snjs/mocha/username.test.js

@@ -0,0 +1,12 @@
+chai.use(chaiAsPromised)
+const expect = chai.expect
+
+describe('private username', () => {
+  it('generates private username', async () => {
+    const username = 'myusername'
+
+    const result = await ComputePrivateUsername(new SNWebCrypto(), username)
+
+    expect(result).to.equal('9aae57db8dbb233291a49cb7b8ab902336ec785e04f3be70157b8c1669014d0d')
+  })
+})

packages/snjs/mocha/workspaces.test.js

@@ -1,25 +0,0 @@
-chai.use(chaiAsPromised)
-const expect = chai.expect
-import * as Factory from './lib/factory.js'
-
-describe('private workspaces', () => {
-  it('generates identifier', async () => {
-    const userphrase = 'myworkspaceuserphrase'
-    const name = 'myworkspacename'
-
-    const result = await ComputePrivateWorkspaceIdentifier(new SNWebCrypto(), userphrase, name)
-
-    expect(result).to.equal('5155c13a44f333790f6564fbcee0c35a16d26a8359dd77d67d8ecc6ad5d399bb')
-  })
-
-  it('application result matches direct function call', async () => {
-    const userphrase = 'myworkspaceuserphrase'
-    const name = 'myworkspacename'
-
-    const application = (await Factory.createAppContextWithRealCrypto()).application
-    const appResult = await application.computePrivateWorkspaceIdentifier(userphrase, name)
-    const directResult = await ComputePrivateWorkspaceIdentifier(new SNWebCrypto(), userphrase, name)
-
-    expect(appResult).to.equal(directResult)
-  })
-})

packages/snjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/snjs",
-  "version": "2.137.0",
+  "version": "2.139.0",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/ui-services/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.7.5](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+**Note:** Version bump only for package @standardnotes/ui-services
+
+## [1.7.4](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+**Note:** Version bump only for package @standardnotes/ui-services
+
+## [1.7.3](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+**Note:** Version bump only for package @standardnotes/ui-services
+
+## [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

packages/ui-services/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/ui-services",
-  "version": "1.7.1",
+  "version": "1.7.5",
   "engines": {
     "node": ">=16.0.0 <17.0.0"
   },

packages/web/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.73.0](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+### Features
+
+* replace private workspaces with private usernames ([#1783](https://github.com/standardnotes/app/issues/1783)) ([18c821d](https://github.com/standardnotes/app/commit/18c821d8eb51beb6f54211eb1d6eb454303044f5))
+
+## [3.72.4](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+### Bug Fixes
+
+* bidirectional linking indicator for files ([37abac2](https://github.com/standardnotes/app/commit/37abac2ec2c839b3af9324a83e36cbbc409d86a9))
+
+## [3.72.3](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+### Bug Fixes
+
+* css variable fallback ([075d7f4](https://github.com/standardnotes/app/commit/075d7f444da13b380ed675ecfd89823f840e2d56))
+
+## [3.72.2](https://github.com/standardnotes/app/compare/@standardnotes/[email protected]...@standardnotes/[email protected]) (2022-10-12)
+
+**Note:** Version bump only for package @standardnotes/web
+
+## [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

packages/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardnotes/web",
-  "version": "3.71.8",
+  "version": "3.73.0",
   "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/AccountMenu/AdvancedOptions.tsx

@@ -10,7 +10,7 @@ type Props = {
   application: WebApplication
   viewControllerManager: ViewControllerManager
   disabled?: boolean
-  onPrivateWorkspaceChange?: (isPrivate: boolean, identifier?: string) => void
+  onPrivateUsernameModeChange?: (isPrivate: boolean, identifier?: string) => void
   onStrictSignInChange?: (isStrictSignIn: boolean) => void
   children?: ReactNode
 }
@@ -19,54 +19,46 @@ const AdvancedOptions: FunctionComponent<Props> = ({
   viewControllerManager,
   application,
   disabled = false,
-  onPrivateWorkspaceChange,
+  onPrivateUsernameModeChange,
   onStrictSignInChange,
   children,
 }) => {
   const { server, setServer, enableServerOption, setEnableServerOption } = viewControllerManager.accountMenuController
   const [showAdvanced, setShowAdvanced] = useState(false)
 
-  const [isPrivateWorkspace, setIsPrivateWorkspace] = useState(false)
-  const [privateWorkspaceName, setPrivateWorkspaceName] = useState('')
-  const [privateWorkspaceUserphrase, setPrivateWorkspaceUserphrase] = useState('')
+  const [isPrivateUsername, setIsPrivateUsername] = useState(false)
+  const [privateUsername, setPrivateUsername] = useState('')
 
   const [isStrictSignin, setIsStrictSignin] = useState(false)
 
   useEffect(() => {
-    const recomputePrivateWorkspaceIdentifier = async () => {
-      const identifier = await application.computePrivateWorkspaceIdentifier(
-        privateWorkspaceName,
-        privateWorkspaceUserphrase,
-      )
+    const recomputePrivateUsername = async () => {
+      const identifier = await application.computePrivateUsername(privateUsername)
 
       if (!identifier) {
-        if (privateWorkspaceName?.length > 0 && privateWorkspaceUserphrase?.length > 0) {
-          application.alertService.alert('Unable to compute private workspace name.').catch(console.error)
+        if (privateUsername?.length > 0) {
+          application.alertService.alert('Unable to compute private username.').catch(console.error)
         }
         return
       }
-      onPrivateWorkspaceChange?.(true, identifier)
+      onPrivateUsernameModeChange?.(true, identifier)
     }
 
-    if (privateWorkspaceName && privateWorkspaceUserphrase) {
-      recomputePrivateWorkspaceIdentifier().catch(console.error)
+    if (privateUsername) {
+      recomputePrivateUsername().catch(console.error)
     }
-  }, [privateWorkspaceName, privateWorkspaceUserphrase, application, onPrivateWorkspaceChange])
+  }, [privateUsername, application, onPrivateUsernameModeChange])
 
   useEffect(() => {
-    onPrivateWorkspaceChange?.(isPrivateWorkspace)
-  }, [isPrivateWorkspace, onPrivateWorkspaceChange])
+    onPrivateUsernameModeChange?.(isPrivateUsername)
+  }, [isPrivateUsername, onPrivateUsernameModeChange])
 
-  const handleIsPrivateWorkspaceChange = useCallback(() => {
-    setIsPrivateWorkspace(!isPrivateWorkspace)
-  }, [isPrivateWorkspace])
+  const handleIsPrivateUsernameChange = useCallback(() => {
+    setIsPrivateUsername(!isPrivateUsername)
+  }, [isPrivateUsername])
 
-  const handlePrivateWorkspaceNameChange = useCallback((name: string) => {
-    setPrivateWorkspaceName(name)
-  }, [])
-
-  const handlePrivateWorkspaceUserphraseChange = useCallback((userphrase: string) => {
-    setPrivateWorkspaceUserphrase(userphrase)
+  const handlePrivateUsernameNameChange = useCallback((name: string) => {
+    setPrivateUsername(name)
   }, [])
 
   const handleServerOptionChange: ChangeEventHandler<HTMLInputElement> = useCallback(
@@ -114,35 +106,28 @@ const AdvancedOptions: FunctionComponent<Props> = ({
           <div className="mb-1 flex items-center justify-between">
             <Checkbox
               name="private-workspace"
-              label="Private workspace"
-              checked={isPrivateWorkspace}
+              label="Private username mode"
+              checked={isPrivateUsername}
               disabled={disabled}
-              onChange={handleIsPrivateWorkspaceChange}
+              onChange={handleIsPrivateUsernameChange}
             />
             <a href="https://standardnotes.com/help/80" target="_blank" rel="noopener noreferrer" title="Learn more">
               <Icon type="info" className="text-neutral" />
             </a>
           </div>
 
-          {isPrivateWorkspace && (
+          {isPrivateUsername && (
             <>
               <DecoratedInput
                 className={{ container: 'mb-2' }}
-                left={[<Icon type="server" className="text-neutral" />]}
+                left={[<Icon type="account-circle" className="text-neutral" />]}
                 type="text"
-                placeholder="Userphrase"
-                value={privateWorkspaceUserphrase}
-                onChange={handlePrivateWorkspaceUserphraseChange}
-                disabled={disabled}
-              />
-              <DecoratedInput
-                className={{ container: 'mb-2' }}
-                left={[<Icon type="folder" className="text-neutral" />]}
-                type="text"
-                placeholder="Name"
-                value={privateWorkspaceName}
-                onChange={handlePrivateWorkspaceNameChange}
+                placeholder="Username"
+                value={privateUsername}
+                onChange={handlePrivateUsernameNameChange}
                 disabled={disabled}
+                spellcheck={false}
+                autocomplete={false}
               />
             </>
           )}

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

@@ -40,7 +40,7 @@ const CreateAccount: FunctionComponent<Props> = ({
 }) => {
   const emailInputRef = useRef<HTMLInputElement>(null)
   const passwordInputRef = useRef<HTMLInputElement>(null)
-  const [isPrivateWorkspace, setIsPrivateWorkspace] = useState(false)
+  const [isPrivateUsername, setIsPrivateUsername] = useState(false)
 
   useEffect(() => {
     if (emailInputRef.current) {
@@ -98,11 +98,11 @@ const CreateAccount: FunctionComponent<Props> = ({
     setPassword('')
   }, [setEmail, setMenuPane, setPassword])
 
-  const onPrivateWorkspaceChange = useCallback(
-    (isPrivateWorkspace: boolean, privateWorkspaceIdentifier?: string) => {
-      setIsPrivateWorkspace(isPrivateWorkspace)
-      if (isPrivateWorkspace && privateWorkspaceIdentifier) {
-        setEmail(privateWorkspaceIdentifier)
+  const onPrivateUsernameChange = useCallback(
+    (isPrivateUsername: boolean, privateUsernameIdentifier?: string) => {
+      setIsPrivateUsername(isPrivateUsername)
+      if (isPrivateUsername && privateUsernameIdentifier) {
+        setEmail(privateUsernameIdentifier)
       }
     },
     [setEmail],
@@ -123,7 +123,7 @@ const CreateAccount: FunctionComponent<Props> = ({
       <form onSubmit={handleRegisterFormSubmit} className="mb-1 px-3">
         <DecoratedInput
           className={{ container: 'mb-2' }}
-          disabled={isPrivateWorkspace}
+          disabled={isPrivateUsername}
           left={[<Icon type="email" className="text-neutral" />]}
           onChange={handleEmailChange}
           onKeyDown={handleKeyDown}
@@ -147,7 +147,7 @@ const CreateAccount: FunctionComponent<Props> = ({
       <AdvancedOptions
         application={application}
         viewControllerManager={viewControllerManager}
-        onPrivateWorkspaceChange={onPrivateWorkspaceChange}
+        onPrivateUsernameModeChange={onPrivateUsernameChange}
       />
     </>
   )

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

@@ -29,7 +29,7 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
   const [isStrictSignin, setIsStrictSignin] = useState(false)
   const [isSigningIn, setIsSigningIn] = useState(false)
   const [shouldMergeLocal, setShouldMergeLocal] = useState(true)
-  const [isPrivateWorkspace, setIsPrivateWorkspace] = useState(false)
+  const [isPrivateUsername, setIsPrivateUsername] = useState(false)
 
   const emailInputRef = useRef<HTMLInputElement>(null)
   const passwordInputRef = useRef<HTMLInputElement>(null)
@@ -100,11 +100,11 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
       })
   }, [viewControllerManager, application, email, isEphemeral, isStrictSignin, password, shouldMergeLocal])
 
-  const onPrivateWorkspaceChange = useCallback(
-    (newIsPrivateWorkspace: boolean, privateWorkspaceIdentifier?: string) => {
-      setIsPrivateWorkspace(newIsPrivateWorkspace)
-      if (newIsPrivateWorkspace && privateWorkspaceIdentifier) {
-        setEmail(privateWorkspaceIdentifier)
+  const onPrivateUsernameChange = useCallback(
+    (newisPrivateUsername: boolean, privateUsernameIdentifier?: string) => {
+      setIsPrivateUsername(newisPrivateUsername)
+      if (newisPrivateUsername && privateUsernameIdentifier) {
+        setEmail(privateUsernameIdentifier)
       }
     },
     [setEmail],
@@ -161,7 +161,7 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
           onChange={handleEmailChange}
           onFocus={resetInvalid}
           onKeyDown={handleKeyDown}
-          disabled={isSigningIn || isPrivateWorkspace}
+          disabled={isSigningIn || isPrivateUsername}
           ref={emailInputRef}
         />
         <DecoratedPasswordInput
@@ -206,7 +206,7 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
         viewControllerManager={viewControllerManager}
         application={application}
         disabled={isSigningIn}
-        onPrivateWorkspaceChange={onPrivateWorkspaceChange}
+        onPrivateUsernameModeChange={onPrivateUsernameChange}
         onStrictSignInChange={handleStrictSigninChange}
       />
     </>

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.getSortedFilesLinkingToItem(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/Icon/Icon.tsx

@@ -5,6 +5,7 @@ import * as icons from '@standardnotes/icons'
 export const ICONS = {
   'account-circle': icons.AccountCircleIcon,
   'arrow-left': icons.ArrowLeftIcon,
+  'arrow-right': icons.ArrowRightIcon,
   'arrows-sort-down': icons.ArrowsSortDownIcon,
   'arrows-sort-up': icons.ArrowsSortUpIcon,
   'attachment-file': icons.AttachmentFileIcon,

packages/web/src/javascripts/Components/Input/DecoratedInput.tsx

@@ -20,6 +20,7 @@ const DecoratedInput = forwardRef(
   (
     {
       autocomplete = false,
+      spellcheck = true,
       className,
       disabled = false,
       id,
@@ -68,6 +69,7 @@ const DecoratedInput = forwardRef(
           title={title}
           type={type}
           value={value}
+          spellCheck={spellcheck}
         />
 
         {right && (

packages/web/src/javascripts/Components/Input/DecoratedInputProps.ts

@@ -2,6 +2,7 @@ import { FocusEventHandler, KeyboardEventHandler, ReactNode } from 'react'
 
 export type DecoratedInputProps = {
   autocomplete?: boolean
+  spellcheck?: boolean
   className?: {
     container?: string
     input?: string

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,126 @@
+import { ItemLink, 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 { ContentType } from '@standardnotes/snjs'
+import Icon from '../Icon/Icon'
+
+type Props = {
+  link: ItemLink
+  getItemIcon: LinkingController['getLinkedItemIcon']
+  getTitleForLinkedTag: LinkingController['getTitleForLinkedTag']
+  activateItem: (item: LinkableItem) => Promise<void>
+  unlinkItem: LinkingController['unlinkItemFromSelectedItem']
+  focusPreviousItem: () => void
+  focusNextItem: () => void
+  focusedId: string | undefined
+  setFocusedId: (id: string) => void
+  isBidirectional: boolean
+}
+
+const LinkedItemBubble = ({
+  link,
+  getItemIcon,
+  getTitleForLinkedTag,
+  activateItem,
+  unlinkItem,
+  focusPreviousItem,
+  focusNextItem,
+  focusedId,
+  setFocusedId,
+  isBidirectional,
+}: 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 !== link.id) {
+      setFocusedId(link.id)
+    }
+    setShowUnlinkButton(true)
+  }
+
+  const onBlur = () => {
+    setShowUnlinkButton(false)
+    setWasClicked(false)
+  }
+
+  const onClick: MouseEventHandler = (event) => {
+    if (wasClicked && event.target !== unlinkButtonRef.current) {
+      setWasClicked(false)
+      void activateItem(link.item)
+    } else {
+      setWasClicked(true)
+    }
+  }
+
+  const onUnlinkClick: MouseEventHandler = (event) => {
+    event.stopPropagation()
+    unlinkItem(link)
+  }
+
+  const onKeyDown: KeyboardEventHandler = (event) => {
+    switch (event.key) {
+      case KeyboardKey.Backspace: {
+        focusPreviousItem()
+        unlinkItem(link)
+        break
+      }
+      case KeyboardKey.Left:
+        focusPreviousItem()
+        break
+      case KeyboardKey.Right:
+        focusNextItem()
+        break
+    }
+  }
+
+  const [icon, iconClassName] = getItemIcon(link.item)
+  const tagTitle = getTitleForLinkedTag(link.item)
+
+  useEffect(() => {
+    if (link.id === focusedId) {
+      ref.current?.focus()
+    }
+  }, [focusedId, link.id])
+
+  return (
+    <button
+      ref={ref}
+      className="group 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 : link.item.title}
+      onKeyDown={onKeyDown}
+    >
+      <Icon type={icon} className={classNames('mr-1 flex-shrink-0', iconClassName)} size="small" />
+      <span className="max-w-290px flex items-center overflow-hidden overflow-ellipsis whitespace-nowrap">
+        {tagTitle && <span className="text-passive-1">{tagTitle.titlePrefix}</span>}
+        <span className="flex items-center gap-1">
+          {link.relationWithSelectedItem === 'indirect' && link.item.content_type !== ContentType.Tag && (
+            <span className={!isBidirectional ? 'hidden group-focus:block' : ''}>Linked By:</span>
+          )}
+          {link.item.title}
+        </span>
+      </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,110 @@
+import { observer } from 'mobx-react-lite'
+import ItemLinkAutocompleteInput from './ItemLinkAutocompleteInput'
+import { ItemLink, 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'
+import { ContentType } from '@standardnotes/snjs'
+
+type Props = {
+  linkingController: LinkingController
+}
+
+const LinkedItemBubblesContainer = ({ linkingController }: Props) => {
+  const { toggleAppPane } = useResponsiveAppPane()
+  const {
+    allItemLinks,
+    notesLinkingToActiveItem,
+    filesLinkingToActiveItem,
+    unlinkItemFromSelectedItem: unlinkItem,
+    getTitleForLinkedTag,
+    getLinkedItemIcon: getItemIcon,
+    activateItem,
+  } = linkingController
+
+  const [focusedId, setFocusedId] = useState<string>()
+  const focusableIds = allItemLinks
+    .map((link) => link.id)
+    .concat(
+      notesLinkingToActiveItem.map((link) => link.id),
+      filesLinkingToActiveItem.map((link) => link.id),
+      [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],
+  )
+
+  const isItemBidirectionallyLinked = (link: ItemLink) => {
+    const existsInAllItemLinks = !!allItemLinks.find((item) => link.item.uuid === item.item.uuid)
+    const existsInNotesLinkingToItem = !!notesLinkingToActiveItem.find((item) => link.item.uuid === item.item.uuid)
+    const existsInFilesLinkingToItem = !!filesLinkingToActiveItem.find((item) => link.item.uuid === item.item.uuid)
+
+    return (
+      existsInAllItemLinks &&
+      (link.item.content_type === ContentType.Note ? existsInNotesLinkingToItem : existsInFilesLinkingToItem)
+    )
+  }
+
+  return (
+    <div
+      className={classNames(
+        'hidden min-w-80 max-w-full flex-wrap items-center gap-2 bg-transparent md:-mr-2 md:flex',
+        allItemLinks.length || notesLinkingToActiveItem.length ? 'mt-1' : 'mt-0.5',
+      )}
+    >
+      {allItemLinks
+        .concat(notesLinkingToActiveItem)
+        .concat(filesLinkingToActiveItem)
+        .map((link) => (
+          <LinkedItemBubble
+            link={link}
+            key={link.id}
+            getItemIcon={getItemIcon}
+            getTitleForLinkedTag={getTitleForLinkedTag}
+            activateItem={activateItemAndTogglePane}
+            unlinkItem={unlinkItem}
+            focusPreviousItem={focusPreviousItem}
+            focusNextItem={focusNextItem}
+            focusedId={focusedId}
+            setFocusedId={setFocusedId}
+            isBidirectional={isItemBidirectionallyLinked(link)}
+          />
+        ))}
+      <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,374 @@
+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: () => void
+  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 max-w-full 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()
+            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,
+    linkedFiles,
+    filesLinkingToActiveItem,
+    notesLinkedToItem,
+    notesLinkingToActiveItem,
+    allItemLinks: 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 || notesLinkingToActiveItem.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((link) => (
+                    <LinkedItemsSectionItem
+                      key={link.id}
+                      item={link.item}
+                      getItemIcon={getLinkedItemIcon}
+                      getTitleForLinkedTag={getTitleForLinkedTag}
+                      searchQuery={searchQuery}
+                      unlinkItem={() => unlinkItemFromSelectedItem(link)}
+                      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((link) => (
+                    <LinkedItemsSectionItem
+                      key={link.id}
+                      item={link.item}
+                      getItemIcon={getLinkedItemIcon}
+                      getTitleForLinkedTag={getTitleForLinkedTag}
+                      searchQuery={searchQuery}
+                      unlinkItem={() => unlinkItemFromSelectedItem(link)}
+                      activateItem={activateItem}
+                      handleFileAction={filesController.handleFileAction}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+            {!!linkedFiles.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">
+                  {linkedFiles.map((link) => (
+                    <LinkedItemsSectionItem
+                      key={link.id}
+                      item={link.item}
+                      getItemIcon={getLinkedItemIcon}
+                      getTitleForLinkedTag={getTitleForLinkedTag}
+                      searchQuery={searchQuery}
+                      unlinkItem={() => unlinkItemFromSelectedItem(link)}
+                      activateItem={activateItem}
+                      handleFileAction={filesController.handleFileAction}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+            {!!filesLinkingToActiveItem.length && (
+              <div>
+                <div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">
+                  Files Linking To Current File
+                </div>
+                <div className="my-1">
+                  {filesLinkingToActiveItem.map((link) => (
+                    <LinkedItemsSectionItem
+                      key={link.id}
+                      item={link.item}
+                      getItemIcon={getLinkedItemIcon}
+                      getTitleForLinkedTag={getTitleForLinkedTag}
+                      searchQuery={searchQuery}
+                      unlinkItem={() => unlinkItemFromSelectedItem(link)}
+                      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((link) => (
+                    <LinkedItemsSectionItem
+                      key={link.id}
+                      item={link.item}
+                      getItemIcon={getLinkedItemIcon}
+                      getTitleForLinkedTag={getTitleForLinkedTag}
+                      searchQuery={searchQuery}
+                      unlinkItem={() => unlinkItemFromSelectedItem(link)}
+                      activateItem={activateItem}
+                      handleFileAction={filesController.handleFileAction}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+            {!!notesLinkingToActiveItem.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">
+                  {notesLinkingToActiveItem.map((link) => (
+                    <LinkedItemsSectionItem
+                      key={link.id}
+                      item={link.item}
+                      getItemIcon={getLinkedItemIcon}
+                      getTitleForLinkedTag={getTitleForLinkedTag}
+                      searchQuery={searchQuery}
+                      unlinkItem={() => unlinkItemFromSelectedItem(link)}
+                      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)