feat(main-header): hide play button on mobile unless tracking

On small screens the play button now only renders when a task is
actively tracked or a focus-mode session is running, freeing header
space when nothing is in progress.
This commit is contained in:
Johannes Millan 2026-04-21 16:30:11 +02:00
parent 79a618113a
commit d74a621d68
2 changed files with 12 additions and 1 deletions

View file

@ -27,7 +27,7 @@
<nav class="action-nav-right">
<div class="counters-action-group">
@if (isTimeTrackingEnabled()) {
@if (isPlayButtonVisible()) {
<play-button
[currentTask]="currentTask()"
[currentTaskId]="currentTaskId()"

View file

@ -46,6 +46,7 @@ import { LS } from '../../core/persistence/storage-keys.const';
import { UserProfileButtonComponent } from '../../features/user-profile/user-profile-button/user-profile-button.component';
import { FocusButtonComponent } from './focus-button/focus-button.component';
import { UserProfileService } from '../../features/user-profile/user-profile.service';
import { FocusModeService } from '../../features/focus-mode/focus-mode.service';
@Component({
selector: 'main-header',
@ -85,6 +86,7 @@ export class MainHeaderComponent implements OnDestroy {
private readonly _metricService = inject(MetricService);
private readonly _dateService = inject(DateService);
private readonly _dataInitStateService = inject(DataInitStateService);
private readonly _focusModeService = inject(FocusModeService);
readonly isDataLoaded = toSignal(this._dataInitStateService.isAllDataLoadedInitially$, {
initialValue: false,
@ -164,6 +166,15 @@ export class MainHeaderComponent implements OnDestroy {
readonly isTimeTrackingEnabled = computed(() => {
return this.globalConfigService.appFeatures().isTimeTrackingEnabled;
});
readonly isPlayButtonVisible = computed(() => {
if (!this.isTimeTrackingEnabled()) {
return false;
}
if (!this.isXs()) {
return true;
}
return !!this.currentTaskId() || this._focusModeService.isSessionRunning();
});
readonly isFocusModeEnabled = computed(() => {
return this.globalConfigService.appFeatures().isFocusModeEnabled;
});