@fgv/ts-res-browser 5.0.0-2 → 5.0.0-21

package/src/components/layout/Header.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { DocumentMagnifyingGlassIcon } from '@heroicons/react/24/outline';
-
-const Header: React.FC = () => {
-  return (
-    <header className="bg-white shadow-sm border-b border-gray-200">
-      <div className="container mx-auto px-4 py-4">
-        <div className="flex items-center space-x-3">
-          <DocumentMagnifyingGlassIcon className="h-8 w-8 text-blue-600" />
-          <div>
-            <h1 className="text-2xl font-bold text-gray-900">TS-RES Browser</h1>
-            <p className="text-sm text-gray-600">
-              Visual tool for loading, browsing, and experimenting with ts-res resources
-            </p>
-          </div>
-        </div>
-      </div>
-    </header>
-  );
-};
-
-export default Header;

package/src/components/layout/MessagesWindow.tsx

@@ -1,108 +0,0 @@
-import React, { useState } from 'react';
-import {
-  XMarkIcon,
-  InformationCircleIcon,
-  ExclamationTriangleIcon,
-  XCircleIcon,
-  CheckCircleIcon,
-  ChevronUpIcon,
-  ChevronDownIcon
-} from '@heroicons/react/24/outline';
-
-interface Message {
-  id: string;
-  type: 'info' | 'warning' | 'error' | 'success';
-  message: string;
-  timestamp: Date;
-}
-
-interface MessagesWindowProps {
-  messages: Message[];
-  onClearMessages: () => void;
-}
-
-const MessagesWindow: React.FC<MessagesWindowProps> = ({ messages, onClearMessages }) => {
-  const [isCollapsed, setIsCollapsed] = useState(false);
-
-  if (messages.length === 0) {
-    return null;
-  }
-
-  const getMessageIcon = (type: Message['type']) => {
-    switch (type) {
-      case 'info':
-        return <InformationCircleIcon className="h-5 w-5 text-blue-500" />;
-      case 'warning':
-        return <ExclamationTriangleIcon className="h-5 w-5 text-yellow-500" />;
-      case 'error':
-        return <XCircleIcon className="h-5 w-5 text-red-500" />;
-      case 'success':
-        return <CheckCircleIcon className="h-5 w-5 text-green-500" />;
-      default:
-        return <InformationCircleIcon className="h-5 w-5 text-gray-500" />;
-    }
-  };
-
-  const getMessageBgColor = (type: Message['type']) => {
-    switch (type) {
-      case 'info':
-        return 'bg-blue-50 border-blue-200';
-      case 'warning':
-        return 'bg-yellow-50 border-yellow-200';
-      case 'error':
-        return 'bg-red-50 border-red-200';
-      case 'success':
-        return 'bg-green-50 border-green-200';
-      default:
-        return 'bg-gray-50 border-gray-200';
-    }
-  };
-
-  const formatTime = (date: Date) => {
-    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
-  };
-
-  return (
-    <div className="border-t border-gray-200 bg-white">
-      {/* Header */}
-      <div className="flex items-center justify-between px-4 py-2 bg-gray-50 border-b border-gray-200">
-        <div className="flex items-center space-x-2">
-          <button onClick={() => setIsCollapsed(!isCollapsed)} className="p-1 hover:bg-gray-200 rounded">
-            {isCollapsed ? (
-              <ChevronUpIcon className="h-4 w-4 text-gray-500" />
-            ) : (
-              <ChevronDownIcon className="h-4 w-4 text-gray-500" />
-            )}
-          </button>
-          <h3 className="text-sm font-medium text-gray-900">Messages ({messages.length})</h3>
-        </div>
-        <button
-          onClick={onClearMessages}
-          className="text-xs text-gray-500 hover:text-gray-700 px-2 py-1 rounded hover:bg-gray-200"
-        >
-          Clear All
-        </button>
-      </div>
-
-      {/* Messages */}
-      {!isCollapsed && (
-        <div className="max-h-48 overflow-y-auto">
-          {messages.map((message) => (
-            <div
-              key={message.id}
-              className={`flex items-start space-x-3 p-3 border-l-4 ${getMessageBgColor(message.type)}`}
-            >
-              {getMessageIcon(message.type)}
-              <div className="flex-1 min-w-0">
-                <p className="text-sm text-gray-900">{message.message}</p>
-                <p className="text-xs text-gray-500 mt-1">{formatTime(message.timestamp)}</p>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default MessagesWindow;

package/src/components/layout/Sidebar.tsx

@@ -1,99 +0,0 @@
-import React from 'react';
-import {
-  DocumentArrowUpIcon,
-  DocumentTextIcon,
-  FunnelIcon,
-  CubeIcon,
-  MagnifyingGlassIcon,
-  CogIcon,
-  ArchiveBoxIcon
-} from '@heroicons/react/24/outline';
-import { Tool } from '../../types/app';
-
-interface SidebarProps {
-  selectedTool: Tool;
-  onToolSelect: (tool: Tool) => void;
-}
-
-const tools = [
-  {
-    id: 'import',
-    name: 'Import Resources',
-    icon: DocumentArrowUpIcon,
-    description: 'Import ts-res resource files and directories'
-  },
-  {
-    id: 'source',
-    name: 'Source Browser',
-    icon: DocumentTextIcon,
-    description: 'Browse built resources in alphabetical order'
-  },
-  {
-    id: 'filter',
-    name: 'Filter Tool',
-    icon: FunnelIcon,
-    description: 'Filter resources by context for focused analysis'
-  },
-  {
-    id: 'compiled',
-    name: 'Compiled Browser',
-    icon: CubeIcon,
-    description: 'Navigate compiled resources in tree view'
-  },
-  {
-    id: 'resolution',
-    name: 'Resolution Viewer',
-    icon: MagnifyingGlassIcon,
-    description: 'View resource resolution with qualifiers'
-  },
-  {
-    id: 'configuration',
-    name: 'Configuration',
-    icon: CogIcon,
-    description: 'Manage qualifier types, qualifiers, and resource types'
-  },
-  {
-    id: 'zip-loader',
-    name: 'ZIP Loader',
-    icon: ArchiveBoxIcon,
-    description: 'Load resources from ZIP archive created by CLI'
-  }
-];
-
-const Sidebar: React.FC<SidebarProps> = ({ selectedTool, onToolSelect }) => {
-  return (
-    <aside className="w-64 bg-white shadow-sm border-r border-gray-200 h-screen overflow-y-auto">
-      <div className="p-4">
-        <h2 className="text-lg font-semibold text-gray-900 mb-4">Tools</h2>
-        <nav className="space-y-2">
-          {tools.map((tool) => {
-            const Icon = tool.icon;
-            const isSelected = selectedTool === tool.id;
-
-            return (
-              <button
-                key={tool.id}
-                onClick={() => onToolSelect(tool.id as Tool)}
-                className={`w-full text-left p-3 rounded-lg transition-colors ${
-                  isSelected
-                    ? 'bg-blue-50 text-blue-700 border border-blue-200'
-                    : 'hover:bg-gray-50 text-gray-700 border border-transparent'
-                }`}
-              >
-                <div className="flex items-center space-x-3">
-                  <Icon className="h-5 w-5 flex-shrink-0" />
-                  <div className="min-w-0 flex-1">
-                    <div className="font-medium text-sm">{tool.name}</div>
-                    <div className="text-xs text-gray-500 mt-1">{tool.description}</div>
-                  </div>
-                </div>
-              </button>
-            );
-          })}
-        </nav>
-      </div>
-    </aside>
-  );
-};
-
-export default Sidebar;