chore: move text filter box to right of sorting buttons

src/home/home.ts

@@ -2,9 +2,9 @@ import { grid } from "../the-grid";
 import { authentication } from "./authentication";
 import { fetchAndDisplayPreviews } from "./fetch-github/fetch-and-display-previews";
 import { fetchIssuesFull } from "./fetch-github/fetch-issues-full";
-import { generateSortingButtons } from "./sorting/generate-sorting-buttons";
+import { generateSortingToolbar } from "./sorting/generate-sorting-buttons";
 
-generateSortingButtons();
+generateSortingToolbar();
 grid(document.getElementById("grid") as HTMLElement);
 
 authentication()

src/home/sorting/generate-sorting-buttons.ts

@@ -3,7 +3,7 @@ import { SortingManager } from "./sorting-manager";
 export const SORTING_OPTIONS = ["price", "time", "priority", "activity"] as const;
 export type Sorting = (typeof SORTING_OPTIONS)[number];
 
-export function generateSortingButtons() {
-  const sortingManager = new SortingManager("filters");
-  sortingManager.generateSortingButtons(SORTING_OPTIONS);
+export function generateSortingToolbar() {
+  const sortingManager = new SortingManager("filters", SORTING_OPTIONS);
+  sortingManager.render();
 }

src/home/sorting/sorting-manager.ts

@@ -3,40 +3,49 @@ import { Sorting } from "./generate-sorting-buttons";
 
 export class SortingManager {
   private _lastChecked: HTMLInputElement | null = null;
-  private _filters: HTMLElement;
+  private _toolBarFilters: HTMLElement;
+  private _filterTextBox: HTMLInputElement;
+  private _sortingButtons: HTMLElement;
 
-  constructor(filtersId: string) {
+  constructor(filtersId: string, sortingOptions: readonly string[]) {
     const filters = document.getElementById(filtersId);
     if (!filters) throw new Error(`${filtersId} not found`);
-    this._filters = filters;
-    this.generateFilterTextbox();
+    this._toolBarFilters = filters;
+    this._filterTextBox = this._generateFilterTextBox();
+    this._sortingButtons = this._generateSortingButtons(sortingOptions);
   }
 
-  public generateFilterTextbox() {
+  public render() {
+    this._toolBarFilters.appendChild(this._sortingButtons);
+    this._toolBarFilters.appendChild(this._filterTextBox);
+  }
+
+  private _generateFilterTextBox() {
     const textBox = document.createElement("input");
     textBox.type = "text";
     textBox.id = "filter";
     textBox.placeholder = "Text Filter";
-    this._filters.insertBefore(textBox, this._filters.firstChild);
+    return textBox;
   }
 
-  public generateSortingButtons(sortingOptions: readonly string[]) {
-    const labels = document.createElement("div");
-    labels.className = "labels";
+  private _generateSortingButtons(sortingOptions: readonly string[]) {
+    const buttons = document.createElement("div");
+    buttons.className = "labels";
 
     sortingOptions.forEach((option) => {
       const input = this._createRadioButton(option);
       const label = this._createLabel(option);
 
-      labels.appendChild(input);
-      labels.appendChild(label);
+      buttons.appendChild(input);
+      buttons.appendChild(label);
 
       input.addEventListener("click", () => {
         this._handleSortingClick(input, option);
       });
     });
 
-    this._filters.appendChild(labels);
+    return buttons;
+    // this._filters.appendChild(labels);
   }
 
   private _createRadioButton(option: string): HTMLInputElement {