Fix: Clean header, fix breadcrumb icons, remove file prompt

index.html

@@ -29,6 +29,15 @@
         currentPath: '',
         isLoading: false,
 
+        init() {
+            this.$watch('currentPath', () => this.refreshIcons());
+            this.$watch('fileTree', () => this.refreshIcons());
+        },
+
+        refreshIcons() {
+            this.$nextTick(() => lucide.createIcons());
+        },
+
         async selectRepo(repoStr) {
             this.currentRepo = repoStr;
             this.currentPath = '';
@@ -48,11 +57,11 @@
                 const data = await response.json();
                 this.fileTree = data.tree || [];
             } catch (e) {
-                alert('Error fetching repository, Meowster. Check your PAT or repo name.');
+                alert('Error fetching repository, Meowster.');
                 this.currentRepo = null;
             } finally {
                 this.isLoading = false;
-                this.$nextTick(() => lucide.createIcons());
+                this.refreshIcons();
             }
         },
 
@@ -73,14 +82,16 @@
             return this.currentPath.split('/');
         },
 
+        get repoDisplayName() {
+            if (!this.currentRepo) return '';
+            return this.currentRepo.split('@')[0].split('/').pop();
+        },
+
         navigateTo(path) {
             const item = this.fileTree.find(i => i.path === path);
             if (item && item.type === 'tree') {
                 this.currentPath = path;
-            } else if (item && item.type === 'blob') {
-                alert('Opening file: ' + path + ', Master.');
             }
-            this.$nextTick(() => lucide.createIcons());
         },
 
         goUp() {
@@ -88,7 +99,6 @@
             const parts = this.currentPath.split('/');
             parts.pop();
             this.currentPath = parts.join('/');
-            this.$nextTick(() => lucide.createIcons());
         },
 
         addRepo() {
@@ -96,9 +106,7 @@
             if (repo && repo.includes('/')) {
                 this.repos.push(repo);
                 this.saveRepos();
-                this.$nextTick(() => lucide.createIcons());
+                this.refreshIcons();
-            } else if (repo) {
-                alert('Invalid format, Meowster.');
             }
         },
         
@@ -114,18 +122,9 @@
         
         <!-- Header -->
         <header class="flex items-center justify-between px-4 py-2 border-b border-gray-100 bg-white z-50 shrink-0">
-            <div class="flex items-center space-x-2">
             <button @click="leftSidebar = !leftSidebar" class="p-1.5 hover:bg-gray-50 rounded-md border border-gray-200 text-slate-600">
                 <i data-lucide="panel-left" class="w-4 h-4"></i>
             </button>
-                <div class="h-4 w-[1px] bg-gray-200 mx-1"></div>
-                <template x-if="currentRepo">
-                    <div class="flex items-center text-xs font-medium text-slate-500 truncate max-w-[150px]">
-                        <i data-lucide="github" class="w-3 h-3 mr-1.5"></i>
-                        <span x-text="currentRepo.split('@')[0]"></span>
-                    </div>
-                </template>
-            </div>
 
             <div class="bg-slate-100 p-1.5 rounded-full">
                 <i data-lucide="sun" class="w-4 h-4 text-slate-600"></i>
@@ -145,7 +144,7 @@
                         <i data-lucide="arrow-up" class="w-4 h-4 text-slate-600"></i>
                     </button>
                     <div class="flex-1 flex items-center bg-slate-50 border border-slate-200 rounded px-2 py-1 overflow-x-auto custom-scrollbar">
-                        <button @click="currentPath = ''" class="text-xs text-blue-600 hover:underline whitespace-nowrap">root</button>
+                        <button @click="currentPath = ''" class="text-xs font-bold text-blue-600 hover:underline whitespace-nowrap" x-text="repoDisplayName"></button>
                         <template x-for="(part, index) in breadcrumbs" :key="index">
                             <div class="flex items-center">
                                 <i data-lucide="chevron-right" class="w-3 h-3 mx-1 text-slate-400"></i>
@@ -309,9 +308,6 @@
 
     <script>
         lucide.createIcons();
-        document.addEventListener('alpine:initialized', () => {
-            lucide.createIcons();
-        });
     </script>
 </body>
 </html>