From 66f5033cf0e7486f2f2ee75047867ae16e6c7147 Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild.matsson@gu.se>
Date: Wed, 13 Mar 2024 16:40:09 +0100
Subject: [PATCH] Frontpage component

---
 app/index.html                      |  1 +
 app/scripts/app.js                  |  1 +
 app/scripts/components/frontpage.ts | 35 +++++++++++++++++++++++++++++
 app/scripts/components/results.js   | 14 ------------
 tailwind.config.js                  |  2 +-
 5 files changed, 38 insertions(+), 15 deletions(-)
 create mode 100644 app/scripts/components/frontpage.ts

diff --git a/app/index.html b/app/index.html
index 613d16129..ed1cc3206 100644
--- a/app/index.html
+++ b/app/index.html
@@ -23,6 +23,7 @@ <h2>You need JavaScript to run Korp.</h2>
             <header></header>
             <div class="px-3 pb-3" id="content">
                 <searchtabs></searchtabs>
+                <frontpage></frontpage>
                 <results></results>
             </div>
         </div>
diff --git a/app/scripts/app.js b/app/scripts/app.js
index 3c12b4350..2c502fc55 100644
--- a/app/scripts/app.js
+++ b/app/scripts/app.js
@@ -35,6 +35,7 @@ import { textTabsComponent } from "./components/dynamic_tabs/text_tabs"
 import { headerComponent } from "./components/header"
 import { wordPictureComponent } from "./components/word_picture"
 import { searchtabsComponent } from "./components/searchtabs"
+import "./components/frontpage"
 import { resultsComponent } from "./components/results"
 import statemachine from "@/statemachine"
 
diff --git a/app/scripts/components/frontpage.ts b/app/scripts/components/frontpage.ts
new file mode 100644
index 000000000..7b0491aab
--- /dev/null
+++ b/app/scripts/components/frontpage.ts
@@ -0,0 +1,35 @@
+/** @format */
+import angular from "angular"
+
+export default angular.module("korpApp").component("frontpage", {
+    template: /* HTML */ `
+        <div ng-if="!$ctrl.hasResult()" class="my-4 flex justify-center">
+            <div ng-if="$ctrl.showDescription" class="max-w-screen-md text-lg">
+                <div
+                    ng-if="$root._settings['description']"
+                    ng-bind-html="$root._settings['description'] | locObj:lang | trust"
+                ></div>
+                <div ng-if="!$root._settings['description']">Default description</div>
+            </div>
+        </div>
+    `,
+    bindings: {},
+    controller: [
+        "$rootScope",
+        "searches",
+        function ($rootScope, searches) {
+            const $ctrl = this
+
+            $ctrl.hasResult = () =>
+                searches.activeSearch ||
+                $rootScope.compareTabs.length ||
+                $rootScope.graphTabs.length ||
+                $rootScope.mapTabs.length
+
+            $ctrl.showDescription = false
+
+            // Don't show the mode description until the inital corpora have been selected, to avoid text behind any modals
+            $rootScope.$on("initialcorpuschooserchange", () => ($ctrl.showDescription = true))
+        },
+    ],
+})
diff --git a/app/scripts/components/results.js b/app/scripts/components/results.js
index 4b9c3c1d3..2e7628c41 100644
--- a/app/scripts/components/results.js
+++ b/app/scripts/components/results.js
@@ -118,12 +118,6 @@ export const resultsComponent = {
                     </sidebar>
                 </div>
             </div>
-            <!-- mode description -->
-            <div
-                ng-if="!$ctrl.hasResult() && $ctrl.showDescription"
-                style="margin: 0 auto; width: 650px; margin-top: 70px"
-                ng-bind-html="$root._settings['description'] | locObj:lang | trust"
-            ></div>
         </div>
     `,
     bindings: {},
@@ -141,14 +135,6 @@ export const resultsComponent = {
                 $rootScope.compareTabs.length ||
                 $rootScope.graphTabs.length ||
                 $rootScope.mapTabs.length
-
-            $ctrl.showDescription = false
-
-            // Don't show the mode description until the inital corpora has been selected, to avoid text behind any modals
-            $rootScope.$on(
-                "initialcorpuschooserchange",
-                () => ($ctrl.showDescription = settings["description"] != undefined)
-            )
         },
     ],
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 43093d2e0..cf9f85513 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,7 @@
 module.exports = {
     // pug doesn't support special characters in class names, so no colon.
     separator: "_",
-    content: ["./app/**/*.js", "./app/**/*.html", "./app/**/*.pug"],
+    content: ["./app/**/*.js", "./app/**/*.ts", "./app/**/*.html"],
     theme: {
         extend: {
             colors: {