refactor(dashboard): simplify layout and remove unused sections in LoggedInView

frontend/src/views/home/LoggedInView.vue

@@ -1,14 +1,10 @@
 <template>
   <div class="home-logged-in">
-    <section class="dashboard-hero surface-card">
+    <header class="dashboard-hero">
       <div class="dashboard-hero__copy">
-        <span class="dashboard-kicker">{{ $t('home.dashboard.kicker') }}</span>
         <h1>{{ $t('home.dashboard.title') }}</h1>
-        <p class="dashboard-subtitle">
-          {{ $t('home.dashboard.subtitle') }}
-        </p>
       </div>
-      <div class="dashboard-toolbar surface-card">
+      <div class="dashboard-toolbar">
         <button
           v-if="!editMode"
           type="button"
@@ -47,25 +43,7 @@
           </button>
         </template>
       </div>
-    </section>
+    </header>
-
-    <section class="dashboard-overview">
-      <article class="overview-card surface-card">
-        <span class="overview-card__label">{{ $t('home.dashboard.overview.activeWidgetsLabel') }}</span>
-        <strong>{{ widgets.length }}</strong>
-        <p>{{ $t('home.dashboard.overview.activeWidgetsText') }}</p>
-      </article>
-      <article class="overview-card surface-card">
-        <span class="overview-card__label">{{ $t('home.dashboard.overview.availableModulesLabel') }}</span>
-        <strong>{{ widgetTypeOptions.length }}</strong>
-        <p>{{ $t('home.dashboard.overview.availableModulesText') }}</p>
-      </article>
-      <article class="overview-card surface-card">
-        <span class="overview-card__label">{{ $t('home.dashboard.overview.editModeLabel') }}</span>
-        <strong>{{ editMode ? $t('home.dashboard.overview.editModeActive') : $t('home.dashboard.overview.editModeInactive') }}</strong>
-        <p>{{ editMode ? $t('home.dashboard.overview.editModeActiveText') : $t('home.dashboard.overview.editModeInactiveText') }}</p>
-      </article>
-    </section>
 
     <div
       v-if="loadError"
@@ -83,12 +61,6 @@
       v-else
       class="dashboard-shell"
     >
-      <div class="dashboard-shell__header">
-        <div>
-          <h2>{{ $t('home.dashboard.sectionTitle') }}</h2>
-          <p>{{ $t('home.dashboard.sectionIntro') }}</p>
-        </div>
-      </div>
       <div
         ref="dashboardGridRef"
         class="dashboard-grid"
@@ -382,85 +354,29 @@ export default {
 
 .dashboard-hero {
   display: flex;
-  align-items: stretch;
+  align-items: center;
   justify-content: space-between;
   gap: 20px;
-  padding: 26px;
+  min-height: 40px;
-  margin-bottom: 18px;
+  padding: 4px 0 10px;
-  background: var(--color-surface);
+  margin-bottom: 12px;
-  border-left: 3px solid var(--color-secondary);
 }
 
 .dashboard-hero__copy {
-  max-width: 640px;
+  min-width: 0;
-}
-
-.dashboard-kicker {
-  display: inline-block;
-  margin-bottom: 10px;
-  padding: 4px 10px;
-  border-radius: 2px;
-  background: var(--color-secondary-soft);
-  color: #28643d;
-  font-size: 0.75rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
 }
 
 .dashboard-hero h1 {
-  margin: 0 0 8px;
-}
-
-.dashboard-subtitle {
-  color: var(--color-text-secondary);
   margin: 0;
-  max-width: 58ch;
-}
-
-.dashboard-overview {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 16px;
-  margin-bottom: 18px;
-}
-
-.overview-card {
-  padding: 18px 20px;
-}
-
-.overview-card__label {
-  display: inline-block;
-  margin-bottom: 12px;
-  color: var(--color-text-muted);
-  font-size: 0.78rem;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-}
-
-.overview-card strong {
-  display: block;
-  margin-bottom: 8px;
-  font-size: 1.9rem;
-  line-height: 1;
-  color: var(--color-text-primary);
-}
-
-.overview-card p {
-  margin: 0;
-  color: var(--color-text-secondary);
 }
 
 .dashboard-toolbar {
   display: flex;
   align-items: center;
-  align-self: flex-start;
   flex-wrap: wrap;
   gap: 10px;
-  padding: 14px;
+  padding: 0;
-  min-width: 300px;
+  min-width: 0;
-  background: rgba(255, 255, 255, 0.72);
 }
 
 .btn-edit,
@@ -508,28 +424,8 @@ export default {
 }
 
 .dashboard-shell {
-  padding: 20px;
+  /* Widgets are the content; do not wrap them in an additional overview card. */
-  border-radius: var(--radius-lg);
+  padding: 0;
-  border: 1px solid var(--color-border);
-  background: var(--color-surface);
-  box-shadow: var(--shadow-soft);
-}
-
-.dashboard-shell__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16px;
-}
-
-.dashboard-shell__header h2 {
-  margin: 0 0 4px;
-  font-size: 1.4rem;
-}
-
-.dashboard-shell__header p {
-  margin: 0;
-  color: var(--color-text-secondary);
 }
 
 .dashboard-grid {
@@ -614,8 +510,8 @@ export default {
   }
 
   .dashboard-hero {
+    align-items: flex-start;
     flex-direction: column;
-    padding: 20px;
   }
 
   .dashboard-toolbar {
@@ -623,14 +519,6 @@ export default {
     min-width: 0;
   }
 
-  .dashboard-overview {
-    grid-template-columns: 1fr;
-  }
-
-  .dashboard-shell {
-    padding: 16px;
-  }
-
   .dashboard-grid {
     grid-template-columns: 1fr;
   }