Based on: Disable user-select on widgets joelshepherd#696

This might be the worst react code ever (I've never used react before 💀). I have no other idea on how to do this. Somebody else please fix it. It does work great though, adds a setting to enable/disable highlighting of the widgets as some people might want this and others hate it. DEFAULT is TRUE

src/db/state.ts

@@ -17,8 +17,11 @@ export interface State {
   locale: string;
   /** Time zone selected, if any */
   timeZone: string | null;
+  /** Whether highlighting is enabled */
+  highlightingEnabled: boolean;
 }
 
+
 export interface BackgroundState {
   id: string;
   key: string;
@@ -87,8 +90,10 @@ const initData: State = {
   focus: false,
   locale: defaultLocale,
   timeZone: null,
+  highlightingEnabled: true, // Initialize as true
 };
 
+
 // Database storage
 export const db = DB.init<State>(initData);
 

src/views/App.tsx

@@ -9,6 +9,20 @@ import { Dashboard } from "./dashboard";
 import { Settings } from "./settings";
 import Errors from "./shared/Errors";
 import StoreError from "./shared/StoreError";
+import { db } from "../db/state";
+
+function setHighlighting(){
+  const checked = db.cache.get('highlightingEnabled');
+  console.log(checked);
+  const element = document.querySelector(".Widgets") as HTMLElement;
+  if (element) {
+    if (checked || checked === undefined) {
+      element.style.userSelect = "auto";
+    } else{
+      element.style.userSelect = "none";
+    }
+  }
+}
 
 const messages = defineMessages({
   pageTitle: {
@@ -80,6 +94,9 @@ const Root: React.FC = () => {
     subscriptions.then(() => {
       setReady(true);
       migrate();
+      setTimeout(() => {
+        setHighlighting();
+      }, 1);
     });
 
     return () => {

src/views/settings/System.tsx

@@ -7,6 +7,19 @@ import TimeZoneInput from "../shared/timeZone/TimeZoneInput";
 const System: React.FC = () => {
   const [locale, setLocale] = useKey(db, "locale");
   const [timeZone, setTimeZone] = useKey(db, "timeZone");
+  const [highlightingEnabled, setHighlightingEnabled] = useKey(db, "highlightingEnabled");
+
+  function setHighlighting(checked: boolean){
+    setHighlightingEnabled(checked);
+    const element = document.querySelector(".Widgets") as HTMLElement;
+    if (element) {
+      if (checked) {
+        element.style.userSelect = "auto";
+      } else{
+        element.style.userSelect = "none";
+      }
+    }
+  }
 
   return (
     <div>
@@ -184,6 +197,24 @@ const System: React.FC = () => {
         Time Zone
         <TimeZoneInput timeZone={timeZone} onChange={setTimeZone} />
       </label>
+
+      <label
+        style={{
+          alignItems: "center",
+          display: "grid",
+          gridGap: "0 0.5rem",
+          gridTemplateColumns: "1fr 2fr",
+          width: "100%",
+          margin: 0,
+        }}
+      >
+        <span>Allow Highlighting</span>
+        <input
+          type="checkbox"
+          checked={highlightingEnabled}
+          onChange={(e) => setHighlighting(e.target.checked)}
+        />
+      </label>
     </div>
   );
 };