Rework code

- adapt naming to match the implementation
  - sort vs filter, cards-container vs list

- added added type to get better tool feedback
- refactor code to:
  - only request data once from the server
  - process branch details only once
  - eliminate redundant code to add changes to the changes lists (with and without filtering)
  - break things up into more functions
  - use .data() function to access the triggered element and avoid having to create new closures for each element

Signed-off-by: Stefan Marr <git@stefan-marr.de>

resources/style.css

@@ -44,7 +44,7 @@ body.compare, body.timeline {
 }
 
 @media (max-width: 800px) {
-  .branch-filter-sidebar {
+  .branch-sidebar {
     /* hidden */
     display: none;
   }
@@ -72,11 +72,11 @@ body.compare, body.timeline {
   outline: none;
 }
 
-.branch-filter-sidebar.left {
+.branch-sidebar.left {
   text-align: right;
 }
 
-.branch-filter-sidebar {
+.branch-sidebar {
   border: 1px solid #ddd;
   border-radius: 8px;
   background-color: #fff;
@@ -92,7 +92,7 @@ body.compare, body.timeline {
   padding: 0.5em;
 }
 
-.filter-options {
+.sort-options {
   background-color: #f9f9f9;
   border-radius: 4px;
   margin-bottom: 1em;
@@ -101,7 +101,7 @@ body.compare, body.timeline {
   padding: 0.5em;
 }
 
-.filter-options a {
+.sort-options a {
   display: block;
   color: #007bff;
   text-decoration: none;
@@ -110,30 +110,30 @@ body.compare, body.timeline {
   transition: background-color 0.3s, color 0.3s;
 }
 
-.filter-options a:hover,
-.filter-options a.selected-text {
+.sort-options a:hover,
+.sort-options a.selected-text {
   background-color: #007bff;
   color: white;
 }
 
-.branch-cards-container {
+.branch-list {
   max-height: 800px;
   overflow-y: auto;
   overflow-x: hidden;
 }
 
-.branch-cards-container .list-group-item {
+.branch-list .list-group-item {
   cursor: pointer;
   padding: 2px 7px;
   border: none;
   color: #444444;
 }
 
-.branch-cards-container .list-group-item:hover {
+.branch-list .list-group-item:hover {
   background-color: #f1f1f1;
 }
 
-.branch-cards-container .list-group-item.active {
+.branch-list .list-group-item.active {
   background-color: #007bff;
   color: white;
 }

src/backend/main/main.ts

@@ -13,6 +13,7 @@ import {
   startRequest
 } from '../perf-tracker.js';
 import type { AllResults } from '../../shared/api.js';
+import type { ChangesResponse, ChangesRow } from '../../shared/view-types.js';
 import { Database } from '../db/db.js';
 import { TimedCacheValidity } from '../db/timed-cache-validity.js';
 import { getNumberOrError } from '../request-check.js';
@@ -187,7 +188,7 @@ export async function getChangesAsJson(
 export async function getChanges(
   projectId: number,
   db: Database
-): Promise<{ changes: any[] }> {
+): Promise<ChangesResponse> {
   const result = await db.query({
     name: 'fetchAllChangesByProjectId',
     text: ` SELECT commitId, branchOrTag, projectId, repoURL, commitMessage,

src/backend/project/project.html

@@ -18,17 +18,16 @@ <h2 class="display-5">{%= it.description%}</h2>
   </div>
 
   <div id="project">
-    <div class="branch-filter-sidebar left">
+    <div class="branch-sidebar left">
       <div class="filter-header">
         <input type="text" id="branch-search" placeholder="Search branches/tags...">
       </div>
-      <div class="filter-options">
-        <a href class="filter-option selected-text">Most Used</a>
-        <a href class="filter-option">Alphabetical</a>
-        <a href class="filter-option">Most Recent</a>
-      </div>
-      <div class="branch-cards-container list-group">
+      <div class="sort-options">
+        <a href class="sort-option selected-text">Most Used</a>
+        <a href class="sort-option">Alphabetical</a>
+        <a href class="sort-option">Most Recent</a>
       </div>
+      <div class="branch-list list-group"></div>
     </div>
     <div class="card">
       <h5 class="card-header" id="{%= it.slug %}"><a
@@ -55,17 +54,16 @@ <h5>Changes</h5>
         <a href="/{%= it.slug %}/timeline">Timeline</a>
       </div>
     </div>
-    <div class="branch-filter-sidebar right">
+    <div class="branch-sidebar right">
       <div class="filter-header">
         <input type="text" id="branch-search" placeholder="Search branches/tags...">
       </div>
-      <div class="filter-options">
-        <a href class="filter-option selected-text">Most Used</a>
-        <a href class="filter-option">Alphabetical</a>
-        <a href class="filter-option">Most Recent</a>
-      </div>
-      <div class="branch-cards-container list-group">
+      <div class="sort-options">
+        <a href class="sort-option selected-text">Most Used</a>
+        <a href class="sort-option">Alphabetical</a>
+        <a href class="sort-option">Most Recent</a>
       </div>
+      <div class="branch-list list-group"></div>
     </div>
   </div>
 </body>