first iteration of account displaying

Mamoth/Mamoth.njsproj

@@ -72,6 +72,7 @@
     <Folder Include="src\app\components\streams-main-display\" />
     <Folder Include="src\app\components\streams-selection-footer\" />
     <Folder Include="src\app\components\stream\" />
+    <Folder Include="src\app\models\" />
     <Folder Include="src\app\services\" />
     <Folder Include="src\assets\" />
     <Folder Include="src\environments\" />
@@ -90,6 +91,9 @@
     <TypeScriptCompile Include="src\app\components\streams-selection-footer\streams-selection-footer.component.ts" />
     <TypeScriptCompile Include="src\app\components\stream\stream.component.spec.ts" />
     <TypeScriptCompile Include="src\app\components\stream\stream.component.ts" />
+    <TypeScriptCompile Include="src\app\models\account.models.ts">
+      <SubType>Code</SubType>
+    </TypeScriptCompile>
     <TypeScriptCompile Include="src\environments\environment.prod.ts" />
     <TypeScriptCompile Include="src\environments\environment.ts" />
     <TypeScriptCompile Include="src\main.ts" />

Mamoth/src/app/components/left-side-bar/left-side-bar.component.css

@@ -2,5 +2,48 @@
   width: 50px;
   height: calc(100%);
   background: green;
-  outline: 1px dotted red;
+  /*outline: 1px dotted red;*/
+}
+
+#mam-create-toot {
+  width: 50px;
+
+  background-color: black;
+}
+
+  #mam-create-toot a {
+    font-size: 0.8em;
+    color: white;
+    text-decoration: none;
+    margin: 0 0 0 10px;
+  }
+
+
+.mam-account-selector {
+  width: 50px;
+  padding-top: 4px;
+}
+
+  .mam-account-selector a {
+    margin-left: 4px;
+    /*margin-top: 4px;*/
+  }
+
+  .mam-account-selector img {
+    width: 40px;
+    border-radius: 50%;
+  }
+
+#mam-account-add {
+  width: 50px;
+  /*height: 50px;*/
+
+  background-color: black;
+}
+
+#mam-account-add a {
+  font-size: 2em;
+  color: white;
+  text-decoration: none;
+  margin: 10px 0 0 15px;
 }

Mamoth/src/app/components/left-side-bar/left-side-bar.component.html

@@ -1,4 +1,18 @@
 <div id="mam-left-bar">
+  <div id="mam-create-toot">
+    <a href title="write toot!" (click)="createNewToot()">Toot!</a>
+  </div>
+
+  <div *ngFor="let account of accounts" class="mam-account-selector">
+    <a href title="{{ account.username }}" (click)="toogleAccount(account.id)"><img src="{{ account.avatar }}" /></a>
+  </div>
+
+  <div id="mam-account-add">
+    <a href title="add new account" (click)="addNewAccount()">+</a>
+  </div>
+
+
+
 
 
 </div>

Mamoth/src/app/components/left-side-bar/left-side-bar.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { AccountWrapper } from '../../models/account.models';
 
 @Component({
   selector: 'app-left-side-bar',
@@ -6,10 +7,35 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./left-side-bar.component.css']
 })
 export class LeftSideBarComponent implements OnInit {
+  accounts: AccountWrapper[] = [];
 
   constructor() { }
 
   ngOnInit() {
+
+    const acc1 = new AccountWrapper();
+    acc1.username = "@mastodon.social@Gargron";
+    acc1.avatar = "https://files.mastodon.social/accounts/avatars/000/000/001/original/4df197532c6b768c.png";
+    this.accounts.push(acc1);
+
+    const acc2 = new AccountWrapper();
+    acc2.username = "@mastodon.art@DearMsDearn";
+    acc2.avatar = "https://curate.mastodon.art/gallery/accounts/avatars/000/015/092/original/3a112863f2dd22a27764179912dc8984.gif";
+    this.accounts.push(acc2);
+
+
+
   }
 
+  toogleAccount(accountId: number): boolean {
+    return false;
+  }
+
+  addNewAccount(): boolean {
+    return false;
+  }
+
+  createNewToot(): boolean {
+    return false;
+  }
 }

Mamoth/src/app/components/streams-main-display/streams-main-display.component.css

@@ -4,5 +4,5 @@
   overflow-x: auto;
 
   background: blue;
-  outline: 1px dotted red;
+  /*outline: 1px dotted red;*/
 }

Mamoth/src/app/models/account.models.ts

@@ -0,0 +1,6 @@
+export class AccountWrapper {
+  id: number;
+  username: string;
+  display_name: string;
+  avatar: string;
+}