feat: add nickname field to web server settings#3891
feat: add nickname field to web server settings#3891zaaakher wants to merge 4 commits intoDokploy:canaryfrom
Conversation
dosubot
bot
added
the
size:M
|
I forgot to mention, I included the defaultformatter to be biome in the vscode settings. So that if a contributor has prettier and biome the settings will automatically set biome as the default formatter |
|
Related Documentation Checked 7 published document(s) in 1 knowledge base(s). No updates required. How did I do? Any feedback? |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
apps/dokploy/pages/_app.tsx
Outdated
| useEffect(() => { | ||
| document.title = pageTitle; | ||
| }, [pageTitle]); |
There was a problem hiding this comment.
Redundant document.title assignment
The useEffect on line 38 sets document.title = pageTitle directly, but the <Head> component at line 52 already sets <title>{pageTitle}</title> through Next.js conventions. In Next.js, the <Head> component from next/head reactively updates the DOM <title> element whenever pageTitle changes, making the useEffect redundant.
Additionally, this useEffect could interfere with page-level <Head> titles set by individual pages: the document.title write fires once when the query resolves and then persists, potentially fighting with page-specific titles on subsequent navigations.
Consider removing the useEffect and relying solely on the <Head> component:
| useEffect(() => { | |
| document.title = pageTitle; | |
| }, [pageTitle]); | |
| return ( |
| const { data: webServerSettings } = | ||
| api.settings.getWebServerSettings.useQuery(); | ||
|
|
||
| const pageTitle = webServerSettings?.nickname | ||
| ? `[${webServerSettings.nickname}] - Dokploy` | ||
| : "Dokploy"; |
There was a problem hiding this comment.
getWebServerSettings called on every page including unauthenticated routes
_app.tsx wraps all pages, including public/unauthenticated routes such as the login page. getWebServerSettings is a protectedProcedure that requires authentication, so it will produce a failed (401) request for every unauthenticated page load. While React Query catches this gracefully and webServerSettings stays undefined (defaulting pageTitle to "Dokploy"), it creates unnecessary failed API calls on every login/signup visit.
Consider guarding the query with an authentication check, or using the enabled option so the query only fires when a user session exists:
const { data: session } = api.auth.getSession.useQuery(); // or however auth state is exposed
const { data: webServerSettings } =
api.settings.getWebServerSettings.useQuery(undefined, {
enabled: !!session,
});
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
1 participant
The problem I'm solving
I'm a self-hosting hobbyist and i have 2 dokploy instances (one in a laptop in my room and another in a VPS I'm paying for)
The following two tabs are for two different Dokploy instances and its hard to tell which is which
nicknamefieldBefore
After
Updated Settings UI
Currently the nickname only shows up when i'm in the home page of my dokploy instance. Different pages don't use the nickname yet. If the maintainers are interested i can make another PR to have that nickname persist in all pages.
Kindly let me know if I missed something.
Greptile Summary
This PR adds a
nicknamefield to the web server settings that gets displayed in the browser tab title as[nickname] - Dokploy, helping users distinguish between multiple Dokploy instances. The database migration, schema changes, API router wiring, and form UI are all cleanly implemented.Key observations:
_app.tsxsets the page title via both a<Head><title>element and auseEffect(() => { document.title = pageTitle }, [pageTitle]). In Next.js, the<Head>component fromnext/headalready handles reactive DOM title updates — theuseEffectis unnecessary and can be removed.getWebServerSettingsquery is aprotectedProcedurebut is now called unconditionally in_app.tsx(which wraps all pages, including the login page). This generates a failed 401 API request on every unauthenticated page load. Addingenabled: !!session(or an equivalent auth guard) would avoid this.Confidence Score: 4/5
useEffect/<Head>redundancy is harmless, the unauthenticated query call fails gracefully (React Query swallows the error), and missing length validation is a minor UX concern. No data integrity or security issues were found.useEffectand unconditional protected query on all pages.Last reviewed commit: 7a50f77
(3/5) Reply to the agent's comments like "Can you suggest a fix for this @greptileai?" or ask follow-up questions!