Allow re-ordering investment accounts (#31)

Author: Blacksmoke16

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [0.3.0] - 2025-12-20
+
+### Added
+
+- Add drag-and-drop reordering for investment accounts in Settings ([#31]) (George Dietrich)
+
+[0.3.0]: https://github.com/blacksmoke16/rebalancer/releases/tag/v0.3.0
+[#31]: https://github.com/Blacksmoke16/rebalancer/pull/31
+
 ## [0.2.0] - 2025-11-03
 
 ### Changed

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "rebalancer",
   "private": true,
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "license": "MIT",
   "scripts": {
@@ -18,6 +18,9 @@
     "formatter:fix": "prettier --write ."
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@mantine/core": "^8.3",
     "@mantine/form": "^8.3",
     "@mantine/hooks": "^8.3",
@@ -28,7 +31,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.0",
-    "@playwright/test": "^1.56.1",
+    "@playwright/test": "^1.57.0",
     "@testing-library/jest-dom": "^6.9.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",

package.json

@@ -6,6 +6,14 @@
   margin-top: var(--mantine-spacing-md);
 }
 
+.dragHandle {
+  cursor: grab;
+}
+
+.dragHandle:active {
+  cursor: grabbing;
+}
+
 .actionButtons {
   margin-top: var(--mantine-spacing-md);
 }

src/components/AccountsSettings.module.css

@@ -1,19 +1,129 @@
-import { Button, Group, Paper, Title, Text, Stack } from "@mantine/core";
+import {
+  Button,
+  Group,
+  Paper,
+  Title,
+  Text,
+  Stack,
+  ActionIcon,
+} from "@mantine/core";
 import { memo } from "react";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { IconGripVertical } from "@tabler/icons-react";
 import { Account } from "../types";
 import { useAccountForm } from "../hooks/useAccountForm";
 import { AccountNameInput, DeleteButton, FieldGroup } from "./ui/FormFields";
 import classes from "./AccountsSettings.module.css";
 
+interface SortableAccountItemProps {
+  account: Account;
+  index: number;
+  inputProps: ReturnType<typeof Object>;
+  onRemove: () => void;
+}
+
+function SortableAccountItem({
+  account,
+  index,
+  inputProps,
+  onRemove,
+}: SortableAccountItemProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: account.key });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} className={classes.accountItem}>
+      <FieldGroup align="flex-end">
+        <ActionIcon
+          {...attributes}
+          {...listeners}
+          variant="subtle"
+          color="gray"
+          className={classes.dragHandle}
+          aria-label={`Drag to reorder ${account.name || "account"}`}
+        >
+          <IconGripVertical size={18} />
+        </ActionIcon>
+        <AccountNameInput
+          {...inputProps}
+          placeholder={`Account ${index + 1} name (e.g., 401k, Roth IRA)`}
+        />
+        <DeleteButton
+          onClick={onRemove}
+          aria-label={`Delete account ${account.name || "account"}`}
+        />
+      </FieldGroup>
+    </div>
+  );
+}
+
 interface AccountsSettingsProps {
   accounts: Account[];
   onAccountsChange: (accounts: Account[]) => void;
 }
 
 export const AccountsSettings = memo<AccountsSettingsProps>(
   function AccountsSettings({ accounts, onAccountsChange }) {
-    const { form, handleSubmit, addAccount, removeAccount, isLoading } =
-      useAccountForm({ accounts, onAccountsChange });
+    const {
+      form,
+      handleSubmit,
+      addAccount,
+      removeAccount,
+      reorderAccounts,
+      isLoading,
+    } = useAccountForm({ accounts, onAccountsChange });
+
+    const sensors = useSensors(
+      useSensor(PointerSensor, {
+        activationConstraint: {
+          distance: 5,
+        },
+      }),
+      useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+      }),
+    );
+
+    function handleDragEnd(event: DragEndEvent) {
+      const { active, over } = event;
+
+      if (over && active.id !== over.id) {
+        const oldIndex = form.values.accounts.findIndex(
+          (a) => a.key === active.id,
+        );
+        const newIndex = form.values.accounts.findIndex(
+          (a) => a.key === over.id,
+        );
+        reorderAccounts(oldIndex, newIndex);
+      }
+    }
 
     return (
       <Paper shadow="sm" withBorder p="xl" className={classes.container}>
@@ -28,24 +138,28 @@ export const AccountsSettings = memo<AccountsSettingsProps>(
 
           <form onSubmit={form.onSubmit(handleSubmit)}>
             <Stack gap="md">
-              {form.values.accounts.map((account, idx) => (
-                <FieldGroup
-                  key={account.key}
-                  align="flex-end"
-                  className={classes.accountItem}
+              <DndContext
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                onDragEnd={handleDragEnd}
+              >
+                <SortableContext
+                  items={form.values.accounts.map((a) => a.key)}
+                  strategy={verticalListSortingStrategy}
                 >
-                  <AccountNameInput
-                    {...form.getInputProps(`accounts.${idx}.name`)}
-                    placeholder={`Account ${idx + 1} name (e.g., 401k, Roth IRA)`}
-                  />
-                  <DeleteButton
-                    onClick={() => {
-                      removeAccount(idx);
-                    }}
-                    aria-label={`Delete account ${account.name || "account"}`}
-                  />
-                </FieldGroup>
-              ))}
+                  {form.values.accounts.map((account, idx) => (
+                    <SortableAccountItem
+                      key={account.key}
+                      account={account}
+                      index={idx}
+                      inputProps={form.getInputProps(`accounts.${idx}.name`)}
+                      onRemove={() => {
+                        removeAccount(idx);
+                      }}
+                    />
+                  ))}
+                </SortableContext>
+              </DndContext>
 
               <Group
                 className={classes.actionButtons}

src/components/AccountsSettings.tsx

@@ -67,11 +67,19 @@ export function useAccountForm({
     [form],
   );
 
+  const reorderAccounts = useCallback(
+    (from: number, to: number) => {
+      form.reorderListItem("accounts", { from, to });
+    },
+    [form],
+  );
+
   return {
     form,
     handleSubmit,
     addAccount,
     removeAccount,
+    reorderAccounts,
     isLoading,
   };
 }