refactor: remove legacy card components and update imports to use shared ModelCard component

static/css/components/header.css

@@ -31,7 +31,7 @@
   align-items: center;
   text-decoration: none;
   color: var(--text-color);
-  gap: 8px;
+  gap: 2px;
 }
 
 .app-logo {

static/js/components/CheckpointCard.js

@@ -1,14 +0,0 @@
-// Legacy CheckpointCard.js - now using shared ModelCard component
-import { 
-    createModelCard, 
-    setupModelCardEventDelegation 
-} from './shared/ModelCard.js';
-
-// Re-export functions with original names for backwards compatibility
-export function createCheckpointCard(checkpoint) {
-    return createModelCard(checkpoint, 'checkpoint');
-}
-
-export function setupCheckpointCardEventDelegation() {
-    setupModelCardEventDelegation('checkpoint');
-}

static/js/components/LoraCard.js

@@ -1,17 +0,0 @@
-// Legacy LoraCard.js - now using shared ModelCard component
-import { 
-    createModelCard, 
-    setupModelCardEventDelegation, 
-    updateCardsForBulkMode 
-} from './shared/ModelCard.js';
-
-// Re-export functions with original names for backwards compatibility
-export function createLoraCard(lora) {
-    return createModelCard(lora, 'lora');
-}
-
-export function setupLoraCardEventDelegation() {
-    setupModelCardEventDelegation('lora');
-}
-
-export { updateCardsForBulkMode };

static/js/components/checkpointModal/index.js

@@ -1,11 +0,0 @@
-/**
- * CheckpointModal - Main entry point
- * 
- * Legacy CheckpointModal - now using shared ModelModal component
- */
-import { showModelModal } from '../shared/ModelModal.js';
-
-// Re-export function with original name for backwards compatibility
-export function showCheckpointModal(checkpoint) {
-    return showModelModal(checkpoint, 'checkpoint');
-}

static/js/components/loraModal/index.js

@@ -1,7 +0,0 @@
-// Legacy LoraModal - now using shared ModelModal component
-import { showModelModal } from '../shared/ModelModal.js';
-
-// Re-export function with original name for backwards compatibility
-export function showLoraModal(lora) {
-    return showModelModal(lora, 'lora');
-}

static/js/components/shared/ModelCard.js

@@ -48,7 +48,7 @@ function handleModelCardEvent_internal(event, modelType) {
     
     if (event.target.closest('.fa-star')) {
         event.stopPropagation();
-        toggleFavorite(card, modelType);
+        toggleFavorite(card);
         return;
     }
     
@@ -131,7 +131,7 @@ function showBlurredContent(card) {
     }
 }
 
-async function toggleFavorite(card, modelType) {
+async function toggleFavorite(card) {
     const starIcon = card.querySelector('.fa-star');
     const isFavorite = starIcon.classList.contains('fas');
     const newFavoriteState = !isFavorite;

static/js/core.js

@@ -68,7 +68,7 @@ export class AppCore {
         const pageType = this.getPageType();
         
         // Initialize virtual scroll for pages that need it
-        if (['loras', 'recipes', 'checkpoints'].includes(pageType)) {
+        if (['loras', 'recipes', 'checkpoints', 'embeddings'].includes(pageType)) {
             initializeInfiniteScroll(pageType);
         }
         

static/js/loras.js

@@ -1,6 +1,6 @@
 import { appCore } from './core.js';
 import { state } from './state/index.js';
-import { updateCardsForBulkMode } from './components/LoraCard.js';
+import { updateCardsForBulkMode } from './components/shared/ModelCard.js';
 import { bulkManager } from './managers/BulkManager.js';
 import { moveManager } from './managers/MoveManager.js';
 import { LoraContextMenu } from './components/ContextMenu/index.js';

static/js/managers/BulkManager.js

@@ -1,6 +1,6 @@
 import { state } from '../state/index.js';
 import { showToast, copyToClipboard, sendLoraToWorkflow } from '../utils/uiHelpers.js';
-import { updateCardsForBulkMode } from '../components/LoraCard.js';
+import { updateCardsForBulkMode } from '../components/shared/ModelCard.js';
 import { modalManager } from './ModalManager.js';
 
 export class BulkManager {

static/js/utils/infiniteScroll.js

@@ -1,14 +1,13 @@
 import { state, getCurrentPageState } from '../state/index.js';
 import { VirtualScroller } from './VirtualScroller.js';
-import { createLoraCard, setupLoraCardEventDelegation } from '../components/LoraCard.js';
+import { createModelCard, setupModelCardEventDelegation } from '../components/shared/ModelCard.js';
-import { createCheckpointCard, setupCheckpointCardEventDelegation } from '../components/CheckpointCard.js';
 import { getModelApiClient } from '../api/baseModelApi.js';
 import { showToast } from './uiHelpers.js';
 
 // Function to dynamically import the appropriate card creator based on page type
 async function getCardCreator(pageType) {
     if (pageType === 'loras') {
-        return createLoraCard;
+        return (model) => createModelCard(model, 'lora');
     } else if (pageType === 'recipes') {
         // Import the RecipeCard module
         const { RecipeCard } = await import('../components/RecipeCard.js');
@@ -23,7 +22,9 @@ async function getCardCreator(pageType) {
             return recipeCard.element;
         };
     } else if (pageType === 'checkpoints') {
-        return createCheckpointCard;
+        return (model) => createModelCard(model, 'checkpoint');
+    } else if (pageType === 'embeddings') {
+        return (model) => createModelCard(model, 'embedding');
     }
     return null;
 }
@@ -64,9 +65,11 @@ export async function initializeInfiniteScroll(pageType = 'loras') {
     
     // Setup event delegation for lora cards if on the loras page
     if (pageType === 'loras') {
-        setupLoraCardEventDelegation();
+        setupModelCardEventDelegation('lora');
     } else if (pageType === 'checkpoints') {
-        setupCheckpointCardEventDelegation();
+        setupModelCardEventDelegation('checkpoint');
+    } else if (pageType === 'embeddings') {
+        setupModelCardEventDelegation('embedding');
     }
 }
 

templates/components/header.html

@@ -3,7 +3,7 @@
     <div class="header-branding">
       <a href="/loras" class="logo-link">
         <img src="/loras_static/images/favicon-32x32.png" alt="LoRA Manager" class="app-logo">
-        <span class="app-title">LoRA Manager</span>
+        <span class="app-title">oRA Manager</span>
       </a>
     </div>
     <nav class="main-nav">