add fallback search to Brave, Google or Bing when no results

Author: 4drianMatei

frontend/angular.json

@@ -157,14 +157,5 @@
       }
     }
   },
-  "defaultProject": "bookmarks",
-  "schematics": {
-    "@schematics/angular:component": {
-      "prefix": "app",
-      "styleext": "scss"
-    },
-    "@schematics/angular:directive": {
-      "prefix": "app"
-    }
-  }
+  "defaultProject": "bookmarks"
 }

frontend/src/app/search-results/find-elsewhere/find-elsewhere.component.html

@@ -0,0 +1,27 @@
+<div class="find-elsewhere-options">
+  <span><i class="fa fa-search"></i> Find elsewhere</span>
+  <a
+    href="https://search.brave.com/search?q={{searchText}}"
+    class="btn btn-outline-secondary btn-sm  mr-3 mt-2 tag-list-header shadow-sm"
+    title="Find with Brave"
+    target="_blank"
+  >
+    Brave
+  </a>
+  <a
+    href="https://www.google.com/search?q={{searchText}}"
+    class="btn btn-outline-secondary btn-sm  mr-3 mt-2 tag-list-header shadow-sm"
+    title="Find with Google"
+    target="_blank"
+  >
+    Google
+  </a>
+  <a
+    href="https://www.bing.com/search?q={{searchText}}"
+    class="btn btn-outline-secondary btn-sm mr-3 mt-2 tag-list-header shadow-sm"
+    title="Find with Bing"
+    target="_blank"
+  >
+    Bing
+  </a>
+</div>

frontend/src/app/search-results/find-elsewhere/find-elsewhere.component.scss

@@ -0,0 +1,13 @@
+.find-elsewhere-options {
+  font-size: 1.05rem;
+  margin-top: 1rem;
+  padding-left: 2rem;
+  span {
+    margin-right: 1rem;
+  }
+  a {
+    display: inline;
+    vertical-align: middle;
+    font-size: 1.02rem;
+  }
+}

frontend/src/app/search-results/find-elsewhere/find-elsewhere.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FindElsewhereComponent } from './find-elsewhere.component';
+
+describe('FindElsewhereComponent', () => {
+  let component: FindElsewhereComponent;
+  let fixture: ComponentFixture<FindElsewhereComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FindElsewhereComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FindElsewhereComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/search-results/find-elsewhere/find-elsewhere.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-find-elsewhere',
+  templateUrl: './find-elsewhere.component.html',
+  styleUrls: ['./find-elsewhere.component.scss']
+})
+export class FindElsewhereComponent implements OnInit {
+
+  @Input()
+  searchText: any;
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/src/app/search-results/search-results.component.html

@@ -117,7 +117,7 @@
         </button>
         </span>
         <br/>
-        You can also try looking in other categories 👆👆
+        {{searchInOtherCategoriesTip}}
       </div>
       <ng-template #showPubliBookmarksResults>
         <app-async-bookmark-list
@@ -170,3 +170,6 @@
   </mat-tab>
 
 </mat-tab-group>
+
+<app-find-elsewhere *ngIf="(searchResults$ | async)?.length === 0 && currentPage === 1" [searchText]="searchText">
+</app-find-elsewhere>

frontend/src/app/search-results/search-results.component.ts

@@ -46,7 +46,7 @@ export class SearchResultsComponent implements OnInit, OnDestroy {
 
   searchTriggeredSubscription: any;
 
-  searchInOtherCategoriesTip = 'You can also try looking in other categories 👆👆';
+  searchInOtherCategoriesTip = 'You can also try looking in other sections 👆👆 OR ';
 
   constructor(private route: ActivatedRoute,
               private router: Router,

frontend/src/app/search-results/search-results.module.ts

@@ -5,6 +5,7 @@ import { MySnippetsModule } from '../my-snippets/my-snippets.module';
 import { SharedModule } from '../shared/shared.module';
 import { RouterModule, Routes } from '@angular/router';
 import { MatTabsModule } from '@angular/material/tabs';
+import { FindElsewhereComponent } from './find-elsewhere/find-elsewhere.component';
 
 const searchResultsRoutes: Routes = [
   {
@@ -14,7 +15,7 @@ const searchResultsRoutes: Routes = [
 ];
 
 @NgModule({
-  declarations: [SearchResultsComponent],
+  declarations: [SearchResultsComponent, FindElsewhereComponent],
   imports: [
     RouterModule.forChild(searchResultsRoutes),
     CommonModule,