[Feature] Update Consensus Toggle, Major Settings Redesign & Robust Caching System #98

Him7n · 2025-04-13T06:58:10Z

This PR introduces several enhancements spanning user interface improvements, caching system optimizations, and overall feature updates. The key changes include:

UI Enhancements and Redesign: A major overhaul of the settings page, featuring a clear, card-based layout with modernized toggle switches and improved dark mode styling.
Consensus Toggle Update: Conversion of the consensus checkbox to a modern toggle button with updated styling.
Caching System Improvements: Implementation of a robust, type-safe response caching system with advanced error handling, validation, and automatic cleanup of outdated cache entries.

Detailed Changes

1. Consensus Toggle & Caching Enhancements (Commit: `89f479a`)

Converted the consensus menu checkbox to a modern toggle button.
Enhanced response cache handling for dropdowns and text URL fields.
Added automatic cleanup of stale cache entries using the Chrome alarms API.
Improved dark theme styling for buttons.
Integrated better error handling and validation within the caching logic.

2. Major Settings Page Redesign (Commit: `f680520`)

Reorganized the settings page into clear, card-based sections for improved layout and visual hierarchy.
Implemented modern toggle switches with clear visual indicators.
Added a collapsible "Advanced Options" section for less frequently used settings.
Overhauled dark mode support with a classList-based toggle and enhanced component compatibility.
Improved modals by replacing alerts with toast notifications for a better user experience.
Refined spacing, alignment, and expanded CSS variables for more consistent theming and dark mode support.

3. Robust Response Caching System (Commit: `de116f6`)

Added intelligent and type-safe caching for various question types (e.g., multiple choice, date/time, dropdown).
Implemented cache clearing functionality with user feedback via toast notifications.
Optimized the storage format to better accommodate different response structures.
Enhanced error handling across caching operations to improve overall reliability.

Testing & Verification

UI/UX Testing: Verified layout changes and dark mode improvements on various devices and screen sizes.
Caching System: Conducted tests across different question types to ensure correct operation of cache retrieval, updating, and cleanup.
Regression Testing: Ensured that all changes coexist seamlessly with existing functionality.

Additional Notes

The new dark mode class toggling and CSS variable adjustments may require future styling tweaks.
The automatic cache cleanup process, implemented via Chrome's alarms API, has undergone testing; additional tests might be necessary for other browsers or environments.

Him7n · 2025-04-13T07:03:54Z

package.json

@@ -50,6 +50,7 @@
    "@langchain/mistralai": "^0.2.0",
    "@langchain/ollama": "^0.2.0",
    "@langchain/openai": "^0.4.4",
+    "docfiller": "file:",


I dont why this one comes up again and again ,even after I remove it , it comes back up next second 😭

rootCircle · 2025-04-14T14:18:37Z

This is fine🙆‍♂️

Will review in sometime :)

Copilot

Pull Request Overview

This PR introduces comprehensive enhancements to DocFiller spanning UI improvements, caching system optimizations, and feature updates. The changes modernize the settings interface with a card-based layout, implement a robust response caching system with automatic cleanup, and convert the consensus checkbox to a modern toggle.

Major Settings Page Redesign: Complete overhaul with card-based sections, modern toggle switches, and improved dark mode support
Robust Response Caching System: Type-safe caching with automatic cleanup, validation, and error handling
UI/UX Improvements: Modern toggle buttons, collapsible advanced options, and enhanced dark theme styling

Reviewed Changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
src/utils/storage/responseCache.ts	New comprehensive response caching system with type-safe operations and cleanup
src/utils/storage/metricsManager.ts	Enhanced metrics reset with proper error handling
src/utils/storage/getProperties.ts	Added new cache-related property getters
src/utils/defaultProperties.ts	Added default cache settings and updated dark theme default
src/options/options.ts	Major refactor for toggle-based UI and cache controls
src/options/optionApiHandler.ts	Updated consensus API handling for new toggle system
src/options/metrics.ts	Replaced alerts with toast notifications and added modal support
src/docFillerCore/index.ts	Integrated response caching into form filling workflow
src/background/index.ts	Added scheduled cache cleanup with Chrome alarms API
public/src/options/options.css	Extensive CSS updates for new card-based layout and dark mode
public/src/options/index.html	Restructured HTML for new section-based design
public/manifest.ts	Added alarms permission for cache cleanup

Copilot · 2025-08-02T12:22:41Z

src/utils/storage/responseCache.ts

+ * @param type The type of question
+ * @returns Normalized question text as a key
+ */
+function generateQuestionKey(question: string, type: QType | string): string {


Consider adding input validation to ensure question and type are not empty or null before processing. This would prevent potential issues with cache key generation.

Suggested change

function generateQuestionKey(question: string, type: QType | string): string {

function generateQuestionKey(question: string, type: QType | string): string {

// Validate inputs

if (

typeof question !== 'string' ||

question.trim() === '' ||

typeof type !== 'string' ||

type.trim() === ''

) {

throw new Error('Invalid question or type provided to generateQuestionKey');

}

Copilot · 2025-08-02T12:22:41Z

src/utils/storage/responseCache.ts

+    const result = await new Promise<{ [key: string]: any }>(
+      (resolve, reject) => {
+        chrome.storage.sync.get(['docFillerResponseCache'], (items) => {
+          if (chrome.runtime.lastError) {
+            reject(new Error(chrome.runtime.lastError.message));
+          } else {
+            resolve(items);
+          }
+        });
+      },
+    );


[nitpick] The Promise wrapper around chrome.storage.sync.get could be extracted into a utility function since this pattern is used multiple times throughout the codebase.

Suggested change

const result = await new Promise<{ [key: string]: any }>(

(resolve, reject) => {

chrome.storage.sync.get(['docFillerResponseCache'], (items) => {

if (chrome.runtime.lastError) {

reject(new Error(chrome.runtime.lastError.message));

} else {

resolve(items);

}

});

},

);

const result = await getFromChromeStorage(['docFillerResponseCache']);

Copilot · 2025-08-02T12:22:42Z

src/utils/storage/responseCache.ts

+  } else if (questionType === QType.LINEAR_SCALE_OR_STAR) {
+    try {
+      // Try to parse as number first (common for ratings)
+      if (!Number.isNaN(Number(cachedResponseText))) {


Consider using Number.isFinite() instead of !Number.isNaN(Number()) for more robust numeric validation, as it also excludes Infinity values.

Suggested change

if (!Number.isNaN(Number(cachedResponseText))) {

if (Number.isFinite(Number(cachedResponseText))) {

Copilot · 2025-08-02T12:22:42Z

src/options/options.ts

+    chrome.storage.sync.get('enableResponseCaching', (result) => {
+      const enabled =
+        //biome-ignore lint/complexity/useLiteralKeys: Property name contains hyphens
+        result['enableResponseCaching'] ??
+        DEFAULT_PROPERTIES.enableResponseCaching;
+      cachingToggle.classList.toggle('active', enabled);
+    });


[nitpick] The cache toggle initialization could be extracted into a separate function to improve code organization and reusability.

Suggested change

chrome.storage.sync.get('enableResponseCaching', (result) => {

const enabled =

//biome-ignore lint/complexity/useLiteralKeys: Property name contains hyphens

result['enableResponseCaching'] ??

DEFAULT_PROPERTIES.enableResponseCaching;

cachingToggle.classList.toggle('active', enabled);

});

initializeCacheToggle(cachingToggle);

Copilot · 2025-08-02T12:22:42Z

src/options/options.ts

+    const newToggleButton = enableConsensusToggleButton.cloneNode(true);
+    if (enableConsensusToggleButton.parentNode) {
+      enableConsensusToggleButton.parentNode.replaceChild(
+        newToggleButton,
+        enableConsensusToggleButton,
+      );
+    }
+
+    // Add the event listener to the new button
+    newToggleButton.addEventListener('click', () => {
+      const isCurrentlyActive = (
+        newToggleButton as HTMLElement
+      ).classList.contains('active');
+      (newToggleButton as HTMLElement).classList.toggle('active');


The approach of cloning DOM nodes to remove event listeners is unusual and could be error-prone. Consider using removeEventListener() with the specific handler function instead.

Suggested change

const newToggleButton = enableConsensusToggleButton.cloneNode(true);

if (enableConsensusToggleButton.parentNode) {

enableConsensusToggleButton.parentNode.replaceChild(

newToggleButton,

enableConsensusToggleButton,

);

}

// Add the event listener to the new button

newToggleButton.addEventListener('click', () => {

const isCurrentlyActive = (

newToggleButton as HTMLElement

).classList.contains('active');

(newToggleButton as HTMLElement).classList.toggle('active');

// Define the handler function so it can be removed and added

const consensusToggleHandler = () => {

const isCurrentlyActive = (

enableConsensusToggleButton as HTMLElement

).classList.contains('active');

(enableConsensusToggleButton as HTMLElement).classList.toggle('active');

Copilot · 2025-08-02T12:22:42Z

src/docFillerCore/index.ts

@@ -135,6 +144,54 @@ async function runDocFillerEngine() {
        }

        metricsManager.incrementToBeFilledQuestions();
+        const enableResponseCaching = await getEnableResponseCaching();


The enableResponseCaching value is fetched inside the loop for each question. Consider fetching it once before the loop to improve performance.

Suggested change

const enableResponseCaching = await getEnableResponseCaching();

// const enableResponseCaching = await getEnableResponseCaching(); // Moved outside loop

Copilot · 2025-08-02T12:22:43Z

src/background/index.ts

+  // Set up an alarm to clear old responses periodically (every 6 hours)
+  chrome.alarms.create('clearOldResponsesAlarm', {
+    periodInMinutes: 360, // 6 hours


[nitpick] Consider making the alarm period configurable through settings rather than hardcoding 360 minutes.

Suggested change

// Set up an alarm to clear old responses periodically (every 6 hours)

chrome.alarms.create('clearOldResponsesAlarm', {

periodInMinutes: 360, // 6 hours

// Set up an alarm to clear old responses periodically (configurable period)

const alarmPeriod = await getAlarmPeriodInMinutes();

chrome.alarms.create('clearOldResponsesAlarm', {

periodInMinutes: alarmPeriod,

- Add intelligent response caching for various question types - Support multiple question type formats (MCQ, date/time, dropdown, etc.) - Implement type-safe cache retrieval with fallbacks - Add cache clearing functionality with user feedback - Display toast notifications when cache operations complete - Optimize storage format based on response structure - Implement error handling throughout caching operations

- Reorganized settings page layout into clear, card-based sections - Implemented modern toggle switches with visual indicators - Added collapsible "Advanced Options" section for lesser-used settings - Overhauled dark mode with classList-based toggle and full component support - Enhanced modals with better styling and confirmation flows - Replaced alerts with toast notifications for better UX - Improved event handling and listener cleanup - Refined spacing, alignment, and section headings for visual hierarchy - Added responsive layout improvements and smooth animations - Expanded CSS variables for better theming and dark mode support

…sponse caching Fixed response cache to properly handle dropdowns and text_url fields Converted consensus menu from checkbox to modern toggle button Added automatic cleanup of old cache entries using Chrome alarms API Improved UI with better dark theme styling for buttons Enhanced caching logic with better validation and error handling

rootCircle · 2025-08-12T16:02:36Z

@Him7n There were few changes here and there, it is merged in dev branch now. Commit ref: d81de1b

This commit only includes the UI changes, but not the response caching. Change of response caching is in https://github.com/rootCircle/docFiller/tree/ui-redesign-cache-split, you can check that and update, it is still not merged yet! :P

Him7n commented Apr 13, 2025

View reviewed changes

rootCircle requested review from Copilot and rootCircle August 2, 2025 12:21

Copilot AI reviewed Aug 2, 2025

View reviewed changes

Him7n added 3 commits August 2, 2025 17:56

rootCircle force-pushed the dev branch from 4788a23 to 3123782 Compare August 2, 2025 12:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Feature] Update Consensus Toggle, Major Settings Redesign & Robust Caching System #98

[Feature] Update Consensus Toggle, Major Settings Redesign & Robust Caching System #98

Uh oh!

Him7n commented Apr 13, 2025

Uh oh!

Him7n Apr 13, 2025

Uh oh!

rootCircle commented Apr 14, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Aug 2, 2025

Uh oh!

Copilot AI Aug 2, 2025

Uh oh!

Copilot AI Aug 2, 2025

Uh oh!

Copilot AI Aug 2, 2025

Uh oh!

Copilot AI Aug 2, 2025

Uh oh!

Copilot AI Aug 2, 2025

Uh oh!

Copilot AI Aug 2, 2025

Uh oh!

rootCircle commented Aug 12, 2025

Uh oh!

Uh oh!

-function generateQuestionKey(question: string, type: QType | string): string {
+function generateQuestionKey(question: string, type: QType | string): string {
+  // Validate inputs
+  if (
+    typeof question !== 'string' ||
+    question.trim() === '' ||
+    typeof type !== 'string' ||
+    type.trim() === ''
+  ) {
+    throw new Error('Invalid question or type provided to generateQuestionKey');
+  }

	if (!Number.isNaN(Number(cachedResponseText))) {
	if (Number.isFinite(Number(cachedResponseText))) {

	const enableResponseCaching = await getEnableResponseCaching();
	// const enableResponseCaching = await getEnableResponseCaching(); // Moved outside loop

[Feature] Update Consensus Toggle, Major Settings Redesign & Robust Caching System #98

Are you sure you want to change the base?

[Feature] Update Consensus Toggle, Major Settings Redesign & Robust Caching System #98

Uh oh!

Conversation

Him7n commented Apr 13, 2025

Detailed Changes

1. Consensus Toggle & Caching Enhancements (Commit: 89f479a)

2. Major Settings Page Redesign (Commit: f680520)

3. Robust Response Caching System (Commit: de116f6)

Testing & Verification

Additional Notes

Uh oh!

Him7n Apr 13, 2025

Choose a reason for hiding this comment

Uh oh!

rootCircle commented Apr 14, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 2, 2025

Choose a reason for hiding this comment

Uh oh!

rootCircle commented Aug 12, 2025

Uh oh!

Uh oh!

1. Consensus Toggle & Caching Enhancements (Commit: `89f479a`)

2. Major Settings Page Redesign (Commit: `f680520`)

3. Robust Response Caching System (Commit: `de116f6`)