Reorganize the UI into sections to make it a bit clearer on what everthing is

config/integrations/customwidget.yaml

@@ -2,6 +2,6 @@
 type: "widget"
 integrationType: "customwidget"
 enabled: true
-name: "Custom Widget"
+name: "Custom Widgets"
 about: "A webpage embedded in the room."
 avatar: "img/avatars/customwidget.png"

web/app/app.module.ts

@@ -23,6 +23,7 @@ import { IrcConfigComponent } from "./configs/irc/irc-config.component";
 import { IrcApiService } from "./shared/irc-api.service";
 import { TravisCiConfigComponent } from "./configs/travisci/travisci-config.component";
 import { CustomWidgetConfigComponent } from "./configs/widget/custom_widget/custom_widget-config.component";
+import { MyFilterPipe } from "./shared/my-filter.pipe";
 
 @NgModule({
     imports: [
@@ -47,6 +48,7 @@ import { CustomWidgetConfigComponent } from "./configs/widget/custom_widget/cust
         IrcConfigComponent,
         TravisCiConfigComponent,
         CustomWidgetConfigComponent,
+        MyFilterPipe,
 
         // Vendor
     ],

web/app/riot/riot.component.html

@@ -7,11 +7,51 @@
         <p><i class="fa fa-circle-o-notch fa-spin"></i> Loading...</p>
     </div>
     <div *ngIf="!error && !loading">
-        <h3>Manage Integrations</h3>
+
-        <p>Turn on anything you like. If an integration has some special configuration, it will have a configuration
+        <!-- ------------------------ -->
-            icon next to it.</p>
+        <!-- WIDGETS                  -->
+        <!-- ------------------------ -->
+        <h4>
+            Widgets <i class="fa fa-question-circle text-info" style="font-size: 15px;" placement="bottom"
+                       ngbTooltip="Widgets add small apps to Riot, like Google Docs, Jitsi conferences, and YouTube videos"></i>
+        </h4>
         <div class="integration-container">
-            <my-integration *ngFor="let integration of integrations"
+            <my-integration *ngFor="let integration of integrations | myfilter:'type':'widget'"
+                            [integration]="integration"
+                            [roomId]="roomId"
+                            [scalarToken]="scalarToken"
+                            (updated)="updateIntegration(integration)"></my-integration>
+        </div>
+
+        <!-- ------------------------ -->
+        <!-- BOTS                     -->
+        <!-- ------------------------ -->
+        <h4>
+            Bots <i class="fa fa-question-circle text-info" style="font-size: 15px;" placement="bottom"
+                    ngbTooltip="Bots can provide entertainment or some utility to your room"></i>
+        </h4>
+        <div class="integration-container">
+            <my-integration *ngFor="let integration of integrations | myfilter:'type':'bot'"
+                            [integration]="integration"
+                            [roomId]="roomId"
+                            [scalarToken]="scalarToken"
+                            (updated)="updateIntegration(integration)"></my-integration>
+            <my-integration *ngFor="let integration of integrations | myfilter:'type':'complex-bot'"
+                            [integration]="integration"
+                            [roomId]="roomId"
+                            [scalarToken]="scalarToken"
+                            (updated)="updateIntegration(integration)"></my-integration>
+        </div>
+
+        <!-- ------------------------ -->
+        <!-- BRIDGES                  -->
+        <!-- ------------------------ -->
+        <h4>
+            Bridges <i class="fa fa-question-circle text-info" style="font-size: 15px;" placement="bottom"
+                       ngbTooltip="Bridges allow people on other platforms to talk in the room"></i>
+        </h4>
+        <div class="integration-container">
+            <my-integration *ngFor="let integration of integrations | myfilter:'type':'bridge'"
                             [integration]="integration"
                             [roomId]="roomId"
                             [scalarToken]="scalarToken"

web/app/riot/riot.component.scss

@@ -2,6 +2,7 @@
 .integration-container {
   display: flex;
   flex-wrap: wrap;
+  margin-bottom: 20px;
 }
 
 #wrapper {
@@ -9,6 +10,11 @@
 }
 
 my-scalar-close {
-  float: right;
+  position: fixed;
-  margin: -15px;
+  top: 15px;
+  right: 15px;
+}
+
+h4 {
+  margin-left: 5px;
 }

web/app/shared/my-filter.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+    name: 'myfilter',
+    pure: false
+})
+export class MyFilterPipe implements PipeTransform {
+    transform(items: any[], field: string, value: string): any[] {
+        if (!items) return [];
+        if (!value || value.length == 0) return items;
+        return items.filter(it => it[field].toLowerCase() === value.toLowerCase());
+    }
+}