refactor(Settings): a single settings pane by xiduzo · Pull Request #97 · xiduzo/microflow-prototype

xiduzo · 2025-11-22T16:11:54Z

This pull request refactors the settings forms and UI in the Electron app to provide a more streamlined and user-friendly experience. The main changes include consolidating the separate settings forms into a single Settings component with an accordion interface, improving form validation and feedback, and updating the menu structure for better clarity. Additionally, several code cleanups and dependency updates are included.

Settings UI Refactor:

Added a new Settings component (Settings.tsx) that uses a sheet and accordion interface to group UserSettingsForm, MqttSettingsForm, and AdvancedSettingsForm in one place, improving navigation and organization.
Removed the old individual settings form wrappers and replaced their usage in app.tsx with the new consolidated Settings component. [1] [2]

Forms Improvements:

Refactored all settings forms (UserSettingsForm, MqttSettingsForm, AdvancedSettingsForm) to be standalone components, removed sheet wrappers, improved validation logic, and added toast notifications for successful saves. [1] [2] [3] [4] [5] [6]
Updated MQTT form validation to require a valid URL or IPv4 address for the host and a non-negative port, ensuring more robust configuration.

App Structure and UI Enhancements:

Wrapped the main app interface in a TooltipProvider for consistent tooltip behavior throughout the application. [1] [2] [3]
Cleaned up imports and removed unused UI components from several files for better maintainability. [1] [2] [3] [4] [5]

Menu Updates:

Renamed the "Insert node" menu item to "Add node" for clarity and updated the settings submenu to list "User settings" first, followed by "MQTT settings" and "Microcontroller settings". [1] [2]

Version Update:

Bumped the application version from 0.8.4 to 0.8.5 in package.json to reflect these improvements.

vercel · 2025-11-22T16:11:58Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
microflow	Building	Preview	Comment	Nov 22, 2025 4:11pm

Copilot

Pull request overview

This PR refactors the settings UI to provide a more streamlined experience by consolidating three separate settings forms into a single sheet with an accordion interface. The changes improve code organization, add helpful tooltips throughout the app, and enhance form validation with better user feedback.

Key Changes

Consolidated three separate settings sheets into one unified Settings component with an accordion interface for better navigation
Added a global TooltipProvider wrapper and enriched the dock panel with keyboard shortcut tooltips for improved discoverability
Enhanced form validation and user feedback with success toast notifications and improved state management

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
`apps/electron-app/src/render/components/Settings.tsx`	New consolidated settings component using accordion pattern to group all settings forms
`apps/electron-app/src/render/components/forms/UserSettingsForm.tsx`	Removed Sheet wrapper, added toast notifications, improved form state management
`apps/electron-app/src/render/components/forms/MqttSettingsForm.tsx`	Removed Sheet wrapper, updated validation schema, added toast feedback
`apps/electron-app/src/render/components/forms/AdvancedSettingsForm.tsx`	Removed Sheet wrapper, reorganized UI with alerts, added toast notifications
`apps/electron-app/src/app.tsx`	Added global TooltipProvider wrapper and integrated new Settings component
`apps/electron-app/src/render/components/react-flow/panels/DockPanel.tsx`	Added tooltips with keyboard shortcuts to dock buttons, reordered settings menu
`apps/electron-app/src/render/components/react-flow/nodes/Node.tsx`	Removed redundant TooltipProvider wrapper
`apps/electron-app/src/render/components/react-flow/nodes/Figma.tsx`	Removed redundant TooltipProvider wrapper
`apps/electron-app/src/render/components/react-flow/Handle.tsx`	Removed redundant TooltipProvider wrapper
`apps/electron-app/src/main/menu.ts`	Renamed "Insert node" to "Add node" and reordered settings menu items
`packages/ui/components/ui/dock.tsx`	Added hover background styling to dock icons
`apps/electron-app/src/render/stores/yjs.ts`	Removed commented-out signaling server URLs
`apps/electron-app/package.json`, `apps/nextjs-app/package.json`, `apps/figma-plugin/package.json`	Version bumped to 0.8.5
`apps/nextjs-app/components/DownloadApp.tsx`	Updated download version reference to 0.8.5

Comments suppressed due to low confidence (2)

apps/electron-app/src/render/components/forms/MqttSettingsForm.tsx:34

Unused variable setSettingsOpen.

	const { user, mqttConfig, setMqttConfig, setSettingsOpen } = useAppStore();

apps/electron-app/src/render/components/react-flow/nodes/Figma.tsx:280

Unused variable DEFAULT_FIGMA_VALUE_PER_TYPE.

const DEFAULT_FIGMA_VALUE_PER_TYPE: Record<FigmaVariable['resolvedType'], FigmaValueType> = {

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-11-22T16:16:14Z

 			className={cn(
-				'flex aspect-square cursor-pointer items-center justify-center rounded-full',
+				'flex aspect-square cursor-pointer items-center justify-center rounded-full hover:bg-muted-foreground',
 				disableMagnification && 'hover:bg-muted-foreground transition-colors',


The hover:bg-muted-foreground class is now applied unconditionally (line 131), but it's also conditionally applied on line 132 when disableMagnification is true. This creates redundant styling. The second condition should be removed or the logic should be restructured to avoid duplication.

Suggested change

disableMagnification && 'hover:bg-muted-foreground transition-colors',

disableMagnification && 'transition-colors',

Copilot · 2025-11-22T16:16:14Z

-export function MqttSettingsForm(props: Props) {
-	const { user, mqttConfig, setMqttConfig } = useAppStore();
+export function MqttSettingsForm() {
+	const { user, mqttConfig, setMqttConfig, setSettingsOpen } = useAppStore();


The setSettingsOpen variable is destructured from useAppStore() but is never used in this component. It should be removed from the destructuring assignment.

Suggested change

const { user, mqttConfig, setMqttConfig, setSettingsOpen } = useAppStore();

const { user, mqttConfig, setMqttConfig } = useAppStore();

Copilot · 2025-11-22T16:16:14Z

+				<a
+					className='underline'
+					href='https://www.figma.com/community/plugin/1373258770799080545/figma-hardware-bridge'
+					target='_blank'


The anchor tag with target='_blank' should include rel='noopener noreferrer' for security. Without this, the opened page can access the window.opener property and potentially redirect the parent page, creating a security vulnerability.

Suggested change

target='_blank'

target='_blank'

rel='noopener noreferrer'

Copilot · 2025-11-22T16:16:14Z

+						)}
+					/>
+					<div className='flex justify-end gap-2 pt-2'>
+						<Button type='submit' disabled={!form.formState.dirtyFields || !form.formState.isValid}>


The condition !form.formState.dirtyFields is incorrect. dirtyFields is an object, not a boolean. Use !form.formState.isDirty instead to properly check if the form has been modified.

Suggested change

<Button type='submit' disabled={!form.formState.dirtyFields || !form.formState.isValid}>

<Button type='submit' disabled={!form.formState.isDirty || !form.formState.isValid}>

Copilot · 2025-11-22T16:16:15Z

 const schema = Zod.object({
-	host: Zod.string().optional(),
-	port: Zod.number().optional(),
+	host: Zod.url().or(Zod.ipv4()),


The host validation Zod.url().or(Zod.ipv4()) is too restrictive. Plain hostnames like 'test.mosquitto.org' or 'localhost' are valid MQTT hosts but are not URLs (missing protocol). Consider using Zod.string().min(1) with a custom validation that accepts hostnames, URLs, and IP addresses, or use a regex pattern that matches valid hostnames.

Copilot · 2025-11-22T16:16:15Z

+									Microcontroller settings
+								</div>
+							</AccordionTrigger>
+							<AccordionContent>


The AccordionContent components have inconsistent className props. The first two have className='px-1' (lines 65, 76) while the third one (line 87) is missing this prop. For consistency, either add className='px-1' to the third AccordionContent or remove it from all if not needed.

Suggested change

<AccordionContent>

<AccordionContent className='px-1'>

Copilot · 2025-11-22T16:16:15Z

+					<Icons.ExternalLink size={16} />
+				</AlertTitle>
+				<AlertDescription>
+					If you need to control a LED strip over WiFi, add the <code>node-pixel firmare</code> to{' '}


Spelling error: 'firmare' should be 'firmware'.

Suggested change

If you need to control a LED strip over WiFi, add the <code>node-pixel firmare</code> to{' '}

If you need to control a LED strip over WiFi, add the <code>node-pixel firmware</code> to{' '}

Copilot · 2025-11-22T16:16:15Z

+import { Toaster, TooltipProvider } from '@microflow/ui';
 import { ReactFlowProvider } from '@xyflow/react';
 import { createRoot } from 'react-dom/client';
 import { useDarkMode, useLocalStorage } from 'usehooks-ts';


Unused import useLocalStorage.

Suggested change

import { useDarkMode, useLocalStorage } from 'usehooks-ts';

import { useDarkMode } from 'usehooks-ts';

Copilot · 2025-11-22T16:16:16Z

+	toast,
 } from '@microflow/ui';
 import { useLocalStorage } from 'usehooks-ts';
 import { useAppStore } from '../../stores/app';


Unused import useAppStore.

Suggested change

import { useAppStore } from '../../stores/app';

Copilot · 2025-11-22T16:16:16Z

-} from '@microflow/ui';
+import { Icons, Switch, Tooltip, TooltipContent, TooltipTrigger } from '@microflow/ui';
 import { Position, useUpdateNodeInternals } from '@xyflow/react';
 import { useEffect, useMemo, useRef } from 'react';


Unused import useMemo.

Suggested change

import { useEffect, useMemo, useRef } from 'react';

import { useEffect, useRef } from 'react';

xiduzo added 2 commits November 22, 2025 17:10

single settings form

6d01bad

bump version

97f9060

Copilot AI review requested due to automatic review settings November 22, 2025 16:11

xiduzo merged commit 64f6eaa into main Nov 22, 2025
6 of 10 checks passed

xiduzo deleted the feature/refactor-settings branch November 22, 2025 16:12

Copilot started reviewing on behalf of xiduzo November 22, 2025 16:12 View session

vercel Bot deployed to Preview November 22, 2025 16:13 View deployment

Copilot finished reviewing on behalf of xiduzo November 22, 2025 16:14

Copilot AI reviewed Nov 22, 2025

View reviewed changes

xiduzo removed the request for review from Copilot March 23, 2026 22:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(Settings): a single settings pane#97

refactor(Settings): a single settings pane#97
xiduzo merged 2 commits into
mainfrom
feature/refactor-settings

xiduzo commented Nov 22, 2025

Uh oh!

vercel Bot commented Nov 22, 2025

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Nov 22, 2025

Uh oh!

Copilot AI Nov 22, 2025

Uh oh!

Copilot AI Nov 22, 2025

Uh oh!

Copilot AI Nov 22, 2025

Uh oh!

Copilot AI Nov 22, 2025

Uh oh!

Copilot AI Nov 22, 2025

Uh oh!

Copilot AI Nov 22, 2025

Uh oh!

Copilot AI Nov 22, 2025

Uh oh!

Copilot AI Nov 22, 2025

Uh oh!

Copilot AI Nov 22, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	disableMagnification && 'hover:bg-muted-foreground transition-colors',
	disableMagnification && 'transition-colors',

	const { user, mqttConfig, setMqttConfig, setSettingsOpen } = useAppStore();
	const { user, mqttConfig, setMqttConfig } = useAppStore();

	<Button type='submit' disabled={!form.formState.dirtyFields \|\| !form.formState.isValid}>
	<Button type='submit' disabled={!form.formState.isDirty \|\| !form.formState.isValid}>

	If you need to control a LED strip over WiFi, add the <code>node-pixel firmare</code> to{' '}
	If you need to control a LED strip over WiFi, add the <code>node-pixel firmware</code> to{' '}

	import { useDarkMode, useLocalStorage } from 'usehooks-ts';
	import { useDarkMode } from 'usehooks-ts';

	import { useEffect, useMemo, useRef } from 'react';
	import { useEffect, useRef } from 'react';

Conversation

xiduzo commented Nov 22, 2025

Uh oh!

vercel Bot commented Nov 22, 2025

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Copilot AI Nov 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 22, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants