Refactor code for improved readability and consistency

- Updated formatting in various components to enhance code clarity.
- Adjusted function signatures and parameters for better alignment.
- Simplified return statements and conditional checks for cleaner code.
- Consolidated multiline statements for improved readability.
- Enhanced error handling messages for better debugging. docker-false

Author: caioricciuti

src/components/charts/ChartVisualizationPro.tsx

@@ -83,7 +83,10 @@ function PieChart({
   legendShow?: boolean;
 }) {
   const total = data.reduce((sum, row) => sum + (Number(row[yKey]) || 0), 0);
-  if (total === 0) return <div className="flex items-center justify-center h-full text-muted-foreground">No data</div>;
+  if (total === 0)
+    return (
+      <div className="flex items-center justify-center h-full text-muted-foreground">No data</div>
+    );
 
   const slices: { label: string; value: number; pct: number; color: string }[] = [];
   let cumAngle = -Math.PI / 2;
@@ -149,7 +152,10 @@ function PieChart({
         <div className="flex flex-wrap gap-x-4 gap-y-1 justify-center text-xs">
           {slices.map((s, i) => (
             <div key={i} className="flex items-center gap-1.5">
-              <span className="w-2.5 h-2.5 rounded-full inline-block flex-shrink-0" style={{ backgroundColor: s.color }} />
+              <span
+                className="w-2.5 h-2.5 rounded-full inline-block flex-shrink-0"
+                style={{ backgroundColor: s.color }}
+              />
               <span className="text-muted-foreground truncate max-w-[120px]">{s.label}</span>
               <span className="font-medium">{formatNumber(s.value)}</span>
             </div>
@@ -188,7 +194,12 @@ export const ChartVisualizationPro: React.FC<ChartVisualizationProProps> = ({
 
   // Transform data based on configuration
   const transformedData = useMemo(() => {
-    return transformData(result, localConfig.transform, localConfig.xAxis, localConfig.yAxis || localConfig.series);
+    return transformData(
+      result,
+      localConfig.transform,
+      localConfig.xAxis,
+      localConfig.yAxis || localConfig.series
+    );
   }, [result, localConfig.transform, localConfig.xAxis, localConfig.yAxis, localConfig.series]);
 
   const handleConfigChange = (updates: Partial<ChartConfig>) => {
@@ -238,7 +249,9 @@ export const ChartVisualizationPro: React.FC<ChartVisualizationProProps> = ({
       await exportChartAsPNG(chartRef.current, fileName, bg);
       toast.success("Chart exported as PNG");
     } catch (error) {
-      toast.error(`Failed to export chart: ${error instanceof Error ? error.message : "Unknown error"}`);
+      toast.error(
+        `Failed to export chart: ${error instanceof Error ? error.message : "Unknown error"}`
+      );
     }
   };
 
@@ -274,13 +287,16 @@ export const ChartVisualizationPro: React.FC<ChartVisualizationProProps> = ({
     });
 
     // Determine Y keys
-    const yKeys: string[] = chartConfig.series?.map((s) => s.column) ?? (chartConfig.yAxis ? [chartConfig.yAxis] : []);
+    const yKeys: string[] =
+      chartConfig.series?.map((s) => s.column) ?? (chartConfig.yAxis ? [chartConfig.yAxis] : []);
     const colors = chartConfig.colors || DEFAULT_COLORS;
     const isDark = theme === "dark";
 
     // Convert to uPlot columnar data: [xs, ...series]
     const xs = chartData.map((_, i) => i);
-    const seriesData = yKeys.map((key) => chartData.map((row) => (Number(row[key]) || 0) as number));
+    const seriesData = yKeys.map((key) =>
+      chartData.map((row) => (Number(row[key]) || 0) as number)
+    );
 
     // For stacked charts, compute stacked values
     const isStacked = chartConfig.type === "stacked_bar" || chartConfig.type === "stacked_area";
@@ -361,7 +377,11 @@ export const ChartVisualizationPro: React.FC<ChartVisualizationProProps> = ({
       {
         stroke: isDark ? "#888" : "#666",
         grid: chartConfig.showGrid
-          ? { stroke: isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)", width: 1, dash: [4, 4] }
+          ? {
+              stroke: isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)",
+              width: 1,
+              dash: [4, 4],
+            }
           : { show: false },
         ticks: { stroke: isDark ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)", width: 1 },
         values: (_u: uPlot, vals: number[]) => vals.map((v) => formatNumber(v)),
@@ -397,8 +417,8 @@ export const ChartVisualizationPro: React.FC<ChartVisualizationProProps> = ({
 
     // Stacked: render in reverse order so first series is on top visually
     const data: uPlot.AlignedData = isStacked
-      ? [xs, ...finalSeriesData.reverse()] as uPlot.AlignedData
-      : [xs, ...finalSeriesData] as uPlot.AlignedData;
+      ? ([xs, ...finalSeriesData.reverse()] as uPlot.AlignedData)
+      : ([xs, ...finalSeriesData] as uPlot.AlignedData);
 
     return { uPlotOptions: opts, uPlotData: data };
   }, [chartConfig, transformedData, theme]);
@@ -417,8 +437,8 @@ export const ChartVisualizationPro: React.FC<ChartVisualizationProProps> = ({
           <div className="text-center space-y-2 max-w-md">
             <h3 className="text-lg font-semibold">Create Your Chart</h3>
             <p className="text-muted-foreground text-sm">
-              Configure chart settings above to visualize your data. Choose a chart type, select your axes, and
-              customize to your needs.
+              Configure chart settings above to visualize your data. Choose a chart type, select
+              your axes, and customize to your needs.
             </p>
             {suggestedTypes.length > 0 && (
               <div className="pt-4">
@@ -515,7 +535,10 @@ export const ChartVisualizationPro: React.FC<ChartVisualizationProProps> = ({
               {/* X-Axis */}
               <div className="space-y-2">
                 <label className="text-xs font-medium">X-Axis</label>
-                <Select value={localConfig.xAxis || ""} onValueChange={(value) => handleConfigChange({ xAxis: value })}>
+                <Select
+                  value={localConfig.xAxis || ""}
+                  onValueChange={(value) => handleConfigChange({ xAxis: value })}
+                >
                   <SelectTrigger>
                     <SelectValue placeholder="Select column" />
                   </SelectTrigger>

src/components/charts/tooltipPlugin.ts

@@ -44,7 +44,10 @@ export function tooltipPlugin(xLabels: string[]): uPlot.Plugin {
           const s = u.series[i];
           if (!s.show) continue;
           const val = u.data[i][idx];
-          const color = typeof s.stroke === "function" ? (s.stroke as (self: uPlot, seriesIdx: number) => string)(u, i) : s.stroke;
+          const color =
+            typeof s.stroke === "function"
+              ? (s.stroke as (self: uPlot, seriesIdx: number) => string)(u, i)
+              : s.stroke;
           html += `<div class="uplot-tooltip-row">
             <span class="uplot-tooltip-dot" style="background:${color}"></span>
             <span class="uplot-tooltip-label">${s.label}</span>

src/components/editor/SqlEditor.tsx

@@ -23,8 +23,15 @@ const SqlEditor: React.FC<SqlEditorProps> = ({ tabId, title, className }) => {
   const editorRef = useRef<HTMLDivElement>(null);
   const editorInstanceRef = useRef<EditorInstance | null>(null);
   const { theme } = useTheme();
-  const { tabs, executeQuery, isExecuting, updateTabTitle, toggleBrainPanel, duckBrain, currentProfileId } =
-    useDuckStore();
+  const {
+    tabs,
+    executeQuery,
+    isExecuting,
+    updateTabTitle,
+    toggleBrainPanel,
+    duckBrain,
+    currentProfileId,
+  } = useDuckStore();
   const monacoConfig = useMonacoConfig(theme);
 
   const currentTab = tabs.find((tab) => tab.id === tabId);

src/components/editor/monacoConfig.ts

@@ -209,7 +209,10 @@ monaco.languages.registerDocumentFormattingEditProvider("sql", {
 interface AutocompleteItem {
   suggestion: string;
 }
-const queryNative = async <T>(connection: { query: (sql: string) => Promise<{ toArray: () => unknown[] }> }, query: string): Promise<T[]> => {
+const queryNative = async <T>(
+  connection: { query: (sql: string) => Promise<{ toArray: () => unknown[] }> },
+  query: string
+): Promise<T[]> => {
   const results = await connection.query(query);
   return results.toArray().map((row: unknown) => row as T);
 };

src/components/explorer/FileImporter.tsx

@@ -265,7 +265,10 @@ const FileDetails: React.FC<FileDetailsProps> = ({
   }, [tableName]);
 
   // Handle CSV option changes
-  const handleCsvOptionChange = (key: keyof CsvImportOptions, value: string | boolean | number | undefined) => {
+  const handleCsvOptionChange = (
+    key: keyof CsvImportOptions,
+    value: string | boolean | number | undefined
+  ) => {
     if (onCsvOptionsChange && csvOptions) {
       onCsvOptionsChange({
         ...csvOptions,

src/components/layout/Sidebar.tsx

@@ -166,9 +166,7 @@ export default function Sidebar({ isExplorerOpen, onToggleExplorer }: SidebarPro
                     </button>
                   </DropdownMenuTrigger>
                 </TooltipTrigger>
-                <TooltipContent side="right">
-                  {currentProfile?.name || "Duck-UI"}
-                </TooltipContent>
+                <TooltipContent side="right">{currentProfile?.name || "Duck-UI"}</TooltipContent>
               </Tooltip>
             </TooltipProvider>
             <DropdownMenuContent side="right" align="start">

src/components/profile/PasswordDialog.tsx

@@ -21,7 +21,12 @@ interface PasswordDialogProps {
   onSubmit: (password: string) => Promise<void>;
 }
 
-export default function PasswordDialog({ open, onOpenChange, profile, onSubmit }: PasswordDialogProps) {
+export default function PasswordDialog({
+  open,
+  onOpenChange,
+  profile,
+  onSubmit,
+}: PasswordDialogProps) {
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);

src/components/profile/ProfileEditor.tsx

@@ -8,8 +8,26 @@ import ProfileAvatar from "./ProfileAvatar";
 
 const AVATAR_OPTIONS = [
   "logo",
-  "\u{1F986}", "\u{1F424}", "\u{1F985}", "\u{1F427}", "\u{1F989}", "\u{1F426}", "\u{1F99C}", "\u{1F438}", "\u{1F43B}", "\u{1F98A}",
-  "\u{1F431}", "\u{1F436}", "\u{1F43C}", "\u{1F981}", "\u{1F428}", "\u{1F42F}", "\u{1F430}", "\u{1F419}", "\u{1F98B}", "\u{1F31F}",
+  "\u{1F986}",
+  "\u{1F424}",
+  "\u{1F985}",
+  "\u{1F427}",
+  "\u{1F989}",
+  "\u{1F426}",
+  "\u{1F99C}",
+  "\u{1F438}",
+  "\u{1F43B}",
+  "\u{1F98A}",
+  "\u{1F431}",
+  "\u{1F436}",
+  "\u{1F43C}",
+  "\u{1F981}",
+  "\u{1F428}",
+  "\u{1F42F}",
+  "\u{1F430}",
+  "\u{1F419}",
+  "\u{1F98B}",
+  "\u{1F31F}",
 ];
 
 interface ProfileEditorProps {
@@ -19,15 +37,21 @@ interface ProfileEditorProps {
   onCancel: () => void;
 }
 
-export default function ProfileEditor({ mode, initialValues, onSave, onCancel }: ProfileEditorProps) {
+export default function ProfileEditor({
+  mode,
+  initialValues,
+  onSave,
+  onCancel,
+}: ProfileEditorProps) {
   const [name, setName] = useState(initialValues?.name ?? "");
   const [avatarEmoji, setAvatarEmoji] = useState(initialValues?.avatarEmoji ?? "logo");
   const [passwordEnabled, setPasswordEnabled] = useState(false);
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
   const [emojiOpen, setEmojiOpen] = useState(false);
 
-  const passwordMismatch = passwordEnabled && password !== confirmPassword && confirmPassword.length > 0;
+  const passwordMismatch =
+    passwordEnabled && password !== confirmPassword && confirmPassword.length > 0;
   const passwordTooShort = passwordEnabled && password.length > 0 && password.length < 4;
 
   const isValid =

src/components/profile/ProfilePicker.tsx

@@ -110,7 +110,8 @@ export default function ProfilePicker({
         </Button>
         <p className="text-xs text-muted-foreground">
           Your profiles are stored locally on your device. Creating a profile does not share any
-          data... This application is 100% offline and private by design, it's runs on the client side and does not send any data to any server.
+          data... This application is 100% offline and private by design, it's runs on the client
+          side and does not send any data to any server.
         </p>
       </div>
 

src/components/saved-queries/SavedQueriesPanel.tsx

@@ -66,9 +66,7 @@ export default function SavedQueriesPanel({ onClose }: SavedQueriesPanelProps) {
     }
     try {
       await updateSavedQuery(id, { name: editName.trim() });
-      setQueries((prev) =>
-        prev.map((q) => (q.id === id ? { ...q, name: editName.trim() } : q))
-      );
+      setQueries((prev) => prev.map((q) => (q.id === id ? { ...q, name: editName.trim() } : q)));
       bumpSavedQueriesVersion();
     } catch {
       toast.error("Failed to rename query");
@@ -138,9 +136,7 @@ export default function SavedQueriesPanel({ onClose }: SavedQueriesPanelProps) {
                           className="h-6 text-sm font-medium px-1"
                         />
                       ) : (
-                        <span className="font-medium text-sm truncate block">
-                          {query.name}
-                        </span>
+                        <span className="font-medium text-sm truncate block">{query.name}</span>
                       )}
                       <pre className="text-xs font-mono text-muted-foreground truncate">
                         {query.sql_text.length > 100