Fix Reading Session Timeline bars (#1978)

* Fix Reading Session Timeline bars

* Remove header

---------

Co-authored-by: acx10 <acx10@users.noreply.github.com>

.github/workflows/develop-pipeline.yml

@@ -0,0 +1,146 @@
+name: Develop & PR – Build, Test, and Container Publish
+
+on:
+  push:
+    branches:
+      - develop
+  pull_request:
+    branches:
+      - '**'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  migration-check:
+    name: Flyway Migration Check
+    uses: ./.github/workflows/migrations-check.yml
+    with:
+      base_ref: 'origin/develop'
+      head_ref: 'HEAD'
+
+  build-and-push:
+    needs: [ migration-check ]
+    if: needs.migration-check.result == 'success' || needs.migration-check.result == 'skipped'
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      packages: write
+      checks: write
+      pull-requests: write
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 0
+
+      # ----------------------------------------
+      # Environment setup
+      # ----------------------------------------
+      - name: Set Up QEMU for Multi-Arch Builds
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set Up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Set Up JDK 21
+        uses: actions/setup-java@v5
+        with:
+          java-version: '21'
+          distribution: 'temurin'
+          cache: gradle
+
+      # ----------------------------------------
+      # Backend tests
+      # ----------------------------------------
+      - name: Execute Backend Tests
+        id: backend_tests
+        working-directory: ./booklore-api
+        run: |
+          echo "Running backend tests..."
+          ./gradlew test --no-daemon --parallel --build-cache
+        continue-on-error: true
+
+      - name: Publish Backend Test Results
+        uses: EnricoMi/publish-unit-test-result-action@v2
+        if: always()
+        with:
+          files: booklore-api/build/test-results/**/*.xml
+          check_name: Backend Test Results
+
+      - name: Upload Backend Test Reports
+        uses: actions/upload-artifact@v6
+        if: always()
+        with:
+          name: test-reports
+          path: |
+            booklore-api/build/reports/tests/
+            booklore-api/build/test-results/
+          retention-days: 30
+
+      - name: Validate Backend Test Results
+        if: steps.backend_tests.outcome == 'failure'
+        run: |
+          echo "❌ Backend tests failed"
+          exit 1
+
+      # ----------------------------------------
+      # Image tagging
+      # ----------------------------------------
+      - name: Generate Image Tag
+        id: set_image_tag
+        run: |
+          short_sha=$(git rev-parse --short HEAD)
+
+          if [ "${{ github.event_name }}" = "pull_request" ]; then
+            image_tag="pr-${{ github.event.pull_request.number }}-${short_sha}"
+          else
+            image_tag="develop-${short_sha}"
+          fi
+
+          echo "image_tag=$image_tag" >> $GITHUB_ENV
+          echo "Image tag: $image_tag"
+
+      # ----------------------------------------
+      # Docker login (pushes & internal PRs only)
+      # ----------------------------------------
+      - name: Authenticate to Docker Hub
+        if: github.event_name == 'push' || github.event.pull_request.head.repo.full_name == github.repository
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Authenticate to GitHub Container Registry
+        if: github.event_name == 'push' || github.event.pull_request.head.repo.full_name == github.repository
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ github.token }}
+
+      # ----------------------------------------
+      # Docker build & push (push + internal PRs)
+      # ----------------------------------------
+      - name: Build and push Docker image
+        if: github.event_name == 'push' || github.event.pull_request.head.repo.full_name == github.repository
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: |
+            booklore/booklore:${{ env.image_tag }}
+            ghcr.io/booklore-app/booklore:${{ env.image_tag }}
+          build-args: |
+            APP_VERSION=${{ env.image_tag }}
+            APP_REVISION=${{ github.sha }}
+          cache-from: |
+            type=gha
+            type=registry,ref=ghcr.io/booklore-app/booklore:buildcache
+          cache-to: |
+            type=gha,mode=max
+            type=registry,ref=ghcr.io/booklore-app/booklore:buildcache,mode=max

.github/workflows/docker-build-publish.yml

@@ -1,305 +0,0 @@
-name: Build, Tag, Push, and Release to GitHub Container Registry
-
-on:
-  push:
-    branches:
-      - 'master'
-      - 'develop'
-  pull_request:
-    branches:
-      - '**'
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  check-for-migrations:
-    name: Check for DB Migrations
-    if: github.event_name == 'pull_request' && ((github.base_ref == 'master' && github.head_ref == 'develop') || github.base_ref == 'develop')
-    runs-on: ubuntu-latest
-    outputs:
-      has_migrations: ${{ steps.check_migrations.outputs.has_migrations }}
-    steps:
-      - name: Checkout Repository for Diff
-        uses: actions/checkout@v6
-        with:
-          fetch-depth: 0
-
-      - name: Detect Flyway Migration Changes
-        id: check_migrations
-        run: |
-          # Compare PR head with the target base branch
-          if git diff --name-only origin/${{ github.base_ref }}...HEAD | grep -q "booklore-api/src/main/resources/db/migration/V.*.sql"; then
-            echo "Migration file changes detected. Proceeding with migration preview."
-            echo "has_migrations=true" >> $GITHUB_OUTPUT
-          else
-            echo "No migration file changes detected. Skipping migration preview."
-            echo "has_migrations=false" >> $GITHUB_OUTPUT
-          fi
-
-  flyway-migration-preview:
-    name: Flyway DB Migration Preview
-    needs: [ check-for-migrations ]
-    if: needs.check-for-migrations.outputs.has_migrations == 'true'
-    runs-on: ubuntu-latest
-    services:
-      mariadb:
-        image: mariadb:10.6
-        env:
-          MYSQL_ROOT_PASSWORD: root
-          MYSQL_DATABASE: booklore_test
-        ports:
-          - 3306:3306
-        options: >-
-          --health-cmd="mysqladmin ping --silent"
-          --health-interval=5s
-          --health-timeout=5s
-          --health-retries=10
-
-    steps:
-      - name: Checkout Base Branch
-        uses: actions/checkout@v6
-        with:
-          ref: '${{ github.base_ref }}'
-
-      - name: Apply Migrations from Base Branch
-        run: |
-          echo "Applying migrations from '${{ github.base_ref }}' branch..."
-          docker run --network host \
-            -v ${{ github.workspace }}:/flyway/sql \
-            flyway/flyway:11.19.0-alpine \
-            -url=jdbc:mariadb://127.0.0.1:3306/booklore_test \
-            -user=root -password=root \
-            -locations=filesystem:/flyway/sql/booklore-api/src/main/resources/db/migration \
-            migrate
-
-      - name: Checkout Pull Request Branch
-        uses: actions/checkout@v6
-
-      - name: Apply Migrations from PR Branch
-        run: |
-          echo "Applying new migrations from PR branch..."
-          docker run --network host \
-            -v ${{ github.workspace }}:/flyway/sql \
-            flyway/flyway:11.19.0-alpine \
-            -url=jdbc:mariadb://127.0.0.1:3306/booklore_test \
-            -user=root -password=root \
-            -locations=filesystem:/flyway/sql/booklore-api/src/main/resources/db/migration \
-            migrate
-
-      - name: Confirm Flyway Dry Run Success
-        run: echo "✅ Flyway migration preview successful. Migrations can be applied cleanly."
-
-  build-and-push:
-    needs: [ check-for-migrations, flyway-migration-preview ]
-    if: always() && (needs.flyway-migration-preview.result == 'success' || needs.flyway-migration-preview.result == 'skipped')
-    runs-on: ubuntu-latest
-
-    permissions:
-      contents: write
-      packages: write
-      issues: read
-      checks: write
-      pull-requests: write
-
-    steps:
-      - name: Checkout Repository
-        uses: actions/checkout@v6
-        with:
-          fetch-depth: 0
-
-      - name: Authenticate to Docker Hub
-        if: github.event_name == 'push'
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
-
-      - name: Authenticate to GitHub Container Registry
-        if: github.event_name == 'push'
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ github.token }}
-
-      - name: Set Up QEMU for Multi-Architecture Builds
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set Up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Set Up JDK 21
-        uses: actions/setup-java@v5
-        with:
-          java-version: '21'
-          distribution: 'temurin'
-          cache: 'gradle'
-
-      - name: Execute Backend Tests
-        id: backend_tests
-        working-directory: ./booklore-api
-        run: |
-          echo "Running backend tests with testcontainers..."
-          ./gradlew test --no-daemon --parallel --build-cache
-        continue-on-error: true
-
-      - name: Publish Backend Test Results
-        uses: EnricoMi/publish-unit-test-result-action@v2
-        if: always()
-        with:
-          files: booklore-api/build/test-results/**/*.xml
-          check_name: Backend Test Results
-          comment_title: Backend Test Results
-          report_individual_runs: true
-          report_suite_logs: 'any'
-
-      - name: Upload Backend Test Reports
-        uses: actions/upload-artifact@v6
-        if: always()
-        with:
-          name: test-reports
-          path: |
-            booklore-api/build/reports/tests/
-            booklore-api/build/test-results/
-          retention-days: 30
-
-      - name: Validate Backend Test Results
-        if: steps.backend_tests.outcome == 'failure'
-        run: |
-          echo "❌ Backend tests failed! Check the test results above."
-          exit 1
-
-      - name: Retrieve Latest Master Version Tag
-        id: get_version
-        run: |
-          latest_tag=$(git tag --list "v*" --sort=-v:refname | head -n 1)
-          latest_tag=${latest_tag:-"v0.0.0"}
-          echo "latest_tag=$latest_tag" >> $GITHUB_ENV
-          echo "Latest master tag: $latest_tag"
-
-      - name: Determine Version Bump (Master Only)
-        if: github.ref == 'refs/heads/master'
-        id: determine_bump
-        env:
-          GH_TOKEN: ${{ github.token }}
-        run: |
-          echo "Determining version bump from PR labels..."
-
-          # Extract PR number from merge commit
-          pr_number=$(git log -1 --pretty=%B | grep -oE 'Merge pull request #[0-9]+' | grep -oE '[0-9]+') || true
-          if [ -z "$pr_number" ]; then
-            pr_number=$(gh pr list --state merged --base master --limit 1 --json number --jq '.[0].number')
-          fi
-          echo "PR number: $pr_number"
-
-          labels=$(gh pr view "$pr_number" --json labels --jq '.labels[].name' || echo "")
-          echo "PR labels: $labels"
-
-          if echo "$labels" | grep -q 'bump:major'; then
-            bump="major"
-          elif echo "$labels" | grep -q 'bump:minor'; then
-            bump="minor"
-          elif echo "$labels" | grep -q 'bump:patch'; then
-            bump="patch"
-          else
-            last_commit_msg=$(git log -1 --pretty=%B)
-            if echo "$last_commit_msg" | grep -iq '#major'; then
-              bump="major"
-            elif echo "$last_commit_msg" | grep -iq '#minor'; then
-              bump="minor"
-            elif echo "$last_commit_msg" | grep -iq '#patch'; then
-              bump="patch"
-            else
-              bump="patch"
-            fi
-          fi
-
-          # Calculate next version
-          semver=$(echo ${{ env.latest_tag }} | sed 's/^v//')
-          major=$(echo $semver | cut -d. -f1)
-          minor=$(echo $semver | cut -d. -f2)
-          patch=$(echo $semver | cut -d. -f3)
-
-          case "$bump" in
-            major) major=$((major+1)); minor=0; patch=0 ;;
-            minor) minor=$((minor+1)); patch=0 ;;
-            patch) patch=$((patch+1)) ;;
-          esac
-
-          next_version="v${major}.${minor}.${patch}"
-          echo "Version bump type: $bump"
-          echo "Next version: $next_version"
-
-          echo "bump=$bump" >> $GITHUB_ENV
-          echo "new_tag=$next_version" >> $GITHUB_ENV
-
-      - name: Generate Image Tag
-        id: set_image_tag
-        run: |
-          branch="${GITHUB_REF#refs/heads/}"
-          if [[ "$branch" == "master" ]]; then
-            image_tag="${{ env.new_tag }}"
-          elif [[ "$branch" == "develop" ]]; then
-            short_sha=$(git rev-parse --short HEAD)
-            image_tag="${{ env.latest_tag }}-develop-${short_sha}"
-          else
-            short_sha=$(git rev-parse --short HEAD)
-            image_tag="${short_sha}"
-          fi
-          echo "image_tag=$image_tag" >> $GITHUB_ENV
-          echo "Image tag: $image_tag"
-
-      - name: Build and push Docker image
-        if: github.event_name == 'push'
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          platforms: linux/amd64,linux/arm64
-          push: true
-          tags: |
-            booklore/booklore:${{ env.image_tag }}
-            ghcr.io/booklore-app/booklore:${{ env.image_tag }}
-          build-args: |
-            APP_VERSION=${{ env.image_tag }}
-            APP_REVISION=${{ github.sha }}
-          cache-from: |
-            type=gha
-            type=registry,ref=ghcr.io/booklore-app/booklore:buildcache
-          cache-to: |
-            type=gha,mode=max
-            type=registry,ref=ghcr.io/booklore-app/booklore:buildcache,mode=max
-
-      - name: Push Latest Tag (Master Only)
-        if: github.ref == 'refs/heads/master' && github.event_name == 'push'
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          platforms: linux/amd64,linux/arm64
-          push: true
-          tags: |
-            booklore/booklore:latest
-            booklore/booklore:${{ env.new_tag }}
-            ghcr.io/booklore-app/booklore:latest
-            ghcr.io/booklore-app/booklore:${{ env.new_tag }}
-          build-args: |
-            APP_VERSION=${{ env.new_tag }}
-            APP_REVISION=${{ github.sha }}
-          cache-from: type=gha
-
-      - name: Update GitHub Release Draft (Master Only)
-        if: github.ref == 'refs/heads/master'
-        uses: release-drafter/release-drafter@v6
-        with:
-          tag: ${{ env.new_tag }}
-          name: "Release ${{ env.new_tag }}"
-        env:
-          GITHUB_TOKEN: ${{ github.token }}
-
-      - name: Publish GitHub Draft Release (Master Only)
-        if: github.ref == 'refs/heads/master'
-        env:
-          GITHUB_TOKEN: ${{ github.token }}
-        run: |
-          gh release edit ${{ env.new_tag }} --draft=true

.github/workflows/master-pipeline.yml

@@ -0,0 +1,154 @@
+name: Master - Build, Tag, Push, and Release
+
+on:
+  push:
+    branches:
+      - 'master'
+
+jobs:
+  migration-check:
+    name: Flyway Migration Check on Master
+    uses: ./.github/workflows/migrations-check.yml
+    with:
+      base_ref: 'HEAD~1'
+      head_ref: 'HEAD'
+
+  build-and-release:
+    needs: [ migration-check ]
+    if: needs.migration-check.result == 'success' || needs.migration-check.result == 'skipped'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      packages: write
+      pull-requests: read
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 0
+
+      - name: Authenticate to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Authenticate to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ github.token }}
+
+      - name: Set Up QEMU for Multi-Architecture Builds
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set Up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Set Up JDK 21
+        uses: actions/setup-java@v5
+        with:
+          java-version: '21'
+          distribution: 'temurin'
+          cache: 'gradle'
+
+      - name: Retrieve Latest Master Version Tag
+        id: get_version
+        run: |
+          latest_tag=$(git tag --list "v*" --sort=-v:refname | head -n 1)
+          latest_tag=${latest_tag:-"v0.0.0"}
+          echo "latest_tag=$latest_tag" >> $GITHUB_ENV
+          echo "Latest master tag: $latest_tag"
+
+      - name: Determine Version Bump
+        id: determine_bump
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          echo "Determining version bump from PR labels..."
+
+          # Extract PR number from merge commit
+          pr_number=$(git log -1 --pretty=%B | grep -oE 'Merge pull request #[0-9]+' | grep -oE '[0-9]+') || true
+          if [ -z "$pr_number" ]; then
+            pr_number=$(gh pr list --state merged --base master --limit 1 --json number --jq '.[0].number')
+          fi
+          echo "PR number: $pr_number"
+
+          labels=$(gh pr view "$pr_number" --json labels --jq '.labels[].name' || echo "")
+          echo "PR labels: $labels"
+
+          if echo "$labels" | grep -q 'bump:major'; then
+            bump="major"
+          elif echo "$labels" | grep -q 'bump:minor'; then
+            bump="minor"
+          elif echo "$labels" | grep -q 'bump:patch'; then
+            bump="patch"
+          else
+            last_commit_msg=$(git log -1 --pretty=%B)
+            if echo "$last_commit_msg" | grep -iq '#major'; then
+              bump="major"
+            elif echo "$last_commit_msg" | grep -iq '#minor'; then
+              bump="minor"
+            elif echo "$last_commit_msg" | grep -iq '#patch'; then
+              bump="patch"
+            else
+              bump="patch"
+            fi
+          fi
+
+          # Calculate next version
+          semver=$(echo ${{ env.latest_tag }} | sed 's/^v//')
+          major=$(echo $semver | cut -d. -f1)
+          minor=$(echo $semver | cut -d. -f2)
+          patch=$(echo $semver | cut -d. -f3)
+
+          case "$bump" in
+            major) major=$((major+1)); minor=0; patch=0 ;;
+            minor) minor=$((minor+1)); patch=0 ;;
+            patch) patch=$((patch+1)) ;;
+          esac
+
+          next_version="v${major}.${minor}.${patch}"
+          echo "Version bump type: $bump"
+          echo "Next version: $next_version"
+
+          echo "bump=$bump" >> $GITHUB_ENV
+          echo "new_tag=$next_version" >> $GITHUB_ENV
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: |
+            booklore/booklore:${{ env.new_tag }}
+            booklore/booklore:latest
+            ghcr.io/booklore-app/booklore:${{ env.new_tag }}
+            ghcr.io/booklore-app/booklore:latest
+          build-args: |
+            APP_VERSION=${{ env.new_tag }}
+            APP_REVISION=${{ github.sha }}
+          cache-from: |
+            type=gha
+            type=registry,ref=ghcr.io/booklore-app/booklore:buildcache
+          cache-to: |
+            type=gha,mode=max
+            type=registry,ref=ghcr.io/booklore-app/booklore:buildcache,mode=max
+
+      - name: Update GitHub Release Draft
+        uses: release-drafter/release-drafter@v6
+        with:
+          tag: ${{ env.new_tag }}
+          name: "Release ${{ env.new_tag }}"
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+
+      - name: Publish GitHub Draft Release
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        run: |
+          gh release edit ${{ env.new_tag }} --draft=true
+

.github/workflows/migrations-check.yml

@@ -0,0 +1,97 @@
+name: Reusable - Flyway Migration Check
+
+on:
+  workflow_call:
+    inputs:
+      base_ref:
+        description: 'The base ref for comparison'
+        required: true
+        type: string
+      head_ref:
+        description: 'The head ref for comparison'
+        required: true
+        type: string
+    outputs:
+      has_migrations:
+        description: "Boolean indicating if migration files were changed"
+        value: ${{ jobs.check-for-migrations.outputs.has_migrations }}
+
+jobs:
+  check-for-migrations:
+    name: Check for DB Migrations
+    runs-on: ubuntu-latest
+    outputs:
+      has_migrations: ${{ steps.check_migrations.outputs.has_migrations }}
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 0
+
+      - name: Detect Flyway Migration Changes
+        id: check_migrations
+        run: |
+          echo "Comparing ${{ inputs.base_ref }}...${{ inputs.head_ref }}"
+          if git diff --name-only ${{ inputs.base_ref }}...${{ inputs.head_ref }} | grep -q "booklore-api/src/main/resources/db/migration/V.*.sql"; then
+            echo "Migration file changes detected. Proceeding with migration preview."
+            echo "has_migrations=true" >> $GITHUB_OUTPUT
+          else
+            echo "No migration file changes detected. Skipping migration preview."
+            echo "has_migrations=false" >> $GITHUB_OUTPUT
+          fi
+
+  flyway-migration-preview:
+    name: Flyway DB Migration Preview
+    needs: [ check-for-migrations ]
+    if: needs.check-for-migrations.outputs.has_migrations == 'true'
+    runs-on: ubuntu-latest
+    services:
+      mariadb:
+        image: mariadb:10.6
+        env:
+          MYSQL_ROOT_PASSWORD: root
+          MYSQL_DATABASE: booklore_test
+        ports:
+          - 3306:3306
+        options: >-
+          --health-cmd="mysqladmin ping --silent"
+          --health-interval=5s
+          --health-timeout=5s
+          --health-retries=10
+
+    steps:
+      - name: Checkout Base Branch
+        uses: actions/checkout@v6
+        with:
+          ref: ${{ inputs.base_ref }}
+
+      - name: Apply Migrations from Base Branch
+        run: |
+          echo "Applying migrations from base ref (${{ inputs.base_ref }})..."
+          docker run --network host \
+            -v ${{ github.workspace }}:/flyway/sql \
+            flyway/flyway:11.19.0-alpine \
+            -url=jdbc:mariadb://127.0.0.1:3306/booklore_test \
+            -user=root -password=root \
+            -locations=filesystem:/flyway/sql/booklore-api/src/main/resources/db/migration \
+            migrate
+
+      - name: Checkout Head Branch
+        uses: actions/checkout@v6
+        with:
+          ref: ${{ inputs.head_ref }}
+
+      - name: Apply Migrations from Head Branch
+        run: |
+          echo "Applying new migrations from head ref (${{ inputs.head_ref }})..."
+          docker run --network host \
+            -v ${{ github.workspace }}:/flyway/sql \
+            flyway/flyway:11.19.0-alpine \
+            -url=jdbc:mariadb://127.0.0.1:3306/booklore_test \
+            -user=root -password=root \
+            -locations=filesystem:/flyway/sql/booklore-api/src/main/resources/db/migration \
+            migrate
+
+      - name: Confirm Flyway Dry Run Success
+        run: echo "✅ Flyway migration preview successful. Migrations can be applied cleanly."
+

README.md

@@ -346,7 +346,7 @@ services:
 
 Found an issue?
 
-[![Open Issue](https://img.shields.io/badge/Report-ff6b6b?style=for-the-badge)](https://github.com/adityachandelgit/BookLore/issues)
+[![Open Issue](https://img.shields.io/badge/Report-ff6b6b?style=for-the-badge)](https://github.com/booklore-app/booklore/issues)
 
 </td>
 <td align="center">
@@ -355,7 +355,7 @@ Found an issue?
 
 Have an idea?
 
-[![Request Feature](https://img.shields.io/badge/Suggest-4ecdc4?style=for-the-badge)](https://github.com/adityachandelgit/BookLore/issues/new)
+[![Request Feature](https://img.shields.io/badge/Suggest-4ecdc4?style=for-the-badge)](https://github.com/booklore-app/booklore/issues/new?template=feature_request.md)
 
 </td>
 <td align="center">

booklore-ui/src/app/features/stats/component/reading-session-heatmap/reading-session-heatmap.component.html

@@ -1,8 +1,11 @@
 <div class="reading-session-heatmap-container">
   <div class="chart-header">
     <div class="chart-title">
-      <h3>Reading Session Activity</h3>
-      <p class="chart-description">Daily reading session activity throughout the year</p>
+      <h3>
+        <i class="pi pi-calendar heatmap-title-icon"></i>
+        {{ getTitle() }}
+      </h3>
+      <p class="chart-description">Daily overview of your reading sessions across the year</p>
     </div>
     <div class="year-selector">
       <button type="button"

booklore-ui/src/app/features/stats/component/reading-session-heatmap/reading-session-heatmap.component.scss

@@ -82,6 +82,13 @@
   }
 }
 
+.heatmap-title-icon {
+  font-size: 1.5rem;
+  color: var(--primary-color);
+  vertical-align: middle;
+  margin-right: 0.25em;
+}
+
 @media (max-width: 768px) {
   .chart-header {
     flex-direction: column;

booklore-ui/src/app/features/stats/component/reading-session-heatmap/reading-session-heatmap.component.ts

@@ -28,6 +28,7 @@ type SessionHeatmapChartData = ChartData<'matrix', MatrixDataPoint[], string>;
 })
 export class ReadingSessionHeatmapComponent implements OnInit, OnDestroy {
   @Input() initialYear: number = new Date().getFullYear();
+  @Input() userName: string = '';
 
   public currentYear: number = new Date().getFullYear();
   public readonly chartType = 'matrix' as const;
@@ -225,4 +226,10 @@ export class ReadingSessionHeatmapComponent implements OnInit, OnDestroy {
     date.setDate(date.getDate() + (week * 7) - date.getDay());
     return date;
   }
+
+  public getTitle(): string {
+    return this.userName
+      ? `${this.userName}'s Reading Session Activity`
+      : 'Reading Session Activity';
+  }
 }

booklore-ui/src/app/features/stats/component/reading-session-timeline/reading-session-timeline.component.html

@@ -1,8 +1,11 @@
 <div class="timeline-container">
   <div class="timeline-header">
     <div class="header-title">
-      <h3>Reading Session Timeline</h3>
-      <p class="timeline-subtitle">Your reading schedule throughout the week</p>
+      <h3>
+        <i class="pi pi-clock timeline-title-icon"></i>
+        {{ getTitle() }}
+      </h3>
+      <p class="timeline-subtitle">Weekly overview of your reading sessions and patterns</p>
     </div>
     <div class="week-selector">
       <button type="button"
@@ -55,14 +58,16 @@
                      [style.width.%]="session.width"
                      [style.top]="session.totalLevels > 1 ? 'calc(' + session.level + ' / ' + session.totalLevels + ' * 100% + ' + session.level * 2 + 'px)' : '0'"
                      [style.height]="session.totalLevels > 1 ? 'calc((1 / ' + session.totalLevels + ' * 100%) - ' + (session.totalLevels - 1) * 2 / session.totalLevels + 'px)' : '100%'">
-                  <div class="session-content">
-                    <span class="session-time">
-                      {{ formatTime(session.startHour, session.startMinute) }}
-                    </span>
-                    <span class="session-duration">
-                      {{ formatDuration(session.duration) }}
-                    </span>
-                  </div>
+                  @if (isDurationGreaterThanOneHour(session.duration)) {
+                    <div class="session-content">
+                      <span class="session-time">
+                        {{ formatTime(session.startHour, session.startMinute) }}
+                      </span>
+                      <span class="session-duration">
+                        {{ formatDurationCompact(session.duration) }}
+                      </span>
+                    </div>
+                  }
 
                   <div class="session-tooltip">
                     <div class="tooltip-content">

booklore-ui/src/app/features/stats/component/reading-session-timeline/reading-session-timeline.component.scss

@@ -382,6 +382,13 @@
   }
 }
 
+.timeline-title-icon {
+  font-size: 1.5rem;
+  color: var(--primary-color);
+  vertical-align: middle;
+  margin-right: 0.25em;
+}
+
 @media (max-width: 768px) {
   .timeline-header {
     flex-direction: column;

booklore-ui/src/app/features/stats/component/reading-session-timeline/reading-session-timeline.component.ts

@@ -1,6 +1,6 @@
 import {Component, inject, Input, OnInit} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {UserStatsService, ReadingSessionTimelineResponse} from '../../../settings/user-management/user-stats.service';
+import {ReadingSessionTimelineResponse, UserStatsService} from '../../../settings/user-management/user-stats.service';
 import {UrlHelperService} from '../../../../shared/service/url-helper.service';
 import {BookType} from '../../../book/model/book.model';
 
@@ -44,11 +44,12 @@ interface DayTimeline {
 export class ReadingSessionTimelineComponent implements OnInit {
   @Input() initialYear: number = new Date().getFullYear();
   @Input() weekNumber: number = this.getCurrentWeekNumber();
+  @Input() userName: string = '';
 
   private userStatsService = inject(UserStatsService);
   private urlHelperService = inject(UrlHelperService);
 
-  public daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+  public daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
   public hourLabels: string[] = [];
   public timelineData: DayTimeline[] = [];
   public currentYear: number = new Date().getFullYear();
@@ -88,8 +89,8 @@ export class ReadingSessionTimelineComponent implements OnInit {
 
     response.forEach((item) => {
       const startTime = new Date(item.startDate);
-      const endTime = new Date(item.endDate);
-      const duration = Math.floor((endTime.getTime() - startTime.getTime()) / (1000 * 60));
+      const duration = item.totalDurationSeconds / 60;
+      const endTime = new Date(startTime.getTime() + item.totalDurationSeconds * 1000);
 
       sessions.push({
         startTime,
@@ -198,13 +199,15 @@ export class ReadingSessionTimelineComponent implements OnInit {
     });
 
     this.timelineData = [];
+    const displayOrder = [1, 2, 3, 4, 5, 6, 0];
     for (let i = 0; i < 7; i++) {
-      const sessionsForDay = dayMap.get(i) || [];
+      const dayOfWeek = displayOrder[i];
+      const sessionsForDay = dayMap.get(dayOfWeek) || [];
       const timelineSessions = this.layoutSessionsForDay(sessionsForDay);
 
       this.timelineData.push({
         day: this.daysOfWeek[i],
-        dayOfWeek: i,
+        dayOfWeek: dayOfWeek,
         sessions: timelineSessions
       });
     }
@@ -291,15 +294,41 @@ export class ReadingSessionTimelineComponent implements OnInit {
   }
 
   public formatDuration(minutes: number): string {
-    const hours = Math.floor(minutes / 60);
-    const mins = minutes % 60;
-    if (hours > 0) {
-      return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
-    }
-    return `${mins}m`;
+    const totalSeconds = Math.round(minutes * 60);
+    const hours = Math.floor(totalSeconds / 3600);
+    const mins = Math.floor((totalSeconds % 3600) / 60);
+    const secs = totalSeconds % 60;
+
+    const parts: string[] = [];
+    if (hours) parts.push(`${hours}H`);
+    if (mins || hours) parts.push(`${mins}M`);
+    parts.push(`${secs}S`);
+
+    return parts.join(' ');
+  }
+
+  public formatDurationCompact(minutes: number): string {
+    const totalSeconds = Math.round(minutes * 60);
+    const hours = Math.floor(totalSeconds / 3600);
+    const mins = Math.floor((totalSeconds % 3600) / 60);
+    const secs = totalSeconds % 60;
+
+    if (hours > 0) return `${hours}h${mins > 0 ? mins + 'm' : ''}`;
+    if (mins > 0) return `${mins}m${secs > 0 ? secs + 's' : ''}`;
+    return `${secs}s`;
+  }
+
+  public isDurationGreaterThanOneHour(minutes: number): boolean {
+    return minutes >= 60;
   }
 
   public getCoverUrl(bookId: number): string {
     return this.urlHelperService.getThumbnailUrl1(bookId);
   }
+
+  public getTitle(): string {
+    return this.userName
+      ? `${this.userName}'s Reading Session Timeline`
+      : 'Reading Session Timeline';
+  }
 }

booklore-ui/src/app/features/stats/component/user-stats/user-stats.component.html

@@ -1,20 +1,11 @@
 <div class="user-stats-container">
-  <div class="header-section">
-    <div class="header-content">
-      <div class="greeting">
-        <i class="pi pi-chart-line"></i>
-        <h2>{{ userName ? userName + "'s Reading Statistics" : "Your Reading Statistics" }}</h2>
-      </div>
-    </div>
-  </div>
-
   <div class="charts-container">
     <div class="chart-card">
-      <app-reading-session-heatmap [initialYear]="currentYear"></app-reading-session-heatmap>
+      <app-reading-session-heatmap [initialYear]="currentYear" [userName]="userName"></app-reading-session-heatmap>
     </div>
 
     <div class="chart-card">
-      <app-reading-session-timeline [initialYear]="currentYear"></app-reading-session-timeline>
+      <app-reading-session-timeline [initialYear]="currentYear" [userName]="userName"></app-reading-session-timeline>
     </div>
   </div>
 </div>