name refactoring and better column selection links (wider)

src/app/app.module.ts

@@ -27,7 +27,7 @@ import { NavigationService } from "./services/navigation.service";
 import { FloatingColumnComponent } from './components/floating-column/floating-column.component';
 import { ColumnsEditorComponent } from './components/floating-column/columns-editor/columns-editor.component';
 import { MessageEditorComponent } from './components/floating-column/message-editor/message-editor.component';
-import { ColumnsState } from "./states/panels.state";
+import { StreamsState } from "./states/streams.state";
 
 const routes: Routes = [
   { path: "", redirectTo: "home", pathMatch: "full" },
@@ -61,7 +61,7 @@ const routes: Routes = [
     NgxsModule.forRoot([
       RegisteredAppsState,
       AccountsState,
-      ColumnsState
+      StreamsState
     ]),
     NgxsStoragePluginModule.forRoot()
   ],

src/app/components/floating-column/columns-editor/columns-editor.component.html

@@ -1,8 +1,8 @@
 <div class="column-editor">
   <p>adding columns from: {{ username }} </p>
 
-  <a class="add-column__link" href *ngFor="let col of availableColumns" (click)="addColumn(col)">
-      {{ col.name }}
+  <a class="add-column__link" href *ngFor="let stream of availableStreams" (click)="addStream(stream)">
+      {{ stream.name }}
   </a>
   <!-- <a class="add-column__link" href>
     Global Timeline

src/app/components/floating-column/columns-editor/columns-editor.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { ColumnElement, StreamTypeEnum, AddColumn } from '../../../states/panels.state';
+import { StreamElement, StreamTypeEnum, AddStream } from '../../../states/streams.state';
 import { Store } from '@ngxs/store';
 
 @Component({
@@ -10,23 +10,21 @@ import { Store } from '@ngxs/store';
 export class ColumnsEditorComponent implements OnInit {
   @Input() username: string;
 
-  availableColumns: ColumnElement[] = [];
+  availableStreams: StreamElement[] = [];
 
   constructor(private readonly store: Store) { }
 
   ngOnInit() {
-    this.availableColumns.length = 0;
+    this.availableStreams.length = 0;
 
-    this.availableColumns.push(new ColumnElement(StreamTypeEnum.global, 'Global Timeline', this.username));
-    this.availableColumns.push(new ColumnElement(StreamTypeEnum.local, 'Local Timeline', this.username));
-    this.availableColumns.push(new ColumnElement(StreamTypeEnum.personnal, 'Personnal Timeline', this.username));
+    this.availableStreams.push(new StreamElement(StreamTypeEnum.global, 'Global Timeline', this.username));
+    this.availableStreams.push(new StreamElement(StreamTypeEnum.local, 'Local Timeline', this.username));
+    this.availableStreams.push(new StreamElement(StreamTypeEnum.personnal, 'Personnal Timeline', this.username));
   }
 
-  addColumn(column: ColumnElement): boolean {
-    console.warn('addColumn');
-    console.warn(column);
-    if (column) {
-      this.store.dispatch([new AddColumn(column)]);
+  addStream(stream: StreamElement): boolean {
+    if (stream) {
+      this.store.dispatch([new AddStream(stream)]);
     }
     return false;
   }

src/app/components/streams-selection-footer/streams-selection-footer.component.html

@@ -1,3 +1,5 @@
 <div class="streams-selection-footer">
-  <a class="stream-selection" *ngFor="let col of columns" href ></a>
+  <a class="stream-selection" *ngFor="let str of streams" href >
+    <span class="stream-selection__column-reprensentation"></span>
+  </a>
 </div>

src/app/components/streams-selection-footer/streams-selection-footer.component.scss

@@ -10,16 +10,20 @@
 
 .stream-selection {
   display: inline-block;
-  width: 5px;
-  height: 22px;
-  background-color:$font-link-primary;
+  width: 9px;
+  padding: 4px 5px 0 5px;
+  height: 30px;
+  
+  &__column-reprensentation {
+    display: inline-block;
+    width: 5px;
+    height: 22px;
+    background-color:$font-link-primary;
 
-  &:not(:last-child) {
-    margin: 4px 5px 0 0;
+   
   }
 
-  &:hover {
+  &:hover  &__column-reprensentation{
     background-color:$font-link-primary-hover;
   }
-
 }

src/app/components/streams-selection-footer/streams-selection-footer.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
-import { ColumnElement } from '../../states/panels.state';
+import { StreamElement } from '../../states/streams.state';
 import { Store } from '@ngxs/store';
 
 @Component({
@@ -9,16 +9,16 @@ import { Store } from '@ngxs/store';
   styleUrls: ['./streams-selection-footer.component.scss']
 })
 export class StreamsSelectionFooterComponent implements OnInit {
-  columns: ColumnElement[];
-  private columns$: Observable<ColumnElement[]>;
+  streams: StreamElement[] = [];
+  private streams$: Observable<StreamElement[]>;
 
   constructor(private readonly store: Store) { 
-    this.columns$ = this.store.select(state => state.columnsstatemodel.columns);
+    this.streams$ = this.store.select(state => state.streamsstatemodel.streams);
   }
 
   ngOnInit() {
-    this.columns$.subscribe((columns: ColumnElement[]) => {
-      this.columns = columns;
+    this.streams$.subscribe((streams: StreamElement[]) => {
+     this.streams = streams;
     });
   }
 

src/app/models/stream.models.ts

@@ -6,7 +6,7 @@ import { AccountWrapper } from "./account.models";
 import { ApiRoutes } from "../services/models/api.settings";
 import { Account, Status } from "../services/models/mastodon.interfaces";
 import { StreamingService, StreamingWrapper } from "../services/streaming.service";
-import { StreamTypeEnum } from "../states/panels.state";
+import { StreamTypeEnum } from "../states/streams.state";
 
 export class Stream {
   private apiRoutes = new ApiRoutes();

src/app/pages/streams-main-display/streams-main-display.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit, OnDestroy } from "@angular/core";
 
 import { Stream } from "../../models/stream.models";
 import { Observable, Subscription } from "rxjs";
-import { ColumnElement } from "../../states/panels.state";
+import { StreamElement } from "../../states/streams.state";
 import { Store } from "@ngxs/store";
 import { Http } from "@angular/http";
 
@@ -16,21 +16,21 @@ export class StreamsMainDisplayComponent implements OnInit, OnDestroy {
 
   streams: Stream[] = [];
 
-  private columns$: Observable<ColumnElement[]>;
-  private columnsStateSub: Subscription;
+  private streams$: Observable<StreamElement[]>;
+  private streamsStateSub: Subscription;
   
   constructor(
     private readonly http: Http,
     private readonly store: Store) {
-    this.columns$ = this.store.select(state => state.columnsstatemodel.columns);
+    this.streams$ = this.store.select(state => state.streamsstatemodel.streams);
   }
 
   ngOnInit() {
 
-    this.columnsStateSub = this.columns$.subscribe((columns: ColumnElement[]) => {
+    this.streamsStateSub = this.streams$.subscribe((streams: StreamElement[]) => {
       this.streams.length = 0;
-      for (const column of columns) {
-        const newStream = new Stream(this.http, column.name, column.type);
+      for (const stream of streams) {
+        const newStream = new Stream(this.http, stream.name, stream.type);
         this.streams.push(newStream);
       }
 
@@ -49,7 +49,7 @@ export class StreamsMainDisplayComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.columnsStateSub.unsubscribe();
+    this.streamsStateSub.unsubscribe();
   }
 
 }

src/app/states/panels.state.ts

@@ -1,44 +0,0 @@
-import { State, Action, StateContext } from '@ngxs/store';
-
-export class AddColumn {
-    static readonly type = '[Columns] Add column';
-    constructor(public column: ColumnElement) {}
-}
-
-export interface ColumnsStateModel {
-    columns: ColumnElement[];
-}
-
-@State<ColumnsStateModel>({
-    name: 'columnsstatemodel',
-    defaults: {
-        columns: []
-    }
-})
-export class ColumnsState {
-    @Action(AddColumn)
-    AddColumn(ctx: StateContext<ColumnsStateModel>, action: AddColumn) {
-        const state = ctx.getState();
-        ctx.patchState({
-            columns: [...state.columns, action.column]
-        });
-    }
-}
-
-export class ColumnElement {
-    constructor(public type: StreamTypeEnum, public name: string, public username: string) {
-      
-    }
-  }
-  
-  export enum StreamTypeEnum {
-    unknown = 0,
-    global = 1,
-    local = 2,
-    personnal = 3,
-    favorites = 4,
-    activity = 5,
-    list = 6,
-    directmessages = 7, 
-  }
-  

src/app/states/streams.state.ts

@@ -0,0 +1,44 @@
+import { State, Action, StateContext } from '@ngxs/store';
+
+export class AddStream {
+    static readonly type = '[Streams] Add stream';
+    constructor(public stream: StreamElement) {}
+}
+
+export interface StreamsStateModel {
+    streams: StreamElement[];
+}
+
+@State<StreamsStateModel>({
+    name: 'streamsstatemodel',
+    defaults: {
+        streams: []
+    }
+})
+export class StreamsState {
+    @Action(AddStream)
+    AddStream(ctx: StateContext<StreamsStateModel>, action: AddStream) {
+        const state = ctx.getState();
+        ctx.patchState({
+            streams: [...state.streams, action.stream]
+        });
+    }
+}
+
+export class StreamElement {
+    constructor(public type: StreamTypeEnum, public name: string, public username: string) {
+      
+    }
+  }
+  
+  export enum StreamTypeEnum {
+    unknown = 0,
+    global = 1,
+    local = 2,
+    personnal = 3,
+    favorites = 4,
+    activity = 5,
+    list = 6,
+    directmessages = 7, 
+  }
+