Feat/missing docs

Gemfile.lock

@@ -88,7 +88,6 @@ CHECKSUMS
   addressable (2.8.9)
   base64 (0.3.0)
   bigdecimal (4.0.1)
-  bundler (4.0.11) sha256=5bcec0fb78302e48d02ee46f10ee6e6942be647ba5b44a6d1ddfda9a240ce785
   colorator (1.1.0)
   concurrent-ruby (1.3.5)
   csv (3.3.5)

README.md

@@ -7,10 +7,28 @@
 
 ### Tailwind
 
-Generate the `CSS` every time styles on `input.css` change
+Regenerate the CSS whenever `input.css` changes.
 
     npx @tailwindcss/cli -i ./css/input.css -o css/theme.css
 
+### Images
+
+Reduce image size
+
+    find img/screenshots -type file -name '*.png' -exec pngquant -f --ext .png --quality=65-80 {} \;
+
+# Highlight rectangle
+
+See [contextMenuExclude.png](img/screenshots/folder/fileFilters/contextMenuExclude.png) or [traverseFileFilters.png](img/screenshots/folder/fileFilters/traverseFileFilters.png)
+
+To highlight a region in GIMP:
+
+1. Use the Ellipse/Rectangle Select Tool
+2. Select the area you want to keep
+3. Select → Feather — e.g., 30–50px for soft edges
+4. Invert the selection — `Select → Invert`
+5. Darken the surrounding area — `Colors → Brightness-Contrast`, set Brightness to -127
+
 # Local Test
 
 ### Generate documentation for the Apple Help system

_includes/finderMetadata.md

@@ -19,7 +19,7 @@ The complete list of supported metadata
                 <td>Compare all labels assigned to a file</td>
             </tr>
             <tr>
-                <td>Tags<br/><strong>Available in macOS 10.9 or above</strong></td>
+                <td>Tags</td>
                 <td>Compare all tags assigned to a file</td>
             </tr>
         </tbody>

_includes/scripts.html

@@ -24,4 +24,5 @@
         </script>
         {% endif %}
     {% endcase %}
+    <script src="js/copy-cmd.js"></script>
 

alignRules.md

@@ -142,15 +142,15 @@ This can be achieved using VisualDiffer 'user-defined alignment rules'.
 
 You can create, edit or delete rules from Session Preferences Dialog
 
-![image]({{ site.prefixDir }}img/ternaryop/vd/screenshots/wiki/sessionPrefAlignment.png)
+![image]({{ site.prefixDir }}img/screenshots/folder/align/main.png){:.wiki-img}
 
 More rules can be assigned to a VisualDiffer session comparison; they are evaluated from top to bottom.
 
 ## [Creating a Rule](#creating_a_rule)
 
 When you add a new rule (or edit an existing one) you access the dialog shown below
 
-![image]({{ site.prefixDir }}img/ternaryop/vd/screenshots/wiki/alignRule.png) 
+![image]({{ site.prefixDir }}img/screenshots/folder/align/rule.png){:.wiki-img}
 
 A rule has
 
@@ -199,7 +199,7 @@ Now if you save the rule and then run the comparison you obtain the result shown
 
 But `002.jpg` and `002.RAW` files are not aligned because the `002.RAW` extension is uppercase; this can be easily fixed by ignoring the case on the right expression as shown in the figure below
 
-![image]({{ site.prefixDir }}img/ternaryop/vd/screenshots/wiki/alignRuleIgnoreCase.png)
+![image]({{ site.prefixDir }}img/screenshots/folder/align/ruleIgnoreCase.png){:.wiki-img}
 
 ## [Test Rule](#test_rule)
 

colorsLegend.md

@@ -0,0 +1,96 @@
+---
+permalink: colorsLegend.html
+layout: default
+
+# mainAnchor is used by Apple links
+mainAnchor: colorsLegend
+title: Colors Legend
+subtitle: Colors and icons used in folder and file comparison views
+---
+
+# [Folder Colors](#folder_colors)
+
+Folders are shown using different colors to quickly visualize the file comparison results.
+
+<div class="folder-legend-grid">
+  <div class="folder-legend-card">
+    <img src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-000.png" alt="Matched folder">
+    <strong>Matched</strong>
+    <span>All files identical on both sides</span>
+  </div>
+  <div class="folder-legend-card">
+    <img src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-001.png" alt="Has older files">
+    <strong>Has older</strong>
+    <span>Contains files older than the other side</span>
+  </div>
+  <div class="folder-legend-card">
+    <img src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-010.png" alt="Modified files">
+    <strong>Modified</strong>
+    <span>Contains modified files</span>
+  </div>
+  <div class="folder-legend-card">
+    <img src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-011.png" alt="Modified and older files">
+    <strong>Modified + older</strong>
+    <span>Contains modified files and files older than the other side</span>
+  </div>
+  <div class="folder-legend-card">
+    <img src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-100.png" alt="Orphan folder">
+    <strong>Orphan</strong>
+    <span>Files only on one side</span>
+  </div>
+  <div class="folder-legend-card">
+    <img src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-101.png" alt="Orphan and older files">
+    <strong>Orphan + older</strong>
+    <span>Orphan files and files older than the other side</span>
+  </div>
+  <div class="folder-legend-card">
+    <img src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-110.png" alt="Orphan and modified files">
+    <strong>Orphan + modified</strong>
+    <span>Orphan files and modified files</span>
+  </div>
+  <div class="folder-legend-card">
+    <img src="{{ site.prefixDir }}img/screenshots/folder/view/folders/folder-999.png" alt="Filtered or empty folder">
+    <strong>Filtered / Empty</strong>
+    <span>Matches active <a href="fileFilters.html#show_filtered_files">file filters</a> or is empty</span>
+  </div>
+</div>
+
+# [File Colors](#file_colors)
+
+Line colors in the File Differ View are based on differences found.
+
+<div class="folder-legend-grid">
+  <div class="folder-legend-card">
+    <div class="file-legend-swatch file-legend-same"></div>
+    <strong>Same</strong>
+    <span>Left and right content is identical</span>
+  </div>
+  <div class="folder-legend-card">
+    <div class="file-legend-swatch file-legend-different"></div>
+    <strong>Different</strong>
+    <span>Left content differs from right</span>
+  </div>
+  <div class="folder-legend-card">
+    <div class="file-legend-swatch file-legend-missing-left"></div>
+    <strong>Missing left</strong>
+    <span>Line present only on the right; missing on the left</span>
+  </div>
+  <div class="folder-legend-card">
+    <div class="file-legend-swatch file-legend-missing-right"></div>
+    <strong>Missing right</strong>
+    <span>Line present only on the left; missing on the right</span>
+  </div>
+  <div class="folder-legend-card">
+    <div class="file-legend-swatch file-legend-merged"></div>
+    <strong>Merged</strong>
+    <span>Content copied from the other side; file is marked as edited</span>
+  </div>
+</div>
+
+# [Difference Indicator](#difference_indicator)
+
+The narrow strip on the right side of the file diff view gives a bird's-eye view of all differences across the whole file.
+
+![image]({{ site.prefixDir }}img/screenshots/file/differenceIndicator.png){:.wiki-img}
+
+Each colored mark corresponds to a difference section; the colors match those in the diff table. The current scroll position is shown as a highlighted band. Click anywhere on the indicator to jump directly to that part of the file.

css/input.css

@@ -94,31 +94,111 @@ img.folder-legend {
   max-height: 16px;
 }
 
+.folder-legend-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+  gap: 12px;
+  margin: 1.25rem 0;
+}
+
+.folder-legend-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 14px 10px 12px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  gap: 8px;
+  background: #f8fafc;
+}
+
+.folder-legend-card img {
+  object-fit: contain;
+}
+
+.folder-legend-card strong {
+  font-size: 0.82rem;
+  color: #1e293b;
+  line-height: 1.3;
+}
+
+.folder-legend-card span {
+  font-size: 0.75rem;
+  color: #64748b;
+  line-height: 1.4;
+}
+
+td.copy-cmd {
+  cursor: pointer;
+  white-space: nowrap;
+  user-select: none;
+}
+
+td.copy-cmd::after {
+  content: '';
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin-left: 7px;
+  vertical-align: middle;
+  opacity: 0;
+  transition: opacity 0.15s;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
+}
+
+td.copy-cmd:hover::after {
+  opacity: 1;
+}
+
+td.copy-cmd.copied::after {
+  opacity: 1;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
+}
+
+img.wiki-img {
+  max-width: 50%;
+  border: 1px solid #94a3b8;
+  border-radius: 4px;
+  background-color: #fff;
+  padding: 3px;
+}
+
 table.file-legend tr td {
   padding: 6px 10px;
 }
 
-td.file-legend-same {
+.file-legend-same {
   background-color: #0f172a;
   color: #e2e8f0;
 }
 
-td.file-legend-different {
+.file-legend-different {
   background-color: #d1fadf;
 }
 
-td.file-legend-missing-left {
+.file-legend-missing-left {
   background-color: #e0f2fe;
 }
 
-td.file-legend-missing-right {
+.file-legend-missing-right {
   background-color: #fef9c3;
 }
 
-td.file-legend-merged {
+.file-legend-merged {
   background-color: #fef3c7;
 }
 
+.file-legend-swatch {
+  width: 100%;
+  height: 20px;
+  border-radius: 3px;
+  border: 1px solid rgba(0,0,0,0.08);
+}
+
 #main a[href^="https://"]::before,
 #main a[href^="http://"]::before,
 .link-https::before,