Method renderFilters

src/views/StatsView.ts:824–912

* Render filter controls

()

	 * Render filter controls
	 */
	private renderFilters() {
		if (!this.filtersEl) return;

		this.filtersEl.empty();

		// Create filter container with grid layout
		const filterGrid = this.filtersEl.createDiv({ cls: "stats-view__filter-grid" });

		// Date range filter
		const dateRangeContainer = filterGrid.createDiv({ cls: "stats-view__filter-item" });
		const dateRangeLabel = dateRangeContainer.createDiv({ cls: "stats-view__filter-label" });
		dateRangeLabel.textContent = this.plugin.i18n.translate("views.stats.sections.dateRange");

		const dateRangeSelect = dateRangeContainer.createEl("select", {
			cls: "stats-view__filter-select",
		});
		const dateOptions = [
			{ value: "all", text: this.plugin.i18n.translate("views.stats.timeRanges.allTime") },
			{
				value: "7days",
				text: this.plugin.i18n.translate("views.stats.timeRanges.last7Days"),
			},
			{
				value: "30days",
				text: this.plugin.i18n.translate("views.stats.timeRanges.last30Days"),
			},
			{
				value: "90days",
				text: this.plugin.i18n.translate("views.stats.timeRanges.last90Days"),
			},
			{
				value: "custom",
				text: this.plugin.i18n.translate("views.stats.timeRanges.customRange"),
			},
		];

		for (const option of dateOptions) {
			const optionEl = dateRangeSelect.createEl("option", {
				value: option.value,
				text: option.text,
			});
			if (option.value === this.currentFilters.dateRange) {
				optionEl.selected = true;
			}
		}

		this.registerDomEvent(dateRangeSelect, "change", () => {
			this.currentFilters.dateRange = dateRangeSelect.value as StatsFilters["dateRange"];
			this.renderCustomDateInputs();
			void this.applyFilters();
		});

		// Custom date inputs container
		const customDatesContainer = filterGrid.createDiv({ cls: "stats-view__custom-dates" });
		if (this.currentFilters.dateRange === "custom") {
			this.renderCustomDateInputs(customDatesContainer);
		}