gitspace 0.2.0-rc.20 → 0.2.0-rc.21

package/src/components/ProjectList.tui.tsx

@@ -1,109 +0,0 @@
-/**
- * ProjectList - TUI Display Component
- *
- * Dumb presentational component for OpenTUI.
- * Receives all state and actions from useProjectList hook.
- */
-
-import type { UseProjectListReturn } from './ProjectList.js';
-import { formatWorkspaceCount } from './ProjectList.js';
-
-// ============================================================================
-// Colors
-// ============================================================================
-
-const COLORS = {
-  border: '#555555',
-  borderFocused: '#00AAFF',
-  text: '#FFFFFF',
-  textDim: '#888888',
-  selected: '#00AAFF',
-  title: '#00FF88',
-  current: '#FFAA00',
-  repository: '#888888',
-};
-
-// ============================================================================
-// Props
-// ============================================================================
-
-interface ProjectListTUIProps extends UseProjectListReturn {
-  focused?: boolean;
-}
-
-// ============================================================================
-// Component
-// ============================================================================
-
-export function ProjectListTUI(props: ProjectListTUIProps) {
-  const {
-    items,
-    isEmpty,
-    focused = true,
-  } = props;
-
-  // Empty state
-  if (isEmpty) {
-    return (
-      <box
-        flexGrow={1}
-        flexDirection="column"
-        border
-        borderStyle="single"
-        borderColor={focused ? COLORS.borderFocused : COLORS.border}
-      >
-        <text fg={COLORS.title} paddingLeft={1}>
-          {' '}Projects{' '}
-        </text>
-        <box
-          flexDirection="column"
-          paddingLeft={1}
-          paddingTop={1}
-          flexGrow={1}
-          justifyContent="center"
-          alignItems="center"
-        >
-          <text fg={COLORS.textDim}>No projects</text>
-          <text fg={COLORS.textDim} paddingTop={1}>
-            Press [n] to add one
-          </text>
-        </box>
-      </box>
-    );
-  }
-
-  return (
-    <box
-      flexGrow={1}
-      flexDirection="column"
-      border
-      borderStyle="single"
-      borderColor={focused ? COLORS.borderFocused : COLORS.border}
-    >
-      <text fg={COLORS.title} paddingLeft={1}>
-        {' '}Projects{' '}
-      </text>
-      <box flexDirection="column" paddingLeft={1} paddingTop={1} flexGrow={1} overflow="scroll">
-        {items.map((project) => {
-          const isSelected = project.isSelected && focused;
-          const prefix = isSelected ? '>' : ' ';
-          const currentIndicator = project.isCurrent ? '*' : '';
-
-          return (
-            <box key={project.name} flexDirection="column" height={2}>
-              <text
-                fg={isSelected ? COLORS.selected : project.isCurrent ? COLORS.current : COLORS.text}
-                height={1}
-              >
-                {prefix} {project.name} {currentIndicator}
-              </text>
-              <text fg={COLORS.repository} height={1}>
-                {'  '}{project.repository} ({formatWorkspaceCount(project.workspaceCount)})
-              </text>
-            </box>
-          );
-        })}
-      </box>
-    </box>
-  );
-}

package/src/components/ProjectList.web.tsx

@@ -1,143 +0,0 @@
-/** @jsxImportSource react */
-/**
- * ProjectList - Web Display Component
- *
- * Dumb presentational component for web.
- * Receives all state and actions from useProjectList hook.
- */
-
-import type { UseProjectListReturn } from './ProjectList.js';
-import { formatWorkspaceCount, getShortRepoName } from './ProjectList.js';
-
-// ============================================================================
-// Component
-// ============================================================================
-
-export function ProjectListWeb(props: UseProjectListReturn) {
-  const {
-    items,
-    isEmpty,
-    selectIndex,
-    selectProject,
-    createNew,
-    deleteSelected,
-    refresh,
-  } = props;
-
-  // Empty state
-  if (isEmpty) {
-    return (
-      <div className="h-screen flex flex-col bg-gray-900">
-        <Header onRefresh={refresh} onCreateNew={createNew} />
-        <div className="flex-1 flex flex-col items-center justify-center text-gray-400">
-          <div className="text-lg mb-2">No projects</div>
-          <button
-            onClick={createNew}
-            className="text-blue-400 hover:text-blue-300"
-          >
-            Create your first project
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="h-screen flex flex-col bg-gray-900">
-      <Header onRefresh={refresh} onCreateNew={createNew} />
-
-      <div className="flex-1 overflow-y-auto">
-        {items.map((project) => (
-          <div
-            key={project.name}
-            onClick={() => {
-              selectIndex(project.index);
-              selectProject();
-            }}
-            className={`
-              px-4 py-3 cursor-pointer border-b border-gray-800 flex items-center justify-between
-              ${project.isSelected ? 'bg-gray-700 border-l-4 border-l-blue-500' : 'hover:bg-gray-800'}
-            `}
-          >
-            <div className="flex items-center gap-3">
-              <div className="w-10 h-10 rounded bg-gray-700 flex items-center justify-center text-lg">
-                📁
-              </div>
-              <div>
-                <div className="flex items-center gap-2">
-                  <span className="text-white font-medium">{project.name}</span>
-                  {project.isCurrent && (
-                    <span className="text-xs px-2 py-0.5 rounded bg-yellow-900 text-yellow-300">
-                      Current
-                    </span>
-                  )}
-                </div>
-                <div className="text-xs text-gray-500">
-                  {getShortRepoName(project.repository)} · {formatWorkspaceCount(project.workspaceCount)}
-                </div>
-              </div>
-            </div>
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                selectIndex(project.index);
-                deleteSelected();
-              }}
-              className="text-gray-600 hover:text-red-400 p-2"
-              title="Delete project"
-            >
-              🗑️
-            </button>
-          </div>
-        ))}
-      </div>
-
-      <Footer />
-    </div>
-  );
-}
-
-// ============================================================================
-// Subcomponents
-// ============================================================================
-
-function Header({
-  onRefresh,
-  onCreateNew,
-}: {
-  onRefresh: () => void;
-  onCreateNew: () => void;
-}) {
-  return (
-    <div className="bg-gray-800 px-4 py-3 flex items-center justify-between border-b border-gray-700">
-      <div className="text-white font-medium">Projects</div>
-      <div className="flex gap-2">
-        <button
-          onClick={onRefresh}
-          className="text-sm text-gray-400 hover:text-white px-2 py-1"
-        >
-          Refresh
-        </button>
-        <button
-          onClick={onCreateNew}
-          className="text-sm bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded"
-        >
-          + New Project
-        </button>
-      </div>
-    </div>
-  );
-}
-
-function Footer() {
-  return (
-    <div className="bg-gray-800 px-4 py-2 border-t border-gray-700 text-xs text-gray-500 flex gap-4">
-      <span>↑↓ Navigate</span>
-      <span>Enter Select</span>
-      <span>n New</span>
-      <span>d Delete</span>
-      <span>r Refresh</span>
-      <span>Esc Back</span>
-    </div>
-  );
-}

package/src/components/ProjectOnboardingStep.ts

@@ -1,23 +0,0 @@
-import type { OnboardingStep } from '../types/bundle.js';
-
-export interface ProjectOnboardingFlowState {
-  bundleName: string;
-  steps: OnboardingStep[];
-  currentStep: number;
-  inputValue: string;
-  confirmStatus?: 'checking' | 'found' | 'missing' | null;
-}
-
-export interface ProjectOnboardingColors {
-  title: string;
-  selected: string;
-  text: string;
-  textDim: string;
-  loading: string;
-  error: string;
-  border: string;
-}
-
-export function getCurrentOnboardingStep(flow: ProjectOnboardingFlowState): OnboardingStep | null {
-  return flow.steps[flow.currentStep] ?? null;
-}

package/src/components/ProjectOnboardingStep.tui.tsx

@@ -1,88 +0,0 @@
-import {
-  getCurrentOnboardingStep,
-  type ProjectOnboardingColors,
-  type ProjectOnboardingFlowState,
-} from './ProjectOnboardingStep.js';
-
-interface ProjectOnboardingStepTUIProps {
-  flow: ProjectOnboardingFlowState;
-  colors: ProjectOnboardingColors;
-}
-
-export function ProjectOnboardingStepTUI({ flow, colors }: ProjectOnboardingStepTUIProps) {
-  const step = getCurrentOnboardingStep(flow);
-  if (!step) {
-    return null;
-  }
-
-  return (
-    <>
-      <text fg={colors.title} height={1}>
-        {flow.bundleName} Setup ({flow.currentStep + 1}/{flow.steps.length})
-      </text>
-      <text fg={colors.selected} height={1} marginTop={1}>{step.title}</text>
-      {step.description && (
-        <text fg={colors.textDim} height={1} marginTop={1}>{step.description}</text>
-      )}
-
-      {step.type === 'info' && (
-        <text fg={colors.text} height={1} marginTop={1}>Press Enter to continue</text>
-      )}
-
-      {step.type === 'confirm' && (
-        <box flexDirection="column" marginTop={1}>
-          {flow.confirmStatus === 'checking' && (
-            <text fg={colors.loading} height={1}>⏳ Checking...</text>
-          )}
-          {flow.confirmStatus === 'found' && (
-            <text fg={colors.title} height={1}>✅ Found</text>
-          )}
-          {flow.confirmStatus === 'missing' && (
-            <>
-              <text fg={colors.error} height={1}>❌ Not found</text>
-              {step.installUrl && (
-                <text fg={colors.selected} height={1} marginTop={1}>
-                  Install: {step.installUrl}
-                </text>
-              )}
-            </>
-          )}
-          {flow.confirmStatus !== 'checking' && (
-            <text fg={colors.text} height={1} marginTop={1}>Press Enter to continue</text>
-          )}
-        </box>
-      )}
-
-      {step.type === 'input' && (
-        <box flexDirection="column" marginTop={1}>
-          <box
-            borderStyle="rounded"
-            borderColor={colors.border}
-            padding={0}
-            width="100%"
-          >
-            <text fg={colors.text} height={1}>{flow.inputValue || ' '}_</text>
-          </box>
-        </box>
-      )}
-
-      {step.type === 'secret' && (
-        <box flexDirection="column" marginTop={1}>
-          <box
-            borderStyle="rounded"
-            borderColor={colors.border}
-            padding={0}
-            width="100%"
-          >
-            <text fg={colors.text} height={1}>{'•'.repeat(flow.inputValue.length) || ' '}_</text>
-          </box>
-          <text fg={colors.textDim} height={1} marginTop={1}>Value will be stored securely in OS keychain</text>
-        </box>
-      )}
-
-      <text fg={colors.textDim} height={1} marginTop={1}>
-        [Enter] {flow.currentStep === flow.steps.length - 1 ? 'Finish' : 'Next'}  [Esc] Cancel
-      </text>
-    </>
-  );
-}

package/src/components/ProjectOnboardingStep.web.tsx

@@ -1,59 +0,0 @@
-import { getCurrentOnboardingStep, type ProjectOnboardingFlowState } from './ProjectOnboardingStep.js';
-
-interface ProjectOnboardingStepWebProps {
-  flow: ProjectOnboardingFlowState;
-}
-
-export function ProjectOnboardingStepWeb({ flow }: ProjectOnboardingStepWebProps) {
-  const step = getCurrentOnboardingStep(flow);
-  if (!step) {
-    return null;
-  }
-
-  return (
-    <div className="flex flex-col gap-3">
-      <h3 className="text-[#3fb950] font-medium">
-        {flow.bundleName} Setup ({flow.currentStep + 1}/{flow.steps.length})
-      </h3>
-      <p className="text-[#e6edf3] font-medium">{step.title}</p>
-      {step.description && <p className="text-[#8b949e] text-sm">{step.description}</p>}
-
-      {step.type === 'confirm' && (
-        <div className="flex flex-col gap-2">
-          {flow.confirmStatus === 'checking' && (
-            <p className="text-[#d29922] text-sm">Checking...</p>
-          )}
-          {flow.confirmStatus === 'found' && (
-            <p className="text-[#3fb950] text-sm">Found</p>
-          )}
-          {flow.confirmStatus === 'missing' && (
-            <>
-              <p className="text-[#f85149] text-sm">Not found</p>
-              {step.installUrl && (
-                <p className="text-[#58a6ff] text-sm">Install: {step.installUrl}</p>
-              )}
-            </>
-          )}
-          {flow.confirmStatus !== 'checking' && (
-            <p className="text-[#8b949e] text-sm">Press Enter to continue</p>
-          )}
-        </div>
-      )}
-
-      {step.type === 'input' && (
-        <div className="rounded border border-[#30363d] px-3 py-2 text-[#e6edf3]">
-          {flow.inputValue || ' '}
-        </div>
-      )}
-
-      {step.type === 'secret' && (
-        <>
-          <div className="rounded border border-[#30363d] px-3 py-2 text-[#e6edf3]">
-            {'•'.repeat(flow.inputValue.length) || ' '}
-          </div>
-          <p className="text-[#8b949e] text-xs">Value will be stored securely in OS keychain</p>
-        </>
-      )}
-    </div>
-  );
-}