search and move dropdown button

src/app/vault/ciphers.component.html

@@ -2,19 +2,6 @@
     <table class="table table-hover table-sm" *ngIf="searchedCiphers.length > 0">
         <tbody>
             <tr *ngFor="let c of searchedCiphers">
-                <td>
-                    <div class="dropdown">
-                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
-                            aria-expanded="false">
-                            <i class="fa fa-cog"></i>
-                        </button>
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                            <a class="dropdown-item" href="#">Action</a>
-                            <a class="dropdown-item" href="#">Another action</a>
-                            <a class="dropdown-item" href="#">Something else here</a>
-                        </div>
-                    </div>
-                </td>
                 <td>
                     <input type="checkbox">
                 </td>
@@ -22,12 +9,23 @@
                     <app-vault-icon [cipher]="c"></app-vault-icon>
                 </td>
                 <td>
-                    <a href="#" appStopClick (click)="selectCipher(c)" title="{{'viewItem' | i18n}}">
+                    <a href="#" appStopClick (click)="selectCipher(c)" title="{{'viewItem' | i18n}}">{{c.name}}</a>
-                        {{c.name}}
                     <i class="fa fa-share-alt text-muted" *ngIf="c.organizationId" title="{{'shared' | i18n}}"></i>
                     <i class="fa fa-paperclip text-muted" *ngIf="c.hasAttachments" title="{{'attachments' | i18n}}"></i>
-                    </a>
+                    <small>{{c.subTitle}}</small>
-                    <small class="text-muted">{{c.subTitle}}</small>
+                </td>
+                <td>
+                    <div class="dropdown" appListDropdown>
+                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
+                            aria-expanded="false">
+                            <i class="fa fa-cog"></i>
+                        </button>
+                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+                            <a class="dropdown-item" href="#">Action</a>
+                            <a class="dropdown-item" href="#">Another action</a>
+                            <a class="dropdown-item" href="#">Something else here</a>
+                        </div>
+                    </div>
                 </td>
             </tr>
         </tbody>

src/app/vault/groupings.component.html

@@ -3,7 +3,8 @@
         Filters
     </div>
     <div class="card-body">
-        <input type="search" class="form-control" id="search" placeholder="Search vault">
+        <input type="search" placeholder="{{searchPlaceholder || ('searchVault' | i18n)}}" id="search"
+               class="form-control" [(ngModel)]="searchText" (input)="searchTextChanged()" appAutofocus>
         <ul class="fa-ul">
             <li [ngClass]="{active: selectedAll}">
                 <a href="#" appStopClick appBlurClick (click)="selectAll()">

src/app/vault/groupings.component.ts

@@ -1,4 +1,8 @@
-import { Component } from '@angular/core';
+import {
+    Component,
+    EventEmitter,
+    Output,
+} from '@angular/core';
 
 import { CollectionService } from 'jslib/abstractions/collection.service';
 import { FolderService } from 'jslib/abstractions/folder.service';
@@ -10,7 +14,14 @@ import { GroupingsComponent as BaseGroupingsComponent } from 'jslib/angular/comp
     templateUrl: 'groupings.component.html',
 })
 export class GroupingsComponent extends BaseGroupingsComponent {
+    @Output() onSearchTextChanged = new EventEmitter<string>();
+    searchText: string = '';
+
     constructor(collectionService: CollectionService, folderService: FolderService) {
         super(collectionService, folderService);
     }
+
+    searchTextChanged() {
+        this.onSearchTextChanged.emit(this.searchText);
+    }
 }

src/app/vault/vault.component.html

@@ -37,7 +37,8 @@
                 (onFolderClicked)="filterFolder($event.id)"
                 (onAddFolder)="addFolder()"
                 (onEditFolder)="editFolder($event.id)"
-                (onCollectionClicked)="filterCollection($event.id)">
+                (onCollectionClicked)="filterCollection($event.id)"
+                (onSearchTextChanged)="filterSearchText($event)">
             </app-vault-groupings>
         </div>
         <div class="col-6">

src/app/vault/vault.component.ts

@@ -128,6 +128,10 @@ export class VaultComponent implements OnInit {
         this.go();
     }
 
+    filterSearchText(searchText: string) {
+        this.ciphersComponent.searchText = searchText;
+    }
+
     editCipherAttachments(cipher: CipherView) {
         if (this.modal != null) {
             this.modal.close();

src/scss/styles.scss

@@ -92,29 +92,25 @@ app-vault {
         }
 
         tr:hover {
-            td:first-child {
+            td:last-child .dropdown button {
-                background-color: $body-bg;
+                visibility: initial;
             }
         }
 
         td {
             vertical-align: middle;
 
-            a {
+            small {
                 display: block;
+                color: $text-muted;
             }
         }
 
         td:first-child {
-            width: 65px;
-            border: none;
-        }
-
-        td:nth-child(2) {
             width: 25px;
         }
 
-        td:nth-child(3) {
+        td:nth-child(2) {
             width: 25px;
             text-align: center;
 
@@ -123,5 +119,14 @@ app-vault {
                 @extend .img-fluid;
             }
         }
+
+        td:last-child {
+            width: 65px;
+            text-align: right;
+            
+            .dropdown:not(.show) button {
+                visibility: hidden;
+            }
+        }
     }
 }