Add manage buttons for own channels and account, video counts (#2421)

* Add manage buttons for own channels and account, video counts

* Change manage button color and introduce secondary color

3 files changed, 22 insertions, 4 deletions

diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 57498e98c..367258a06 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -25,15 +25,17 @@
           <my-user-moderation-dropdown
             buttonSize="small" [account]="account" [user]="user" placement="bottom-right auto"
             (userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()"
-          >
-          </my-user-moderation-dropdown>
+          ></my-user-moderation-dropdown>
         </div>
         <div class="actor-followers" i18n-title [title]="subscribersDisplayFor(account.followersCount) + ' to the account actor'">
           {{ subscribersDisplayFor(naiveAggregatedSubscribers) }}
         </div>
       </div>
 
-      <my-subscribe-button *ngIf="videoChannels" [account]="account" [videoChannels]="videoChannels"></my-subscribe-button>
+      <div class="right-buttons">
+        <a *ngIf="isManageable" routerLink="/my-account" class="btn btn-outline-tertiary mr-2" i18n>Manage</a>
+        <my-subscribe-button *ngIf="videoChannels" [account]="account" [videoChannels]="videoChannels"></my-subscribe-button>
+      </div>
     </div>
 
     <div class="links">
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index ab3aece54..a06f04055 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -9,10 +9,21 @@
   }
 }
 
-my-subscribe-button {
+.right-buttons {
+  display: flex;
   height: max-content;
   margin-left: auto;
   margin-top: 20px;
+
+  a {
+    @include peertube-button-outline;
+    height: auto;
+    line-height: 32px;
+  }
+
+  my-subscribe-button {
+    height: min-content;
+  }
 }
 
 my-user-moderation-dropdown,
diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts
index da4a0b28e..3d486f084 100644
--- a/client/src/app/+accounts/accounts.component.ts
+++ b/client/src/app/+accounts/accounts.component.ts
@@ -65,6 +65,11 @@ export class AccountsComponent implements OnInit, OnDestroy {
     )
   }
 
+  get isManageable () {
+    if (!this.authService.isLoggedIn()) return false
+    return this.user.id === this.authService.getUser().id
+  }
+
   onUserChanged () {
     this.getUserIfNeeded(this.account)
   }