BUMP: v3.2.6 UI UX improvement and duration, date, uppercase control

Author: varshneydevansh

CHANGELOG.md

@@ -1,5 +1,48 @@
 # Changelog
 
+## Version 3.2.6
+
+### UI/UX Beautification & Content-Based Filtering
+
+- **Typography Overhaul**: Complete redesign from serif to modern sans-serif system using Inter font family for improved readability and consistency.
+- **Font Scale Refinement**: Tighter increments (12px-30px) with optimized line heights and letter spacing for better visual hierarchy.
+- **Content-Based Filters**: Three new advanced filtering capabilities:
+  - **Duration Filter**: Hide videos by length (longer/shorter/between specific durations)
+  - **Upload Date Filter**: Filter by publish date (newer/older/between specific dates)
+  - **Uppercase Filter**: Detect and filter clickbait ALL CAPS titles (single_word/all_words/percentage modes)
+- **videoMetaMap System**: Persistent storage of video metadata (duration, publish dates) with intelligent batching (75ms window, 1500 entry cap).
+- **Enhanced Dropdowns & Selects**: 3px left accent borders, floating shadows, improved hover effects, and mobile responsiveness.
+- **Custom Date Inputs**: Styled to match select components with consistent visual language.
+- **Button Improvements**:
+  - Import button: Green accent for visual distinction
+  - Primary button: Forced white text in dark mode for readability
+  - Danger button: Improved contrast (#fca5a5)
+- **Toggle Switch Refinements**: Better dark mode contrast with #e2e8f0 knob color.
+- **Brand Toggle Button**: Visual extension status indicator with enabled/disabled states and 7px uppercase labels.
+- **Dark Mode Enhancements**:
+  - Search input: Orange accent highlighting (rgba(217, 119, 6, 0.7))
+  - Card boundaries: Consistent #404040 borders across all cards
+- **Kids Mode Theming**: Vibrant pink (#EC4899) and purple (#8B5CF6) gradient design system:
+  - Tab navigation with gradient backgrounds
+  - Input fields with gradient borders
+  - List items with gradient hover effects
+  - Sidebar navigation styling
+  - Dark mode adaptations with lighter shades
+- **Dashboard Improvements**:
+  - Surface-specific stats tracking (separate for Main and Kids)
+  - Enhanced stat cards with larger values (2.25rem) and better spacing
+  - Donate promo card with gradient styling
+- **Advance Video Filters Section**: Collapsible UI in popup with inline controls and full-width card-style radio options in tab view.
+
+### Documentation Updates
+
+- **ARCHITECTURE.md**: Added videoMetaMap extraction flow, content filters architecture, and fixed broken mermaid diagram.
+- **TECHNICAL.md**: Comprehensive typography system documentation and UI component styling guide (~800 lines).
+- **FUNCTIONALITY.md**: Complete content filters documentation with examples and use cases (~450 lines).
+- **YOUTUBE_KIDS_INTEGRATION.md**: Kids Mode theming documentation with accessibility considerations (~200 lines).
+- **CODEMAP.md**: Updated to v3.2.5 with feature overview.
+- **README.md**: Added content-based filters to features list.
+
 ## Version 3.2.5
 
 ### Whitelist Mode Promoted + Stability

README.md

@@ -8,6 +8,15 @@
 
 [![Ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/filtertube)
 
+![Version](https://img.shields.io/badge/version-3.2.6-blue.svg)
+![License](https://img.shields.io/badge/license-MIT-green.svg)
+![Lines of Code](https://img.shields.io/badge/total%20lines-61.6k-brightgreen.svg)
+![JavaScript LoC](https://img.shields.io/badge/javascript-38.9k%20lines-yellow.svg)
+![Top Language](https://img.shields.io/badge/language-JavaScript-f1e05a.svg)
+![Repo Size](https://img.shields.io/github/repo-size/varshneydevansh/FilterTube?color=orange)
+
+[![Top Languages](https://github-readme-stats.vercel.app/api/top-langs/?username=varshneydevansh&repo=FilterTube&layout=compact&theme=default&hide_border=true)](https://github.com/varshneydevansh/FilterTube)
+
 ## Overview
 
 FilterTube is a browser extension that gives you control over your YouTube feed. Filter videos, shorts, channels, and comments using keywords and smart rules—all processing happens privately on your device.
@@ -21,6 +30,10 @@ FilterTube is a browser extension that gives you control over your YouTube feed.
 - **Hide Shorts**: Optional toggle to remove every Shorts shelf and player hand-off.
 - **Smart Matching**: Choose partial or whole-word matching to stay strict or flexible.
 - **Shelf & Playlist Cleanup**: Refilters shelves and playlists so blocked creators stay gone even after navigation.
+- **Content-Based Filters (v3.2.6)**: 
+  - Filter by video duration (longer/shorter/between specific lengths)
+  - Filter by upload date (newer/older/between specific dates)
+  - Detect and filter clickbait ALL CAPS titles
 
 ### Channel & Data Management
 
@@ -51,6 +64,7 @@ FilterTube is a browser extension that gives you control over your YouTube feed.
 - **Instant Blocking**: 3-dot menus show correct channel names immediately—no "Fetching..." delays.
 - **Network Reduction**: Most channel identity comes from intercepted JSON, not page fetches.
 - **100% Private**: No data leaves your browser. No analytics. No tracking.
+- **Modern UI/UX (v3.2.6)**: Clean typography, refined components, enhanced dark mode, and Kids Mode theming.
 
 ### Proactive Channel Identity (v3.2.2)
 

build.js

@@ -20,6 +20,7 @@ const path = require('path');
 const archiver = require('archiver');
 const https = require('https');
 const readline = require('readline');
+const { execSync } = require('child_process');
 const { version: PACKAGE_VERSION } = require('./package.json');
 
 // Configuration
@@ -192,6 +193,10 @@ async function maybePromptRelease(version, zipPaths) {
         return;
     }
 
+    // Update README badges with latest LoC stats
+    console.log('\n📊 Updating README badges with latest stats...');
+    await updateReadmeBadges(version);
+
     const token = process.env.GITHUB_TOKEN;
     if (!token) {
         console.error('❌ GITHUB_TOKEN is not set; cannot publish release.');
@@ -428,4 +433,64 @@ function promptYesNo(question) {
             resolve(answer.trim().toLowerCase() === 'y');
         });
     });
+}
+
+async function updateReadmeBadges(version) {
+    try {
+        // Calculate total lines of code
+        const totalLinesRaw = execSync('git ls-files | xargs wc -l 2>/dev/null | tail -1', { encoding: 'utf8' });
+        const totalLines = parseInt(totalLinesRaw.trim().split(/\s+/)[0], 10);
+
+        // Calculate JavaScript lines
+        const jsLinesRaw = execSync("git ls-files | grep '\\.js$' | xargs wc -l 2>/dev/null | tail -1", { encoding: 'utf8' });
+        const jsLines = parseInt(jsLinesRaw.trim().split(/\s+/)[0], 10);
+
+        if (!totalLines || !jsLines) {
+            console.warn('⚠️  Could not calculate LoC stats; skipping badge update.');
+            return;
+        }
+
+        // Format numbers (e.g., 61617 -> "61.6k")
+        const formatLoC = (num) => {
+            if (num >= 1000) {
+                return (num / 1000).toFixed(1) + 'k';
+            }
+            return num.toString();
+        };
+
+        const totalFormatted = formatLoC(totalLines);
+        const jsFormatted = formatLoC(jsLines);
+
+        console.log(`   Total lines: ${totalLines.toLocaleString()} (${totalFormatted})`);
+        console.log(`   JavaScript: ${jsLines.toLocaleString()} (${jsFormatted})`);
+
+        // Read README
+        const readmePath = 'README.md';
+        let readme = fs.readFileSync(readmePath, 'utf8');
+
+        // Update version badge
+        readme = readme.replace(
+            /!\[Version\]\(https:\/\/img\.shields\.io\/badge\/version-[^)]+\)/,
+            `![Version](https://img.shields.io/badge/version-${version}-blue.svg)`
+        );
+
+        // Update total lines badge
+        readme = readme.replace(
+            /!\[Lines of Code\]\(https:\/\/img\.shields\.io\/badge\/total%20lines-[^)]+\)/,
+            `![Lines of Code](https://img.shields.io/badge/total%20lines-${totalFormatted}-brightgreen.svg)`
+        );
+
+        // Update JavaScript LoC badge
+        readme = readme.replace(
+            /!\[JavaScript LoC\]\(https:\/\/img\.shields\.io\/badge\/javascript-[^)]+\)/,
+            `![JavaScript LoC](https://img.shields.io/badge/javascript-${jsFormatted}%20lines-yellow.svg)`
+        );
+
+        // Write updated README
+        fs.writeFileSync(readmePath, readme, 'utf8');
+        console.log('✅ README.md badges updated successfully.');
+
+    } catch (err) {
+        console.warn('⚠️  Failed to update README badges:', err.message);
+    }
 }