@orderful/droid 0.15.0 → 0.16.0

package/src/commands/tui/views/WelcomeScreen.tsx

@@ -0,0 +1,149 @@
+import { Box, Text, useInput } from 'ink';
+import { useState, useMemo } from 'react';
+import { colors } from '../constants';
+import { getRandomQuote } from '../../../lib/quotes';
+import type { UpdateInfo } from '../../../lib/version';
+
+export interface WelcomeScreenProps {
+  onContinue: () => void;
+  onUpdate: () => void;
+  onAlways: () => void;
+  onExit: () => void;
+  updateInfo: UpdateInfo;
+  isUpdating: boolean;
+}
+
+export function WelcomeScreen({ onContinue, onUpdate, onAlways, onExit, updateInfo, isUpdating }: WelcomeScreenProps) {
+  const [selectedButton, setSelectedButton] = useState(0);
+  const welcomeQuote = useMemo(() => getRandomQuote(), []);
+
+  useInput((input, key) => {
+    if (isUpdating) return;
+
+    if (updateInfo.hasUpdate) {
+      if (key.leftArrow) {
+        setSelectedButton((prev) => Math.max(0, prev - 1));
+      }
+      if (key.rightArrow) {
+        setSelectedButton((prev) => Math.min(2, prev + 1));
+      }
+      if (key.return) {
+        if (selectedButton === 0) {
+          onUpdate();
+        } else if (selectedButton === 1) {
+          onAlways();
+        } else {
+          onContinue();
+        }
+      }
+      if (input === 'q') {
+        onExit();
+      }
+    } else {
+      if (key.return) {
+        onContinue();
+      }
+      if (input === 'q') {
+        onExit();
+      }
+    }
+  });
+
+  const hasUpdate = updateInfo.hasUpdate && updateInfo.latestVersion;
+
+  return (
+    <Box flexDirection="column" alignItems="center" justifyContent="center" height={18}>
+      <Box
+        flexDirection="column"
+        alignItems="center"
+        borderStyle="single"
+        borderColor={hasUpdate ? '#eab308' : colors.border}
+        paddingX={4}
+        paddingY={1}
+      >
+        <Box flexDirection="column">
+          <Text>
+            <Text color={colors.textDim}>╔═════╗    </Text>
+            <Text color={colors.text}>droid</Text>
+            <Text color={colors.textDim}> v{updateInfo.currentVersion}</Text>
+          </Text>
+          <Text>
+            <Text color={colors.textDim}>║ </Text>
+            <Text color={hasUpdate ? '#eab308' : colors.primary}>●</Text>
+            <Text color={colors.textDim}> </Text>
+            <Text color={hasUpdate ? '#eab308' : colors.primary}>●</Text>
+            <Text color={colors.textDim}> ║    </Text>
+            <Text color={colors.textMuted}>Droid, teaching your AI new tricks</Text>
+          </Text>
+          <Text>
+            <Text color={colors.textDim}>╚═╦═╦═╝    </Text>
+            <Text color={colors.textDim}>github.com/Orderful/droid</Text>
+          </Text>
+        </Box>
+
+        {hasUpdate ? (
+          <>
+            <Box marginTop={2} marginBottom={1} flexDirection="column" alignItems="center">
+              <Text color="#eab308" italic>
+                "The odds of functioning optimally without this
+              </Text>
+              <Text color="#eab308" italic>
+                update are approximately 3,720 to 1."
+              </Text>
+            </Box>
+
+            <Box marginBottom={1}>
+              <Text color={colors.textMuted}>
+                v{updateInfo.currentVersion} → v{updateInfo.latestVersion}
+              </Text>
+            </Box>
+
+            {isUpdating ? (
+              <Text color="#eab308">Updating...</Text>
+            ) : (
+              <Box flexDirection="row">
+                <Text
+                  backgroundColor={selectedButton === 0 ? '#eab308' : colors.bgSelected}
+                  color={selectedButton === 0 ? '#000000' : colors.textMuted}
+                  bold={selectedButton === 0}
+                >
+                  {' '}Update{' '}
+                </Text>
+                <Text> </Text>
+                <Text
+                  backgroundColor={selectedButton === 1 ? '#eab308' : colors.bgSelected}
+                  color={selectedButton === 1 ? '#000000' : colors.textMuted}
+                  bold={selectedButton === 1}
+                >
+                  {' '}Always{' '}
+                </Text>
+                <Text> </Text>
+                <Text
+                  backgroundColor={selectedButton === 2 ? colors.bgSelected : undefined}
+                  color={selectedButton === 2 ? colors.text : colors.textMuted}
+                  bold={selectedButton === 2}
+                >
+                  {' '}Skip{' '}
+                </Text>
+              </Box>
+            )}
+
+            <Box marginTop={1}>
+              <Text color={colors.textDim}>←→ select · enter · "Always" enables auto-update</Text>
+            </Box>
+          </>
+        ) : (
+          <>
+            <Box marginTop={2} marginBottom={1}>
+              <Text backgroundColor={colors.primary} color="#ffffff" bold>
+                {` ${welcomeQuote} `}
+              </Text>
+            </Box>
+
+            <Text color={colors.textDim}>press enter</Text>
+          </>
+        )}
+      </Box>
+    </Box>
+  );
+}