Improve "no stickers" view

Fixes https://github.com/turt2live/matrix-dimension/issues/186

web/app/shared/registry/integrations.registry.ts

@@ -5,7 +5,7 @@ import {
     WIDGET_GOOGLE_CALENDAR,
     WIDGET_GOOGLE_DOCS,
     WIDGET_GRAFANA,
-    WIDGET_JITSI, WIDGET_SPOTIFY,
+    WIDGET_JITSI, WIDGET_SPOTIFY, WIDGET_STICKER_PICKER,
     WIDGET_TRADINGVIEW,
     WIDGET_TWITCH,
     WIDGET_YOUTUBE
@@ -59,6 +59,9 @@ export class IntegrationsRegistry {
             "spotify": {
                 types: WIDGET_SPOTIFY,
             },
+            "stickerpicker": {
+                types: WIDGET_STICKER_PICKER,
+            },
         },
     };
 

web/app/shared/services/scalar/scalar-widget.api.ts

@@ -71,6 +71,15 @@ export class ScalarWidgetApi {
         });
     }
 
+    public static openIntegrationManager(integrationType: string, integrationId: string): void {
+        ScalarWidgetApi.callAction("integration_manager_open", {
+            data: {
+                integType: integrationType,
+                integId: integrationId,
+            },
+        });
+    }
+
     private static callAction(action, payload) {
         if (!window.opener) {
             return;

web/app/widget-wrappers/sticker-picker/sticker-picker.component.html

@@ -10,8 +10,9 @@
     </div>
     <div class="sticker-picker" *ngIf="!isLoading && !authError">
         <div class="no-stickers" *ngIf="!packs || packs.length === 0">
-            You have no sticker packs.
+            <img src="/img/no_stickers.png" />
-            <!-- TODO: Open integrations manager -->
+            <span class="message">You have no sticker packs.</span>
+            <button class="btn btn-link btn-sm" (click)="openIntegrationManager()">Add some stickers</button>
         </div>
         <div class="sticker-pack" *ngFor="let pack of packs trackById">
             <div class="header">

web/app/widget-wrappers/sticker-picker/sticker-picker.component.scss

@@ -29,6 +29,21 @@
     color: themed(stickerPickerErrorColor);
   }
 
+  .no-stickers {
+    text-align: center;
+
+    img {
+      width: 96px;
+      height: 96px;
+      margin-top: 20px;
+      margin-bottom: 15px;
+    }
+
+    .message {
+      display: block;
+    }
+  }
+
   .sticker-picker {
     margin: 15px 15px 30px;
 

web/app/widget-wrappers/sticker-picker/sticker-picker.component.ts

@@ -8,6 +8,7 @@ import { SessionStorage } from "../../shared/SessionStorage";
 import { ScalarServerApiService } from "../../shared/services/scalar/scalar-server-api.service";
 import { FE_Sticker, FE_UserStickerPack } from "../../shared/models/integration";
 import { MediaService } from "../../shared/services/media.service";
+import { WIDGET_STICKER_PICKER } from "../../shared/models/widget";
 
 @Component({
     selector: "my-generic-widget-wrapper",
@@ -100,4 +101,8 @@ export class StickerPickerWidgetWrapperComponent extends CapableWidget implement
     public sendSticker(sticker: FE_Sticker, pack: FE_UserStickerPack) {
         ScalarWidgetApi.sendSticker(sticker, pack);
     }
+
+    public openIntegrationManager() {
+        ScalarWidgetApi.openIntegrationManager(WIDGET_STICKER_PICKER[0], ScalarWidgetApi.widgetId);
+    }
 }