refactor(habit-tracker): remove compact view toggle, make layout responsive

Remove the confusing compact/week view toggle and always show 7 days.
Habit names are now shown via CSS on wider screens (>600px) and hidden
on mobile, with title attribute for tooltip fallback.

src/app/core/persistence/storage-keys.const.ts

@@ -59,9 +59,6 @@ export enum LS {
   TASK_VIEW_CUSTOMIZER_SORT = 'SUP_TASK_VIEW_CUSTOMIZER_SORT',
   TASK_VIEW_CUSTOMIZER_GROUP = 'SUP_TASK_VIEW_CUSTOMIZER_GROUP',
   TASK_VIEW_CUSTOMIZER_FILTER = 'SUP_TASK_VIEW_CUSTOMIZER_FILTER',
-
-  // Habit tracker
-  HABIT_TRACKER_COMPACT_VIEW = 'SUP_HABIT_TRACKER_COMPACT_VIEW',
 }
 
 // SESSION STORAGE

src/app/features/simple-counter/habit-tracker/habit-tracker.component.html

@@ -39,21 +39,7 @@
 
   <div class="habit-grid">
     <div class="header-row">
-      <div
-        class="habit-label"
-        [class.compact]="isCompactView()"
-      >
-        <button
-          mat-icon-button
-          (click)="toggleCompactView()"
-          [matTooltip]="isCompactView() ? 'Hide Names' : 'Show Names'"
-          class="compact-toggle-btn"
-        >
-          <mat-icon>{{
-            isCompactView() ? 'keyboard_arrow_right' : 'keyboard_arrow_left'
-          }}</mat-icon>
-        </button>
-      </div>
+      <div class="header-spacer"></div>
       @for (day of days(); track day) {
         <div class="day-header">
           <div class="day-name">{{ parseDateLocal(day) | date: 'EEE' }}</div>
@@ -66,7 +52,7 @@
       <div class="habit-row">
         <div
           class="habit-title"
-          [class.compact]="isCompactView()"
+          [title]="counter.title"
           [matTooltip]="counter.title"
           (click)="openEditSettings(counter)"
           (contextmenu)="openEditSettings(counter); $event.preventDefault()"
@@ -81,11 +67,7 @@
           } @else {
             <div class="habit-initial">{{ counter.title.charAt(0).toUpperCase() }}</div>
           }
-          <span
-            class="habit-name"
-            [class.visible]="isCompactView()"
-            >{{ counter.title }}</span
-          >
+          <span class="habit-name">{{ counter.title }}</span>
         </div>
         @for (day of days(); track day) {
           <div

src/app/features/simple-counter/habit-tracker/habit-tracker.component.scss

@@ -78,49 +78,13 @@
   align-items: flex-end;
 }
 
-.habit-label {
-  flex: 0 0 40px;
-  width: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &.compact {
-    // Match the habit-title compact width (3 columns)
-    flex: 3 1 0px;
-    min-width: 90px;
-    max-width: 300px;
-    justify-content: flex-start;
-    padding: 0 8px;
-  }
+.header-spacer {
+  flex: 0 0 120px;
+  width: 120px;
 
   @media (max-width: 600px) {
-    flex: 0 0 36px;
-    width: 36px;
-
-    &.compact {
-      flex: 3 1 0px;
-      min-width: 96px;
-      max-width: 300px;
-      padding: 0 6px;
-    }
-  }
-
-  .compact-toggle-btn {
-    opacity: 0.5;
-    transition: opacity 0.2s ease;
-    width: 32px;
-    height: 32px;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    mat-icon {
-      font-size: 18px;
-      width: 18px;
-      height: 18px;
-    }
+    flex: 0 0 40px;
+    width: 40px;
   }
 }
 
@@ -169,41 +133,25 @@
 }
 
 .habit-title {
-  flex: 0 0 40px;
-  width: 40px;
+  flex: 0 0 120px;
+  width: 120px;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   overflow: hidden;
   cursor: pointer;
-  transition: all 0.3s ease;
   gap: 8px;
+  padding: 0 8px;
 
   &:hover {
     opacity: 0.7;
   }
 
-  &.compact {
-    // Take up the space of 3 day columns (since we're showing 4 instead of 7)
-    // Each day column is flex: 1 1 0px, so 3 columns = flex: 3 1 0px
-    flex: 3 1 0px;
-    min-width: 90px; // Minimum width for 3 columns
-    max-width: 300px; // Maximum width for 3 columns
-    justify-content: flex-start; // Icons left-aligned, text follows
-    padding: 0 8px;
-  }
-
   @media (max-width: 600px) {
-    flex: 0 0 36px;
-    width: 36px;
-
-    &.compact {
-      flex: 3 1 0px;
-      min-width: 96px; // 3 * 32px minimum for mobile
-      max-width: 300px;
-      padding: 0 6px;
-      justify-content: flex-start; // Icons left-aligned, text follows
-    }
+    flex: 0 0 40px;
+    width: 40px;
+    justify-content: center;
+    padding: 0;
   }
 
   .habit-icon {
@@ -252,20 +200,16 @@
   }
 
   .habit-name {
-    display: none;
+    display: block;
     font-size: 13px;
     font-weight: 500;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    min-width: 0; // Allow text to shrink and trigger ellipsis
-
-    &.visible {
-      display: block;
-    }
+    min-width: 0;
 
     @media (max-width: 600px) {
-      font-size: 12px;
+      display: none;
     }
   }
 }

src/app/features/simple-counter/habit-tracker/habit-tracker.component.ts

@@ -2,7 +2,6 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
-  effect,
   inject,
   input,
   signal,
@@ -21,8 +20,6 @@ import { DialogSimpleCounterEditComponent } from '../dialog-simple-counter-edit/
 import { DialogSimpleCounterEditSettingsComponent } from '../dialog-simple-counter-edit-settings/dialog-simple-counter-edit-settings.component';
 import { EMPTY_SIMPLE_COUNTER } from '../simple-counter.const';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { loadFromRealLs, saveToRealLs } from '../../../core/persistence/local-storage';
-import { LS } from '../../../core/persistence/storage-keys.const';
 
 @Component({
   selector: 'habit-tracker',
@@ -50,29 +47,12 @@ export class HabitTrackerComponent {
   SimpleCounterType = SimpleCounterType;
 
   dayOffset = signal(0);
-  isCompactView = signal(false);
-
-  constructor() {
-    // Load initial compact view state from localStorage
-    const savedCompactView = loadFromRealLs(LS.HABIT_TRACKER_COMPACT_VIEW) as
-      | { value: boolean }
-      | undefined;
-    if (savedCompactView && typeof savedCompactView.value === 'boolean') {
-      this.isCompactView.set(savedCompactView.value);
-    }
-
-    // Persist compact view state changes to localStorage
-    effect(() => {
-      saveToRealLs(LS.HABIT_TRACKER_COMPACT_VIEW, { value: this.isCompactView() });
-    });
-  }
 
   days = computed(() => {
     const days: string[] = [];
     const today = new Date();
     const offset = this.dayOffset();
-    const daysToShow = this.isCompactView() ? 3 : 6; // Show 4 days (0-3) or 7 days (0-6)
-    for (let i = daysToShow; i >= 0; i--) {
+    for (let i = 6; i >= 0; i--) {
       const d = new Date();
       d.setDate(today.getDate() - i + offset);
       days.push(this._dateService.todayStr(d));
@@ -81,23 +61,17 @@ export class HabitTrackerComponent {
   });
 
   prevWeek(): void {
-    const step = this.isCompactView() ? 4 : 7;
-    this.dayOffset.update((offset) => offset - step);
+    this.dayOffset.update((offset) => offset - 7);
   }
 
   nextWeek(): void {
-    const step = this.isCompactView() ? 4 : 7;
-    this.dayOffset.update((offset) => Math.min(0, offset + step));
+    this.dayOffset.update((offset) => Math.min(0, offset + 7));
   }
 
   resetToToday(): void {
     this.dayOffset.set(0);
   }
 
-  toggleCompactView(): void {
-    this.isCompactView.update((compact) => !compact);
-  }
-
   dateRangeLabel = computed(() => {
     const days = this.days();
     if (days.length === 0) return '';