From 935b55bc407bc5486d328a35450e80920b46a743 Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild.matsson@gu.se>
Date: Fri, 5 Apr 2024 15:04:59 +0200
Subject: [PATCH 01/12] Restructure corpus overview, fix #115, fix #154

---
 CHANGELOG.md                                  |  10 ++
 src/api/backend.composable.ts                 |   8 +-
 src/components/LayoutBox.vue                  |   3 +-
 src/corpus/CorpusOverview.vue                 |  28 +++--
 src/corpus/analysis/AnalysisPanel.vue         | 106 +++++++++++++++++
 src/corpus/config/ConfigPanel.vue             |   2 +-
 src/corpus/explore/ExplorePanel.vue           |  81 +++++++++++++
 src/corpus/{exports => explore}/ToolPanel.vue |  11 +-
 src/corpus/exports/ExportsPanel.vue           | 110 ------------------
 src/corpus/job/JobStatus.vue                  |  55 +++------
 src/fontawesome.ts                            |   2 +
 src/i18n/locales/en.yaml                      |  11 +-
 src/i18n/locales/sv.yaml                      |  11 +-
 src/spin/PendingContent.vue                   |  14 ++-
 src/util.test.ts                              |  16 +++
 src/util.ts                                   |   3 +
 16 files changed, 292 insertions(+), 179 deletions(-)
 create mode 100644 src/corpus/analysis/AnalysisPanel.vue
 create mode 100644 src/corpus/explore/ExplorePanel.vue
 rename src/corpus/{exports => explore}/ToolPanel.vue (80%)
 delete mode 100644 src/corpus/exports/ExportsPanel.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4496a5f..c967fa8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,16 @@ As this project is a user-facing application, the places in the semantic version
 
 ## [Unreleased]
 
+### Changed
+
+- Restructured panels on corpus overview to better match backend concepts:
+  - New _Analysis_ panel with the run button from _Status_ and the downloads from _Results_
+  - Renamed _Result_ to _Explore_ [#115](https://github.com/spraakbanken/mink-frontend/issues/115)
+
+### Fixed
+
+- Clarify that data installed in tools is outdated after annotation re-run [#154](https://github.com/spraakbanken/mink-frontend/issues/154)
+
 ## [1.5.0] (2024-04-23)
 
 ### Added
diff --git a/src/api/backend.composable.ts b/src/api/backend.composable.ts
index efe4ced..81ef89a 100644
--- a/src/api/backend.composable.ts
+++ b/src/api/backend.composable.ts
@@ -65,16 +65,16 @@ export default function useMinkBackend() {
   const resourceInfoAll = () => spin(api.resourceInfoAll(), "corpora");
 
   const resourceInfoOne = (corpusId: string) =>
-    spin(api.resourceInfoOne(corpusId), `corpus/${corpusId}/job`);
+    spin(api.resourceInfoOne(corpusId), `corpus/${corpusId}/info`);
 
   const runJob = (corpusId: string) =>
     spin(api.runSparv(corpusId), `corpus/${corpusId}/job`);
 
   const installKorp = (corpusId: string) =>
-    spin(api.installKorp(corpusId), `corpus/${corpusId}/job`);
+    spin(api.installKorp(corpusId), `corpus/${corpusId}/install/korp`);
 
   const installStrix = (corpusId: string) =>
-    spin(api.installStrix(corpusId), `corpus/${corpusId}/job`);
+    spin(api.installStrix(corpusId), `corpus/${corpusId}/install/strix`);
 
   const abortJob = (corpusId: string) =>
     spin(api.abortJob(corpusId), `corpus/${corpusId}/job`);
@@ -83,7 +83,7 @@ export default function useMinkBackend() {
     spin(api.listExports(corpusId), `corpus/${corpusId}/exports`);
 
   const downloadExports = (corpusId: string) =>
-    spin(api.downloadExports(corpusId), `corpus/${corpusId}/exports`);
+    spin(api.downloadExports(corpusId), `corpus/${corpusId}/exports/download`);
 
   const downloadExportFiles = (corpusId: string, filename: string) =>
     spin(
diff --git a/src/components/LayoutBox.vue b/src/components/LayoutBox.vue
index b399cc4..f16e938 100644
--- a/src/components/LayoutBox.vue
+++ b/src/components/LayoutBox.vue
@@ -6,7 +6,7 @@ defineProps<{
 
 <template>
   <section
-    class="border rounded p-2 bg-white dark:bg-zinc-900 dark:border-zinc-700"
+    class="relative border rounded p-2 bg-white dark:bg-zinc-900 dark:border-zinc-700 overflow-hidden"
   >
     <div class="flex justify-between mb-2">
       <h2 v-if="title" class="text-xl font-semibold uppercase">{{ title }}</h2>
@@ -14,6 +14,7 @@ defineProps<{
         <slot name="controls" />
       </div>
     </div>
+
     <slot />
   </section>
 </template>
diff --git a/src/corpus/CorpusOverview.vue b/src/corpus/CorpusOverview.vue
index 3ca3c28..db01f00 100644
--- a/src/corpus/CorpusOverview.vue
+++ b/src/corpus/CorpusOverview.vue
@@ -4,7 +4,8 @@ import { useCorpusState } from "@/corpus/corpusState.composable";
 import ConfigPanel from "@/corpus/config/ConfigPanel.vue";
 import SourcesPanel from "@/corpus/sources/SourcesPanel.vue";
 import JobStatus from "@/corpus/job/JobStatus.vue";
-import ExportsPanel from "@/corpus/exports/ExportsPanel.vue";
+import AnalysisPanel from "@/corpus/analysis/AnalysisPanel.vue";
+import ExplorePanel from "@/corpus/explore/ExplorePanel.vue";
 import CorpusStateHelp from "@/corpus/CorpusStateHelp.vue";
 import RouteButton from "@/components/RouteButton.vue";
 import LayoutBox from "@/components/LayoutBox.vue";
@@ -14,13 +15,13 @@ const { isNeedingConfig, isNeedingMeta } = useCorpusState(corpusId);
 </script>
 
 <template>
-  <div class="flex flex-wrap">
+  <div class="flex flex-wrap gap-4">
     <div class="w-full">
       <CorpusStateHelp />
     </div>
 
-    <div class="w-full lg:w-1/2 lg:pr-2">
-      <LayoutBox :title="$t('configuration')" class="mb-4">
+    <div class="w-96 grow flex flex-col gap-4">
+      <LayoutBox :title="$t('settings')">
         <ConfigPanel />
         <template #controls>
           <RouteButton
@@ -32,22 +33,27 @@ const { isNeedingConfig, isNeedingMeta } = useCorpusState(corpusId);
           </RouteButton>
         </template>
       </LayoutBox>
+
+      <LayoutBox :title="$t('texts')">
+        <SourcesPanel />
+      </LayoutBox>
     </div>
 
-    <div class="w-full lg:w-1/2 lg:pl-2">
+    <div class="w-96 grow flex flex-col gap-4">
       <LayoutBox
         :title="$t('job.status')"
-        class="mb-4 bg-zinc-700 text-zinc-300 dark:bg-zinc-600"
+        class="bg-zinc-700 text-zinc-300 dark:bg-zinc-600"
       >
         <JobStatus />
       </LayoutBox>
 
-      <LayoutBox :title="$t('result')" class="mb-4">
-        <ExportsPanel />
+      <LayoutBox :title="$t('analysis')">
+        <AnalysisPanel />
+      </LayoutBox>
+
+      <LayoutBox :title="$t('tools')">
+        <ExplorePanel />
       </LayoutBox>
     </div>
   </div>
-  <LayoutBox :title="$t('texts')">
-    <SourcesPanel />
-  </LayoutBox>
 </template>
diff --git a/src/corpus/analysis/AnalysisPanel.vue b/src/corpus/analysis/AnalysisPanel.vue
new file mode 100644
index 0000000..9dcee2b
--- /dev/null
+++ b/src/corpus/analysis/AnalysisPanel.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import useCorpusIdParam from "../corpusIdParam.composable";
+import { useCorpusState } from "../corpusState.composable";
+import useExports from "../exports/exports.composable";
+import useJob from "../job/job.composable";
+import ActionButton from "@/components/ActionButton.vue";
+import PendingContent from "@/spin/PendingContent.vue";
+
+const corpusId = useCorpusIdParam();
+const { runJob, jobState, isJobRunning } = useJob(corpusId);
+const { canBeReady } = useCorpusState(corpusId);
+const { exports, loadExports, downloadResult, getDownloadFilename } =
+  useExports(corpusId);
+const { isDone } = useCorpusState(corpusId);
+
+const isPending = ref(false);
+const canRun = computed(
+  () => canBeReady.value && !isPending.value && !isJobRunning.value,
+);
+
+loadExports();
+
+async function doRunJob() {
+  isPending.value = true;
+  await runJob();
+  isPending.value = false;
+}
+
+// When a job finishes, show download button.
+watch(isDone, () => {
+  if (isDone.value) {
+    loadExports();
+  }
+});
+</script>
+
+<template>
+  <div>
+    <PendingContent
+      :on="`corpus/${corpusId}/job`"
+      class="flex flex-wrap gap-3 items-baseline"
+    >
+      <i18n-t keypath="analysis.help" scope="global" tag="p">
+        <template #sparv>
+          <a :href="$t('analysis.sparv.url')">Sparv</a>
+        </template>
+      </i18n-t>
+
+      <ActionButton
+        :disabled="isJobRunning || !canRun"
+        :class="{ 'button-primary': !exports?.length }"
+        @click="!isJobRunning && canRun ? doRunJob() : null"
+      >
+        <icon :icon="['fas', 'gears']" class="mr-1" />
+        {{ !exports?.length ? $t("job.run") : $t("job.rerun") }}
+      </ActionButton>
+
+      <div>
+        <div v-if="!isJobRunning && exports?.length" class="text-sm">
+          <icon icon="circle-info" /> {{ $t("job.rerun.overwrite") }}
+        </div>
+
+        <div
+          v-if="
+            !isJobRunning &&
+            (jobState?.korp == 'done' || jobState?.strix == 'done')
+          "
+          class="text-sm"
+        >
+          <icon icon="circle-info" /> {{ $t("job.rerun.tools_outdated") }}
+        </div>
+      </div>
+    </PendingContent>
+
+    <div class="mt-4">
+      <h3 class="text-lg uppercase">{{ $t("download") }}</h3>
+      <p>{{ $t("exports.download.help") }}</p>
+
+      <table v-if="exports?.length">
+        <tr>
+          <th>{{ $t("file.archive") }}</th>
+          <td>
+            <PendingContent :on="`corpus/${corpusId}/exports/download`">
+              <ActionButton class="button-primary" @click="downloadResult">
+                <icon :icon="['fas', 'download']" class="mr-1" />
+                {{ getDownloadFilename() }}
+              </ActionButton>
+            </PendingContent>
+          </td>
+        </tr>
+        <tr>
+          <th>{{ $t("file.singles") }}</th>
+          <td>
+            <router-link :to="`/library/corpus/${corpusId}/exports`">
+              {{ $t("show") }}...
+            </router-link>
+          </td>
+        </tr>
+      </table>
+      <p v-else class="opacity-70 italic">
+        {{ $t("exports.download.placeholder") }}
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/src/corpus/config/ConfigPanel.vue b/src/corpus/config/ConfigPanel.vue
index 44ab056..d050c77 100644
--- a/src/corpus/config/ConfigPanel.vue
+++ b/src/corpus/config/ConfigPanel.vue
@@ -39,7 +39,7 @@ const { th } = useLocale();
 
       <tr>
         <td colspan="2">
-          <h3 class="text-lg uppercase my-2">{{ $t("settings") }}</h3>
+          <h3 class="text-lg uppercase my-2">{{ $t("analysis") }}</h3>
         </td>
       </tr>
       <tr>
diff --git a/src/corpus/explore/ExplorePanel.vue b/src/corpus/explore/ExplorePanel.vue
new file mode 100644
index 0000000..2fb0353
--- /dev/null
+++ b/src/corpus/explore/ExplorePanel.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import useExports from "@/corpus/exports/exports.composable";
+import ToolPanel from "@/corpus/explore/ToolPanel.vue";
+import { ensureTrailingSlash } from "@/util";
+import useCorpusIdParam from "@/corpus/corpusIdParam.composable";
+import { useCorpusState } from "@/corpus/corpusState.composable";
+import useJob from "@/corpus/job/job.composable";
+import PendingContent from "@/spin/PendingContent.vue";
+import useLocale from "@/i18n/locale.composable";
+
+const corpusId = useCorpusIdParam();
+const { exports, loadExports } = useExports(corpusId);
+const { isDone } = useCorpusState(corpusId);
+const { installKorp, installStrix, jobState } = useJob(corpusId);
+const { locale3 } = useLocale();
+
+const korpUrl = ensureTrailingSlash(import.meta.env.VITE_KORP_URL);
+const strixUrl = ensureTrailingSlash(import.meta.env.VITE_STRIX_URL);
+
+const isInstallPending = ref(false);
+const canInstall = computed(
+  () =>
+    !!exports.value?.length &&
+    !!jobState.value &&
+    !["waiting", "running"].includes(jobState.value.korp) &&
+    !["waiting", "running"].includes(jobState.value.strix) &&
+    !isInstallPending.value,
+);
+
+loadExports();
+
+async function korpInstall() {
+  isInstallPending.value = true;
+  await installKorp();
+  isInstallPending.value = false;
+}
+
+async function strixInstall() {
+  isInstallPending.value = true;
+  await installStrix();
+  isInstallPending.value = false;
+}
+
+// When a job finishes, show download button.
+watch(isDone, () => {
+  if (isDone.value) {
+    loadExports();
+  }
+});
+</script>
+
+<template>
+  <p>{{ $t("exports.tools.help") }}</p>
+  <PendingContent
+    :on="`corpus/${corpusId}/exports`"
+    class="grid xl:grid-cols-2 gap-4 mt-4"
+  >
+    <ToolPanel
+      name="Korp"
+      :spin-token="`corpus/${corpusId}/install/korp`"
+      :info="$t('exports.tools.help.korp')"
+      :link-url="$t('exports.tools.help.korp.manual.url')"
+      :link-text="$t('exports.tools.help.korp.manual.text')"
+      :can-install="canInstall"
+      :is-installed="jobState?.korp == 'done'"
+      :show-url="`${korpUrl}?mode=mink#?corpus=${corpusId}&lang=${locale3}`"
+      @install="korpInstall()"
+    />
+
+    <ToolPanel
+      name="Strix"
+      :spin-token="`corpus/${corpusId}/install/strix`"
+      :info="$t('exports.tools.help.strix')"
+      :can-install="canInstall"
+      :is-installed="jobState?.strix == 'done'"
+      :show-url="`${strixUrl}?modeSelected=mink&filters=corpus_id:${corpusId}&lang=${locale3}`"
+      @install="strixInstall()"
+    />
+  </PendingContent>
+</template>
diff --git a/src/corpus/exports/ToolPanel.vue b/src/corpus/explore/ToolPanel.vue
similarity index 80%
rename from src/corpus/exports/ToolPanel.vue
rename to src/corpus/explore/ToolPanel.vue
index 112347b..8199ba0 100644
--- a/src/corpus/exports/ToolPanel.vue
+++ b/src/corpus/explore/ToolPanel.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import ActionButton from "@/components/ActionButton.vue";
 import UrlButton from "@/components/UrlButton.vue";
+import PendingContent from "@/spin/PendingContent.vue";
 
 defineProps<{
   name: string;
+  spinToken: string;
   info: string;
   canInstall?: boolean;
   isInstalled?: boolean;
@@ -17,11 +19,11 @@ defineEmits<{
 </script>
 
 <template>
-  <div class="flex flex-col gap-2 my-4">
+  <PendingContent :on="spinToken" class="flex flex-col gap-2">
     <div class="flex flex-wrap gap-2 justify-between items-baseline">
       <h3 class="font-bold">{{ name }}</h3>
 
-      <div class="flex gap-2 justify-end">
+      <div class="flex gap-2 justify-end items-baseline">
         <ActionButton
           :disabled="!canInstall"
           class="whitespace-nowrap"
@@ -39,11 +41,12 @@ defineEmits<{
         </ActionButton>
 
         <UrlButton
+          v-if="isInstalled"
           :href="showUrl"
           target="_blank"
-          :disabled="!isInstalled"
           class="button-primary"
         >
+          <icon icon="up-right-from-square" size="sm" class="mr-1" />
           {{ $t("exports.tools.view") }}
         </UrlButton>
       </div>
@@ -55,5 +58,5 @@ defineEmits<{
         {{ linkText }}
       </a>
     </div>
-  </div>
+  </PendingContent>
 </template>
diff --git a/src/corpus/exports/ExportsPanel.vue b/src/corpus/exports/ExportsPanel.vue
deleted file mode 100644
index 4cb2e1d..0000000
--- a/src/corpus/exports/ExportsPanel.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from "vue";
-import useExports from "@/corpus/exports/exports.composable";
-import ToolPanel from "@/corpus/exports/ToolPanel.vue";
-import { ensureTrailingSlash } from "@/util";
-import useCorpusIdParam from "@/corpus/corpusIdParam.composable";
-import { useCorpusState } from "@/corpus/corpusState.composable";
-import useJob from "@/corpus/job/job.composable";
-import PendingContent from "@/spin/PendingContent.vue";
-import useLocale from "@/i18n/locale.composable";
-
-const corpusId = useCorpusIdParam();
-const { exports, loadExports, downloadResult, getDownloadFilename } =
-  useExports(corpusId);
-const { isDone } = useCorpusState(corpusId);
-const { installKorp, installStrix, jobState } = useJob(corpusId);
-const { locale3 } = useLocale();
-
-const korpUrl = ensureTrailingSlash(import.meta.env.VITE_KORP_URL);
-const strixUrl = ensureTrailingSlash(import.meta.env.VITE_STRIX_URL);
-
-const isInstallPending = ref(false);
-const canInstall = computed(
-  () =>
-    jobState.value?.sparv == "done" &&
-    !["waiting", "running"].includes(jobState?.value.korp) &&
-    !["waiting", "running"].includes(jobState?.value.strix) &&
-    !isInstallPending.value,
-);
-
-loadExports();
-
-async function korpInstall() {
-  isInstallPending.value = true;
-  await installKorp();
-  isInstallPending.value = false;
-}
-
-async function strixInstall() {
-  isInstallPending.value = true;
-  await installStrix();
-  isInstallPending.value = false;
-}
-
-// When a job finishes, show download button.
-watch(isDone, () => {
-  if (isDone.value) {
-    loadExports();
-  }
-});
-</script>
-
-<template>
-  <PendingContent
-    :on="`corpus/${corpusId}/exports`"
-    class="xl:grid grid-cols-2 gap-4"
-  >
-    <div>
-      <h3 class="text-lg uppercase">
-        {{ $t("tools") }}
-      </h3>
-      <p>{{ $t("exports.tools.help") }}</p>
-
-      <ToolPanel
-        name="Korp"
-        :info="$t('exports.tools.help.korp')"
-        :link-url="$t('exports.tools.help.korp.manual.url')"
-        :link-text="$t('exports.tools.help.korp.manual.text')"
-        :can-install="canInstall"
-        :is-installed="jobState?.korp == 'done'"
-        :show-url="`${korpUrl}?mode=mink#?corpus=${corpusId}&lang=${locale3}`"
-        @install="korpInstall()"
-      />
-
-      <ToolPanel
-        name="Strix"
-        :info="$t('exports.tools.help.strix')"
-        :can-install="canInstall"
-        :is-installed="jobState?.strix == 'done'"
-        :show-url="`${strixUrl}?modeSelected=mink&filters=corpus_id:${corpusId}&lang=${locale3}`"
-        @install="strixInstall()"
-      />
-    </div>
-
-    <div>
-      <h3 class="text-lg uppercase">{{ $t("download") }}</h3>
-      <p>{{ $t("exports.download.help") }}</p>
-
-      <table v-if="exports?.length">
-        <tr>
-          <th>{{ $t("file.archive") }}</th>
-          <td>
-            <a href="#" @click.prevent="downloadResult">
-              <icon :icon="['fas', 'download']" class="mr-1" />
-              {{ getDownloadFilename() }}
-            </a>
-          </td>
-        </tr>
-        <tr>
-          <th>{{ $t("file.singles") }}</th>
-          <td>
-            <router-link :to="`/library/corpus/${corpusId}/exports`">
-              {{ $t("show") }}...
-            </router-link>
-          </td>
-        </tr>
-      </table>
-    </div>
-  </PendingContent>
-</template>
diff --git a/src/corpus/job/JobStatus.vue b/src/corpus/job/JobStatus.vue
index d2bbd8e..827fdbb 100644
--- a/src/corpus/job/JobStatus.vue
+++ b/src/corpus/job/JobStatus.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import useJob from "@/corpus/job/job.composable";
 import JobStatusMessage from "@/corpus/job/JobStatusMessage.vue";
 import { formatDate } from "@/util";
@@ -11,14 +11,9 @@ import TerminalOutput from "@/components/TerminalOutput.vue";
 import ProgressBar from "@/components/ProgressBar.vue";
 
 const corpusId = useCorpusIdParam();
-const { runJob, abortJob, jobStatus, jobState, isJobRunning } =
-  useJob(corpusId);
-const { canBeReady, isFailed } = useCorpusState(corpusId);
+const { abortJob, jobStatus, isJobRunning } = useJob(corpusId);
+const { isFailed } = useCorpusState(corpusId);
 
-const isPending = ref(false);
-const canRun = computed(
-  () => canBeReady.value && !isPending.value && !isJobRunning.value,
-);
 const hasStarted = computed(
   () =>
     Object.values(jobStatus.value?.status || {}).some(
@@ -26,15 +21,16 @@ const hasStarted = computed(
     ) || jobStatus.value?.priority,
 );
 
-async function doRunJob() {
-  isPending.value = true;
-  await runJob();
-  isPending.value = false;
-}
+const spinTokens = [
+  `corpus/${corpusId}/job`,
+  `corpus/${corpusId}/info`,
+  `corpus/${corpusId}/install/korp`,
+  `corpus/${corpusId}/install/strix`,
+];
 </script>
 
 <template>
-  <PendingContent v-if="jobStatus" :on="`corpus/${corpusId}/job`">
+  <PendingContent v-if="jobStatus" :on="spinTokens">
     <div class="flex gap-4 justify-between items-baseline">
       <div class="text-lg">
         <span v-if="jobStatus.current_process">
@@ -43,28 +39,13 @@ async function doRunJob() {
         <JobStatusMessage :corpus-id="corpusId" class="font-bold" />
       </div>
 
-      <div class="text-sm text-right">
-        <ActionButton
-          v-if="!isJobRunning"
-          :disabled="!canRun"
-          :class="{
-            'button-primary':
-              jobState?.sparv == 'none' || jobState?.sparv == 'aborted',
-          }"
-          @click="canRun ? doRunJob() : null"
-        >
-          <icon :icon="['fas', 'gears']" class="mr-1" />
-          {{ jobState?.sparv != "done" ? $t("job.run") : $t("job.rerun") }}
-        </ActionButton>
-
-        <ActionButton v-else class="button-danger ml-2" @click="abortJob">
-          {{ $t("job.abort") }}
-        </ActionButton>
-
-        <div v-if="!isJobRunning && jobState?.sparv == 'done'">
-          <icon icon="circle-info" /> {{ $t("job.rerun.overwrite") }}
-        </div>
-      </div>
+      <ActionButton
+        v-if="isJobRunning"
+        class="button-danger ml-2"
+        @click="abortJob"
+      >
+        {{ $t("job.abort") }}
+      </ActionButton>
     </div>
 
     <ProgressBar
@@ -73,7 +54,7 @@ async function doRunJob() {
       class="w-full my-2"
     />
 
-    <table v-if="hasStarted" class="w-full mt-4">
+    <table v-if="hasStarted" class="w-full">
       <thead></thead>
       <tbody>
         <tr v-if="jobStatus.errors">
diff --git a/src/fontawesome.ts b/src/fontawesome.ts
index 2350969..68e01da 100644
--- a/src/fontawesome.ts
+++ b/src/fontawesome.ts
@@ -19,6 +19,7 @@ import {
   faRightToBracket,
   faRotate,
   faTriangleExclamation,
+  faUpRightFromSquare,
   faUserPlus,
   faXmark,
 } from "@fortawesome/free-solid-svg-icons";
@@ -38,6 +39,7 @@ library.add(
   faSquarePlus,
   faTrashCan,
   faTriangleExclamation,
+  faUpRightFromSquare,
   faUserPlus,
   faXmark,
 );
diff --git a/src/i18n/locales/en.yaml b/src/i18n/locales/en.yaml
index 081e986..e0cfe62 100644
--- a/src/i18n/locales/en.yaml
+++ b/src/i18n/locales/en.yaml
@@ -55,16 +55,19 @@ config.metadata.help: Metadata is information about the data, meant for assessme
 config.configuration.help: These settings are information for the automatic analysis; they will affect the parsing or annotation.
 corpus.config.parse.error: The config of this corpus could not be parsed. Try editing the settings or metadata again. If you need help, please contact sb-info{'@'}svenska.gu.se
 config.saving: Saving metadata
+analysis.help: Run automated language technology methods on your text data according to your settings. Mink uses {sparv} under the hood.
+analysis.sparv.url: https://spraakbanken.gu.se/en/tools/sparv
 job.run: Run annotation
 job.rerun: Re-run annotation
-job.rerun.overwrite: Previous results will be overwritten
+job.rerun.overwrite: Previous results will be overwritten.
+job.rerun.tools_outdated: The old results will remain in the tools. Do not forget to re-install it if needed.
 job.abort: Abort
 job.status: Status
 job.priority: Place in queue
 job.last_run_started: Last run started
 job.last_run_ended: Last run ended
 job.time_taken: Time taken
-job.process.sparv: Annotation
+job.process.sparv: Analysis
 job.process.korp: Installation to Korp
 job.process.strix: Installation to Strix
 source.limit.file.recommended: Recommended max file size
@@ -89,8 +92,9 @@ exports.tools.help.korp.manual.text: User manual
 exports.tools.help.strix: In Strix, the enriched texts can be examined in full.
 exports.tools.install: Install
 exports.tools.reinstall: Reinstall
-exports.tools.view: View
+exports.tools.view: Open
 exports.download.help: Results can be downloaded as machine-readable files for processing in scripts or other specialized software.
+exports.download.placeholder: Downloads will be available here after successful analysis.
 exports.help: The annotation process yields export files for each input file. You can download each single export file or all of them in a bundle. The exact structure of the files depends on the input files as well as the configuration. They are stored on the server indefinitely, but re-running the annotation will replace them with new ones.
 exports.help.more.label: Read more about export files in the user manual
 user.settings: Settings
@@ -109,6 +113,7 @@ metadata: Metadata
 texts: Source texts
 configuration: Configuration
 settings: Settings
+analysis: Analysis
 result: Result
 resources: Resources
 corpus: Corpus
diff --git a/src/i18n/locales/sv.yaml b/src/i18n/locales/sv.yaml
index 3d0a1c7..c57db4c 100644
--- a/src/i18n/locales/sv.yaml
+++ b/src/i18n/locales/sv.yaml
@@ -56,16 +56,19 @@ config.metadata.help: Metadata är information om datan, och fungerar som underl
 config.configuration.help: Dessa inställningar blir instruktioner till den automatiska analysen.
 corpus.config.parse.error: Korpusens config kunde inte läsas. Prova att redigera inställningarna eller metadatan igen. Om du behöver hjälp kan du kontakta sb-info{'@'}svenska.gu.se
 config.saving: Sparar metadata
+analysis.help: Kör automatiska språkteknologiska analyser på din textdata enligt inställningarna. Mink använder {sparv} i bakgrunden.
+analysis.sparv.url: https://spraakbanken.gu.se/verktyg/sparv
 job.run: Starta annotering
 job.rerun: Starta om annotering
-job.rerun.overwrite: Tidigare resultat kommer att skrivas över
+job.rerun.overwrite: Tidigare resultat kommer att skrivas över.
+job.rerun.tools_outdated: Verktygen kommer att behålla det gamla resultatet. Glöm inte att installera om vid behov.
 job.abort: Avbryt
 job.status: Status
 job.priority: Plats i kön
 job.last_run_started: Senast startad
 job.last_run_ended: Senast avslutad
 job.time_taken: Tidsåtgång
-job.process.sparv: Annotering
+job.process.sparv: Analys
 job.process.korp: Installation i Korp
 job.process.strix: Installation i Strix
 source.limit.file.recommended: Rekommenderad filstorlek
@@ -90,8 +93,9 @@ exports.tools.help.korp.manual.text: Användarhandledning
 exports.tools.help.strix: I Strix kan de berikade texterna undersökas i sin helhet.
 exports.tools.install: Installera
 exports.tools.reinstall: Installera om
-exports.tools.view: Visa
+exports.tools.view: Öppna
 exports.download.help: Resultatet kan laddas ner som maskinläsbara filer för bearbetning i script eller speciella program.
+exports.download.placeholder: Nedladdningar finns här efter slutförd annotering.
 exports.help: Annoteringsprocessen skapar exportfiler för varje källfil, och de kan laddas ner enskilt eller som arkiv. Filernas struktur beror både på källfilerna och konfigurationen. De lagras på servern tillsvidare, men ersätts med nya om du kör om annoteringen på nytt.
 exports.help.more.label: Läs mer om exportfiler i användarhandledningen
 user.settings: Inställningar
@@ -110,6 +114,7 @@ metadata: Metadata
 texts: Källtexter
 configuration: Konfiguration
 settings: Inställningar
+analysis: Analys
 result: Resultat
 resources: Resurser
 corpus: Korpus
diff --git a/src/spin/PendingContent.vue b/src/spin/PendingContent.vue
index 7efe33a..9bcac64 100644
--- a/src/spin/PendingContent.vue
+++ b/src/spin/PendingContent.vue
@@ -2,10 +2,11 @@
 import { computed } from "vue";
 import SpinIndicator from "@/spin/SpinIndicator.vue";
 import useSpin from "@/spin/spin.composable";
+import { enarray } from "@/util";
 
 const props = defineProps<{
-  /** A token that may have been used with `spin()`. */
-  on: string;
+  /** Tokens that may have been used with `spin()`. */
+  on: string | string[];
   /**
    * Enable this to block interaction with elements in the slot.
    *
@@ -17,17 +18,20 @@ const props = defineProps<{
 }>();
 
 const { pending } = useSpin();
-const isPending = computed(() => pending.value.includes(props.on));
+const isPending = computed(() =>
+  enarray(props.on).some((token) => pending.value.includes(token)),
+);
 </script>
 
 <template>
   <div class="relative" :class="{ 'animate-pulse2': isPending }">
+    <slot />
     <div
+      v-if="isPending"
       class="absolute top-0 left-0 right-0 bottom-0 z-30 flex justify-center items-center"
-      :class="{ hidden: !isPending, 'pointer-events-none': !blocking }"
+      :class="{ 'pointer-events-none': !blocking }"
     >
       <SpinIndicator />
     </div>
-    <slot />
   </div>
 </template>
diff --git a/src/util.test.ts b/src/util.test.ts
index 1fabc78..d863de0 100644
--- a/src/util.test.ts
+++ b/src/util.test.ts
@@ -1,5 +1,6 @@
 import { describe, expect, test } from "vitest";
 import {
+  enarray,
   ensureExtension,
   formatDate,
   formatSeconds,
@@ -14,6 +15,21 @@ import {
   unarray,
 } from "@/util";
 
+describe("enarray", () => {
+  test("leaves array unchanged", () => {
+    expect(enarray([1, 2, 3])).toStrictEqual([1, 2, 3]);
+    expect(enarray([1])).toStrictEqual([1]);
+    expect(enarray([])).toStrictEqual([]);
+  });
+  test("turns non-array into array", () => {
+    expect(enarray("A")).toStrictEqual(["A"]);
+    expect(enarray("ABC")).toStrictEqual(["ABC"]);
+    expect(enarray(null)).toStrictEqual([null]);
+    expect(enarray(undefined)).toStrictEqual([undefined]);
+    expect(enarray(new Set([1, 2, 3]))).toStrictEqual([new Set([1, 2, 3])]);
+  });
+});
+
 describe("formatDate", () => {
   test("formats a date", () => {
     expect(formatDate("2022-11-30T12:44:37.735Z")).toBe("2022-11-30 12:44:37");
diff --git a/src/util.ts b/src/util.ts
index 89c7f5b..ad9ee71 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -20,6 +20,9 @@ export function downloadFile(data: string | Blob, filename: string) {
   window.URL.revokeObjectURL(url);
 }
 
+/** Leaves an array unchanged but returns [x] for a non-array value x. */
+export const enarray = <T>(x: T | T[]): T[] => (Array.isArray(x) ? x : [x]);
+
 /** Formats an ISO 8601 date as "YYYY-MM-DD hh:mm:ss" */
 export function formatDate(dateStr: string) {
   return dateStr.slice(0, 19).replace("T", " ");

From 4ab8c4186ea397d2aa486221e5e40f392b909c6b Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild.matsson@gu.se>
Date: Tue, 23 Apr 2024 14:17:50 +0200
Subject: [PATCH 02/12] Match PendingContent `on` prop by start of string, use
 tokens better

---
 CHANGELOG.md                             |  1 +
 src/api/backend.composable.ts            | 31 +++++++----
 src/auth/auth.composable.ts              |  4 +-
 src/corpus/analysis/AnalysisPanel.vue    |  2 +-
 src/corpus/explore/ExplorePanel.vue      | 68 +++++++++++-------------
 src/corpus/explore/ToolPanel.vue         |  6 +--
 src/corpus/exports/CorpusResult.vue      |  2 +-
 src/corpus/job/JobStatus.vue             | 12 ++---
 src/corpus/sources/SourceView.vue        |  2 +-
 src/corpus/sources/SourcesPanel.vue      |  4 +-
 src/corpus/sources/sources.composable.ts |  2 +-
 src/library/AdminResourcesView.vue       |  2 +-
 src/spin/PendingContent.vue              | 13 ++---
 src/spin/spin.composable.ts              | 23 ++++----
 14 files changed, 82 insertions(+), 90 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c967fa8..0aaf6a5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@ As this project is a user-facing application, the places in the semantic version
 - Restructured panels on corpus overview to better match backend concepts:
   - New _Analysis_ panel with the run button from _Status_ and the downloads from _Results_
   - Renamed _Result_ to _Explore_ [#115](https://github.com/spraakbanken/mink-frontend/issues/115)
+- The `on` prop of `PendingContent` now matches by start of string
 
 ### Fixed
 
diff --git a/src/api/backend.composable.ts b/src/api/backend.composable.ts
index 81ef89a..c042bf8 100644
--- a/src/api/backend.composable.ts
+++ b/src/api/backend.composable.ts
@@ -14,10 +14,10 @@ export default function useMinkBackend() {
     spin(api.createMetadata(publicId), "create");
 
   const deleteCorpus = (corpusId: string) =>
-    spin(api.removeCorpus(corpusId), `corpus/${corpusId}`);
+    spin(api.removeCorpus(corpusId), `corpus/${corpusId}/delete`);
 
   const deleteMetadata = (resourceId: string) =>
-    spin(api.removeMetadata(resourceId), `resource/${resourceId}`);
+    spin(api.removeMetadata(resourceId), `resource/${resourceId}/delete`);
 
   const loadConfig = (corpusId: string) =>
     spin(api.downloadConfig(corpusId), `corpus/${corpusId}/config`);
@@ -28,7 +28,7 @@ export default function useMinkBackend() {
   const downloadSource = (corpusId: string, filename: string, binary = false) =>
     spin(
       api.downloadSources(corpusId, filename, binary),
-      `corpus/${corpusId}/sources/${filename}`,
+      `corpus/${corpusId}/sources/${filename}/raw`,
     );
 
   const downloadPlaintext = (corpusId: string, filename: string) =>
@@ -44,11 +44,18 @@ export default function useMinkBackend() {
   ) =>
     spin(
       api.uploadSources(corpusId, files, onProgress),
-      `corpus/${corpusId}/sources`,
+      `corpus/${corpusId}/sources/upload`,
     );
 
   const deleteSource = (corpusId: string, filename: string) =>
-    spin(api.removeSource(corpusId, filename), `corpus/${corpusId}/sources`);
+    spin(
+      api.removeSource(corpusId, filename),
+      `corpus/${corpusId}/sources/list`,
+    );
+
+  // Same as `resourceInfoOne` but with another spin token.
+  const listSources = (corpusId: string) =>
+    spin(api.resourceInfoOne(corpusId), `corpus/${corpusId}/sources/list`);
 
   const uploadMetadata = (resourceId: string, yaml: string) =>
     spin(
@@ -64,23 +71,24 @@ export default function useMinkBackend() {
 
   const resourceInfoAll = () => spin(api.resourceInfoAll(), "corpora");
 
+  // Same as `listSources` but with another spin token.
   const resourceInfoOne = (corpusId: string) =>
     spin(api.resourceInfoOne(corpusId), `corpus/${corpusId}/info`);
 
   const runJob = (corpusId: string) =>
-    spin(api.runSparv(corpusId), `corpus/${corpusId}/job`);
+    spin(api.runSparv(corpusId), `corpus/${corpusId}/job/sparv`);
 
   const installKorp = (corpusId: string) =>
-    spin(api.installKorp(corpusId), `corpus/${corpusId}/install/korp`);
+    spin(api.installKorp(corpusId), `corpus/${corpusId}/job/install/korp`);
 
   const installStrix = (corpusId: string) =>
-    spin(api.installStrix(corpusId), `corpus/${corpusId}/install/strix`);
+    spin(api.installStrix(corpusId), `corpus/${corpusId}/job/install/strix`);
 
   const abortJob = (corpusId: string) =>
-    spin(api.abortJob(corpusId), `corpus/${corpusId}/job`);
+    spin(api.abortJob(corpusId), `corpus/${corpusId}/job/abort`);
 
   const loadExports = (corpusId: string) =>
-    spin(api.listExports(corpusId), `corpus/${corpusId}/exports`);
+    spin(api.listExports(corpusId), `corpus/${corpusId}/exports/list`);
 
   const downloadExports = (corpusId: string) =>
     spin(api.downloadExports(corpusId), `corpus/${corpusId}/exports/download`);
@@ -88,7 +96,7 @@ export default function useMinkBackend() {
   const downloadExportFiles = (corpusId: string, filename: string) =>
     spin(
       api.downloadExportFile(corpusId, filename),
-      `corpus/${corpusId}/exports`,
+      `corpus/${corpusId}/exports/download`,
     );
 
   const checkAdminMode = () => spin(api.adminModeStatus(), "admin-mode");
@@ -109,6 +117,7 @@ export default function useMinkBackend() {
     downloadPlaintext,
     uploadSources,
     deleteSource,
+    listSources,
     uploadMetadata,
     downloadMetadata,
     resourceInfoAll,
diff --git a/src/auth/auth.composable.ts b/src/auth/auth.composable.ts
index 83b0cee..6765ee3 100644
--- a/src/auth/auth.composable.ts
+++ b/src/auth/auth.composable.ts
@@ -32,7 +32,7 @@ const payload = ref<JwtSbPayload>();
 export function useAuth() {
   const router = useRouter();
   const route = useRoute();
-  const { spin, pending } = useSpin();
+  const { spin, isPending } = useSpin();
   const { alert } = useMessenger();
   const { t } = useI18n();
 
@@ -43,7 +43,7 @@ export function useAuth() {
   );
   const canUserWrite = computed(() => isAuthenticated.value);
   /** Indicates whether a jwt request is currently loading. */
-  const isAuthenticating = computed(() => pending.value.includes("jwt"));
+  const isAuthenticating = computed(() => isPending("jwt"));
 
   /** If not authenticated, redirect to the login page. */
   async function requireAuthentication(callback?: () => void) {
diff --git a/src/corpus/analysis/AnalysisPanel.vue b/src/corpus/analysis/AnalysisPanel.vue
index 9dcee2b..a4d1903 100644
--- a/src/corpus/analysis/AnalysisPanel.vue
+++ b/src/corpus/analysis/AnalysisPanel.vue
@@ -38,7 +38,7 @@ watch(isDone, () => {
 <template>
   <div>
     <PendingContent
-      :on="`corpus/${corpusId}/job`"
+      :on="`corpus/${corpusId}/job/sparv`"
       class="flex flex-wrap gap-3 items-baseline"
     >
       <i18n-t keypath="analysis.help" scope="global" tag="p">
diff --git a/src/corpus/explore/ExplorePanel.vue b/src/corpus/explore/ExplorePanel.vue
index 2fb0353..45511ef 100644
--- a/src/corpus/explore/ExplorePanel.vue
+++ b/src/corpus/explore/ExplorePanel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
+import { computed, watch } from "vue";
 import useExports from "@/corpus/exports/exports.composable";
 import ToolPanel from "@/corpus/explore/ToolPanel.vue";
 import { ensureTrailingSlash } from "@/util";
@@ -8,38 +8,33 @@ import { useCorpusState } from "@/corpus/corpusState.composable";
 import useJob from "@/corpus/job/job.composable";
 import PendingContent from "@/spin/PendingContent.vue";
 import useLocale from "@/i18n/locale.composable";
+import useSpin from "@/spin/spin.composable";
 
 const corpusId = useCorpusIdParam();
+const { isPending } = useSpin();
 const { exports, loadExports } = useExports(corpusId);
 const { isDone } = useCorpusState(corpusId);
-const { installKorp, installStrix, jobState } = useJob(corpusId);
+const { installKorp, installStrix, isJobRunning, jobState } = useJob(corpusId);
 const { locale3 } = useLocale();
 
 const korpUrl = ensureTrailingSlash(import.meta.env.VITE_KORP_URL);
 const strixUrl = ensureTrailingSlash(import.meta.env.VITE_STRIX_URL);
 
-const isInstallPending = ref(false);
 const canInstall = computed(
   () =>
-    !!exports.value?.length &&
-    !!jobState.value &&
-    !["waiting", "running"].includes(jobState.value.korp) &&
-    !["waiting", "running"].includes(jobState.value.strix) &&
-    !isInstallPending.value,
+    !isJobRunning.value &&
+    exports.value?.length > 0 &&
+    !isPending(`corpus/${corpusId}/job`),
 );
 
 loadExports();
 
 async function korpInstall() {
-  isInstallPending.value = true;
   await installKorp();
-  isInstallPending.value = false;
 }
 
 async function strixInstall() {
-  isInstallPending.value = true;
   await installStrix();
-  isInstallPending.value = false;
 }
 
 // When a job finishes, show download button.
@@ -52,30 +47,29 @@ watch(isDone, () => {
 
 <template>
   <p>{{ $t("exports.tools.help") }}</p>
-  <PendingContent
-    :on="`corpus/${corpusId}/exports`"
-    class="grid xl:grid-cols-2 gap-4 mt-4"
-  >
-    <ToolPanel
-      name="Korp"
-      :spin-token="`corpus/${corpusId}/install/korp`"
-      :info="$t('exports.tools.help.korp')"
-      :link-url="$t('exports.tools.help.korp.manual.url')"
-      :link-text="$t('exports.tools.help.korp.manual.text')"
-      :can-install="canInstall"
-      :is-installed="jobState?.korp == 'done'"
-      :show-url="`${korpUrl}?mode=mink#?corpus=${corpusId}&lang=${locale3}`"
-      @install="korpInstall()"
-    />
+  <div class="grid xl:grid-cols-2 gap-4 mt-4">
+    <PendingContent :on="`corpus/${corpusId}/job/install/korp`">
+      <ToolPanel
+        name="Korp"
+        :info="$t('exports.tools.help.korp')"
+        :link-url="$t('exports.tools.help.korp.manual.url')"
+        :link-text="$t('exports.tools.help.korp.manual.text')"
+        :can-install="canInstall"
+        :is-installed="jobState?.korp == 'done'"
+        :show-url="`${korpUrl}?mode=mink#?corpus=${corpusId}&lang=${locale3}`"
+        @install="korpInstall()"
+      />
+    </PendingContent>
 
-    <ToolPanel
-      name="Strix"
-      :spin-token="`corpus/${corpusId}/install/strix`"
-      :info="$t('exports.tools.help.strix')"
-      :can-install="canInstall"
-      :is-installed="jobState?.strix == 'done'"
-      :show-url="`${strixUrl}?modeSelected=mink&filters=corpus_id:${corpusId}&lang=${locale3}`"
-      @install="strixInstall()"
-    />
-  </PendingContent>
+    <PendingContent :on="`corpus/${corpusId}/job/install/strix`">
+      <ToolPanel
+        name="Strix"
+        :info="$t('exports.tools.help.strix')"
+        :can-install="canInstall"
+        :is-installed="jobState?.strix == 'done'"
+        :show-url="`${strixUrl}?modeSelected=mink&filters=corpus_id:${corpusId}&lang=${locale3}`"
+        @install="strixInstall()"
+      />
+    </PendingContent>
+  </div>
 </template>
diff --git a/src/corpus/explore/ToolPanel.vue b/src/corpus/explore/ToolPanel.vue
index 8199ba0..401a130 100644
--- a/src/corpus/explore/ToolPanel.vue
+++ b/src/corpus/explore/ToolPanel.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import ActionButton from "@/components/ActionButton.vue";
 import UrlButton from "@/components/UrlButton.vue";
-import PendingContent from "@/spin/PendingContent.vue";
 
 defineProps<{
   name: string;
-  spinToken: string;
   info: string;
   canInstall?: boolean;
   isInstalled?: boolean;
@@ -19,7 +17,7 @@ defineEmits<{
 </script>
 
 <template>
-  <PendingContent :on="spinToken" class="flex flex-col gap-2">
+  <div class="flex flex-col gap-2">
     <div class="flex flex-wrap gap-2 justify-between items-baseline">
       <h3 class="font-bold">{{ name }}</h3>
 
@@ -58,5 +56,5 @@ defineEmits<{
         {{ linkText }}
       </a>
     </div>
-  </PendingContent>
+  </div>
 </template>
diff --git a/src/corpus/exports/CorpusResult.vue b/src/corpus/exports/CorpusResult.vue
index 05a5fb8..ff66014 100644
--- a/src/corpus/exports/CorpusResult.vue
+++ b/src/corpus/exports/CorpusResult.vue
@@ -29,7 +29,7 @@ loadExports();
 </script>
 
 <template>
-  <PendingContent :on="`corpus/${corpusId}/exports`">
+  <PendingContent :on="`corpus/${corpusId}/exports/list`">
     <LayoutSection :title="$t('result')">
       <HelpBox>
         <p>{{ $t("exports.help") }}</p>
diff --git a/src/corpus/job/JobStatus.vue b/src/corpus/job/JobStatus.vue
index 827fdbb..5ab1db1 100644
--- a/src/corpus/job/JobStatus.vue
+++ b/src/corpus/job/JobStatus.vue
@@ -20,17 +20,13 @@ const hasStarted = computed(
       (status) => status != "none",
     ) || jobStatus.value?.priority,
 );
-
-const spinTokens = [
-  `corpus/${corpusId}/job`,
-  `corpus/${corpusId}/info`,
-  `corpus/${corpusId}/install/korp`,
-  `corpus/${corpusId}/install/strix`,
-];
 </script>
 
 <template>
-  <PendingContent v-if="jobStatus" :on="spinTokens">
+  <PendingContent
+    v-if="jobStatus"
+    :on="[`corpus/${corpusId}/job`, `corpus/${corpusId}/info`]"
+  >
     <div class="flex gap-4 justify-between items-baseline">
       <div class="text-lg">
         <span v-if="jobStatus.current_process">
diff --git a/src/corpus/sources/SourceView.vue b/src/corpus/sources/SourceView.vue
index 4b8f852..1091774 100644
--- a/src/corpus/sources/SourceView.vue
+++ b/src/corpus/sources/SourceView.vue
@@ -61,7 +61,7 @@ async function loadPlain() {
         <tr>
           <th>{{ $t("source.content") }}</th>
           <td>
-            <PendingContent :on="`corpus/${corpusId}/sources/${filename}`">
+            <PendingContent :on="`corpus/${corpusId}/sources/${filename}/raw`">
               <SourceText
                 :load="loadRaw"
                 :filename="metadata.name"
diff --git a/src/corpus/sources/SourcesPanel.vue b/src/corpus/sources/SourcesPanel.vue
index 0c5672b..63850d7 100644
--- a/src/corpus/sources/SourcesPanel.vue
+++ b/src/corpus/sources/SourcesPanel.vue
@@ -32,7 +32,7 @@ const totalSize = computed(() =>
       {{ filesize(info.file_size_limits.max_corpus_length.value) }}
     </span>
   </div>
-  <PendingContent :on="`corpus/${corpusId}/sources`">
+  <PendingContent :on="`corpus/${corpusId}/sources/list`">
     <table v-if="sources.length" class="w-full mt-4 striped">
       <thead>
         <tr>
@@ -66,7 +66,7 @@ const totalSize = computed(() =>
     </table>
   </PendingContent>
 
-  <PendingContent :on="`corpus/${corpusId}/sources`" blocking>
+  <PendingContent :on="`corpus/${corpusId}/sources/upload`" blocking>
     <SourceUpload :primary="isEmpty" />
   </PendingContent>
 </template>
diff --git a/src/corpus/sources/sources.composable.ts b/src/corpus/sources/sources.composable.ts
index 5207877..0ce220d 100644
--- a/src/corpus/sources/sources.composable.ts
+++ b/src/corpus/sources/sources.composable.ts
@@ -16,7 +16,7 @@ export default function useSources(corpusId: string) {
   );
 
   async function loadSources() {
-    const info = await mink.resourceInfoOne(corpusId).catch(alertError);
+    const info = await mink.listSources(corpusId).catch(alertError);
     if (!info) return;
     resourceStore.corpora[corpusId].sources = info.resource.source_files;
   }
diff --git a/src/library/AdminResourcesView.vue b/src/library/AdminResourcesView.vue
index bd4536e..faa0995 100644
--- a/src/library/AdminResourcesView.vue
+++ b/src/library/AdminResourcesView.vue
@@ -50,7 +50,7 @@ async function load(resourceId: string) {
         <PendingContent
           v-for="(resource, resourceId) of resourceStore.resources"
           :key="resourceId"
-          :on="`corpus/${resourceId}/job`"
+          :on="`corpus/${resourceId}/info`"
         >
           <div class="flex items-baseline gap-2">
             <router-link :to="`/library/resource/${resourceId}`">
diff --git a/src/spin/PendingContent.vue b/src/spin/PendingContent.vue
index 9bcac64..4d6995f 100644
--- a/src/spin/PendingContent.vue
+++ b/src/spin/PendingContent.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { computed } from "vue";
 import SpinIndicator from "@/spin/SpinIndicator.vue";
 import useSpin from "@/spin/spin.composable";
-import { enarray } from "@/util";
 
-const props = defineProps<{
+defineProps<{
   /** Tokens that may have been used with `spin()`. */
   on: string | string[];
   /**
@@ -17,17 +15,14 @@ const props = defineProps<{
   blocking?: boolean;
 }>();
 
-const { pending } = useSpin();
-const isPending = computed(() =>
-  enarray(props.on).some((token) => pending.value.includes(token)),
-);
+const { isPending } = useSpin();
 </script>
 
 <template>
-  <div class="relative" :class="{ 'animate-pulse2': isPending }">
+  <div class="relative" :class="{ 'animate-pulse2': isPending(on) }">
     <slot />
     <div
-      v-if="isPending"
+      v-if="isPending(on)"
       class="absolute top-0 left-0 right-0 bottom-0 z-30 flex justify-center items-center"
       :class="{ 'pointer-events-none': !blocking }"
     >
diff --git a/src/spin/spin.composable.ts b/src/spin/spin.composable.ts
index b066125..1c6ffe2 100644
--- a/src/spin/spin.composable.ts
+++ b/src/spin/spin.composable.ts
@@ -1,5 +1,5 @@
-import { computed, ref } from "vue";
-import uniq from "lodash/uniq";
+import { ref } from "vue";
+import { enarray } from "@/util";
 
 const unsettled = ref<SpinItem[]>([]);
 
@@ -10,7 +10,7 @@ type SpinItem<T = any> = {
 
 export default function useSpin() {
   /**
-   * Track a pending promise with a message.
+   * Track a pending promise with a token.
    *
    * @param {Promise} promise A promise which may take a while.
    * @param {string} token A string identifying this request; use the same token with the PendingContent component around any content that may be affected by the promise.
@@ -31,17 +31,16 @@ export default function useSpin() {
     });
   }
 
-  /**
-   * Reactive list of pending tokens.
-   */
-  const pending = computed<string[]>(() =>
-    uniq(
-      unsettled.value.filter((item) => item.token).map((item) => item.token!),
-    ),
-  );
+  /** Match tokens against pending items. */
+  function isPending(tokens: string | string[]) {
+    // Pending if any of the pending tokens begins with any of the watched tokens.
+    return enarray(tokens).some((token) =>
+      unsettled.value.some((item) => item.token?.indexOf(token) === 0),
+    );
+  }
 
   return {
     spin,
-    pending,
+    isPending,
   };
 }

From a5e22b0aa935a4a3c5056b0ceeda497fe3460ca6 Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild.matsson@gu.se>
Date: Tue, 23 Apr 2024 14:20:45 +0200
Subject: [PATCH 03/12] Add MaxHeight for sources list

---
 src/components/MaxHeight.vue        | 45 +++++++++++++++++++
 src/corpus/sources/SourcesPanel.vue | 69 +++++++++++++++--------------
 src/fontawesome.ts                  |  4 ++
 src/i18n/locales/en.yaml            |  4 +-
 src/i18n/locales/sv.yaml            |  4 +-
 5 files changed, 89 insertions(+), 37 deletions(-)
 create mode 100644 src/components/MaxHeight.vue

diff --git a/src/components/MaxHeight.vue b/src/components/MaxHeight.vue
new file mode 100644
index 0000000..301505a
--- /dev/null
+++ b/src/components/MaxHeight.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useElementSize, useToggle } from "@vueuse/core";
+import ActionButton from "./ActionButton.vue";
+
+defineProps<{
+  /** Maximum height (px). */
+  maxHeight: number;
+}>();
+
+const el = ref(null);
+const { height } = useElementSize(el);
+const [expanded, toggleExpanded] = useToggle();
+</script>
+
+<template>
+  <div>
+    <!-- Outer wrapper, whose height gets limited -->
+    <div
+      :class="{ mask: !expanded && height > maxHeight }"
+      :style="{
+        // Set max height to slightly less than requested, to avoid ridiculously small differences between closed and expanded heights.
+        maxHeight: !expanded ? maxHeight - 50 + 'px' : undefined,
+      }"
+    >
+      <!-- Inner wrapper, of which height is measured (content's intrinsic height) -->
+      <div ref="el">
+        <slot />
+      </div>
+    </div>
+
+    <div v-if="height > maxHeight" class="text-center p-2 text-sm">
+      <ActionButton class="button-slim" @click="toggleExpanded()">
+        <icon :icon="expanded ? 'angles-up' : 'angles-down'" />
+        {{ expanded ? $t("expand.close") : $t("expand.open") }}
+      </ActionButton>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.mask {
+  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 4em);
+}
+</style>
diff --git a/src/corpus/sources/SourcesPanel.vue b/src/corpus/sources/SourcesPanel.vue
index 63850d7..d954560 100644
--- a/src/corpus/sources/SourcesPanel.vue
+++ b/src/corpus/sources/SourcesPanel.vue
@@ -8,6 +8,7 @@ import { useCorpusState } from "@/corpus/corpusState.composable";
 import ActionButton from "@/components/ActionButton.vue";
 import PendingContent from "@/spin/PendingContent.vue";
 import useLocale from "@/i18n/locale.composable";
+import MaxHeight from "@/components/MaxHeight.vue";
 
 const corpusId = useCorpusIdParam();
 const { sources, deleteSource } = useSources(corpusId);
@@ -32,39 +33,41 @@ const totalSize = computed(() =>
       {{ filesize(info.file_size_limits.max_corpus_length.value) }}
     </span>
   </div>
-  <PendingContent :on="`corpus/${corpusId}/sources/list`">
-    <table v-if="sources.length" class="w-full mt-4 striped">
-      <thead>
-        <tr>
-          <th class="w-full">{{ $t("fileName") }}</th>
-          <th class="text-right">{{ $t("fileSize") }}</th>
-          <th />
-        </tr>
-      </thead>
-      <tbody class="border-b-0">
-        <tr v-for="source in sources" :key="source.path">
-          <td>
-            <router-link
-              :to="`/library/corpus/${corpusId}/sources/${source.name}`"
-            >
-              {{ source.name }}
-            </router-link>
-          </td>
-          <td class="text-right whitespace-nowrap">
-            {{ filesize(source.size) }}
-          </td>
-          <td class="text-right">
-            <ActionButton
-              class="button-danger button-mute button-slim"
-              @click="deleteSource(source)"
-            >
-              <icon :icon="['far', 'trash-can']" />
-            </ActionButton>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </PendingContent>
+  <MaxHeight :max-height="400">
+    <PendingContent :on="`corpus/${corpusId}/sources/list`">
+      <table v-if="sources.length" class="w-full mt-4 striped">
+        <thead>
+          <tr>
+            <th class="w-full">{{ $t("fileName") }}</th>
+            <th class="text-right">{{ $t("fileSize") }}</th>
+            <th />
+          </tr>
+        </thead>
+        <tbody class="border-b-0">
+          <tr v-for="source in sources" :key="source.path">
+            <td>
+              <router-link
+                :to="`/library/corpus/${corpusId}/sources/${source.name}`"
+              >
+                {{ source.name }}
+              </router-link>
+            </td>
+            <td class="text-right whitespace-nowrap">
+              {{ filesize(source.size) }}
+            </td>
+            <td class="text-right">
+              <ActionButton
+                class="button-danger button-mute button-slim"
+                @click="deleteSource(source)"
+              >
+                <icon :icon="['far', 'trash-can']" />
+              </ActionButton>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </PendingContent>
+  </MaxHeight>
 
   <PendingContent :on="`corpus/${corpusId}/sources/upload`" blocking>
     <SourceUpload :primary="isEmpty" />
diff --git a/src/fontawesome.ts b/src/fontawesome.ts
index 68e01da..aa21c56 100644
--- a/src/fontawesome.ts
+++ b/src/fontawesome.ts
@@ -10,6 +10,8 @@ import {
   faTrashCan,
 } from "@fortawesome/free-regular-svg-icons";
 import {
+  faAnglesDown,
+  faAnglesUp,
   faCircleInfo,
   faDownload,
   faGears,
@@ -25,6 +27,8 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
+  faAnglesDown,
+  faAnglesUp,
   faCircleInfo,
   faDownload,
   faFile,
diff --git a/src/i18n/locales/en.yaml b/src/i18n/locales/en.yaml
index e0cfe62..1c4a4ab 100644
--- a/src/i18n/locales/en.yaml
+++ b/src/i18n/locales/en.yaml
@@ -103,8 +103,8 @@ user.admin_mode.warning: Administration mode is enabled. Please be careful!
 errors: Errors
 warnings: Warnings
 error.message: There was an error
-expand.open: Show more
-expand.close: Show less
+expand.open: Show all
+expand.close: Hide some
 show: Show
 select: Select...
 en: English
diff --git a/src/i18n/locales/sv.yaml b/src/i18n/locales/sv.yaml
index c57db4c..06fdca8 100644
--- a/src/i18n/locales/sv.yaml
+++ b/src/i18n/locales/sv.yaml
@@ -104,8 +104,8 @@ user.admin_mode.warning: Administratörsläget är aktiverat. Var försiktig!
 errors: Fel
 warnings: Varningar
 error.message: Ett fel uppstod
-expand.open: Visa mer
-expand.close: Visa mindre
+expand.open: Visa allt
+expand.close: Göm en del
 show: Visa
 select: Välj...
 en: Engelska

From be1b5cd34bc625016013b303d3edc764f8b3f46b Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild.matsson@gu.se>
Date: Wed, 24 Apr 2024 14:23:23 +0200
Subject: [PATCH 04/12] Fetch news on load, not on build

---
 .env                          |  1 +
 CHANGELOG.md                  |  1 +
 env.d.ts                      |  1 +
 src/api/corpusConfig.ts       |  6 ++--
 src/home/HomeNews.vue         | 25 +++++++++++++----
 src/home/news.service.ts      | 52 +++++++++++++++++++++++++++++++++++
 src/home/news.yaml            |  9 ------
 src/i18n/locale.composable.ts | 12 ++------
 8 files changed, 81 insertions(+), 26 deletions(-)
 create mode 100644 src/home/news.service.ts
 delete mode 100644 src/home/news.yaml

diff --git a/.env b/.env
index 52b071d..6f08e10 100644
--- a/.env
+++ b/.env
@@ -5,5 +5,6 @@ VITE_LOGOUT_URL=https://sp.spraakbanken.gu.se/Shibboleth.sso/Logout
 # VITE_JWT_URL=https://sp.spraakbanken.gu.se/auth/jwt
 VITE_KORP_URL=https://spraakbanken.gu.se/korp/
 VITE_STRIX_URL=https://spraakbanken.gu.se/strix/
+VITE_NEWS_URL=https://raw.githubusercontent.com/spraakbanken/newsdesk/main/data/mink.yaml
 VITE_MATOMO_URL=https://spraakbanken.gu.se/stats/
 # VITE_MATOMO_ID= # Do not report to the real backend when developing
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0aaf6a5..5b1dd65 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@ As this project is a user-facing application, the places in the semantic version
 - Restructured panels on corpus overview to better match backend concepts:
   - New _Analysis_ panel with the run button from _Status_ and the downloads from _Results_
   - Renamed _Result_ to _Explore_ [#115](https://github.com/spraakbanken/mink-frontend/issues/115)
+- Fetching news from the Newsdesk repo on page load, instead of a static file at build time
 - The `on` prop of `PendingContent` now matches by start of string
 
 ### Fixed
diff --git a/env.d.ts b/env.d.ts
index 780a8a7..20d664b 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -7,6 +7,7 @@ interface ImportMetaEnv {
   readonly VITE_JWT_URL?: string;
   readonly VITE_KORP_URL: string;
   readonly VITE_STRIX_URL: string;
+  readonly VITE_NEWS_URL: string;
   readonly VITE_MATOMO_URL: string;
   readonly VITE_MATOMO_ID?: number;
 }
diff --git a/src/api/corpusConfig.ts b/src/api/corpusConfig.ts
index 6d10aca..acf96d2 100644
--- a/src/api/corpusConfig.ts
+++ b/src/api/corpusConfig.ts
@@ -1,4 +1,4 @@
-const yaml = import("js-yaml").then((m) => m.default);
+const Yaml = import("js-yaml").then((m) => m.default);
 
 import type { ByLang } from "@/util.types";
 import type {
@@ -150,7 +150,7 @@ export async function makeConfig(id: string, options: ConfigOptions) {
     );
   }
 
-  return (await yaml).dump(config as SparvConfig);
+  return (await Yaml).dump(config as SparvConfig);
 }
 
 export function emptyConfig(): ConfigOptions {
@@ -167,7 +167,7 @@ export function emptyConfig(): ConfigOptions {
  * May throw all kinds of errors, the sky is the limit.
  */
 export async function parseConfig(configYaml: string): Promise<ConfigOptions> {
-  const config = (await yaml).load(configYaml) as any;
+  const config = (await Yaml).load(configYaml) as any;
 
   if (!config)
     throw new TypeError(`Parsing config failed, returned "${config}"`);
diff --git a/src/home/HomeNews.vue b/src/home/HomeNews.vue
index 4923323..2d87983 100644
--- a/src/home/HomeNews.vue
+++ b/src/home/HomeNews.vue
@@ -1,11 +1,21 @@
 <script setup lang="ts">
-import items from "@/home/news.yaml";
+import { onMounted, reactive } from "vue";
 import useLocale from "@/i18n/locale.composable";
+import { fetchFeaturedNews, type NewsItem } from "@/home/news.service";
 
-const { th2 } = useLocale();
+const { locale, th } = useLocale();
+const items = reactive<NewsItem[]>([]);
+
+onMounted(async () => {
+  try {
+    items.push(...(await fetchFeaturedNews()));
+  } catch (error) {
+    console.error("Could not fetch and parse news", error);
+  }
+});
 
 function getDate(date: Date) {
-  return date.toISOString().slice(0, 10);
+  return date.toLocaleDateString(locale.value, { dateStyle: "short" });
 }
 </script>
 
@@ -16,9 +26,14 @@ function getDate(date: Date) {
       :key="i"
       class="bg-sky-50 dark:bg-sky-800 shadow shadow-sky-200 dark:shadow-sky-600 text-sky-800 dark:text-sky-200 p-1 px-2 my-2"
     >
-      <strong>{{ getDate(item.date) }}: {{ th2(item.title) }}</strong>
+      <header class="font-bold">{{ th(item.title) }}</header>
+
+      <time :datetime="item.created.toString()" class="my-1 text-sm italic">
+        {{ getDate(item.created) }}
+      </time>
+
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <div v-html="th2(item.body)"></div>
+      <div v-html="th(item.body)"></div>
     </article>
   </div>
 </template>
diff --git a/src/home/news.service.ts b/src/home/news.service.ts
new file mode 100644
index 0000000..5460952
--- /dev/null
+++ b/src/home/news.service.ts
@@ -0,0 +1,52 @@
+const Yaml = import("js-yaml").then((m) => m.default);
+import once from "lodash/once";
+import { retry } from "@/util";
+import type { ByLang } from "@/util.types";
+
+const NEWS_URL: string = import.meta.env.VITE_NEWS_URL;
+
+/** A news item in the Newsdesk repo */
+export type NewsItem = {
+  title: ByLang | string;
+  body: ByLang | string;
+  created: Date;
+  expires?: Date;
+  tags?: NewsTag[];
+};
+
+/** News item tags recognized by this frontend */
+type NewsTag = "featured" | string;
+
+/**
+ * Fetch and parse a YAML newsfeed
+ *
+ * @returns All items
+ * @throws Fetch or parse errors
+ */
+export const fetchAllNews = once(async (): Promise<NewsItem[]> => {
+  if (!NEWS_URL) return [];
+  const response = await retry(() => fetch(NEWS_URL));
+  const yaml = await response.text();
+  return (await Yaml).load(yaml) as NewsItem[];
+});
+
+/**
+ * Fetch news and select recent items
+ *
+ * @returns News items considered interesting for users
+ * @throws Fetch or parse errors
+ */
+export async function fetchNews(): Promise<NewsItem[]> {
+  const items = await fetchAllNews();
+  return items.filter((item) => !item.expires || item.expires > new Date());
+}
+
+/**
+ * Fetch news and select *featured* recent items
+ *
+ * @returns News items that the user really should see
+ * @throws Fetch or parse errors
+ */
+export async function fetchFeaturedNews(): Promise<NewsItem[]> {
+  return (await fetchNews()).filter((item) => item.tags?.includes("featured"));
+}
diff --git a/src/home/news.yaml b/src/home/news.yaml
deleted file mode 100644
index 36451e0..0000000
--- a/src/home/news.yaml
+++ /dev/null
@@ -1,9 +0,0 @@
-[]
-# Template:
-# - date: 2023-01-31
-#   title:
-#     en: Released for testing
-#     sv: Släppt för testning
-#   body:
-#     en: During the first half of 2023, Mink is being progressively rolled out for testing. If you are interested in participating, please contact Språkbanken Text at sb-info@svenska.gu.se. A public release is scheduled for September, 2023.
-#     sv: Under våren 2023 rullas Mink gradvis ut för testning. Om du är intresserad av att delta är du välkommen att kontakta Språkbanken Text på sb-info@svenska.gu.se. Ett öppet släpp planeras till september 2023.
diff --git a/src/i18n/locale.composable.ts b/src/i18n/locale.composable.ts
index b430bad..3147776 100644
--- a/src/i18n/locale.composable.ts
+++ b/src/i18n/locale.composable.ts
@@ -36,15 +36,10 @@ export default function useLocale() {
   });
 
   /** Translate here - picks the current language out of a strings-by-language object. */
-  function th(map?: ByLang): string | undefined {
+  function th(map?: ByLang | string): string | undefined {
     if (!map) return undefined;
-    return th2({ sv: map.swe, en: map.eng });
-  }
-
-  /** Translate here - picks the current language out of a strings-by-language object. */
-  function th2(map?: Record<SvEn, string>): string | undefined {
-    if (!map) return undefined;
-    return map[locale.value as SvEn];
+    if (typeof map == "string") return map;
+    return map[locale3.value];
   }
 
   /** Wrap the filesize lib with some sane defaults and avoiding exponential notation. */
@@ -59,7 +54,6 @@ export default function useLocale() {
     locale,
     locale3,
     th,
-    th2,
     filesize: myFilesize,
   };
 }

From 22908117ed5fc9e8bcdebf30e7bd3541115c2f37 Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild.matsson@gu.se>
Date: Wed, 24 Apr 2024 14:39:02 +0200
Subject: [PATCH 05/12] Rename component HomeNews to HomeNewsFeatured

---
 src/home/{HomeNews.vue => HomeNewsFeatured.vue} | 0
 src/home/HomeView.vue                           | 4 ++--
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename src/home/{HomeNews.vue => HomeNewsFeatured.vue} (100%)

diff --git a/src/home/HomeNews.vue b/src/home/HomeNewsFeatured.vue
similarity index 100%
rename from src/home/HomeNews.vue
rename to src/home/HomeNewsFeatured.vue
diff --git a/src/home/HomeView.vue b/src/home/HomeView.vue
index 4602a39..cdfe0ab 100644
--- a/src/home/HomeView.vue
+++ b/src/home/HomeView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import HomeNews from "@/home/HomeNews.vue";
+import HomeNewsFeatured from "@/home/HomeNewsFeatured.vue";
 import { useAuth } from "@/auth/auth.composable";
 import LayoutSection from "@/components/LayoutSection.vue";
 import { getLogoutUrl } from "@/auth/sbAuth";
@@ -13,7 +13,7 @@ const logoutUrl = getLogoutUrl();
 
 <template>
   <div>
-    <HomeNews />
+    <HomeNewsFeatured />
 
     <div class="flex flex-wrap gap-20 my-10">
       <div class="w-full flex flex-row-reverse flex-wrap items-center gap-20">

From e2b285593c4da41bf151587e005405a967f0c4ef Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild.matsson@gu.se>
Date: Wed, 24 Apr 2024 15:41:03 +0200
Subject: [PATCH 06/12] Show non-featured news separately

---
 CHANGELOG.md                  |  4 +++
 src/home/HomeNews.vue         | 46 +++++++++++++++++++++++++++++++++++
 src/home/HomeNewsFeatured.vue |  6 ++---
 src/home/HomeView.vue         |  5 +++-
 src/home/news.service.ts      | 30 +++++++++++++----------
 src/i18n/locales/en.yaml      |  1 +
 src/i18n/locales/sv.yaml      |  1 +
 7 files changed, 76 insertions(+), 17 deletions(-)
 create mode 100644 src/home/HomeNews.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5b1dd65..d58a20b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,10 @@ As this project is a user-facing application, the places in the semantic version
 
 ## [Unreleased]
 
+### Added
+
+- News shown in two places on home page: featured on top, others under the intro text
+
 ### Changed
 
 - Restructured panels on corpus overview to better match backend concepts:
diff --git a/src/home/HomeNews.vue b/src/home/HomeNews.vue
new file mode 100644
index 0000000..a2e0f32
--- /dev/null
+++ b/src/home/HomeNews.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { onMounted, reactive } from "vue";
+import useLocale from "@/i18n/locale.composable";
+import { fetchNews, type NewsItem } from "@/home/news.service";
+import LayoutSection from "@/components/LayoutSection.vue";
+
+const { locale, th } = useLocale();
+const items = reactive<NewsItem[]>([]);
+
+onMounted(async () => {
+  try {
+    const items_ = await fetchNews(false);
+    items.push(...items_.filter((item) => !item.tags?.includes("featured")));
+  } catch (error) {
+    console.error("Could not fetch and parse news", error);
+  }
+});
+
+function getDate(date: Date) {
+  return date.toLocaleDateString(locale.value, { dateStyle: "long" });
+}
+</script>
+
+<template>
+  <LayoutSection v-if="items.length" :title="$t('news')" class="text-center">
+    <div
+      v-if="items.length"
+      class="flex flex-wrap justify-center gap-4 text-sm text-start"
+    >
+      <article
+        v-for="(item, i) in items"
+        :key="i"
+        class="w-96 bg-white dark:bg-zinc-700 shadow p-2 px-3 my-2"
+      >
+        <header class="font-bold">{{ th(item.title) }}</header>
+
+        <time :datetime="item.created.toString()" class="my-1 text-sm italic">
+          {{ getDate(item.created) }}
+        </time>
+
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <div v-html="th(item.body)"></div>
+      </article>
+    </div>
+  </LayoutSection>
+</template>
diff --git a/src/home/HomeNewsFeatured.vue b/src/home/HomeNewsFeatured.vue
index 2d87983..85c95cf 100644
--- a/src/home/HomeNewsFeatured.vue
+++ b/src/home/HomeNewsFeatured.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
 import { onMounted, reactive } from "vue";
 import useLocale from "@/i18n/locale.composable";
-import { fetchFeaturedNews, type NewsItem } from "@/home/news.service";
+import { fetchNews, type NewsItem } from "@/home/news.service";
 
 const { locale, th } = useLocale();
 const items = reactive<NewsItem[]>([]);
 
 onMounted(async () => {
   try {
-    items.push(...(await fetchFeaturedNews()));
+    items.push(...(await fetchNews(true)));
   } catch (error) {
     console.error("Could not fetch and parse news", error);
   }
 });
 
 function getDate(date: Date) {
-  return date.toLocaleDateString(locale.value, { dateStyle: "short" });
+  return date.toLocaleDateString(locale.value, { dateStyle: "long" });
 }
 </script>
 
diff --git a/src/home/HomeView.vue b/src/home/HomeView.vue
index cdfe0ab..8a9a972 100644
--- a/src/home/HomeView.vue
+++ b/src/home/HomeView.vue
@@ -6,6 +6,7 @@ import { getLogoutUrl } from "@/auth/sbAuth";
 import LoginButton from "@/auth/LoginButton.vue";
 import UrlButton from "@/components/UrlButton.vue";
 import RouteButton from "@/components/RouteButton.vue";
+import HomeNews from "./HomeNews.vue";
 
 const { isAuthenticated, canUserWrite, payload } = useAuth();
 const logoutUrl = getLogoutUrl();
@@ -15,7 +16,7 @@ const logoutUrl = getLogoutUrl();
   <div>
     <HomeNewsFeatured />
 
-    <div class="flex flex-wrap gap-20 my-10">
+    <div class="flex flex-col gap-10 my-10">
       <div class="w-full flex flex-row-reverse flex-wrap items-center gap-20">
         <div class="w-full lg:flex-1 text-lg">
           <i18n-t keypath="home.hero.sb" scope="global" tag="p" class="my-2">
@@ -77,6 +78,8 @@ const logoutUrl = getLogoutUrl();
         </div>
       </div>
 
+      <HomeNews />
+
       <div
         class="flex flex-col 2xl:flex-row my-20 gap-20 md:w-4/5 lg:w-2/3 2xl:w-full mx-auto"
       >
diff --git a/src/home/news.service.ts b/src/home/news.service.ts
index 5460952..4ececdc 100644
--- a/src/home/news.service.ts
+++ b/src/home/news.service.ts
@@ -33,20 +33,24 @@ export const fetchAllNews = once(async (): Promise<NewsItem[]> => {
 /**
  * Fetch news and select recent items
  *
- * @returns News items considered interesting for users
+ * @param filterFeatured If true, select items having the "featured" tag;
+ *   if false, select items *not* having the "featured" tag;
+ *   if undefined, select all recent items.
+ * @returns Recent news items
  * @throws Fetch or parse errors
  */
-export async function fetchNews(): Promise<NewsItem[]> {
-  const items = await fetchAllNews();
-  return items.filter((item) => !item.expires || item.expires > new Date());
-}
+export async function fetchNews(filterFeatured?: boolean): Promise<NewsItem[]> {
+  // Get news and skip items that have expired
+  // TODO Also skip items older than 6 months
+  let items = (await fetchAllNews()).filter(
+    (item) => !item.expires || item.expires > new Date(),
+  );
 
-/**
- * Fetch news and select *featured* recent items
- *
- * @returns News items that the user really should see
- * @throws Fetch or parse errors
- */
-export async function fetchFeaturedNews(): Promise<NewsItem[]> {
-  return (await fetchNews()).filter((item) => item.tags?.includes("featured"));
+  // Filter by the "featured" tag if specified
+  if (filterFeatured != null)
+    items = items.filter(
+      (item) => !!item.tags?.includes("featured") == filterFeatured,
+    );
+
+  return items;
 }
diff --git a/src/i18n/locales/en.yaml b/src/i18n/locales/en.yaml
index 1c4a4ab..6f25f90 100644
--- a/src/i18n/locales/en.yaml
+++ b/src/i18n/locales/en.yaml
@@ -18,6 +18,7 @@ home.otherdata.body: Make sure to first get acquainted with any existing languag
 home.otherdata.sbdata.title: "Språkbanken Text: Language resources"
 welcome: Welcome, {name}!
 mydata: My data
+news: News
 library: Library
 library.help.corpora: These are the corpora that you have created. Only you can see them. Click them to view more details.
 library.help.corpora.none: Mink provides automatic linguistic analysis for your data. Start by creating a corpus; use the "@:{'new_corpus'}" button or drop text files into the upload field below.
diff --git a/src/i18n/locales/sv.yaml b/src/i18n/locales/sv.yaml
index 06fdca8..c0f985d 100644
--- a/src/i18n/locales/sv.yaml
+++ b/src/i18n/locales/sv.yaml
@@ -18,6 +18,7 @@ home.otherdata.body: Tänk på att först undersöka andra språkdatamängder so
 home.otherdata.sbdata.title: "Språkbanken Text: Language resources"
 welcome: Välkommen, {name}!
 mydata: Mina data
+news: Nyheter
 library: Bibliotek
 library.help.corpora: Här listas de korpusar du har skapat. De är bara synliga för dig. Klicka på dem för att visa mer.
 library.help.corpora.none: >-

From bf1b29083cb2cbe99c3ab12dd7a1dd8fa749b8e6 Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild.matsson@gu.se>
Date: Wed, 24 Apr 2024 16:17:25 +0200
Subject: [PATCH 07/12] Skip old news

---
 src/home/news.service.ts |  9 +++++----
 src/util.test.ts         | 14 ++++++++++++++
 src/util.ts              | 12 ++++++++++++
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/home/news.service.ts b/src/home/news.service.ts
index 4ececdc..c1407c1 100644
--- a/src/home/news.service.ts
+++ b/src/home/news.service.ts
@@ -1,6 +1,6 @@
 const Yaml = import("js-yaml").then((m) => m.default);
 import once from "lodash/once";
-import { retry } from "@/util";
+import { addDays, retry } from "@/util";
 import type { ByLang } from "@/util.types";
 
 const NEWS_URL: string = import.meta.env.VITE_NEWS_URL;
@@ -40,10 +40,11 @@ export const fetchAllNews = once(async (): Promise<NewsItem[]> => {
  * @throws Fetch or parse errors
  */
 export async function fetchNews(filterFeatured?: boolean): Promise<NewsItem[]> {
-  // Get news and skip items that have expired
-  // TODO Also skip items older than 6 months
+  const now = new Date();
   let items = (await fetchAllNews()).filter(
-    (item) => !item.expires || item.expires > new Date(),
+    (item) =>
+      (!item.expires || item.expires > now) && // Skip expired items
+      item.created > addDays(now, -365 / 2), // Skip items older than 6 months
   );
 
   // Filter by the "featured" tag if specified
diff --git a/src/util.test.ts b/src/util.test.ts
index d863de0..8f33ed3 100644
--- a/src/util.test.ts
+++ b/src/util.test.ts
@@ -1,5 +1,6 @@
 import { describe, expect, test } from "vitest";
 import {
+  addDays,
   enarray,
   ensureExtension,
   formatDate,
@@ -15,6 +16,19 @@ import {
   unarray,
 } from "@/util";
 
+describe("addDays", () => {
+  const d = new Date("24 April 2024 15:50 (CEST)");
+  test("across a month", () => {
+    expect(addDays(d, 10)).toEqual(new Date("4 May 2024 15:50 (CEST)"));
+    expect(addDays(d, -24)).toEqual(new Date("31 March 2024 15:50 (CEST)"));
+  });
+  test("across DST", () => {
+    // Notice the hour is different
+    expect(addDays(d, 200)).toEqual(new Date("10 November 2024 14:50 (CET)"));
+    expect(addDays(d, -25)).toEqual(new Date("30 March 2024 14:50 (CET)"));
+  });
+});
+
 describe("enarray", () => {
   test("leaves array unchanged", () => {
     expect(enarray([1, 2, 3])).toStrictEqual([1, 2, 3]);
diff --git a/src/util.ts b/src/util.ts
index ad9ee71..e544dc3 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -1,6 +1,18 @@
 import clone from "lodash/clone";
 import round from "lodash/round";
 
+/** The number of milliseconds in a full day. */
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+/**
+ * Add or subtract a number of days to a date
+ *
+ * Works with 24-hour cycles, so the hour (and possibly date) will change across DST changes.
+ **/
+export function addDays(date: Date, days: number) {
+  return new Date(date.getTime() + days * DAY_MS);
+}
+
 export const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
 
 /** Trigger a file download in the browser by adding a temporary link and click it */

From 4acdb86e929e8f4db2233f28b835d9883067f0ce Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild.matsson@gu.se>
Date: Wed, 24 Apr 2024 17:02:37 +0200
Subject: [PATCH 08/12] Fix list formatting in news body

---
 src/corpus/config/CorpusConfiguration.vue | 9 ---------
 src/home/HomeNews.vue                     | 2 +-
 src/index.css                             | 7 +++++++
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/corpus/config/CorpusConfiguration.vue b/src/corpus/config/CorpusConfiguration.vue
index a4573cf..b378c51 100644
--- a/src/corpus/config/CorpusConfiguration.vue
+++ b/src/corpus/config/CorpusConfiguration.vue
@@ -265,12 +265,3 @@ async function submit(fields: Form) {
     </div>
   </PendingContent>
 </template>
-
-<style scoped>
-.prose :deep(ul) {
-  padding-left: 2em;
-}
-.prose :deep(ul li) {
-  list-style-type: bullet;
-}
-</style>
diff --git a/src/home/HomeNews.vue b/src/home/HomeNews.vue
index a2e0f32..0df387e 100644
--- a/src/home/HomeNews.vue
+++ b/src/home/HomeNews.vue
@@ -39,7 +39,7 @@ function getDate(date: Date) {
         </time>
 
         <!-- eslint-disable-next-line vue/no-v-html -->
-        <div v-html="th(item.body)"></div>
+        <div v-html="th(item.body)" class="prose"></div>
       </article>
     </div>
   </LayoutSection>
diff --git a/src/index.css b/src/index.css
index 9d7d38d..a23e4ef 100644
--- a/src/index.css
+++ b/src/index.css
@@ -95,6 +95,13 @@ select {
   @apply font-normal;
 }
 
+.prose ul {
+  padding-left: 2em;
+}
+.prose ul li {
+  list-style-type: disc;
+}
+
 @layer components {
   .mink-button {
     @apply p-1 px-2 rounded shadow bg-zinc-100 text-gray-700 cursor-pointer hover:drop-shadow-md hover:brightness-110 transition-all;

From aec8bf95306e336d1bcc5705b6e9a151f72dc510 Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild@klavaro.se>
Date: Fri, 26 Apr 2024 10:36:40 +0200
Subject: [PATCH 09/12] Fix and simplify addDays test

---
 src/util.test.ts | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/util.test.ts b/src/util.test.ts
index 8f33ed3..beef9fe 100644
--- a/src/util.test.ts
+++ b/src/util.test.ts
@@ -17,15 +17,11 @@ import {
 } from "@/util";
 
 describe("addDays", () => {
-  const d = new Date("24 April 2024 15:50 (CEST)");
-  test("across a month", () => {
-    expect(addDays(d, 10)).toEqual(new Date("4 May 2024 15:50 (CEST)"));
-    expect(addDays(d, -24)).toEqual(new Date("31 March 2024 15:50 (CEST)"));
-  });
-  test("across DST", () => {
-    // Notice the hour is different
-    expect(addDays(d, 200)).toEqual(new Date("10 November 2024 14:50 (CET)"));
-    expect(addDays(d, -25)).toEqual(new Date("30 March 2024 14:50 (CET)"));
+  const d = new Date("2024-04-24 08:00");
+  const getYmd = (date: Date) => date.toISOString().slice(0,10)
+  test("adds days", () => {
+    expect(getYmd(addDays(d, 10))).toBe("2024-05-04");
+    expect(getYmd(addDays(d, -31))).toBe("2024-03-24");
   });
 });
 

From b043246b45ba0b5aa8854c792948e555ce125d50 Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild@klavaro.se>
Date: Fri, 26 Apr 2024 10:37:14 +0200
Subject: [PATCH 10/12] Add Node 22 to test

---
 .github/workflows/ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 6c19d66..0f9e398 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -8,7 +8,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x, 20.x]
+        node-version: [18.x, 20.x, 22.x]
 
     steps:
       - uses: actions/checkout@v4

From 80a933f54ac78ff3d138d5eaf228af4b2f1fe379 Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild.matsson@gu.se>
Date: Tue, 30 Apr 2024 09:45:04 +0200
Subject: [PATCH 11/12] Fix flex alignment and link target

---
 src/corpus/analysis/AnalysisPanel.vue | 2 +-
 src/corpus/explore/ToolPanel.vue      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/corpus/analysis/AnalysisPanel.vue b/src/corpus/analysis/AnalysisPanel.vue
index a4d1903..45ded7e 100644
--- a/src/corpus/analysis/AnalysisPanel.vue
+++ b/src/corpus/analysis/AnalysisPanel.vue
@@ -39,7 +39,7 @@ watch(isDone, () => {
   <div>
     <PendingContent
       :on="`corpus/${corpusId}/job/sparv`"
-      class="flex flex-wrap gap-3 items-baseline"
+      class="flex flex-wrap gap-3 items-start"
     >
       <i18n-t keypath="analysis.help" scope="global" tag="p">
         <template #sparv>
diff --git a/src/corpus/explore/ToolPanel.vue b/src/corpus/explore/ToolPanel.vue
index 401a130..5623410 100644
--- a/src/corpus/explore/ToolPanel.vue
+++ b/src/corpus/explore/ToolPanel.vue
@@ -52,7 +52,7 @@ defineEmits<{
 
     <div class="text-sm text-gray-500 dark:text-gray-400">
       <div>{{ info }}</div>
-      <a v-if="linkUrl && linkText" :href="linkUrl">
+      <a v-if="linkUrl && linkText" :href="linkUrl" target="_blank">
         {{ linkText }}
       </a>
     </div>

From 7d640dd5ac5f05f5df310c0fbab980144a22ec1e Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild.matsson@gu.se>
Date: Tue, 30 Apr 2024 09:55:55 +0200
Subject: [PATCH 12/12] 1.6.0

---
 CHANGELOG.md | 5 ++++-
 package.json | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d58a20b..619551c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,8 @@ As this project is a user-facing application, the places in the semantic version
 
 ## [Unreleased]
 
+## [1.6.0] (2024-04-30)
+
 ### Added
 
 - News shown in two places on home page: featured on top, others under the intro text
@@ -199,7 +201,8 @@ The frontend is now open to the general public! This version allows users to:
 
 Code changes up until this point are not documented other than in the git commit log.
 
-[unreleased]: https://github.com/spraakbanken/mink-frontend/compare/v1.5.0...HEAD
+[unreleased]: https://github.com/spraakbanken/mink-frontend/compare/v1.6.0...HEAD
+[1.6.0]: https://github.com/spraakbanken/mink-frontend/compare/v1.5.0...v1.6.0
 [1.5.0]: https://github.com/spraakbanken/mink-frontend/compare/v1.4.0...v1.5.0
 [1.4.0]: https://github.com/spraakbanken/mink-frontend/compare/v1.3.0...v1.4.0
 [1.3.0]: https://github.com/spraakbanken/mink-frontend/compare/v1.2.0...v1.3.0
diff --git a/package.json b/package.json
index 95fc05a..79e30f2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mink-frontend",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "license": "MIT",
   "scripts": {
     "dev": "vite",