From 5a8e0457f1ceeed63af69a620000aaff986a1831 Mon Sep 17 00:00:00 2001
From: xXJSONDeruloXx <danielhimebauch@gmail.com>
Date: Mon, 22 Sep 2025 10:18:36 -0400
Subject: feat: add picture example for flatpak shortcut hooking

---
 assets/flatpak-target.png        | Bin 0 -> 78195 bytes
 src/components/FlatpaksModal.tsx |  15 +++++++++++++++
 2 files changed, 15 insertions(+)
 create mode 100644 assets/flatpak-target.png

diff --git a/assets/flatpak-target.png b/assets/flatpak-target.png
new file mode 100644
index 0000000..773e567
Binary files /dev/null and b/assets/flatpak-target.png differ
diff --git a/src/components/FlatpaksModal.tsx b/src/components/FlatpaksModal.tsx
index 963aaf9..bd81013 100644
--- a/src/components/FlatpaksModal.tsx
+++ b/src/components/FlatpaksModal.tsx
@@ -15,6 +15,7 @@ import {
   ConfirmModal
 } from '@decky/ui';
 import { FaCheck, FaTimes, FaDownload, FaTrash, FaCog } from 'react-icons/fa';
+import flatpakTargetImage from '../../assets/flatpak-target.png';
 import { 
   checkFlatpakExtensionStatus, 
   installFlatpakExtension, 
@@ -344,6 +345,20 @@ const FlatpaksModal: FC<FlatpaksModalProps> = ({ closeModal }) => {
                 }}>
                   ~/lsfg "usr/bin/flatpak"
                 </div>
+                
+                {/* Visual example image */}
+                <div style={{ marginTop: '16px', textAlign: 'center' }}>
+                  <img 
+                    src={flatpakTargetImage} 
+                    alt="Steam Properties Target Field Example"
+                    style={{ 
+                      maxWidth: '100%', 
+                      height: 'auto',
+                      border: '1px solid rgba(255, 255, 255, 0.2)',
+                      borderRadius: '4px'
+                    }}
+                  />
+                </div>
               </div>
             </Focusable>
           </DialogControlsSection>
-- 
cgit v1.2.3