From b485a2cfb052b262c27703585695ccd7058fdda5 Mon Sep 17 00:00:00 2001
From: Avisek <biisal.int@gmail.com>
Date: Fri, 15 May 2026 22:07:03 +0530
Subject: [PATCH 1/2] feat: implement row details sheet with integrated view
 and edit modes for table records

---
 cmd/server/update.go                          |   4 +-
 .../src/components/rows/RowUpsertForm.tsx     | 421 ++++++++----------
 frontend/src/components/tables/DataView.tsx   |  76 ++++
 .../src/components/tables/RowDetailsSheet.tsx |  74 +--
 frontend/src/hooks/useRows.tsx                |   7 +
 frontend/src/pages/TableRows.tsx              |  25 +-
 internal/router/handler.go                    |   3 -
 makefile                                      |   6 +
 8 files changed, 317 insertions(+), 299 deletions(-)
 create mode 100644 frontend/src/components/tables/DataView.tsx

diff --git a/cmd/server/update.go b/cmd/server/update.go
index fdd5877..cc4cd8f 100644
--- a/cmd/server/update.go
+++ b/cmd/server/update.go
@@ -12,7 +12,7 @@ import (
 
 func runAutoUpdate(cmd string, currentVersion string, disableAutoUpdate bool) error {
 	if disableAutoUpdate {
-		logger.Info("Auto-update disabled using DISABLE_AUTO_UPDATE=true")
+		logger.Info("Auto-update disabled using disable_auto_update: true in config file")
 		return nil
 	}
 
@@ -21,7 +21,7 @@ func runAutoUpdate(cmd string, currentVersion string, disableAutoUpdate bool) er
 		return nil
 	}
 
-	logger.Info("Checking for updates...You can disable auto-update by setting DISABLE_AUTO_UPDATE=true")
+	logger.Info("Checking for updates...You can disable auto-update by setting disable_auto_update: true in config file")
 
 	repo := selfupdate.ParseSlug("biisal/rowsql")
 
diff --git a/frontend/src/components/rows/RowUpsertForm.tsx b/frontend/src/components/rows/RowUpsertForm.tsx
index 7b728d3..45d5f05 100644
--- a/frontend/src/components/rows/RowUpsertForm.tsx
+++ b/frontend/src/components/rows/RowUpsertForm.tsx
@@ -51,33 +51,22 @@ function buildDefaultCols(cols: ColValue[]): ColField[] {
     useAutoIncrement: false,
   }));
 }
-import {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "@/components/ui/sheet";
 
 import { Button } from "@/components/ui/button";
-import { Loader2, Plus, Save } from "lucide-react";
+import { Loader2, Save } from "lucide-react";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { useRowContext } from "@/hooks/useRows";
+import { SheetFooter } from "@/components/ui/sheet";
 
 interface RowUpsertFormProps {
-  children?: React.ReactNode;
   hash?: string;
+  goBack: () => void;
 }
 
-export const RowUpsertForm = ({ hash, children }: RowUpsertFormProps) => {
+export const RowUpsertForm = ({ hash, goBack }: RowUpsertFormProps) => {
   const { page, tableName } = useRowContext();
   const navigate = useNavigate();
 
-  const isEdit = !!hash;
-
   const { data, isPending } = useQuery(
     rowInsertOrUpdateFormOptions({
       path: { tableName },
@@ -136,231 +125,207 @@ export const RowUpsertForm = ({ hash, children }: RowUpsertFormProps) => {
     );
   };
   return (
-    <Sheet>
-      <SheetTrigger asChild>
-        {children || (
-          <Button className="shadow-lg shadow-primary/20">
-            <Plus className="mr-2 h-4 w-4" /> {isEdit ? "Update" : "Record"}
-          </Button>
-        )}
-      </SheetTrigger>
-      <SheetContent
-        onPointerDownOutside={(e) => e.preventDefault()}
-        className="min-w-[90%] md:min-w-xl flex flex-col p-0"
-      >
-        {isPending ? (
-          <div className="flex items-center justify-center flex-1">
-            <Loader2 className="w-8 h-8 animate-spin text-primary" />
-          </div>
-        ) : (
-          <form
-            key={hash || "new"}
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="flex-1 flex flex-col min-h-0"
-          >
-            <FieldGroup className="flex-1 flex flex-col min-h-0 gap-0">
-              <SheetHeader className="p-6 bg-muted/30 border-b">
-                <SheetTitle>{isEdit ? "Update" : "Insert"} Row</SheetTitle>
-                <SheetDescription>
-                  {isEdit
-                    ? "Update the details of the existing record."
-                    : "Fill in the fields below to add a new record to the table."}
-                </SheetDescription>
-              </SheetHeader>
+    <>
+      {isPending ? (
+        <div className="flex items-center justify-center flex-1">
+          <Loader2 className="w-8 h-8 animate-spin text-primary" />
+        </div>
+      ) : (
+        <form
+          key={hash || "new"}
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="flex-1 flex flex-col min-h-0"
+        >
+          <FieldGroup className="flex-1 flex flex-col min-h-0 gap-0">
+            {form.formState.errors.cols?.message && (
+              <div className="mx-6 mt-4 p-3 bg-destructive/10 text-destructive text-sm rounded-md border border-destructive/20">
+                {form.formState.errors.cols.message}
+              </div>
+            )}
 
-              {form.formState.errors.cols?.message && (
-                <div className="mx-6 mt-4 p-3 bg-destructive/10 text-destructive text-sm rounded-md border border-destructive/20">
-                  {form.formState.errors.cols.message}
-                </div>
-              )}
+            <ScrollArea type="always" className="min-h-0 flex-1">
+              <div className="p-6 flex flex-col gap-6">
+                {fields.length === 0 ? (
+                  <div className="text-center text-muted-foreground py-8">
+                    No columns found for this table.
+                  </div>
+                ) : (
+                  fields.map((field, index) => {
+                    const { columnName, columnType } = field;
 
-              <ScrollArea type="always" className="min-h-0 flex-1">
-                <div className="p-6 flex flex-col gap-6">
-                  {fields.length === 0 ? (
-                    <div className="text-center text-muted-foreground py-8">
-                      No columns found for this table.
-                    </div>
-                  ) : (
-                    fields.map((field, index) => {
-                      const { columnName, columnType } = field;
+                    return (
+                      <Controller
+                        key={field.id}
+                        control={form.control}
+                        name={`cols.${index}.value`}
+                        render={({ field: inputField, fieldState }) => {
+                          // eslint-disable-next-line react-hooks/incompatible-library
+                          const useDefault = form.watch(
+                            `cols.${index}.useDefault`,
+                          );
+                          const useAutoIncrement = form.watch(
+                            `cols.${index}.useAutoIncrement`,
+                          );
+                          const isDisabled = useDefault || useAutoIncrement;
 
-                      return (
-                        <Controller
-                          key={field.id}
-                          control={form.control}
-                          name={`cols.${index}.value`}
-                          render={({ field: inputField, fieldState }) => {
-                            const useDefault = form.watch(
-                              `cols.${index}.useDefault`,
-                            );
-                            const useAutoIncrement = form.watch(
-                              `cols.${index}.useAutoIncrement`,
-                            );
-                            const isDisabled = useDefault || useAutoIncrement;
-
-                            return (
-                              <Field>
-                                <FieldLabel
-                                  htmlFor={`field-${columnName}`}
-                                  className="capitalize"
-                                >
-                                  {columnName.replace(/_/g, " ")}
-                                  <span className="text-muted-foreground ml-2 text-xs font-normal">
-                                    ({columnType.dataType})
+                          return (
+                            <Field>
+                              <FieldLabel
+                                htmlFor={`field-${columnName}`}
+                                className="capitalize"
+                              >
+                                {columnName.replace(/_/g, " ")}
+                                <span className="text-muted-foreground ml-2 text-xs font-normal">
+                                  ({columnType.dataType})
+                                </span>
+                                {columnType.isUnique && (
+                                  <span className="ml-2 text-xs font-normal text-primary">
+                                    • Unique
                                   </span>
-                                  {columnType.isUnique && (
-                                    <span className="ml-2 text-xs font-normal text-primary">
-                                      • Unique
-                                    </span>
-                                  )}
-                                </FieldLabel>
-
-                                {columnType.hasDefault && (
-                                  <Controller
-                                    control={form.control}
-                                    name={`cols.${index}.useDefault`}
-                                    render={({ field: f }) => (
-                                      <label className="flex items-center mb-2 text-sm font-medium cursor-pointer">
-                                        <Checkbox
-                                          className="mr-2"
-                                          checked={f.value}
-                                          onCheckedChange={(checked) => {
-                                            f.onChange(checked === true);
-                                            if (checked)
-                                              inputField.onChange("");
-                                          }}
-                                        />
-                                        Use Default Value
-                                      </label>
-                                    )}
-                                  />
                                 )}
+                              </FieldLabel>
 
-                                {columnType.hasAutoIncrement && (
-                                  <Controller
-                                    control={form.control}
-                                    name={`cols.${index}.useAutoIncrement`}
-                                    render={({ field: f }) => (
-                                      <label className="flex items-center mb-2 text-sm font-medium cursor-pointer">
-                                        <Checkbox
-                                          className="mr-2"
-                                          checked={f.value}
-                                          onCheckedChange={(checked) => {
-                                            f.onChange(checked === true);
-                                            if (checked)
-                                              inputField.onChange(undefined);
-                                          }}
-                                        />
-                                        Auto Increment
-                                      </label>
-                                    )}
-                                  />
-                                )}
+                              {columnType.hasDefault && (
+                                <Controller
+                                  control={form.control}
+                                  name={`cols.${index}.useDefault`}
+                                  render={({ field: f }) => (
+                                    <label className="flex items-center mb-2 text-sm font-medium cursor-pointer">
+                                      <Checkbox
+                                        className="mr-2"
+                                        checked={f.value}
+                                        onCheckedChange={(checked) => {
+                                          f.onChange(checked === true);
+                                          if (checked) inputField.onChange("");
+                                        }}
+                                      />
+                                      Use Default Value
+                                    </label>
+                                  )}
+                                />
+                              )}
 
-                                {columnType.inputType === "checkbox" ? (
-                                  <div className="flex items-center space-x-2 bg-foreground/5 p-3 rounded">
-                                    <Checkbox
-                                      id={`field-${columnName}`}
-                                      disabled={isDisabled}
-                                      checked={!!inputField.value}
-                                      onCheckedChange={(c) =>
-                                        inputField.onChange(c === true)
-                                      }
-                                    />
-                                    <FieldLabel
-                                      htmlFor={`field-${columnName}`}
-                                      className="cursor-pointer mt-0! font-normal"
-                                    >
-                                      Enable {columnName.replace(/_/g, " ")}
-                                    </FieldLabel>
-                                  </div>
-                                ) : columnType.inputType === "textarea" ||
-                                  columnType.inputType === "json" ? (
-                                  <Textarea
-                                    {...inputField}
-                                    id={`field-${columnName}`}
-                                    disabled={isDisabled}
-                                    placeholder={`Enter ${columnName.replace(/_/g, " ")}`}
-                                    rows={5}
-                                    value={(inputField.value as string) || ""}
-                                  />
-                                ) : (
-                                  <Input
-                                    {...inputField}
+                              {columnType.hasAutoIncrement && (
+                                <Controller
+                                  control={form.control}
+                                  name={`cols.${index}.useAutoIncrement`}
+                                  render={({ field: f }) => (
+                                    <label className="flex items-center mb-2 text-sm font-medium cursor-pointer">
+                                      <Checkbox
+                                        className="mr-2"
+                                        checked={f.value}
+                                        onCheckedChange={(checked) => {
+                                          f.onChange(checked === true);
+                                          if (checked)
+                                            inputField.onChange(undefined);
+                                        }}
+                                      />
+                                      Auto Increment
+                                    </label>
+                                  )}
+                                />
+                              )}
+
+                              {columnType.inputType === "checkbox" ? (
+                                <div className="flex items-center space-x-2 bg-foreground/5 p-3 rounded">
+                                  <Checkbox
                                     id={`field-${columnName}`}
                                     disabled={isDisabled}
-                                    type={
-                                      columnType.inputType === "number"
-                                        ? "number"
-                                        : "text"
-                                    }
-                                    placeholder={`Enter ${columnName.replace(/_/g, " ")}`}
-                                    value={(inputField.value as string) || ""}
-                                    onChange={(e) =>
-                                      inputField.onChange(
-                                        columnType.inputType === "number"
-                                          ? e.target.valueAsNumber
-                                          : e.target.value,
-                                      )
+                                    checked={!!inputField.value}
+                                    onCheckedChange={(c) =>
+                                      inputField.onChange(c === true)
                                     }
                                   />
-                                )}
+                                  <FieldLabel
+                                    htmlFor={`field-${columnName}`}
+                                    className="cursor-pointer mt-0! font-normal"
+                                  >
+                                    Enable {columnName.replace(/_/g, " ")}
+                                  </FieldLabel>
+                                </div>
+                              ) : columnType.inputType === "textarea" ||
+                                columnType.inputType === "json" ? (
+                                <Textarea
+                                  {...inputField}
+                                  id={`field-${columnName}`}
+                                  disabled={isDisabled}
+                                  placeholder={`Enter ${columnName.replace(/_/g, " ")}`}
+                                  rows={5}
+                                  value={(inputField.value as string) || ""}
+                                />
+                              ) : (
+                                <Input
+                                  {...inputField}
+                                  id={`field-${columnName}`}
+                                  disabled={isDisabled}
+                                  type={
+                                    columnType.inputType === "number"
+                                      ? "number"
+                                      : "text"
+                                  }
+                                  placeholder={`Enter ${columnName.replace(/_/g, " ")}`}
+                                  value={(inputField.value as string) || ""}
+                                  onChange={(e) =>
+                                    inputField.onChange(
+                                      columnType.inputType === "number"
+                                        ? e.target.valueAsNumber
+                                        : e.target.value,
+                                    )
+                                  }
+                                />
+                              )}
 
-                                {fieldState.invalid && (
-                                  <FieldError errors={[fieldState.error]} />
-                                )}
-                              </Field>
-                            );
-                          }}
-                        />
-                      );
-                    })
-                  )}
-                </div>
-              </ScrollArea>
-              <SheetFooter>
-                {import.meta.env.DEV && (
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={() => {
-                      console.log("=== DEBUG INFO ===");
-                      console.log("Form values:", form.getValues());
-                      console.log("Form errors:", form.formState.errors);
-                      console.log("Is valid:", form.formState.isValid);
-                      console.log(
-                        "Is submitting:",
-                        form.formState.isSubmitting,
-                      );
-                      console.log("Fields:", fields);
-                    }}
-                  >
-                    Debug
-                  </Button>
+                              {fieldState.invalid && (
+                                <FieldError errors={[fieldState.error]} />
+                              )}
+                            </Field>
+                          );
+                        }}
+                      />
+                    );
+                  })
                 )}
-                <div className="grid md:grid-cols-2 gap-2">
-                  <Button type="submit" disabled={form.formState.isSubmitting}>
-                    {form.formState.isSubmitting ? (
-                      <>
-                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                        Saving...
-                      </>
-                    ) : (
-                      <>
-                        <Save className="mr-2 h-4 w-4" />
-                        Save
-                      </>
-                    )}
-                  </Button>
-                  <SheetClose asChild>
-                    <Button variant="outline">Cancel</Button>
-                  </SheetClose>
-                </div>
-              </SheetFooter>
-            </FieldGroup>
-          </form>
-        )}
-      </SheetContent>
-    </Sheet>
+              </div>
+            </ScrollArea>
+            <SheetFooter>
+              {import.meta.env.DEV && (
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => {
+                    console.log("=== DEBUG INFO ===");
+                    console.log("Form values:", form.getValues());
+                    console.log("Form errors:", form.formState.errors);
+                    console.log("Is valid:", form.formState.isValid);
+                    console.log("Is submitting:", form.formState.isSubmitting);
+                    console.log("Fields:", fields);
+                  }}
+                >
+                  Debug
+                </Button>
+              )}
+              <div className="grid md:grid-cols-2 gap-2">
+                <Button type="submit" disabled={form.formState.isSubmitting}>
+                  {form.formState.isSubmitting ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Saving...
+                    </>
+                  ) : (
+                    <>
+                      <Save className="mr-2 h-4 w-4" />
+                      Save
+                    </>
+                  )}
+                </Button>
+                <Button onClick={goBack} variant="outline">
+                  Cancel
+                </Button>
+              </div>
+            </SheetFooter>
+          </FieldGroup>
+        </form>
+      )}
+    </>
   );
 };
diff --git a/frontend/src/components/tables/DataView.tsx b/frontend/src/components/tables/DataView.tsx
new file mode 100644
index 0000000..b399913
--- /dev/null
+++ b/frontend/src/components/tables/DataView.tsx
@@ -0,0 +1,76 @@
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { SheetClose, SheetFooter } from "@/components/ui/sheet";
+import { useRowContext } from "@/hooks/useRows";
+
+const formatValue = (value: unknown) => {
+  if (typeof value === "string") {
+    try {
+      return JSON.stringify(JSON.parse(value), null, 2);
+    } catch {
+      return value;
+    }
+  }
+  return value?.toString();
+};
+export const DataView = () => {
+  const {
+    rowDetailsSheetData: rowDetailssheetData,
+    deleteRow,
+    setRowDetailsSheetData,
+    setViewState,
+  } = useRowContext();
+  if (!rowDetailssheetData) return null;
+  const row = rowDetailssheetData.row.columns;
+
+  const handleEdit = () => {
+    setRowDetailsSheetData(rowDetailssheetData);
+    setViewState("edit");
+  };
+  return (
+    <>
+      <ScrollArea className="min-h-0 flex-1">
+        <div className="flex flex-col divide-y p-4">
+          {(row || []).map((col) => (
+            <div key={col.columnName} className="flex flex-col gap-1 py-3">
+              <label className="text-xs font-medium text-muted-foreground capitalize">
+                {col.columnName}
+              </label>
+              <div className="font-mono text-sm break-all whitespace-pre-wrap">
+                {(() => {
+                  const value = col.value;
+                  if (value === undefined)
+                    return <p className="text-muted-foreground">-</p>;
+                  if (value === null)
+                    return <p className="text-muted-foreground">null</p>;
+                  return formatValue(value);
+                })()}
+              </div>
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+
+      <SheetFooter>
+        <div className="grid grid-cols-2 gap-4">
+          {rowDetailssheetData?.row.hash && (
+            <>
+              <Button
+                variant={"danger"}
+                onClick={() => deleteRow(rowDetailssheetData.row.hash)}
+              >
+                Delete
+              </Button>
+            </>
+          )}
+          <Button onClick={handleEdit}>Edit</Button>
+        </div>
+        <SheetClose asChild>
+          <Button className="w-full" variant={"outline"}>
+            Close
+          </Button>
+        </SheetClose>
+      </SheetFooter>
+    </>
+  );
+};
diff --git a/frontend/src/components/tables/RowDetailsSheet.tsx b/frontend/src/components/tables/RowDetailsSheet.tsx
index e90fee7..3598ba3 100644
--- a/frontend/src/components/tables/RowDetailsSheet.tsx
+++ b/frontend/src/components/tables/RowDetailsSheet.tsx
@@ -1,36 +1,22 @@
-import { Button } from "@/components/ui/button";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Sheet,
-  SheetClose,
   SheetContent,
   SheetDescription,
-  SheetFooter,
   SheetHeader,
   SheetTitle,
 } from "@/components/ui/sheet";
 import { RowUpsertForm } from "@/components/rows/RowUpsertForm";
 import { useRowContext } from "@/hooks/useRows";
+import { DataView } from "@/components/tables/DataView";
 
-const formatValue = (value: unknown) => {
-  if (typeof value === "string") {
-    try {
-      return JSON.stringify(JSON.parse(value), null, 2);
-    } catch {
-      return value;
-    }
-  }
-  return value?.toString();
-};
-export const RowDetailsSheet = () => {
+export const RowDetailsSheet = ({ goBack }: { goBack?: () => void }) => {
   const {
+    viewState,
+    setViewState,
     rowDetailsSheetData: rowDetailssheetData,
     setRowDetailsSheetOpen,
     rowDetailsSheetOpen,
-    deleteRow,
   } = useRowContext();
-  if (!rowDetailssheetData) return null;
-  const row = rowDetailssheetData.row.columns;
   return (
     <Sheet open={rowDetailsSheetOpen} onOpenChange={setRowDetailsSheetOpen}>
       <SheetContent className="flex min-w-[90%] flex-col md:min-w-xl">
@@ -39,51 +25,13 @@ export const RowDetailsSheet = () => {
           <SheetDescription>Viewing record details.</SheetDescription>
         </SheetHeader>
 
-        <ScrollArea type="always" className="min-h-0 flex-1">
-          <div className="flex flex-col divide-y p-4">
-            {(row || []).map((col) => (
-              <div key={col.columnName} className="flex flex-col gap-1 py-3">
-                <label className="text-xs font-medium text-muted-foreground capitalize">
-                  {col.columnName}
-                </label>
-                <div className="font-mono text-sm break-all whitespace-pre-wrap">
-                  {(() => {
-                    const value = col.value;
-                    if (value === undefined)
-                      return <p className="text-muted-foreground">-</p>;
-                    if (value === null)
-                      return <p className="text-muted-foreground">null</p>;
-                    return formatValue(value);
-                  })()}
-                </div>
-              </div>
-            ))}
-          </div>
-        </ScrollArea>
-
-        <SheetFooter>
-          <div className="grid grid-cols-2 gap-4">
-            {rowDetailssheetData?.row.hash && (
-              <>
-                <RowUpsertForm hash={rowDetailssheetData.row.hash}>
-                  <Button className="">Edit</Button>
-                </RowUpsertForm>
-
-                <Button
-                  variant={"danger"}
-                  onClick={() => deleteRow(rowDetailssheetData.row.hash)}
-                >
-                  Delete
-                </Button>
-              </>
-            )}
-          </div>
-          <SheetClose asChild>
-            <Button className="w-full" variant={"outline"}>
-              Close
-            </Button>
-          </SheetClose>
-        </SheetFooter>
+        {viewState === "view" && <DataView />}
+        {viewState === "edit" && (
+          <RowUpsertForm
+            hash={rowDetailssheetData?.row.hash}
+            goBack={goBack ?? (() => setViewState("view"))}
+          />
+        )}
       </SheetContent>
     </Sheet>
   );
diff --git a/frontend/src/hooks/useRows.tsx b/frontend/src/hooks/useRows.tsx
index 919ffb1..b26bd41 100644
--- a/frontend/src/hooks/useRows.tsx
+++ b/frontend/src/hooks/useRows.tsx
@@ -21,6 +21,8 @@ export type RowData = { hash: string } & Record<string, unknown>;
 type SheetData = { row: RowSet; tableName: string };
 
 export interface RowContextType {
+  viewState: ViewState;
+  setViewState: Dispatch<SetStateAction<ViewState>>;
   rowDetailsSheetData: SheetData | null;
   setRowDetailsSheetData: Dispatch<SetStateAction<SheetData | null>>;
   rowDetailsSheetOpen: boolean;
@@ -35,6 +37,8 @@ export interface RowContextType {
   rowFetchError: ErrorModel | null;
 }
 
+type ViewState = "view" | "edit";
+
 const RowContext = createContext<RowContextType | null>(null);
 interface RowProviderProps {
   children: ReactNode;
@@ -45,6 +49,7 @@ export const RowProvider = ({ children, tableName }: RowProviderProps) => {
   const [rowDetailsSheetData, setRowDetailsSheetData] =
     useState<SheetData | null>(null);
   const [rowDetailsSheetOpen, setRowDetailsSheetOpen] = useState(false);
+  const [viewState, setViewState] = useState<ViewState>("view");
   const [globalFilter, setGlobalFilter] = useState("");
 
   const [searchParams] = useSearchParams();
@@ -90,6 +95,8 @@ export const RowProvider = ({ children, tableName }: RowProviderProps) => {
   return (
     <RowContext.Provider
       value={{
+        viewState,
+        setViewState,
         rowDetailsSheetData,
         setRowDetailsSheetData,
         rowDetailsSheetOpen,
diff --git a/frontend/src/pages/TableRows.tsx b/frontend/src/pages/TableRows.tsx
index 3ef6199..76e960d 100644
--- a/frontend/src/pages/TableRows.tsx
+++ b/frontend/src/pages/TableRows.tsx
@@ -3,12 +3,20 @@ import { AppPagination } from "@/components/shared/AppPagination";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { DeleteAlert, RowOrderForm, TableView } from "@/components/tables";
 import { RowProvider, useRowContext } from "@/hooks/useRows";
-import { RowUpsertForm } from "@/components/rows/RowUpsertForm";
+import { Button } from "@/components/ui/button";
+import { RowDetailsSheet } from "@/components/tables/RowDetailsSheet";
 
 function TablePageContent() {
   const { tableName } = useParams<{ tableName: string }>();
   const [searchParams, setSearchParams] = useSearchParams();
-  const { page, rowFetchError, data } = useRowContext();
+  const {
+    page,
+    rowFetchError,
+    data,
+    setRowDetailsSheetOpen,
+    setViewState,
+    setRowDetailsSheetData,
+  } = useRowContext();
 
   if (!tableName) {
     return (
@@ -30,14 +38,25 @@ function TablePageContent() {
     );
   }
 
+  const handleInsertFormOpen = () => {
+    setViewState("edit");
+    setRowDetailsSheetData(null);
+    setRowDetailsSheetOpen(true);
+  };
+
   return (
     <div className="flex-1 p-4 md:p-8 overflow-y-auto w-full max-w-full">
+      <RowDetailsSheet
+        goBack={() => {
+          console.log("jfksdjfkl");
+        }}
+      />
       <div className="space-y-6">
         <div className="flex items-center justify-between">
           <h1 className="text-3xl font-bold tracking-tight">{tableName}</h1>
           <div className="flex items-center justify-center gap-1">
             <DeleteAlert tableName={tableName} />
-            <RowUpsertForm />
+            <Button onClick={handleInsertFormOpen}>Insert</Button>
           </div>
         </div>
 
diff --git a/internal/router/handler.go b/internal/router/handler.go
index 75bdafe..ecbaa15 100644
--- a/internal/router/handler.go
+++ b/internal/router/handler.go
@@ -192,8 +192,6 @@ func (h DBHandler) InsertOrUpdateRow(ctx context.Context, input *InsertOrUpdateR
 	}
 	form := input.Body
 
-	logger.Info("Request data: %+v", form)
-
 	pageInt := input.Page
 	hash := strings.TrimSpace(input.Hash)
 
@@ -253,7 +251,6 @@ type CreeteNewTableInput struct {
 
 func (h DBHandler) CreeteNewTable(ctx context.Context, input *CreeteNewTableInput) (*struct{}, error) {
 	req := input.Body
-	logger.Info("Request data: %+v", req)
 	if err := h.service.CreateTable(ctx, req.TableName, req.Inputs); err != nil {
 		logger.Error("%s", err)
 		logger.Error("Failed to create table '%s'", req.TableName)
diff --git a/makefile b/makefile
index 28f307c..34f6195 100644
--- a/makefile
+++ b/makefile
@@ -1,6 +1,8 @@
 GREETING := Hello from RowSQL!
+SHELL := /bin/bash
 
 .PHONY: default backend-build frontend-build backend-dev frontend-dev dev build run doc test release lint clean install format
+.ONESHELL:
 
 default:
 	@echo "$(GREETING)"
@@ -40,6 +42,10 @@ test:
 release:
 	goreleaser release --clean --snapshot
 
+
+release-full:
+	goreleaser release
+
 lint:
 	golangci-lint run
 	cd ./frontend && pnpm lint

From df02dae8bc437e7e4bb6b390514775e3fb2fb4cb Mon Sep 17 00:00:00 2001
From: Avisek <biisal.int@gmail.com>
Date: Fri, 15 May 2026 23:23:57 +0530
Subject: [PATCH 2/2] refactor: consolidate row details sheet management into
 useRowContext hook using open/close helper methods

---
 .../src/components/rows/RowUpsertForm.tsx     | 12 ++++++---
 frontend/src/components/tables/DataView.tsx   |  2 --
 .../src/components/tables/RowDetailsSheet.tsx | 25 ++++++++++-------
 frontend/src/components/tables/TableView.tsx  | 15 +++--------
 frontend/src/hooks/useRows.tsx                | 22 ++++++++++++---
 frontend/src/pages/TableRows.tsx              | 27 +++++--------------
 6 files changed, 52 insertions(+), 51 deletions(-)

diff --git a/frontend/src/components/rows/RowUpsertForm.tsx b/frontend/src/components/rows/RowUpsertForm.tsx
index 45d5f05..ad1b18b 100644
--- a/frontend/src/components/rows/RowUpsertForm.tsx
+++ b/frontend/src/components/rows/RowUpsertForm.tsx
@@ -60,11 +60,10 @@ import { SheetFooter } from "@/components/ui/sheet";
 
 interface RowUpsertFormProps {
   hash?: string;
-  goBack: () => void;
 }
 
-export const RowUpsertForm = ({ hash, goBack }: RowUpsertFormProps) => {
-  const { page, tableName } = useRowContext();
+export const RowUpsertForm = ({ hash }: RowUpsertFormProps) => {
+  const { page, tableName, closeRowDetails, setViewState } = useRowContext();
   const navigate = useNavigate();
 
   const { data, isPending } = useQuery(
@@ -318,7 +317,12 @@ export const RowUpsertForm = ({ hash, goBack }: RowUpsertFormProps) => {
                     </>
                   )}
                 </Button>
-                <Button onClick={goBack} variant="outline">
+                <Button
+                  onClick={() =>
+                    hash ? setViewState("view") : closeRowDetails()
+                  }
+                  variant="outline"
+                >
                   Cancel
                 </Button>
               </div>
diff --git a/frontend/src/components/tables/DataView.tsx b/frontend/src/components/tables/DataView.tsx
index b399913..27b1754 100644
--- a/frontend/src/components/tables/DataView.tsx
+++ b/frontend/src/components/tables/DataView.tsx
@@ -17,14 +17,12 @@ export const DataView = () => {
   const {
     rowDetailsSheetData: rowDetailssheetData,
     deleteRow,
-    setRowDetailsSheetData,
     setViewState,
   } = useRowContext();
   if (!rowDetailssheetData) return null;
   const row = rowDetailssheetData.row.columns;
 
   const handleEdit = () => {
-    setRowDetailsSheetData(rowDetailssheetData);
     setViewState("edit");
   };
   return (
diff --git a/frontend/src/components/tables/RowDetailsSheet.tsx b/frontend/src/components/tables/RowDetailsSheet.tsx
index 3598ba3..29c98fd 100644
--- a/frontend/src/components/tables/RowDetailsSheet.tsx
+++ b/frontend/src/components/tables/RowDetailsSheet.tsx
@@ -9,28 +9,35 @@ import { RowUpsertForm } from "@/components/rows/RowUpsertForm";
 import { useRowContext } from "@/hooks/useRows";
 import { DataView } from "@/components/tables/DataView";
 
-export const RowDetailsSheet = ({ goBack }: { goBack?: () => void }) => {
+export const RowDetailsSheet = () => {
   const {
     viewState,
-    setViewState,
     rowDetailsSheetData: rowDetailssheetData,
     setRowDetailsSheetOpen,
     rowDetailsSheetOpen,
+    tableName,
+    closeRowDetails,
   } = useRowContext();
   return (
-    <Sheet open={rowDetailsSheetOpen} onOpenChange={setRowDetailsSheetOpen}>
+    <Sheet
+      open={rowDetailsSheetOpen}
+      onOpenChange={(open) =>
+        !open ? closeRowDetails() : setRowDetailsSheetOpen(true)
+      }
+    >
       <SheetContent className="flex min-w-[90%] flex-col md:min-w-xl">
         <SheetHeader className="bg-muted-foreground/10">
-          <SheetTitle>{rowDetailssheetData?.tableName}</SheetTitle>
-          <SheetDescription>Viewing record details.</SheetDescription>
+          <SheetTitle>{rowDetailssheetData?.tableName || tableName}</SheetTitle>
+          <SheetDescription>
+            {viewState === "edit"
+              ? "Editing record details."
+              : "Viewing record details."}
+          </SheetDescription>
         </SheetHeader>
 
         {viewState === "view" && <DataView />}
         {viewState === "edit" && (
-          <RowUpsertForm
-            hash={rowDetailssheetData?.row.hash}
-            goBack={goBack ?? (() => setViewState("view"))}
-          />
+          <RowUpsertForm hash={rowDetailssheetData?.row?.hash} />
         )}
       </SheetContent>
     </Sheet>
diff --git a/frontend/src/components/tables/TableView.tsx b/frontend/src/components/tables/TableView.tsx
index b4c3fcf..f14a1a0 100644
--- a/frontend/src/components/tables/TableView.tsx
+++ b/frontend/src/components/tables/TableView.tsx
@@ -18,22 +18,16 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { RowDetailsSheet } from "./RowDetailsSheet";
 import { Input } from "@/components/ui/input";
 import { ChevronRight } from "lucide-react";
 import { useRowContext } from "@/hooks/useRows";
 import { toast } from "sonner";
 import type { RowSet } from "@/client";
 
-interface TableViewProps {
-  tableName: string;
-}
-
 export type RowData = { hash: string } & Record<string, unknown>;
 
-export const TableView = ({ tableName }: TableViewProps) => {
-  const { setRowDetailsSheetOpen, setRowDetailsSheetData, isLoading, data } =
-    useRowContext();
+export const TableView = () => {
+  const { openRowDetails, isLoading, data } = useRowContext();
   const [globalFilter, setGlobalFilter] = useState("");
 
   const columns: ColumnDef<RowData>[] = React.useMemo(
@@ -74,8 +68,8 @@ export const TableView = ({ tableName }: TableViewProps) => {
       toast.error("Row not found");
       return;
     }
-    setRowDetailsSheetData({ row: rowSet, tableName });
-    setRowDetailsSheetOpen(true);
+
+    openRowDetails(rowSet, "view");
   };
   // eslint-disable-next-line react-hooks/incompatible-library
   const table = useReactTable({
@@ -103,7 +97,6 @@ export const TableView = ({ tableName }: TableViewProps) => {
         className="max-w-sm"
       />
 
-      <RowDetailsSheet />
       <Table>
         <TableCaption>click the row to view complete data</TableCaption>
         <TableHeader>
diff --git a/frontend/src/hooks/useRows.tsx b/frontend/src/hooks/useRows.tsx
index b26bd41..0d0cde8 100644
--- a/frontend/src/hooks/useRows.tsx
+++ b/frontend/src/hooks/useRows.tsx
@@ -24,7 +24,6 @@ export interface RowContextType {
   viewState: ViewState;
   setViewState: Dispatch<SetStateAction<ViewState>>;
   rowDetailsSheetData: SheetData | null;
-  setRowDetailsSheetData: Dispatch<SetStateAction<SheetData | null>>;
   rowDetailsSheetOpen: boolean;
   setRowDetailsSheetOpen: Dispatch<SetStateAction<boolean>>;
   globalFilter: string;
@@ -35,6 +34,8 @@ export interface RowContextType {
   data?: ListRowsResponse;
   page: number;
   rowFetchError: ErrorModel | null;
+  openRowDetails: (row?: RowSet, mode?: ViewState) => void;
+  closeRowDetails: () => void;
 }
 
 type ViewState = "view" | "edit";
@@ -59,6 +60,19 @@ export const RowProvider = ({ children, tableName }: RowProviderProps) => {
 
   const queryClient = useQueryClient();
 
+  const openRowDetails = (row?: RowSet, mode: ViewState = "view") => {
+    setViewState(mode);
+    setRowDetailsSheetData(row ? { row, tableName } : null);
+    setRowDetailsSheetOpen(true);
+  };
+
+  const closeRowDetails = () => {
+    setRowDetailsSheetOpen(false);
+    // Reset after animation if needed, but for now simple reset
+    setViewState("view");
+    setRowDetailsSheetData(null);
+  };
+
   const deleteMutation = useMutation({
     ...deleteRowMutation(),
     onSuccess: () => {
@@ -66,8 +80,7 @@ export const RowProvider = ({ children, tableName }: RowProviderProps) => {
       queryClient.invalidateQueries({
         queryKey: listRowsQueryKey({ path: { tableName: tableName! } }),
       });
-      setRowDetailsSheetOpen(false);
-      setRowDetailsSheetData(null);
+      closeRowDetails();
     },
   });
 
@@ -98,7 +111,6 @@ export const RowProvider = ({ children, tableName }: RowProviderProps) => {
         viewState,
         setViewState,
         rowDetailsSheetData,
-        setRowDetailsSheetData,
         rowDetailsSheetOpen,
         globalFilter,
         setGlobalFilter,
@@ -109,6 +121,8 @@ export const RowProvider = ({ children, tableName }: RowProviderProps) => {
         data,
         rowFetchError,
         page,
+        openRowDetails,
+        closeRowDetails,
       }}
     >
       {children}
diff --git a/frontend/src/pages/TableRows.tsx b/frontend/src/pages/TableRows.tsx
index 76e960d..ab4fb73 100644
--- a/frontend/src/pages/TableRows.tsx
+++ b/frontend/src/pages/TableRows.tsx
@@ -9,14 +9,7 @@ import { RowDetailsSheet } from "@/components/tables/RowDetailsSheet";
 function TablePageContent() {
   const { tableName } = useParams<{ tableName: string }>();
   const [searchParams, setSearchParams] = useSearchParams();
-  const {
-    page,
-    rowFetchError,
-    data,
-    setRowDetailsSheetOpen,
-    setViewState,
-    setRowDetailsSheetData,
-  } = useRowContext();
+  const { page, rowFetchError, data, openRowDetails } = useRowContext();
 
   if (!tableName) {
     return (
@@ -38,25 +31,17 @@ function TablePageContent() {
     );
   }
 
-  const handleInsertFormOpen = () => {
-    setViewState("edit");
-    setRowDetailsSheetData(null);
-    setRowDetailsSheetOpen(true);
-  };
-
   return (
     <div className="flex-1 p-4 md:p-8 overflow-y-auto w-full max-w-full">
-      <RowDetailsSheet
-        goBack={() => {
-          console.log("jfksdjfkl");
-        }}
-      />
+      <RowDetailsSheet />
       <div className="space-y-6">
         <div className="flex items-center justify-between">
           <h1 className="text-3xl font-bold tracking-tight">{tableName}</h1>
           <div className="flex items-center justify-center gap-1">
             <DeleteAlert tableName={tableName} />
-            <Button onClick={handleInsertFormOpen}>Insert</Button>
+            <Button onClick={() => openRowDetails(undefined, "edit")}>
+              Insert
+            </Button>
           </div>
         </div>
 
@@ -75,7 +60,7 @@ function TablePageContent() {
             />
           </CardHeader>
           <CardContent className="p-4">
-            <TableView tableName={tableName || ""} />
+            <TableView />
             <div className="flex items-center flex-col sm:flex-row justify-center md:justify-between  py-4">
               <AppPagination
                 currentPage={page}