Core welcome tour functionality

src-ui/src/app/components/dashboard/dashboard.component.html

@@ -19,14 +19,14 @@
   </svg>
 </app-page-header>
 
-<div class='row'>
+<div class='row' tourAnchor="tour.dashboard">
   <div class="col-lg-8">
     <ng-container *ngIf="savedViewService.loading">
       <div class="spinner-border spinner-border-sm me-2" role="status"></div>
       <ng-container i18n>Loading...</ng-container>
     </ng-container>
 
-    <app-welcome-widget *ngIf="!savedViewService.loading && savedViewService.dashboardViews.length == 0"></app-welcome-widget>
+    <app-welcome-widget *ngIf="settingsService.offerTour()"></app-welcome-widget>
 
     <ng-container *ngFor="let v of savedViewService.dashboardViews">
       <app-saved-view-widget [savedView]="v"></app-saved-view-widget>

src-ui/src/app/components/dashboard/dashboard.component.ts

@@ -1,5 +1,4 @@
-import { Component, OnInit } from '@angular/core'
-import { Meta } from '@angular/platform-browser'
+import { Component } from '@angular/core'
 import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import { SettingsService } from 'src/app/services/settings.service'
 
@@ -16,9 +15,9 @@ export class DashboardComponent {
 
   get subtitle() {
     if (this.settingsService.displayName) {
-      return $localize`Hello ${this.settingsService.displayName}, welcome to Paperless-ngx!`
+      return $localize`Hello ${this.settingsService.displayName}, welcome to Paperless-ngx`
     } else {
-      return $localize`Welcome to Paperless-ngx!`
+      return $localize`Welcome to Paperless-ngx`
     }
   }
 }

src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html

@@ -1,16 +1,10 @@
-<app-widget-frame title="First steps" i18n-title>
-
-  <ng-container content>
-    <img src="assets/save-filter.png" class="float-right">
-    <p i18n>Paperless is running! :)</p>
-    <p i18n>You can start uploading documents by dropping them in the file upload box to the right or by dropping them in the configured consumption folder and they'll start showing up in the documents list.
-      After you've added some metadata to your documents, use the filtering mechanisms of paperless to create custom views (such as 'Recently added', 'Tagged TODO') and they will appear on the dashboard instead of this message.</p>
-    <p i18n>Paperless offers some more features that try to make your life easier:</p>
-    <ul>
-      <li i18n>Once you've got a couple documents in paperless and added metadata to them, paperless can assign that metadata to new documents automatically.</li>
-      <li i18n>You can configure paperless to read your mails and add documents from attached files.</li>
-    </ul>
-    <p i18n>Consult the documentation on how to use these features. The section on basic usage also has some information on how to use paperless in general.</p>
-  </ng-container>
-
-</app-widget-frame>
+<ngb-alert type="primary" [dismissible]="false">
+  <!-- [dismissible]="isFinished(status)" (closed)="dismiss(status)" -->
+  <h4 class="alert-heading" i18n>Paperless-ngx is running!</h4>
+  <p i18n>You're ready to start uploading documents! Feel free to explore the various features or start a quick tour using the button below.</p>
+  <p i18n>More detail on how to use and configure paperless is always available in the <a href="https://paperless-ngx.readthedocs.io" target="_blank">documentation</a>.</p>
+  <hr>
+  <div class="btn-toolbar" role="toolbar" aria-label="Controls">
+    <button class="btn btn-primary ms-auto" (click)="tourService.start()"><ng-container i18n>Start Tour</ng-container> &rarr;</button>
+  </div>
+</ngb-alert>

src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core'
+import { TourService } from 'ngx-ui-tour-ng-bootstrap'
 
 @Component({
   selector: 'app-welcome-widget',
@@ -6,7 +7,7 @@ import { Component, OnInit } from '@angular/core'
   styleUrls: ['./welcome-widget.component.scss'],
 })
 export class WelcomeWidgetComponent implements OnInit {
-  constructor() {}
+  constructor(public readonly tourService: TourService) {}
 
   ngOnInit(): void {}
 }