Desktop: Replace the edit profile config menu option with a gui to manage profiles #13771

mrjo118 · 2025-11-23T01:03:21Z

Currently on the desktop app, it is possible to create new profiles and switch between them via menu options. However, in order to rename or delete profiles, unlike the mobile app (which has a manage profiles screen), this can only be done by editing the profiles.json file which can be accessed via the edit profile config menu option, and manually deleting the matching directory in the case of deletion. This is not user friendly for non technical users, and could lead to them messing up their Joplin profiles, or even deleting the wrong profile.

This PR replaces the edit profile config menu option with a manage profiles option, which provides a GUI for renaming and deleting profiles. This GUI is based on the note attachments management screen.

Testing

I have tested the change via the UI. Things which were tested:

The profiles are presented in the order specified in profiles.json
Prevent the user from deleting the Default profile - the user is presented with an error message
The delete button is hidden for the current profile is use, to prevent deletion
When renaming or deleting a profile, the profile list is updated in the File > Switch profile menu, profiles.json is updated correctly, and the relevant profile directory is deleted (for a deletion)
Profile deletion does not fail, if the profile directory does not exist for the entry in profiles.json
The manage profiles menu option is disabled when only the default profile exists
The profile list is scroll-able when it exceeds the height of the window and the table shrinks responsively when the window width is reduced

See video:

Please note, the search bar has since been removed.

electron_JKokiZKFTb.mp4

personalizedrefrigerator

Thank you for working on this! I've left a few comments based on an initial review of the code.

Edit: The new ProfileManagementScreen code is very similar to the existing resource/attachment management screen. A refactor could make sense here to reduce code duplication.

personalizedrefrigerator · 2025-11-23T02:48:49Z

packages/app-desktop/gui/ProfileManagementScreen.tsx

+	// eslint-disable-next-line @typescript-eslint/ban-types -- Changing types for these variables would be too big of a refactoring
+	dispatch: Function;


Suggested change

// eslint-disable-next-line @typescript-eslint/ban-types -- Changing types for these variables would be too big of a refactoring

dispatch: Function;

dispatch: Dispatch;

Types: Dispatch can be imported from 'redux';

personalizedrefrigerator · 2025-11-23T02:49:19Z

packages/app-desktop/gui/ProfileManagementScreen.tsx

+	);
+};
+
+class ProfileManagementScreenComponent extends React.Component<Props, State> {


Style: Please use function components for new code.

personalizedrefrigerator · 2025-11-23T02:50:27Z

packages/app-desktop/gui/ProfileManagementScreen.tsx

+		const style = this.props.style;
+		const theme = themeStyle(this.props.themeId);
+
+		const rootStyle: CSSProperties = {


Style: Use SCSS for styling components in new code.

mrjo118 · 2025-11-27T14:32:57Z

@personalizedrefrigerator Using scss for styling looks to be problematic with regards to theme based styling. The themeToCss function will allow you to get top level styles in variables from theme.ts eg. using --joplin-font-family, to access those values in scss. But how would you get a nested style such as theme.textStyle or theme.buttonStyle?

You could use both 'className' and 'style' on an element, but the problem is that 'style' would take precedence as it will be inline, so anything you put in the scss would have lower priority unless you use !important, which feels like bad practice. I could get around this by duplicating the styling in theme.ts / globalStyle.ts in my scss file, but that feels counter productive and would make using scss a drawback rather than improving maintainability.

How would you recommend to deal with this?

…18/joplin into add-manage-profiles-screen

mrjo118 · 2025-11-27T21:09:41Z

@personalizedrefrigerator Ok, so I have actioned your last 3 comments. I implemented the styling with scss as best as I could, but I had to mix and match with global inline styling as well, in order to avoid code duplication and get the dynamic styling (such as the container height) to work. I turns out it was not necessary to include the theme based styling for the parts which I needed to add which would conflict, but I do think some more guidance should be added on the https://joplinapp.org/help/dev/spec/desktop_styling/ page for how to deal with this scenario. Also I had to use lower camel case for 'single word' class names, in order to avoid linting issues with the spell check where it is actually 2 words combined.

With the new changes, the layout looks equivalent to the original and I have verified scrolling and resizing all work correctly. I tested the screen with the dark theme as well and verified the styling matches how other screens look with the dark theme.

Edit: The new ProfileManagementScreen code is very similar to the existing resource/attachment management screen. A refactor could make sense here to reduce code duplication.

Regarding this, I'm not sure combining the screen logic with the attachment screen is a good idea in this case. To do that would require extracting the column definitions, the data, the buttons and their behaviour out of the component to do that, which is quite a lot of uncommon logic to be honest. Additionally, in order to navigate to the ProfileManagementScreen, the screen is created via the Root.tsx render method, which I don't think will allow passing properties into the ProfileManagementScreen at current, so it could require a lot of refactoring in order to make it possible to re-use the base component.

@mrjo118

Main goal: Address [this comment](laurent22#13771 (comment)) by @mrjo118 by adding utilities that allow extending base styles. See also: [RSCSS: Simplifying nested components](https://ricostacruz.com/rscss/nested-components.html).

laurent22 · 2025-11-29T10:10:23Z

packages/app-desktop/commands/index.ts

 import * as exportFolders from './exportFolders';
 import * as exportNotes from './exportNotes';
 import * as focusElement from './focusElement';
+import * as manageProfiles from './manageProfiles';


One thing to keep in mind is that commands are user-facing and may be used in plugins and some on keyboard shortcuts. It's unlikely this one is used anywhere but as a general rule we should be careful, unless we have a very good reason to break backward compatibility.

We can always make a shortcut from the old command to the new one, however in this case I don't see a strong reason to change the name. manageProfiles is ok I guess, and so is editProfileConfig. If anything editSomething is common throughout the app while there's no instance of manageSomething so I would favor the existing command.

Or maybe we keep editProfileConfig and add a new one but I think it should be called something like showProfileEditor, like on mobile

I have now re-instated the editProfileConfig command and just not used it anywhere in the UI. I've also renamed the manageProfiles command to be showProfileEditor

laurent22 · 2025-11-29T10:17:47Z

packages/app-desktop/gui/ProfileEditor.tsx

@@ -0,0 +1,210 @@
+import * as React from 'react';


Should be called ProfileEditor like on mobile

laurent22 · 2025-11-29T10:21:28Z

packages/app-desktop/gui/ProfileManagementScreen.tsx

+			await saveProfileConfig(`${Setting.value('rootProfileDir')}/profiles.json`, newProfileConfig);
+			dispatch({
+				type: 'PROFILE_CONFIG_SET',
+				value: newProfileConfig,
+			});
+		} catch (error) {
+			logger.error(error);
+			bridge().showErrorMessageBox(error.message);
+		}


Please refactor to avoid duplicating the code - maybe move all this to a function and call it from both here and onProfileDelete

…reen

mrjo118 · 2025-12-01T23:44:03Z

As #13804 is suggesting changes to the resources screen which this is based on, the layout is diverging. The search is not really necessary for this screen, as you would not expect a user to have an excessive amount of profiles, so I have just removed it to reduce the maintenance impact. See screenshot:

mrjo118 added 6 commits November 22, 2025 23:10

Add a manage profiles screen

1a03202

Update comment

507b420

Removed edit profile config option

92d6a4a

Remove any types

2bc005e

Rerun pipeline

19af232

Merge branch 'dev' into add-manage-profiles-screen

b3400c2

personalizedrefrigerator reviewed Nov 23, 2025

View reviewed changes

Use dispatch type

16d3744

mrjo118 added 3 commits November 27, 2025 20:10

Change to a function component and use scss WIP with height issue

997f691

Fix issues

d2f7227

Merge branch 'add-manage-profiles-screen' of https://github.com/mrjo1…

a6e1343

…18/joplin into add-manage-profiles-screen

laurent22 reviewed Nov 29, 2025

View reviewed changes

mrjo118 added 4 commits November 29, 2025 18:39

Merge remote-tracking branch 'origin/dev' into add-manage-profiles-sc…

2e80d4e

…reen

PR feedback

0fd78e0

Remove remnants of old naming

e7f95b3

Remove search bar

6168d99

Rerun pipeline

642733a

personalizedrefrigerator mentioned this pull request Dec 2, 2025

Chore: Desktop: Migrate the "Share note" dialog to RSCSS #13842

Open

		// eslint-disable-next-line @typescript-eslint/ban-types -- Changing types for these variables would be too big of a refactoring
		dispatch: Function;

	// eslint-disable-next-line @typescript-eslint/ban-types -- Changing types for these variables would be too big of a refactoring
	dispatch: Function;
	dispatch: Dispatch;

Uh oh!

Desktop: Replace the edit profile config menu option with a gui to manage profiles #13771

Are you sure you want to change the base?

Desktop: Replace the edit profile config menu option with a gui to manage profiles #13771

Conversation

mrjo118 commented Nov 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Testing

Uh oh!

personalizedrefrigerator left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mrjo118 commented Nov 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mrjo118 commented Nov 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mrjo118 commented Dec 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mrjo118 commented Nov 23, 2025 •

edited

Loading

personalizedrefrigerator left a comment •

edited

Loading

mrjo118 commented Nov 27, 2025 •

edited

Loading

mrjo118 commented Nov 27, 2025 •

edited

Loading

mrjo118 commented Dec 1, 2025 •

edited

Loading