add reordering of engines and allow disabling cloud engines

src/atoms/atoms.ts

@@ -2,7 +2,7 @@ import { BestMoves, EngineOptions, GoMode } from "@/bindings";
 import { Card, buildFromTree } from "@/components/files/opening";
 import { LocalOptions } from "@/components/panels/database/DatabasePanel";
 import { DatabaseInfo } from "@/utils/db";
-import { LocalEngine } from "@/utils/engines";
+import { Engine } from "@/utils/engines";
 import {
     LichessGamesOptions,
     MasterGamesOptions,
@@ -45,13 +45,7 @@ const fileStorage: AsyncStringStorage = {
         await removeFile(key, options);
     },
 };
-
-export const remoteEnabledAtom = atomWithStorage("remote-enabled", {
-    lichess: false,
-    chessdb: false,
-});
-
-export const enginesAtom = atomWithStorage<LocalEngine[]>(
+export const enginesAtom = atomWithStorage<Engine[]>(
     "engines/engines.json",
     [],
     createJSONStorage(() => fileStorage)

src/components/boards/BoardGame.tsx

@@ -61,7 +61,9 @@ function EnginesSelect({
   engine: LocalEngine | null;
   setEngine: (engine: LocalEngine | null) => void;
 }) {
-  const engines = useAtomValue(enginesAtom);
+  const engines = useAtomValue(enginesAtom).filter(
+    (e): e is LocalEngine => e.type === "local"
+  );
 
   useEffect(() => {
     if (engines.length > 0 && engine === null) {

src/components/common/ProgressButton.css.ts

@@ -1,24 +1,13 @@
 import { vars } from "@/styles/theme";
 import { style } from "@vanilla-extract/css";
 
-export const button = style({
-    position: "relative",
-    transition: "background-color 150ms ease",
-    backgroundColor: vars.colors.gray[7],
-    color: vars.colors.gray[5],
-});
-
 export const finished = style({
     backgroundColor: vars.colors.green[7],
     color: vars.colors.gray[2],
 });
 
 export const progress = style({
     position: "absolute",
-    bottom: -1,
-    right: -1,
-    left: -1,
-    top: -1,
     height: "auto",
     backgroundColor: "transparent",
     zIndex: 0,

src/components/common/ProgressButton.tsx

@@ -73,21 +73,30 @@ function ProgressButton({
   const theme = useMantineTheme();
 
   return (
-    <Button
-      fullWidth
-      className={classes.button}
-      onClick={() => {
-        onClick(id);
-      }}
-      disabled={(completed && !redoable) || disabled}
-      color={completed ? "green" : theme.primaryColor}
-      leftSection={leftIcon}
-    >
-      <div className={classes.label}>{label}</div>
-      {progress !== 0 && (
-        <Progress value={progress} className={classes.progress} radius="sm" />
-      )}
-    </Button>
+    <>
+      <Button
+        fullWidth
+        onClick={() => {
+          onClick(id);
+        }}
+        color={completed ? "green" : theme.primaryColor}
+        disabled={(completed && !redoable) || disabled}
+        leftSection={leftIcon}
+      >
+        <div className={classes.label}>{label}</div>
+        {progress !== 0 && (
+          <Progress
+            pos="absolute"
+            w="100%"
+            h="100%"
+            c="blue"
+            value={progress}
+            className={classes.progress}
+            radius="sm"
+          />
+        )}
+      </Button>
+    </>
   );
 }
 

src/components/databases/AddDatabase.tsx

@@ -197,7 +197,7 @@ function DatabaseCard({
       key={database.title}
     >
       <Group wrap="nowrap" gap={0} grow>
-        <Box p="md">
+        <Box p="md" style={{ flex: 1 }}>
           <Text tt="uppercase" c="dimmed" fw={700} size="xs">
             DATABASE
           </Text>

src/components/engines/AddEngine.tsx

@@ -1,6 +1,7 @@
 import {
   Alert,
   Box,
+  Button,
   Center,
   Group,
   Image,
@@ -17,7 +18,7 @@ import { IconAlertCircle, IconDatabase, IconTrophy } from "@tabler/icons-react";
 import { platform } from "@tauri-apps/api/os";
 import { appDataDir, join, resolve } from "@tauri-apps/api/path";
 import { useCallback, useState } from "react";
-import { LocalEngine, useDefaultEngines } from "@/utils/engines";
+import { LocalEngine, RemoteEngine, useDefaultEngines } from "@/utils/engines";
 import { formatBytes } from "@/utils/format";
 import { invoke } from "@/utils/invoke";
 import ProgressButton from "../common/ProgressButton";
@@ -34,7 +35,11 @@ function AddEngine({
   opened: boolean;
   setOpened: (opened: boolean) => void;
 }) {
-  const [engines, setEngines] = useAtom(enginesAtom);
+  const [allEngines, setEngines] = useAtom(enginesAtom);
+  const engines = allEngines.filter(
+    (e): e is LocalEngine => e.type === "local"
+  );
+
   const { data: os } = useSWR("os", async () => {
     const p = await platform();
     const os = match(p)
@@ -51,6 +56,7 @@ function AddEngine({
 
   const form = useForm<LocalEngine>({
     initialValues: {
+      type: "local",
       version: "",
       name: "",
       path: "",
@@ -74,6 +80,7 @@ function AddEngine({
       <Tabs defaultValue="web">
         <Tabs.List>
           <Tabs.Tab value="web">Web</Tabs.Tab>
+          <Tabs.Tab value="cloud">Cloud Eval</Tabs.Tab>
           <Tabs.Tab value="local">Local</Tabs.Tab>
         </Tabs.List>
         <Tabs.Panel value="web" pt="xs">
@@ -105,6 +112,24 @@ function AddEngine({
             </Stack>
           </ScrollArea.Autosize>
         </Tabs.Panel>
+        <Tabs.Panel value="cloud" pt="xs">
+          <Stack>
+            <CloudCard
+              engine={{
+                name: "ChessDB",
+                type: "chessdb",
+                url: "https://chessdb.cn",
+              }}
+            />
+            <CloudCard
+              engine={{
+                name: "Lichess Cloud",
+                type: "lichess",
+                url: "https://lichess.org",
+              }}
+            />
+          </Stack>
+        </Tabs.Panel>
         <Tabs.Panel value="local" pt="xs">
           <EngineForm
             submitLabel="Add"
@@ -120,6 +145,38 @@ function AddEngine({
   );
 }
 
+function CloudCard({ engine }: { engine: RemoteEngine }) {
+  const [engines, setEngines] = useAtom(enginesAtom);
+  return (
+    <Paper withBorder radius="md" p={0} key={engine.name}>
+      <Group wrap="nowrap" gap={0} grow>
+        <Box p="md" style={{ flex: 1 }}>
+          <Text tt="uppercase" c="dimmed" fw={700} size="xs">
+            ENGINE
+          </Text>
+          <Text fw="bold">{engine.name}</Text>
+          <Text size="xs" c="dimmed" mb="xs">
+            {engine.url}
+          </Text>
+          <Button
+            disabled={engines.find((e) => e.type === engine.type) !== undefined}
+            fullWidth
+            onClick={() => {
+              console.log(engine);
+              setEngines(async (prev) => [
+                ...(await prev),
+                { ...engine, type: engine.type, loaded: true },
+              ]);
+            }}
+          >
+            Add
+          </Button>
+        </Box>
+      </Group>
+    </Paper>
+  );
+}
+
 function EngineCard({
   engine,
   engineId,
@@ -154,6 +211,7 @@ function EngineCard({
         ...(await prev),
         {
           ...engine,
+          type: "local",
           path: enginePath,
         },
       ]);
@@ -169,7 +227,7 @@ function EngineCard({
             <Image src={engine.image} alt={engine.name} fit="contain" />
           </Box>
         )}
-        <Box p="md">
+        <Box p="md" style={{ flex: 1 }}>
           <Text tt="uppercase" c="dimmed" fw={700} size="xs">
             ENGINE
           </Text>

src/components/engines/EnginesPage.tsx

@@ -10,9 +10,15 @@ import {
   Text,
   Title,
 } from "@mantine/core";
-import { IconEdit, IconPlus, IconRobot, IconX } from "@tabler/icons-react";
+import {
+  IconCloud,
+  IconEdit,
+  IconPlus,
+  IconRobot,
+  IconX,
+} from "@tabler/icons-react";
 import { useEffect, useState } from "react";
-import { LocalEngine } from "@/utils/engines";
+import { Engine } from "@/utils/engines";
 import OpenFolderButton from "../common/OpenFolderButton";
 import AddEngine from "./AddEngine";
 import { useToggle } from "@mantine/hooks";
@@ -34,18 +40,21 @@ export default function EnginesPage() {
         <Title>Your Engines</Title>
         <OpenFolderButton base="AppDir" folder="engines" />
       </Group>
-      <ScrollArea>
+      <ScrollArea px="xl">
         <Table style={{ minWidth: 800 }} verticalSpacing="sm">
           <Table.Thead>
             <Table.Tr>
               <Table.Th>Engine</Table.Th>
               <Table.Th>Elo</Table.Th>
-              <Table.Th>Actions</Table.Th>
+              <Table.Th w="8rem" ta="right">
+                Actions
+              </Table.Th>
             </Table.Tr>
           </Table.Thead>
           <Table.Tbody>
-            {engines &&
-              engines.map((item) => <EngineRow key={item.path} item={item} />)}
+            {engines.map((item) => (
+              <EngineRow key={item.name} item={item} />
+            ))}
             <Table.Tr>
               <Table.Td>
                 <Button
@@ -64,7 +73,7 @@ export default function EnginesPage() {
   );
 }
 
-function EngineRow({ item }: { item: LocalEngine }) {
+function EngineRow({ item }: { item: Engine }) {
   const [, setEngines] = useAtom(enginesAtom);
   const [deleteModal, toggleDeleteModal] = useToggle();
   const [editModal, toggleEditModal] = useToggle();
@@ -86,9 +95,10 @@ function EngineRow({ item }: { item: LocalEngine }) {
 
   useEffect(() => {
     (async () => {
+      if (item.type !== "local") return;
       setFileExists(await exists(item.path));
     })();
-  }, [item.path]);
+  }, [item]);
 
   return (
     <>
@@ -103,11 +113,13 @@ function EngineRow({ item }: { item: LocalEngine }) {
           )
         }
       />
-      <EditEngine
-        opened={editModal}
-        setOpened={toggleEditModal}
-        initialEngine={item}
-      />
+      {item.type === "local" && (
+        <EditEngine
+          opened={editModal}
+          setOpened={toggleEditModal}
+          initialEngine={item}
+        />
+      )}
 
       <Table.Tr>
         <Table.Td>
@@ -116,8 +128,10 @@ function EngineRow({ item }: { item: LocalEngine }) {
               <Center>
                 {imageSrc ? (
                   <Image fit="contain" src={imageSrc} />
-                ) : (
+                ) : item.type === "local" ? (
                   <IconRobot size="3.75rem" />
+                ) : (
+                  <IconCloud size="3.75rem" />
                 )}
               </Center>
             </Box>
@@ -126,12 +140,15 @@ function EngineRow({ item }: { item: LocalEngine }) {
             </Text>
           </Group>
         </Table.Td>
-        <Table.Td>{item.elo || "Unknown"}</Table.Td>
+        {/* @ts-expect-error only local has elo */}
+        <Table.Td>{item?.elo || "?"}</Table.Td>
         <Table.Td>
-          <Group>
-            <ActionIcon>
-              <IconEdit size="1.25rem" onClick={() => toggleEditModal()} />
-            </ActionIcon>
+          <Group justify="right">
+            {item.type === "local" && (
+              <ActionIcon>
+                <IconEdit size="1.25rem" onClick={() => toggleEditModal()} />
+              </ActionIcon>
+            )}
             <ActionIcon>
               <IconX size="1.25rem" onClick={() => toggleDeleteModal()} />
             </ActionIcon>