feat: move connection item to separate folder

src/components/create-folder-button.tsx

@@ -0,0 +1,18 @@
+import { FolderIcon } from "lucide-react";
+import { Button } from "./ui/button";
+import CreateFolderModal from "./database/create-folder-modal";
+import { useState } from "react";
+
+interface Props {}
+export default function CreateFolderButton(props: Props) {
+  const [visible, setVisible] = useState(false);
+  return (
+    <div>
+      <Button onClick={() => setVisible(true)} variant="ghost">
+        <FolderIcon size={16} />
+        <p className="text-md">New Folder</p>
+      </Button>
+      <CreateFolderModal visible={visible} onClose={() => setVisible(false)} />
+    </div>
+  );
+}

src/components/database/connection-item.tsx

@@ -0,0 +1,172 @@
+import { useState } from "react";
+import {
+  ConnectionStoreItem,
+  ConnectionStoreManager,
+  connectionTypeTemplates,
+} from "@/lib/conn-manager-store";
+import { useSortable } from "@dnd-kit/sortable";
+import { useToast } from "@/hooks/use-toast";
+import { useNavigate } from "react-router-dom";
+import { MySQLIcon } from "@/lib/outerbase-icon";
+import { Button } from "../ui/button";
+import {
+  LucideCopy,
+  LucideMoreHorizontal,
+  LucidePencil,
+  LucideTrash,
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { motion } from "framer-motion";
+import { CSS } from "@dnd-kit/utilities";
+import { generateConnectionString } from "@/lib/connection-string";
+import { cn } from "@/lib/utils";
+
+export default function ConnectionItem({
+  item,
+  selectedConnection,
+  setSelectedConnection,
+  setConnectionList,
+  setDeletingConnectionId,
+}: {
+  item: ConnectionStoreItem;
+  selectedConnection?: string;
+  setSelectedConnection: DispatchState<string>;
+  setConnectionList: DispatchState<ConnectionStoreItem[]>;
+  setDeletingConnectionId: DispatchState<ConnectionStoreItem | null>;
+}) {
+  const [isMenuOpen, setMenuOpen] = useState(false);
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id: item.id });
+
+  const { toast } = useToast();
+  const navigate = useNavigate();
+  const typeConfig = connectionTypeTemplates[item.type];
+  const IconComponent = typeConfig?.icon ?? MySQLIcon;
+
+  function onConnect() {
+    const connItem: ConnectionStoreItem = {
+      ...item,
+      lastConnectAt: new Date().getTime(),
+    };
+    ConnectionStoreManager.save(connItem);
+    window.outerbaseIpc.connect(connItem);
+  }
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...(!isMenuOpen && listeners)}
+      onMouseDown={() => {
+        setSelectedConnection(item.id);
+      }}
+      onDoubleClick={onConnect}
+    >
+      <motion.div
+        // initial={{ transform: "translateX(100%)" }}
+        // animate={{ transform: "translateX(0)" }}
+        // transition={{ duration: 0.3, ease: "easeOut" }}
+        // exit={{ transform: "translateX(100%)" }}
+        key={item.id}
+        className={cn(
+          "flex cursor-pointer items-center gap-4 border-b p-4 hover:bg-gray-100 dark:hover:bg-neutral-800",
+          selectedConnection === item.id
+            ? "bg-gray-100 dark:bg-neutral-900"
+            : "bg-background",
+        )}
+      >
+        <IconComponent className="h-8 w-8" />
+        <div className="flex flex-1 flex-col gap-1 text-sm">
+          <div className="font-semibold">{item.name}</div>
+          <div className="font-mono text-gray-500">
+            {generateConnectionString(item)}
+          </div>
+        </div>
+        <div>
+          <DropdownMenu
+            modal={false}
+            open={isMenuOpen}
+            onOpenChange={setMenuOpen}
+          >
+            <DropdownMenuTrigger asChild>
+              <Button variant={"ghost"} size={"icon"}>
+                <LucideMoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem inset onClick={onConnect}>
+                Connect
+              </DropdownMenuItem>
+
+              <DropdownMenuItem
+                inset
+                onClick={() => {
+                  window.outerbaseIpc.connect(item, true);
+                }}
+              >
+                Connect with debugger
+              </DropdownMenuItem>
+
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onClick={() => {
+                  navigate(`/connection/edit/${item.type}/${item.id}`);
+                }}
+              >
+                <LucidePencil className="h-4 w-4" />
+                Edit
+              </DropdownMenuItem>
+
+              <DropdownMenuItem
+                onClick={() => {
+                  setConnectionList(ConnectionStoreManager.duplicate(item));
+                }}
+                inset
+              >
+                Duplicate
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+
+              <DropdownMenuItem
+                onClick={() => {
+                  window.navigator.clipboard.writeText(
+                    generateConnectionString(item, false),
+                  );
+                  toast({
+                    title: "Connection string copied to clipboard",
+                    duration: 1000,
+                  });
+                }}
+              >
+                <LucideCopy className="h-4 w-4" />
+                Copy Connection String
+              </DropdownMenuItem>
+
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onClick={() => {
+                  setDeletingConnectionId(item);
+                }}
+              >
+                <LucideTrash className="h-4 w-4" />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </motion.div>
+    </div>
+  );
+}

src/components/database/connection-list.tsx

@@ -0,0 +1,92 @@
+import { useState } from "react";
+import {
+  ConnectionStoreItem,
+  ConnectionStoreManager,
+} from "@/lib/conn-manager-store";
+import {
+  closestCenter,
+  DndContext,
+  DragEndEvent,
+  KeyboardSensor,
+  Modifier,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { AnimatePresence } from "framer-motion";
+import ConnectionItem from "./connection-item";
+import DeletingConnectionModal from "./delect-connection-modal";
+
+interface Props {
+  data: ConnectionStoreItem[];
+  onDragEnd?: (event: DragEndEvent) => void;
+  setConnectionList: DispatchState<ConnectionStoreItem[]>;
+}
+
+const restrictToVerticalAxis: Modifier = ({ transform }) => {
+  return {
+    ...transform,
+    x: 0,
+  };
+};
+
+export default function ConnectionList({
+  data,
+  onDragEnd,
+  setConnectionList,
+}: Props) {
+  const [selectedConnection, setSelectedConnection] = useState("");
+  const [deletingConnectionId, setDeletingConnectionId] =
+    useState<ConnectionStoreItem | null>(null);
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  return (
+    <>
+      {deletingConnectionId && (
+        <DeletingConnectionModal
+          data={deletingConnectionId}
+          onClose={() => {
+            setDeletingConnectionId(null);
+          }}
+          onSuccess={() => {
+            setConnectionList(
+              ConnectionStoreManager.remove(deletingConnectionId.id),
+            );
+            setDeletingConnectionId(null);
+          }}
+        />
+      )}
+      <AnimatePresence initial={false}>
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={onDragEnd}
+          modifiers={[restrictToVerticalAxis]}
+        >
+          <SortableContext items={data} strategy={verticalListSortingStrategy}>
+            {data.map((item) => (
+              <ConnectionItem
+                key={item.id}
+                item={item}
+                setConnectionList={setConnectionList}
+                selectedConnection={selectedConnection}
+                setSelectedConnection={setSelectedConnection}
+                setDeletingConnectionId={setDeletingConnectionId}
+              />
+            ))}
+          </SortableContext>
+        </DndContext>
+      </AnimatePresence>
+    </>
+  );
+}

src/components/database/create-folder-modal.tsx

@@ -0,0 +1,44 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../ui/alert-dialog";
+import { Input } from "../ui/input";
+
+export default function CreateFolderModal({
+  visible,
+  onClose,
+}: {
+  visible: boolean;
+  onClose: () => void;
+}) {
+  return (
+    <AlertDialog
+      open={visible}
+      onOpenChange={(openState) => {
+        if (!openState) {
+          onClose();
+        }
+      }}
+    >
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Create Folder</AlertDialogTitle>
+          <AlertDialogDescription>
+            Creating folder helping you to organize your database connection
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <Input placeholder="Folder name" />
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={() => {}}>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={() => {}}>Create</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

src/components/database/delect-connection-modal.tsx

@@ -0,0 +1,48 @@
+import { ConnectionStoreItem } from "@/lib/conn-manager-store";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../ui/alert-dialog";
+
+interface Props {
+  data: ConnectionStoreItem;
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+export default function DeletingConnectionModal({
+  data,
+  onClose,
+  onSuccess,
+}: Props) {
+  return (
+    <AlertDialog
+      open
+      onOpenChange={(openState) => {
+        if (openState === false) {
+          onClose();
+        }
+      }}
+    >
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete Connection</AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to delete the connection{" "}
+            <span className="font-semibold">{data.name}</span>?
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={onClose}>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={onSuccess}>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}