Function MyLibrary

src/components/MyLibrary.tsx:8–181

()

import { formatBytes, formatSpeed } from '../lib/utils';

export function MyLibrary() {
  const { installedModels, isLoading, error, refreshModels } = useModels();
  const { deleteModel, error: deleteError } = useModelDelete(refreshModels);
  const { downloads } = useModelDownload(refreshModels);

  const handleUseInChat = (modelName: string) => {
    // Store selected model in localStorage
    localStorage.setItem('selected-model', modelName);
    // Trigger navigation to chat page
    window.dispatchEvent(new CustomEvent('navigate-to-chat', { detail: { model: modelName } }));
  };

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-full">
        <LoadingSpinner size="lg" />
      </div>
    );
  }

  // Get currently downloading models
  const downloadingModels = Array.from(downloads.entries()).filter(
    ([_, progress]) => progress.isDownloading
  );

  return (
    <div className="p-8 max-w-7xl mx-auto">
      {(error || deleteError) && (
        <div className="mb-6">
          <ErrorBanner message={error || deleteError || ''} onRetry={refreshModels} />
        </div>
      )}

      {/* Currently Downloading Section */}
      {downloadingModels.length > 0 && (
        <div className="mb-10">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-2 h-2 bg-dark-accent rounded-full animate-pulse" />
            <h2 className="text-xl font-semibold text-dark-text">Downloading</h2>
            <span className="text-dark-text-muted text-sm">
              {downloadingModels.length} {downloadingModels.length === 1 ? 'model' : 'models'}
            </span>
          </div>
          
          <div className="space-y-3">
            {downloadingModels.map(([modelName, progress]) => (
              <div
                key={modelName}
                className="bg-dark-surface border border-dark-border rounded-xl p-5 hover:border-dark-accent transition-all"
              >
                <div className="flex items-center justify-between mb-3">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-dark-accent bg-opacity-20 rounded-lg flex items-center justify-center">
                      <svg className="w-5 h-5 text-dark-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                      </svg>
                    </div>
                    <div>