From 3ad7f87ef20f5efc58a88201fe642309f403b3d6 Mon Sep 17 00:00:00 2001
From: Pyrise <pyrise@gmail.com>
Date: Wed, 29 Sep 2021 17:08:31 -0500
Subject: [PATCH] Viewed item background highlighting

Adds an option to the options page to allow for highlighting the viewed files in the tree.
---
 src/js/components/file/index.jsx    | 6 ++++--
 src/js/components/options/index.jsx | 9 +++++++++
 src/js/lib.js                       | 7 +++++--
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/js/components/file/index.jsx b/src/js/components/file/index.jsx
index 2ba03ab..6c9f2f1 100644
--- a/src/js/components/file/index.jsx
+++ b/src/js/components/file/index.jsx
@@ -49,10 +49,12 @@ class File extends React.Component {
 
     const index = filter ? (name.toLowerCase() || '').indexOf(filter.toLowerCase()) : -1
     const highlightedName = (index === -1) ? name : this.getHighlight({ name, filter, index })
+    
+    const backgroundHighlightColor = '#E6FFED'
 
     return (
-      <div className={topClassName}>
-        <span className={`icon ${className}`} />
+      <div className={topClassName} style={isViewed && options.viewedFileBackground ? {backgroundColor: backgroundHighlightColor} : null }>
+        <span className={`icon ${className}`}/>
         <a href={href} className='link-gray-dark'>{highlightedName}</a>
         {options.diffStats && diffStats && <DiffStats diffStats={diffStats} />}
         {hasComments
diff --git a/src/js/components/options/index.jsx b/src/js/components/options/index.jsx
index 00a1103..0a25faa 100644
--- a/src/js/components/options/index.jsx
+++ b/src/js/components/options/index.jsx
@@ -47,6 +47,15 @@ class Options extends React.Component {
             />
             <span className='label-body'>Show <strong>Diff Stats</strong> next to files</span>
           </label>
+          <label className='label-enabledd'>
+            <input
+              id='viewedFileBackground'
+              type='checkbox'
+              checked={Boolean(this.state.viewedFileBackground)}
+              onChange={this.handleOptions}
+            />
+            <span className='label-body'><strong>Highlight Background</strong> of files marked viewed</span>
+          </label>
         </div>
       </div>
     )
diff --git a/src/js/lib.js b/src/js/lib.js
index e459cd0..ff4ec7f 100644
--- a/src/js/lib.js
+++ b/src/js/lib.js
@@ -204,8 +204,10 @@ export const StorageSync = {
   save () {
     return new Promise(resolve => {
       const diffStats = document.getElementById('diffStats').checked
+      const viewedFileBackground = document.getElementById('viewedFileBackground').checked
       const options = {
-        diffStats
+        diffStats,
+        viewedFileBackground
       }
 
       if (window.chrome) {
@@ -218,7 +220,8 @@ export const StorageSync = {
   get () {
     return new Promise(resolve => {
       const defaults = {
-        diffStats: false
+        diffStats: false,
+        viewedFileBackground: false
       }
       if (window.chrome) {
         window.chrome.storage.sync.get(defaults, resolve)