From 8ec7db031bc9aabd67f00f1b4614d60b9d36db65 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Thu, 29 Jan 2026 17:26:43 +0100
Subject: [PATCH] Refactor DashboardWidget and LoggedInView: Update
 DashboardWidget to display a single news article instead of a list, enhancing
 user experience. Remove logout button and related functionality from
 LoggedInView to streamline the interface.

---
 frontend/src/components/DashboardWidget.vue | 35 ++++++++-----
 frontend/src/views/home/LoggedInView.vue    | 58 ++++++---------------
 2 files changed, 38 insertions(+), 55 deletions(-)

diff --git a/frontend/src/components/DashboardWidget.vue b/frontend/src/components/DashboardWidget.vue
index 61ed3c0..d0d3a97 100644
--- a/frontend/src/components/DashboardWidget.vue
+++ b/frontend/src/components/DashboardWidget.vue
@@ -14,15 +14,13 @@
       <div v-else-if="error" class="dashboard-widget__state dashboard-widget__error">{{ error }}</div>
       <div v-else class="dashboard-widget__body">
         <slot :data="data">
-          <template v-if="newsDataResults.length">
-            <ul class="dashboard-widget__list">
-              <li v-for="(item, i) in newsDataResults" :key="item.article_id || i" class="dashboard-widget__list-item">
-                <a v-if="item.link" :href="item.link" target="_blank" rel="noopener noreferrer" class="dashboard-widget__news-title">{{ item.title || '—' }}</a>
-                <span v-else class="dashboard-widget__title-text">{{ item.title || '—' }}</span>
-                <span v-if="item.pubDate" class="dashboard-widget__date">{{ formatNewsDate(item.pubDate) }}</span>
-                <p v-if="item.description" class="dashboard-widget__desc">{{ item.description }}</p>
-              </li>
-            </ul>
+          <template v-if="newsDataSingleItem">
+            <article class="dashboard-widget__news-single">
+              <a v-if="newsDataSingleItem.link" :href="newsDataSingleItem.link" target="_blank" rel="noopener noreferrer" class="dashboard-widget__news-title">{{ newsDataSingleItem.title || '—' }}</a>
+              <span v-else class="dashboard-widget__title-text">{{ newsDataSingleItem.title || '—' }}</span>
+              <span v-if="newsDataSingleItem.pubDate" class="dashboard-widget__date">{{ formatNewsDate(newsDataSingleItem.pubDate) }}</span>
+              <p v-if="newsDataSingleItem.description" class="dashboard-widget__desc">{{ newsDataSingleItem.description }}</p>
+            </article>
           </template>
           <template v-else-if="falukantData">
             <dl class="dashboard-widget__falukant">
@@ -86,6 +84,11 @@ export default {
       if (d && typeof d === 'object' && Array.isArray(d.results)) return d.results;
       return [];
     },
+    /** Pro News-Widget wird nur ein Artikel angezeigt (erster der Seite; Counter sorgt für unterschiedliche Seiten). */
+    newsDataSingleItem() {
+      const list = this.newsDataResults;
+      return list.length ? list[0] : null;
+    },
     falukantData() {
       const d = this.data;
       if (d && typeof d === 'object' && 'characterName' in d && 'money' in d) return d;
@@ -203,11 +206,11 @@ export default {
   align-items: center;
   gap: 8px;
   padding: 10px 12px;
-  background: var(--dashboard-widget-title-bg, #f1f3f5);
-  border-bottom: 1px solid var(--dashboard-widget-border, #dee2e6);
+  background: var(--color-primary-orange-light, #fff8e1);
+  border-bottom: 1px solid var(--color-text-secondary, #dee2e6);
   font-weight: 600;
   font-size: 0.95rem;
-  color: var(--dashboard-widget-title-color, #333);
+  color: var(--color-text-primary);
 }
 
 .dashboard-widget__drag-handle {
@@ -227,6 +230,7 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  color: var(--color-text-primary);
 }
 
 .dashboard-widget__frame {
@@ -276,13 +280,18 @@ export default {
   color: #333;
 }
 
+.dashboard-widget__news-single {
+  margin: 0;
+}
+
 .dashboard-widget__news-title {
   font-weight: 600;
-  color: #0d6efd;
+  color: var(--color-primary-orange);
   text-decoration: none;
 }
 .dashboard-widget__news-title:hover {
   text-decoration: underline;
+  color: var(--color-text-secondary);
 }
 
 .dashboard-widget__desc {
diff --git a/frontend/src/views/home/LoggedInView.vue b/frontend/src/views/home/LoggedInView.vue
index e8fba24..152f06e 100644
--- a/frontend/src/views/home/LoggedInView.vue
+++ b/frontend/src/views/home/LoggedInView.vue
@@ -33,9 +33,6 @@
             Fertig
           </button>
         </template>
-        <button type="button" class="logout-btn" @click="handleLogout">
-          Logout
-        </button>
       </div>
     </header>
 
@@ -107,7 +104,6 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex';
 import apiClient from '@/utils/axios.js';
 import DashboardWidget from '@/components/DashboardWidget.vue';
 
@@ -143,7 +139,6 @@ export default {
     this.loadAvailableWidgets();
   },
   methods: {
-    ...mapActions(['logout']),
     /** Counter für EP: wievieltes Widget mit gleichem Endpoint (0, 1, 2, …), damit z. B. News nicht doppelt. */
     widgetRequestCounter(index) {
       const endpoint = this.widgets[index]?.endpoint;
@@ -154,9 +149,6 @@ export default {
       }
       return count;
     },
-    handleLogout() {
-      this.logout();
-    },
     async loadAvailableWidgets() {
       try {
         const { data } = await apiClient.get('/api/dashboard/widgets');
@@ -285,20 +277,21 @@ export default {
 }
 
 .btn-edit,
-.btn-add,
 .btn-done {
   padding: 8px 14px;
-  border-radius: 6px;
-  border: 1px solid #ced4da;
-  background: #fff;
-  color: #495057;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  background: var(--color-primary-orange);
+  color: var(--color-text-on-orange);
   cursor: pointer;
   font-size: 0.9rem;
 }
 
 .btn-edit:hover,
 .btn-done:hover {
-  background: #f1f3f5;
+  background: var(--color-primary-orange-light);
+  color: var(--color-text-secondary);
+  border-color: var(--color-text-secondary);
 }
 
 .widget-add-row {
@@ -308,34 +301,14 @@ export default {
 
 .widget-type-select {
   padding: 8px 12px;
-  border-radius: 6px;
-  border: 1px solid #ced4da;
+  border-radius: 4px;
+  border: 1px solid var(--color-text-secondary);
   background: #fff;
-  color: #495057;
+  color: var(--color-text-primary);
   font-size: 0.9rem;
   min-width: 180px;
 }
 
-.btn-done {
-  border-color: #198754;
-  color: #198754;
-}
-
-.logout-btn {
-  margin-left: auto;
-  background: #dc3545;
-  color: white;
-  border: none;
-  padding: 8px 16px;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 0.9rem;
-}
-
-.logout-btn:hover {
-  background: #c82333;
-}
-
 .dashboard-message {
   padding: 16px;
   border-radius: 8px;
@@ -396,17 +369,18 @@ export default {
 .btn-remove {
   align-self: flex-start;
   padding: 6px 12px;
-  border: 1px solid #dc3545;
-  background: #fff;
-  color: #dc3545;
+  border: 1px solid transparent;
+  background: var(--color-primary-orange);
+  color: var(--color-text-on-orange);
   border-radius: 4px;
   cursor: pointer;
   font-size: 0.85rem;
 }
 
 .btn-remove:hover {
-  background: #dc3545;
-  color: #fff;
+  background: var(--color-primary-orange-light);
+  color: var(--color-text-secondary);
+  border-color: var(--color-text-secondary);
 }
 
 .dashboard-empty {