Corsia Browser dedicata nella Timeline, occorrenze raggruppate per titolo

Separa l'attività dei browser (nuova isBrowserApp, ~35 nomi .exe) dalla
corsia "Generale" della Timeline in una corsia propria, raggruppata per
nome del browser invece che per singolo titolo — niente più muro di
blocchi quasi identici per ogni pagina/episodio visitato, dato che il
dominio reale del sito richiederebbe l'estensione browser ufficiale di
ActivityWatch, non più raggiungibile da questo server in-process.

Generalizza inoltre "Altre occorrenze" nel popup di dettaglio di un
blocco: ora raggruppa per titolo, per qualunque corsia con un campo
title distinto (non solo Browser), sostituendo la vecchia tabella
"titolo -> durata totale" limitata a Generale. Ogni titolo raggruppato
ha un pulsante per vedere solo gli screenshot dei suoi stessi orari.

Corregge anche un bug reale: cliccare un'attività specifica di un
browser da "Titoli finestra principali" evidenziava per sbaglio
l'intera corsia (tutte le sessioni della giornata) invece della sola
attività cliccata.

Author: CODEX-cpp

docs/CHANGELOG.md

@@ -5,6 +5,20 @@ quella della lingua attiva, per la versione in esecuzione (vedi
 `src-tauri/src/about.rs`, che scarica questo file da GitHub Pages).
 Non toccare questo formato senza aggiornare anche quel parser.
 
+## 0.1.14
+
+### it
+- Nuovo: l'attività dei browser (Chrome, Firefox, Edge, Zen, Brave e molti altri) ha ora una corsia dedicata nella Timeline della Home, invece di riempire la corsia "Generale" con un blocco per ogni pagina/scheda visitata.
+- Nuovo: nel dettaglio di un blocco della Timeline, quando ci sono più titoli distinti (es. più pagine visitate nello stesso browser), "Altre occorrenze" li mostra ora raggruppati per titolo invece che come un unico elenco mescolato.
+- Nuovo: ogni titolo raggruppato ha un pulsante per vedere solo gli screenshot catturati durante gli orari di quel titolo specifico, non quelli dell'intero blocco.
+- Corretto un bug per cui, cliccando un'attività specifica di un browser da "Titoli finestra principali", la Timeline evidenziava per sbaglio tutta la corsia (tutte le sessioni della giornata) invece della sola attività cliccata.
+
+### en
+- New: browser activity (Chrome, Firefox, Edge, Zen, Brave and many others) now gets its own dedicated lane in the Home Timeline, instead of filling the "General" lane with one block per page/tab visited.
+- New: in a Timeline block's detail popup, when there are multiple distinct titles (e.g. several pages visited in the same browser), "Other occurrences" now groups them by title instead of one mixed list.
+- New: each grouped title has a button to view only the screenshots captured during that specific title's own time ranges, not the whole block's.
+- Fixed a bug where clicking a specific browser activity from "Top Window Titles" incorrectly highlighted the entire lane (every session that day) instead of just the clicked activity.
+
 ## 0.1.13
 
 ### it

docs/changelog.html

@@ -42,6 +42,15 @@ <h1>Changelog</h1>
     errore mostrato.
   -->
   <div id="changelog-root">
+    <section class="changelog-entry">
+      <h2>0.1.14</h2>
+      <ul>
+        <li>New: browser activity (Chrome, Firefox, Edge, Zen, Brave and many others) now gets its own dedicated lane in the Home Timeline, instead of filling the "General" lane with one block per page/tab visited.</li>
+        <li>New: in a Timeline block's detail popup, when there are multiple distinct titles (e.g. several pages visited in the same browser), "Other occurrences" now groups them by title instead of one mixed list.</li>
+        <li>New: each grouped title has a button to view only the screenshots captured during that specific title's own time ranges, not the whole block's.</li>
+        <li>Fixed a bug where clicking a specific browser activity from "Top Window Titles" incorrectly highlighted the entire lane (every session that day) instead of just the clicked activity.</li>
+      </ul>
+    </section>
     <section class="changelog-entry">
       <h2>0.1.13</h2>
       <ul>

src/components/AiChatWidget.vue

@@ -289,9 +289,9 @@ export default {
   white-space: pre-wrap;
 }
 
-// Vue 2 (non Vue 3): ::v-deep, non :deep() — vedi lo stesso pattern già
-// usato in ScreenshotGalleryModal.vue per raggiungere markup iniettato
-// dinamicamente (lì un SVG, qui l'HTML prodotto da marked via v-html).
+// Vue 2 (non Vue 3): ::v-deep, non :deep() — stesso pattern già usato
+// altrove nell'app per raggiungere markup iniettato dinamicamente
+// (qui l'HTML prodotto da marked via v-html).
 .ai-chat-markdown {
   ::v-deep p {
     margin: 0 0 8px;

src/components/HomeTimelineSection.vue

@@ -210,10 +210,12 @@ div
 // matching timestamps between the Top Window Titles breakdown and the
 // screenshot strip by hand. This groups screenshots by whichever window
 // title was actually active when each was taken (via titleSegments'
-// real start/end times, see HomeTimelineSection.vue's
-// selectedBlockTitleSegments()), and opens a larger lightbox with
-// Prev/Next navigation across every screenshot in the block, not just
-// the ones in the group you clicked from.
+// real start/end times — the caller, TimelineBlockDetailModal.vue,
+// passes only the segments/screenshots for whichever title's "N foto"
+// link was clicked, already scoped to that title's own occurrences),
+// and opens a larger lightbox with Prev/Next navigation across every
+// screenshot passed in, not just the ones in the group you clicked
+// from within the lightbox.
 import moment from 'moment';
 import 'vue-awesome/icons/angle-left';
 import 'vue-awesome/icons/angle-right';

src/components/ScreenshotGalleryModal.vue

@@ -14,35 +14,44 @@ div
         span.block-detail-label {{ $t('home.timelineBlockDetail.duration') }}
         span.block-detail-value {{ formatDuration(block.end.diff(block.start, 'seconds')) }}
 
-    div.block-detail-subhead(v-if="occurrences.length > 1") {{ $t('home.timelineBlockDetail.otherOccurrences') }}
-    table.block-detail-table(v-if="occurrences.length > 1")
+    div.block-detail-subhead-row(v-if="occurrencesByTitle.length || occurrences.length > 1")
+      span.block-detail-subhead {{ $t('home.timelineBlockDetail.otherOccurrences') }}
+      // Solo nel caso non raggruppato — quando i titoli sono raggruppati,
+      // il pulsante vive accanto a ciascun titolo invece che qui.
+      span.block-detail-photos-btn(
+        v-if="!occurrencesByTitle.length && screenshotsFor(occurrences).length"
+        @click="openGallery(displayName, occurrences)"
+      ) {{ $t('home.timelineBlockDetail.viewPhotos', { count: screenshotsFor(occurrences).length }) }}
+    template(v-if="occurrencesByTitle.length")
+      div.block-detail-title-group(v-for="group in occurrencesByTitle" :key="group.title")
+        div.block-detail-title-group-head
+          span.block-detail-title-group-name {{ group.title }}
+          // Filtrato SOLO agli orari di questo titolo — richiesta
+          // esplicita: non tutte le foto del blocco, solo quelle cadute
+          // dentro una delle fasce orarie elencate qui sotto.
+          span.block-detail-photos-btn(
+            v-if="screenshotsFor(group.occurrences).length"
+            @click="openGallery(group.title, group.occurrences)"
+          ) {{ $t('home.timelineBlockDetail.viewPhotos', { count: screenshotsFor(group.occurrences).length }) }}
+        table.block-detail-table.block-detail-title-group-table
+          tbody
+            tr(v-for="(occ, i) in group.occurrences" :key="i")
+              td {{ occ.start.format('HH:mm') }} – {{ occ.end.format('HH:mm') }}
+              td {{ formatDuration(occ.end.diff(occ.start, 'seconds')) }}
+    table.block-detail-table(v-else-if="occurrences.length > 1")
       tbody
         tr(v-for="(occ, i) in occurrences" :key="i")
           td {{ occ.start.format('HH:mm') }} – {{ occ.end.format('HH:mm') }}
           td {{ formatDuration(occ.end.diff(occ.start, 'seconds')) }}
 
-    div.block-detail-subhead(v-if="titleBreakdown.length") {{ $t('home.timelineBlockDetail.topWindowTitles') }}
-    table.block-detail-table(v-if="titleBreakdown.length")
-      tbody
-        tr(v-for="(t, i) in titleBreakdown" :key="i")
-          td {{ t.title }}
-          td {{ formatDuration(t.duration) }}
-
     div.edit-modal-actions
-      // Explicit request: no more thumbnails dumped inline here (they
-      // read as disconnected from *when* in the block they happened) —
-      // a single button instead, opening a dedicated gallery that groups
-      // them by which window title was active, so "show me the
-      // screenshots of activity X" doesn't require mentally matching
-      // timestamps by hand.
-      div.pill-btn-ghost(v-if="screenshots.length" @click="showGallery = true") {{ $t('home.timelineBlockDetail.viewScreenshots', { count: screenshots.length }) }}
       div.pill-btn-ghost(@click="$emit('close')") {{ $t('home.timelineBlockDetail.close') }}
 
   screenshot-gallery-modal(
     v-if="showGallery"
-    :screenshots="screenshots"
-    :title-segments="titleSegments"
-    :display-name="displayName"
+    :screenshots="galleryScreenshots"
+    :title-segments="galleryTitleSegments"
+    :display-name="galleryTitle"
     @close="showGallery = false"
   )
 </template>
@@ -52,7 +61,7 @@ div
 @import '../style/modals.css';
 
 .block-detail-modal {
-  width: 400px;
+  width: 480px;
   max-height: 75vh;
   overflow-y: auto;
 }
@@ -79,11 +88,42 @@ div
   font-weight: var(--font-weight-semibold);
 }
 
+.block-detail-subhead-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+  margin: 16px 0 8px;
+}
+
 .block-detail-subhead {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-dim);
-  margin: 16px 0 8px;
+}
+
+// Vero pulsante a pillola a destra del titolo (non più un link a
+// testo semplice, giudicato brutto) — apre la galleria filtrata solo
+// agli orari di QUEL titolo (vedi screenshotsFor()/openGallery()
+// sotto), non a tutto il blocco.
+.block-detail-photos-btn {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-dim);
+  background-color: var(--color-surface2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-pill);
+  padding: 3px 10px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.block-detail-photos-btn:hover {
+  color: var(--color-text);
+  border-color: var(--color-accent1);
 }
 
 .block-detail-table {
@@ -106,6 +146,60 @@ div
 .block-detail-table tr:last-child td {
   border-bottom: none;
 }
+
+.block-detail-title-group + .block-detail-title-group {
+  margin-top: 12px;
+}
+
+.block-detail-title-group-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 4px;
+}
+
+.block-detail-title-group-name {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text);
+}
+
+// Righe orario leggermente rientrate, con una barra verticale a
+// sinistra allineata col titolo sopra — richiesta estetica esplicita.
+// Il padding va sulla prima cella, non sulla <table>: il padding di un
+// elemento <table> non crea spazio visibile prima del contenuto delle
+// celle (a differenza di un div), motivo per cui riga e barra
+// risultavano incollate nel primo tentativo.
+.block-detail-title-group-table {
+  margin-left: 0;
+  border-left: 2px solid var(--color-border);
+}
+
+.block-detail-title-group-table td:first-child {
+  padding-left: 10px;
+}
+
+// La riga di separazione tra un orario e l'altro (border-bottom, da
+// .block-detail-table td) partiva dal bordo sinistro della cella —
+// stesso punto della barra verticale qui sopra, formando una "T" ad
+// ogni riga. Sostituita con una linea disegnata via gradiente, che
+// parte più a destra (stesso rientro del testo) invece di toccare la
+// barra.
+.block-detail-title-group-table td {
+  border-bottom: none;
+}
+
+.block-detail-title-group-table tr {
+  background-image: linear-gradient(to right, transparent 10px, var(--color-border) 10px);
+  background-position: bottom;
+  background-repeat: no-repeat;
+  background-size: 100% 1px;
+}
+
+.block-detail-title-group-table tr:last-child {
+  background-image: none;
+}
 </style>
 
 <script lang="ts">
@@ -120,6 +214,12 @@ import { formatDuration } from '~/util/projectTime';
 import { displayNameForApp } from '~/util/appNames';
 import { getHomeClient } from '~/util/awclient';
 
+interface Screenshot {
+  filename: string;
+  time: string;
+  timestamp: moment.Moment;
+}
+
 export default {
   name: 'TimelineBlockDetailModal',
   components: {
@@ -129,34 +229,40 @@ export default {
     block: { type: Object, required: true },
     laneName: { type: String, required: true },
     occurrences: { type: Array, default: () => [] },
-    // Per-title time breakdown within this block's own range — computed
-    // by the parent (HomeTimelineSection.vue's selectedBlockTitleBreakdown(),
-    // which has the raw window events this needs), empty for anything
-    // that isn't a whole Generale-lane app block.
-    titleBreakdown: { type: Array, default: () => [] },
-    // Same source data as titleBreakdown but with real start/end moments
-    // instead of just totals — handed straight through to the gallery
-    // (see selectedBlockTitleSegments()), which needs actual timestamps
-    // to match each screenshot to the title active when it was taken.
-    titleSegments: { type: Array, default: () => [] },
+    // Stessa lista di occurrences, ma raggruppata per titolo — quando
+    // presente sostituisce del tutto la tabella piatta sopra (solo per
+    // le corsie i cui eventi grezzi hanno un campo title distinto, vedi
+    // selectedOccurrencesByTitle() in HomeTimelineSection.vue).
+    occurrencesByTitle: { type: Array, default: () => [] },
   },
   data() {
     return {
-      // Desktop screenshots (aw-watcher-screenshot) captured during this
-      // block's own time range — not scoped to `laneName`, since a
-      // screenshot is evidence of what was on screen regardless of
-      // which lane the clicked block belongs to.
-      screenshots: [] as { filename: string; time: string; timestamp: moment.Moment }[],
-      // Explicit request: no more inline thumbnails/lightbox here — a
-      // single button opens the dedicated gallery instead (see
-      // ScreenshotGalleryModal.vue).
+      // Screenshot di TUTTA la giornata coperta da occurrences/
+      // occurrencesByTitle (non solo l'intervallo del blocco cliccato,
+      // vedi screenshotRange) — caricati una sola volta, poi filtrati
+      // per titolo al volo in screenshotsFor() invece di rifare una
+      // richiesta di rete ad ogni click su un pulsante diverso.
+      screenshots: [] as Screenshot[],
       showGallery: false,
+      galleryTitle: '',
+      galleryScreenshots: [] as Screenshot[],
+      galleryTitleSegments: [] as { title: string; start: moment.Moment; end: moment.Moment }[],
     };
   },
   computed: {
     displayName(): string {
       return displayNameForApp(this.block.key);
     },
+    // L'intervallo da interrogare per gli screenshot: non solo
+    // block.start/end (una singola occorrenza), ma l'estremo min/max fra
+    // TUTTE le occorrenze del giorno — necessario perché ogni pulsante
+    // "N foto" può aprire la galleria per un titolo comparso ore prima o
+    // dopo l'istanza di blocco effettivamente cliccata.
+    screenshotRange(): { start: moment.Moment; end: moment.Moment } {
+      const starts = [this.block.start, ...this.occurrences.map((o: any) => o.start)];
+      const ends = [this.block.end, ...this.occurrences.map((o: any) => o.end)];
+      return { start: moment.min(starts), end: moment.max(ends) };
+    },
   },
   watch: {
     block: {
@@ -177,8 +283,8 @@ export default {
       try {
         // Detached client — see getHomeClient() for why.
         events = await getHomeClient().getEvents('aw-watcher-screenshot', {
-          start: this.block.start.toDate(),
-          end: this.block.end.toDate(),
+          start: this.screenshotRange.start.toDate(),
+          end: this.screenshotRange.end.toDate(),
           limit: -1,
         });
       } catch {
@@ -196,6 +302,20 @@ export default {
         // top-to-bottom as "earliest in this block" first.
         .reverse();
     },
+    // Solo gli screenshot caduti dentro una qualunque delle fasce
+    // orarie passate — usato sia per decidere se mostrare il pulsante
+    // (nessuna foto = nessun pulsante) sia per popolare la galleria.
+    screenshotsFor(occs: { start: moment.Moment; end: moment.Moment }[]): Screenshot[] {
+      return this.screenshots.filter((s: Screenshot) =>
+        occs.some(o => !s.timestamp.isBefore(o.start) && s.timestamp.isBefore(o.end))
+      );
+    },
+    openGallery(title: string, occs: { start: moment.Moment; end: moment.Moment }[]) {
+      this.galleryTitle = title;
+      this.galleryScreenshots = this.screenshotsFor(occs);
+      this.galleryTitleSegments = occs.map(o => ({ title, start: o.start, end: o.end }));
+      this.showGallery = true;
+    },
   },
 };
 </script>

src/components/TimelineBlockDetailModal.vue

@@ -665,8 +665,7 @@ Clear all rules from the editor, leaving it as \`[]\` (or empty), and save.`,
       time: 'Time',
       duration: 'Duration',
       otherOccurrences: 'Other occurrences today',
-      topWindowTitles: 'Top Window Titles',
-      viewScreenshots: 'View {count} screenshots',
+      viewPhotos: '{count} photos',
       close: 'Close',
     },
     calendarPicker: {

src/i18n/locales/en.ts

@@ -670,8 +670,7 @@ Cancella tutte le regole dall'editor, lasciandolo con \`[]\` (o vuoto), e salva.
       time: 'Orario',
       duration: 'Durata',
       otherOccurrences: 'Altre occorrenze oggi',
-      topWindowTitles: 'Top Window Titles',
-      viewScreenshots: 'Vedi {count} screenshot',
+      viewPhotos: '{count} foto',
       close: 'Chiudi',
     },
     calendarPicker: {