From 80ca19cb4b134d176ffc228e7cb568b3c27c4ab9 Mon Sep 17 00:00:00 2001
From: Alihan <alihandikel@gmail.com>
Date: Sun, 19 Oct 2025 01:37:52 +0300
Subject: [PATCH] Add dotfile handling in Locations section - display hidden
 files as gray non-clickable items at bottom
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Separate dotfiles (starting with .) from regular locations
- Display dotfiles in gray with disabled cursor
- Keep dotfiles always positioned at the bottom of the list regardless of sort order
- Prevent dotfile selection while maintaining visibility

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/src/App.jsx | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 3501351..8976338 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -166,7 +166,20 @@ function App() {
     return sorted
   }
 
-  const getSortedLocations = () => sortItems(locations, locationSort)
+  const getSortedLocations = () => {
+    const sorted = sortItems(locations, locationSort)
+    // Separate dotfiles from regular locations
+    const regularLocations = sorted.filter(loc => {
+      const name = loc.name || loc
+      return !name.startsWith('.')
+    })
+    const dotfiles = sorted.filter(loc => {
+      const name = loc.name || loc
+      return name.startsWith('.')
+    })
+    // Return regular locations first, then dotfiles at the bottom
+    return [...regularLocations, ...dotfiles]
+  }
   const getSortedDates = () => sortItems(dates, dateSort)
   const getSortedFiles = () => sortItems(files, fileSort)
 
@@ -363,12 +376,16 @@ function App() {
               <ul className="space-y-1">
                 {getSortedLocations().map((location) => {
                   const locationName = location.name || location
+                  const isDotfile = locationName.startsWith('.')
                   return (
                     <li key={locationName}>
                       <button
-                        onClick={() => handleLocationClick(locationName)}
-                        className={`w-full text-left px-3 py-2 rounded hover:bg-blue-50 transition ${
-                          selectedLocation === locationName ? 'bg-blue-100 font-semibold' : ''
+                        onClick={() => !isDotfile && handleLocationClick(locationName)}
+                        disabled={isDotfile}
+                        className={`w-full text-left px-3 py-2 rounded transition ${
+                          isDotfile
+                            ? 'text-gray-400 cursor-not-allowed bg-gray-50'
+                            : `hover:bg-blue-50 ${selectedLocation === locationName ? 'bg-blue-100 font-semibold' : ''}`
                         }`}
                       >
                         {locationName}