Merge pull request #11 from Petrus-Han/main

Feat: Enhance diff modal with 'Diff Only' toggle and update .gitignore

Author: sorphwer

.gitignore

@@ -1,31 +1,47 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+node_modules/
 /.pnp
-.pnp.js
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# lock files
+yarn.lock
+package-lock.json
+pnpm-lock.yaml
 
 # testing
 /coverage
 
 # next.js
-/.next/
+.next/
 /out/
+.cache/
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store
 *.pem
+*.log
+Thumbs.db
 
 # debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
 # local env files
 .env*
+!.env.example
 !*/.env.example
 
 # vercel
@@ -34,3 +50,9 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# IDE
+.idea/
+*.swp
+*.swo
+*~

dify-helm-watchdog/.gitignore

@@ -1,7 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+node_modules/
 /.pnp
 .pnp.*
 .yarn/*
@@ -10,6 +10,11 @@
 !.yarn/releases
 !.yarn/versions
 
+# lock files
+yarn.lock
+package-lock.json
+pnpm-lock.yaml
+
 # testing
 /coverage
 
@@ -20,10 +25,13 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store
 *.pem
+*.log
+Thumbs.db
 
 # debug
 npm-debug.log*
@@ -34,11 +42,16 @@ yarn-error.log*
 # env files (can opt-in for committing if needed)
 .env*
 !.env.example
-.env.local
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# IDE
+.idea/
+*.swp
+*.swo
+*~

dify-helm-watchdog/src/components/modals/diff-comparison-modal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useEffect } from "react";
-import { Loader2, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Loader2, X, Filter } from "lucide-react";
 import { motion } from "framer-motion";
 import ReactDiffViewer from "react-diff-viewer";
 import type { ReactDiffViewerStylesOverride } from "react-diff-viewer";
@@ -38,6 +38,8 @@ export default function DiffComparisonModal({
   isLoading,
   error,
 }: DiffComparisonModalProps) {
+  const [showDiffOnly, setShowDiffOnly] = useState(false);
+
   // ESC key handler
   useEffect(() => {
     if (!isOpen) {
@@ -106,9 +108,9 @@ export default function DiffComparisonModal({
           </p>
         </header>
 
-        {/* Tabs */}
-        <div className="flex items-center justify-center gap-4">
-          <div className="relative flex w-full justify-center rounded-full border border-border bg-muted p-1">
+        {/* Tabs and Filter Toggle */}
+        <div className="flex items-center gap-4">
+          <div className="relative flex flex-[9] justify-center rounded-full border border-border bg-muted p-1 min-w-0">
             {tabs.map((tab) => {
               const isActive = tab.id === activeTabId;
               return (
@@ -138,6 +140,21 @@ export default function DiffComparisonModal({
               );
             })}
           </div>
+          <motion.button
+            type="button"
+            onClick={() => setShowDiffOnly((prev) => !prev)}
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            className={`inline-flex items-center gap-2 rounded-full border px-4 py-2 text-xs font-semibold uppercase tracking-[0.25em] transition-colors whitespace-nowrap shrink-0 flex-[1] justify-center ${
+              showDiffOnly
+                ? "border-primary bg-primary text-primary-foreground"
+                : "border-border bg-muted text-muted-foreground hover:border-accent hover:bg-accent/10 hover:text-foreground"
+            }`}
+            aria-label={showDiffOnly ? "Show all lines" : "Show diff only"}
+          >
+            <Filter className="h-3.5 w-3.5" />
+            <span>Diff Only</span>
+          </motion.button>
         </div>
 
         {/* Error message */}
@@ -163,16 +180,18 @@ export default function DiffComparisonModal({
           <div
             className="custom-scrollbar flex-1 overflow-auto rounded-xl bg-muted p-4 max-h-[calc(95vh-200px)]"
           >
-            <ReactDiffViewer
-              oldValue={diffContent.oldValue}
-              newValue={diffContent.newValue}
-              splitView
-              styles={diffViewerStyles}
-              useDarkTheme={theme === "dark"}
-              showDiffOnly={false}
-              leftTitle={`v${targetVersion}`}
-              rightTitle={`v${baseVersion}`}
-            />
+            <div className="min-w-fit">
+              <ReactDiffViewer
+                oldValue={diffContent.oldValue}
+                newValue={diffContent.newValue}
+                splitView
+                styles={diffViewerStyles}
+                useDarkTheme={theme === "dark"}
+                showDiffOnly={showDiffOnly}
+                leftTitle={`v${targetVersion}`}
+                rightTitle={`v${baseVersion}`}
+              />
+            </div>
           </div>
         </div>
       </motion.div>