From f5e9cb019d5236d0e6ce85ddeccb86f6da77a1c6 Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Mon, 15 Jun 2026 16:35:07 -0700
Subject: [PATCH] Add file type badge next to file name in grid view

---
 frontend/src/components/FileExplorer.tsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/FileExplorer.tsx b/frontend/src/components/FileExplorer.tsx
index d8720bb..4cb72f3 100644
--- a/frontend/src/components/FileExplorer.tsx
+++ b/frontend/src/components/FileExplorer.tsx
@@ -2176,12 +2176,19 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
                           />
                         ) : (
                           <Tooltip text={file.name}>
-                            <span
-                              className={`text-xs font-medium text-center w-full block ${isMobile ? 'whitespace-normal break-words line-clamp-2' : 'truncate'}`}
-                              style={{ color: 'var(--color-text-primary)' }}
-                            >
-                              {getFileDisplayName(file.name, file.is_dir)}
-                            </span>
+                            <div className="flex items-center gap-2 justify-center w-full px-1">
+                              {!file.is_dir && (
+                                <div className="flex-shrink-0 flex items-center justify-center">
+                                  {getFileIcon(file, false)}
+                                </div>
+                              )}
+                              <span
+                                className={`text-xs font-medium text-center ${isMobile ? 'whitespace-normal break-words line-clamp-2' : 'truncate'}`}
+                                style={{ color: 'var(--color-text-primary)' }}
+                              >
+                                {getFileDisplayName(file.name, file.is_dir)}
+                              </span>
+                            </div>
                           </Tooltip>
                         )}
                       </div>