Enhance RecipeScanner and CSS components for improved functionality and styling

- Added localPath retrieval for LoRA entries in RecipeScanner to enhance metadata handling.
- Included shared.css in the main stylesheet for better component styling consistency.
- Removed unused local-badge and local-path styles from download-modal.css and recipe-modal.css to streamline the CSS and improve maintainability.

py/services/recipe_scanner.py

@@ -402,6 +402,7 @@ class RecipeScanner:
                     if 'hash' in lora and lora['hash']:
                         lora['inLibrary'] = self._lora_scanner.has_lora_hash(lora['hash'].lower())
                         lora['preview_url'] = self._lora_scanner.get_preview_url_by_hash(lora['hash'].lower())
+                        lora['localPath'] = self._lora_scanner.get_lora_path_by_hash(lora['hash'].lower())
         
         result = {
             'items': paginated_items,

static/css/components/download-modal.css

@@ -130,50 +130,6 @@
     gap: 4px;
 }
 
-/* Local Version Badge */
-.local-badge {
-    display: inline-flex;
-    align-items: center;
-    background: var(--lora-accent);
-    color: var(--lora-text);
-    padding: 4px 8px;
-    border-radius: var(--border-radius-xs);
-    font-size: 0.8em;
-    font-weight: 500;
-    white-space: nowrap;
-    flex-shrink: 0;
-    position: relative;
-}
-
-.local-badge i {
-    margin-right: 4px;
-    font-size: 0.9em;
-}
-
-.local-path {
-    display: none;
-    position: absolute;
-    top: 100%;
-    right: 0;
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-xs);
-    padding: var(--space-1);
-    margin-top: 4px;
-    font-size: 0.9em;
-    color: var(--text-color);
-    white-space: normal;
-    word-break: break-all;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    z-index: 1;
-    min-width: 200px;
-    max-width: 300px;
-}
-
-.local-badge:hover .local-path {
-    display: block;
-}
-
 /* Folder Browser Styles */
 .folder-browser {
     border: 1px solid var(--border-color);
@@ -252,46 +208,3 @@
     background: oklch(var(--lora-accent) / 0.05);
     border-left: 4px solid var(--lora-accent);
 }
-
-.local-badge {
-    display: inline-flex;
-    align-items: center;
-    background: var(--lora-accent);
-    color: var(--lora-text);
-    padding: 4px 8px;
-    border-radius: var(--border-radius-xs);
-    font-size: 0.8em;
-    font-weight: 500;
-    white-space: nowrap;
-    flex-shrink: 0;
-    position: relative;
-}
-
-.local-badge i {
-    margin-right: 4px;
-    font-size: 0.9em;
-}
-
-.local-path {
-    display: none;
-    position: absolute;
-    top: 100%;
-    right: 0;
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-xs);
-    padding: var(--space-1);
-    margin-top: 4px;
-    font-size: 0.9em;
-    color: var(--text-color);
-    white-space: normal;
-    word-break: break-all;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    z-index: 1;
-    min-width: 200px;
-    max-width: 300px;
-}
-
-.local-badge:hover .local-path {
-    display: block;
-} 

static/css/components/recipe-modal.css

@@ -293,24 +293,7 @@
     font-size: 0.85em;
 }
 
-.local-badge {
-    display: inline-flex;
-    align-items: center;
-    background: var(--lora-accent);
-    color: white;
-    padding: 3px 6px;
-    border-radius: var(--border-radius-xs);
-    font-size: 0.75em;
-    font-weight: 500;
-    white-space: nowrap;
-    flex-shrink: 0;
-    position: relative;
-}
 
-.local-badge i {
-    margin-right: 4px;
-    font-size: 0.9em;
-}
 
 .missing-badge {
     display: inline-flex;
@@ -330,26 +313,6 @@
     font-size: 0.9em;
 }
 
-.local-path {
-    display: none;
-    position: absolute;
-    background: var(--bg-color);
-    border: 1px solid var(--border-color);
-    padding: 4px 8px;
-    border-radius: var(--border-radius-xs);
-    font-size: 0.85em;
-    z-index: 10;
-    top: 100%;
-    left: 0;
-    margin-top: 4px;
-    white-space: normal;
-    max-width: 250px;
-}
-
-.local-badge:hover .local-path {
-    display: block;
-}
-
 /* Responsive adjustments */
 @media (max-width: 768px) {
     .recipe-top-section {

static/css/components/shared.css

@@ -0,0 +1,43 @@
+/* Local Version Badge */
+.local-badge {
+    display: inline-flex;
+    align-items: center;
+    background: var(--lora-accent);
+    color: var(--lora-text);
+    padding: 4px 8px;
+    border-radius: var(--border-radius-xs);
+    font-size: 0.8em;
+    font-weight: 500;
+    white-space: nowrap;
+    flex-shrink: 0;
+    position: relative;
+}
+
+.local-badge i {
+    margin-right: 4px;
+    font-size: 0.9em;
+}
+
+.local-path {
+    display: none;
+    position: absolute;
+    top: 100%;
+    right: 0;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-xs);
+    padding: var(--space-1);
+    margin-top: 4px;
+    font-size: 0.9em;
+    color: var(--text-color);
+    white-space: normal;
+    word-break: break-all;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    z-index: 1;
+    min-width: 200px;
+    max-width: 300px;
+}
+
+.local-badge:hover .local-path {
+    display: block;
+}

static/css/style.css

@@ -17,6 +17,7 @@
 @import 'components/support-modal.css';
 @import 'components/search-filter.css';
 @import 'components/bulk.css';
+@import 'components/shared.css';
 
 .initialization-notice {
     display: flex;