[PS-1341] Add folder to item view (#3347)

* Initial - add folder id to popup item view

* Add folder service to view component

* Move folder info higher in the item view as proper box

* Add folder name handling to component

* Add folder field to browser view

* Add folder field to desktop view

* Make folder field draggable

following the merging of https://github.com/bitwarden/clients/pull/3321 also make the folder field draggable

* Use `<label>` and readonly `<input>`

In anticipation of https://github.com/bitwarden/clients/pull/3485 being merged

* Changes from review

- change input name to `folderName`, match it in the `for` attribute on the `<label>`
- add an `if` check before querying folder names

* Match `name` to `id`

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>

libs/angular/src/components/view.component.ts

@@ -8,6 +8,7 @@ import {
   OnInit,
   Output,
 } from "@angular/core";
+import { firstValueFrom } from "rxjs";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
@@ -16,6 +17,7 @@ import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { EventService } from "@bitwarden/common/abstractions/event.service";
 import { FileDownloadService } from "@bitwarden/common/abstractions/fileDownload/fileDownload.service";
+import { FolderService } from "@bitwarden/common/abstractions/folder/folder.service.abstraction";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { PasswordRepromptService } from "@bitwarden/common/abstractions/passwordReprompt.service";
@@ -31,6 +33,7 @@ import { EncArrayBuffer } from "@bitwarden/common/models/domain/enc-array-buffer
 import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
 import { AttachmentView } from "@bitwarden/common/models/view/attachment.view";
 import { CipherView } from "@bitwarden/common/models/view/cipher.view";
+import { FolderView } from "@bitwarden/common/models/view/folder.view";
 import { LoginUriView } from "@bitwarden/common/models/view/login-uri.view";
 
 const BroadcasterSubscriptionId = "ViewComponent";
@@ -58,6 +61,7 @@ export class ViewComponent implements OnDestroy, OnInit {
   totpLow: boolean;
   fieldType = FieldType;
   checkPasswordPromise: Promise<number>;
+  folder: FolderView;
 
   private totpInterval: any;
   private previousCipherId: string;
@@ -65,6 +69,7 @@ export class ViewComponent implements OnDestroy, OnInit {
 
   constructor(
     protected cipherService: CipherService,
+    protected folderService: FolderService,
     protected totpService: TotpService,
     protected tokenService: TokenService,
     protected i18nService: I18nService,
@@ -112,6 +117,12 @@ export class ViewComponent implements OnDestroy, OnInit {
     this.showPremiumRequiredTotp =
       this.cipher.login.totp && !this.canAccessPremium && !this.cipher.organizationUseTotp;
 
+    if (this.cipher.folderId) {
+      this.folder = await (
+        await firstValueFrom(this.folderService.folderViews$)
+      ).find((f) => f.id == this.cipher.folderId);
+    }
+
     if (
       this.cipher.type === CipherType.Login &&
       this.cipher.login.totp &&