Merge pull request #25 from lirena00/new_update

update v1.4.1

Author: lirena00

README.md

@@ -2,7 +2,7 @@
 
 A sleek browser extension that turns your web browsing experience into grayscale, helping reduce digital distractions and avoid doomscrolling.
 
-![Version](https://img.shields.io/badge/version-1.4.0-black)
+![Version](https://img.shields.io/badge/version-1.4.1-black)
 ![License](https://img.shields.io/badge/license-MIT-black)
 
 <p align="center">
@@ -19,8 +19,13 @@ A sleek browser extension that turns your web browsing experience into grayscale
 - **One-Click Toggle** - Instantly switch between color and grayscale modes
 - **Intensity Control** - Fine-tune the grayscale effect (0-100%)
 - **Site Exclusions** - Maintain a blacklist of sites where color should remain enabled
+- **Smart Scheduling** - Automatically enable/disable monochrome mode at specific times
 - **Real-time Updates** - Changes apply instantly without page refresh
-- **Minimal Interface** - Clean, modern UI
+- **Backup & Restore** - Export and import your settings configuration
+- **Current Site Management** - Quick add/remove current website to exclusions
+- **Fullscreen Support** - Seamlessly works with fullscreen content and videos
+- **Search & Filter** - Easily find and manage excluded sites with search functionality
+- **Minimal Interface** - Clean, modern UI with intuitive controls
 
 ## 🛠️ **Development**
 
@@ -31,13 +36,13 @@ Clone the repository and install dependencies:
 ```bash
 git clone https://github.com/your-username/monochromate.git
 cd monochromate
-npm install
+pnpm install
 ```
 
 Start the development server with:
 
 ```bash
-npm dev
+pnpm dev
 ```
 
 This will build the extension in **watch mode**, so changes automatically reflect when reloaded in the browser.
@@ -47,8 +52,8 @@ This will build the extension in **watch mode**, so changes automatically reflec
 To generate an optimized build:
 
 ```bash
-npm zip
-npm zip:firefox
+pnpm zip
+pnpm zip:firefox
 ```
 
 This creates a final version inside the `dist/` folder, ready for submission to the Chrome Web Store and Mozilla Add-ons.

package.json

@@ -2,7 +2,7 @@
   "name": "monochromate",
   "description": "An extension that greyscales the webpage to reduce doomscrolling",
   "private": true,
-  "version": "1.4.0",
+  "version": "1.4.1",
   "type": "module",
   "scripts": {
     "dev": "wxt",

src/components/BackupCard.tsx

@@ -1,17 +1,17 @@
+import { settings } from "#imports";
 import { Upload, Download, Check } from "lucide-react";
 import { useState } from "react";
 
 export default function Backup() {
   const handleExport = async () => {
     try {
-      const data = await browser.storage.local.get("Monofilter");
-      const settings = data.Monofilter;
+      const data = await settings.getValue();
 
-      if (settings) {
+      if (data) {
         const exportData = {
           version: browser.runtime.getManifest().version,
           timestamp: new Date().toISOString(),
-          settings: settings,
+          settings: data,
         };
 
         const blob = new Blob([JSON.stringify(exportData, null, 2)], {
@@ -41,7 +41,7 @@ export default function Backup() {
         const importData = JSON.parse(text);
 
         if (importData.settings) {
-          await browser.storage.local.set({ Monofilter: importData.settings });
+          await settings.setValue(importData.settings);
           console.log("Settings imported successfully");
         }
       } catch (error) {

src/components/BlacklistCard.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Shield } from "lucide-react";
 
-interface BlacklistCardCardProps {
+interface BlacklistCardProps {
   currentUrl: string;
   blacklist: string[];
   isCurrentUrlBlacklisted: boolean;
@@ -10,7 +10,7 @@ interface BlacklistCardCardProps {
   onManageAllSites: () => void;
 }
 
-const BlacklistCardCard: React.FC<BlacklistCardCardProps> = ({
+const BlacklistCardCard: React.FC<BlacklistCardProps> = ({
   currentUrl,
   blacklist,
   isCurrentUrlBlacklisted,

src/components/BlacklistManagement.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ArrowLeft, Search, AlertCircle, X } from "lucide-react";
+import { ArrowLeft, Search, AlertCircle, X, Shield } from "lucide-react";
 import Footer from "./Footer";
 
 interface BlacklistManagementProps {
@@ -24,38 +24,36 @@ const BlacklistManagement: React.FC<BlacklistManagementProps> = ({
   onRemoveSite,
 }) => {
   return (
-    <div className="flex flex-col min-h-[700px]">
-      <div className="flex items-center gap-3 mb-4">
+    <div className="flex flex-col h-[700px] overflow-hidden">
+      <div className="flex items-center gap-3 mb-6">
         <button
           onClick={onReturnToMain}
-          className="p-1 rounded-full hover:bg-neutral-100"
+          className="p-1 rounded-full hover:bg-neutral-100 flex items-center justify-center"
         >
-          <ArrowLeft size={18} />
+          <ArrowLeft size={24} />
         </button>
-        <h1 className="text-xl font-bold">Manage Excluded Sites</h1>
+        <h1 className="text-xl font-bold text-neutral-800">
+          Manage Excluded Sites
+        </h1>
       </div>
 
-      <div className="relative mb-3">
-        <div className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500">
-          <Search size={15} />
+      {/* Current Site Card */}
+      <div className="bg-neutral-100 border-neutral-300 border rounded-xl p-4 hover:border-neutral-400 transition-all mb-4">
+        <div className="flex items-center gap-3 mb-3">
+          <div className="text-neutral-700">
+            <Shield size={20} />
+          </div>
+          <div>
+            <h2 className="font-semibold text-neutral-800">Current Site</h2>
+            <p className="text-sm text-neutral-500 italic">
+              Manage current website
+            </p>
+          </div>
         </div>
-        <input
-          type="text"
-          className="w-full pl-9 pr-3 py-2 bg-white border border-neutral-200 rounded-lg text-sm"
-          placeholder="Search excluded sites..."
-          value={searchTerm}
-          onChange={(e) => onSearchChange(e.target.value)}
-          autoFocus
-        />
-      </div>
 
-      <div className="mb-4">
-        <h2 className="text-sm font-medium text-neutral-500 mb-2">
-          Current Site
-        </h2>
         <div className="bg-white rounded-lg border border-neutral-200 p-3 flex justify-between items-center">
           <div className="flex items-center gap-2">
-            <div className="w-5 h-5 bg-neutral-200 rounded-full overflow-hidden">
+            <div className="w-4 h-4 bg-neutral-200 rounded-full overflow-hidden">
               {currentUrl && (
                 <img
                   src={`https://www.google.com/s2/favicons?domain=${currentUrl}&sz=64`}
@@ -72,34 +70,67 @@ const BlacklistManagement: React.FC<BlacklistManagementProps> = ({
           {isCurrentUrlBlacklisted ? (
             <button
               onClick={() => onRemoveSite(currentUrl)}
-              className="text-sm px-3 py-1 bg-neutral-200 text-neutral-700 rounded-sm hover:bg-neutral-300 transition-colors"
+              className="text-xs px-2 py-1 bg-neutral-200 text-neutral-700 rounded-sm hover:bg-neutral-300 transition-colors"
             >
               Remove
             </button>
           ) : (
             <button
               onClick={onAddCurrentSite}
-              className="text-sm px-3 py-1 bg-neutral-900 text-white rounded-sm hover:bg-neutral-800 transition-colors flex items-center gap-1"
+              className="text-xs px-2 py-1 bg-neutral-900 text-white rounded-sm hover:bg-neutral-800 transition-colors"
             >
               Exclude
             </button>
           )}
         </div>
       </div>
 
-      <div className="flex-1 overflow-hidden flex flex-col min-h-0">
-        <h2 className="text-sm font-medium text-neutral-500 mb-2">
-          All Excluded Sites
-        </h2>
-        <div className="flex-1 overflow-y-auto bg-white rounded-lg border border-neutral-200">
+      {/* All Excluded Sites Card */}
+      <div className="bg-neutral-100 border-neutral-300 border rounded-xl p-4 hover:border-neutral-400 transition-all flex-1 flex flex-col min-h-0">
+        <div className="flex items-center gap-3 mb-3">
+          <div className="text-neutral-700">
+            <Search size={20} />
+          </div>
+          <div>
+            <h2 className="font-semibold text-neutral-800">
+              All Excluded Sites
+              {filteredBlacklist.length > 0 && (
+                <span className="ml-2 px-2 py-0.5 text-xs bg-neutral-200 rounded-full">
+                  {filteredBlacklist.length}
+                </span>
+              )}
+            </h2>
+            <p className="text-sm text-neutral-500 italic">
+              Search and manage all excluded sites
+            </p>
+          </div>
+        </div>
+
+        {/* Search Bar */}
+        <div className="relative mb-3">
+          <div className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500">
+            <Search size={15} />
+          </div>
+          <input
+            type="text"
+            className="w-full pl-9 pr-3 py-2 bg-white border border-neutral-200 rounded-lg text-sm hover:border-neutral-400 transition-all focus:outline-none focus:border-neutral-400"
+            placeholder="Search excluded sites..."
+            value={searchTerm}
+            onChange={(e) => onSearchChange(e.target.value)}
+            autoFocus
+          />
+        </div>
+
+        {/* Sites List */}
+        <div className="flex-1 overflow-y-auto bg-white rounded-lg border border-neutral-200 min-h-0">
           {filteredBlacklist.length > 0 ? (
             filteredBlacklist.map((site) => (
               <div
                 key={site}
-                className="flex justify-between items-center py-3 px-3 border-b border-neutral-200 last:border-0 hover:bg-neutral-50"
+                className="flex justify-between items-center py-3 px-3 border-b border-neutral-200 last:border-0 hover:bg-neutral-50 transition-colors"
               >
                 <div className="flex items-center gap-2">
-                  <div className="w-5 h-5 bg-neutral-200 rounded-full overflow-hidden">
+                  <div className="w-4 h-4 bg-neutral-200 rounded-full overflow-hidden">
                     <img
                       src={`https://www.google.com/s2/favicons?domain=${site}&sz=64`}
                       alt=""
@@ -110,7 +141,7 @@ const BlacklistManagement: React.FC<BlacklistManagementProps> = ({
                 </div>
                 <button
                   onClick={() => onRemoveSite(site)}
-                  className="text-neutral-500 hover:text-red-500"
+                  className="text-neutral-500 hover:text-red-500 transition-colors"
                 >
                   <X size={15} />
                 </button>

src/components/WarningCard.tsx

@@ -0,0 +1,35 @@
+import { AlertCircle } from "lucide-react";
+interface WarningCardProps {
+  currentUrl: string;
+}
+
+const WarningCard: React.FC<WarningCardProps> = ({ currentUrl }) => {
+  return (
+    <>
+      {currentUrl &&
+        (currentUrl.includes("chromewebstore.google.com") ||
+          currentUrl.includes("addons.mozilla.org") ||
+          currentUrl.includes("microsoftedge.microsoft.com")) && (
+          <div className="bg-amber-100 border-amber-300 border rounded-xl p-4 hover:border-amber-400 transition-all">
+            <div className="flex items-center gap-3">
+              <div className="text-amber-700">
+                <AlertCircle size={20} />
+              </div>
+              <div>
+                <h2 className="font-semibold text-amber-800">
+                  Limited Functionality
+                </h2>
+                <p className="text-sm text-amber-700 italic">
+                  Monochromate cannot modify browser extension/addon pages due
+                  to browser security restrictions. Try visiting a regular
+                  website instead.
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+    </>
+  );
+};
+
+export default WarningCard;