From 15c81a098207ad830181c1a352dbc7367ba80ce4 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Wed, 1 Oct 2025 03:13:42 +0000 Subject: [PATCH 1/2] feat: Add top-loading progress bar Adds a top-loading progress bar that appears during page transitions to improve user experience by providing visual feedback during navigation. - Integrated the `nextjs-toploader` package, a lightweight and efficient solution for Next.js applications. - The progress bar is initialized in the main `_app.tsx` file to ensure it's active across the entire application. - This feature works seamlessly with the Next.js App Router and does not interfere with server-side rendering (SSR). --- apps/dokploy/package.json | 3 ++- apps/dokploy/pages/_app.tsx | 2 ++ dev_server.log | 0 pnpm-lock.yaml | 23 +++++++++++++++++++++++ 4 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 dev_server.log diff --git a/apps/dokploy/package.json b/apps/dokploy/package.json index 2c5f2ed27..2bb825944 100644 --- a/apps/dokploy/package.json +++ b/apps/dokploy/package.json @@ -112,7 +112,6 @@ "i18next": "^23.16.8", "input-otp": "^1.4.2", "js-cookie": "^3.0.5", - "yaml": "2.8.1", "lodash": "4.17.21", "lucide-react": "^0.469.0", "micromatch": "4.0.8", @@ -120,6 +119,7 @@ "next": "^15.3.2", "next-i18next": "^15.4.2", "next-themes": "^0.2.1", + "nextjs-toploader": "^3.9.17", "node-os-utils": "1.3.7", "node-pty": "1.0.0", "node-schedule": "2.1.1", @@ -153,6 +153,7 @@ "use-resize-observer": "9.1.0", "ws": "8.16.0", "xterm-addon-fit": "^0.8.0", + "yaml": "2.8.1", "zod": "^3.25.32", "zod-form-data": "^2.0.7" }, diff --git a/apps/dokploy/pages/_app.tsx b/apps/dokploy/pages/_app.tsx index 5a69130b0..706dbbba6 100644 --- a/apps/dokploy/pages/_app.tsx +++ b/apps/dokploy/pages/_app.tsx @@ -7,6 +7,7 @@ import Head from "next/head"; import Script from "next/script"; import { appWithTranslation } from "next-i18next"; import { ThemeProvider } from "next-themes"; +import NextTopLoader from "nextjs-toploader"; import type { ReactElement, ReactNode } from "react"; import { SearchCommand } from "@/components/dashboard/search-command"; import { Toaster } from "@/components/ui/sonner"; @@ -57,6 +58,7 @@ const MyApp = ({ disableTransitionOnChange forcedTheme={Component.theme} > + {getLayout()} diff --git a/dev_server.log b/dev_server.log new file mode 100644 index 000000000..e69de29bb diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6df6799ac..98be77cca 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -346,6 +346,9 @@ importers: next-themes: specifier: ^0.2.1 version: 0.2.1(next@15.3.2(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + nextjs-toploader: + specifier: ^3.9.17 + version: 3.9.17(next@15.3.2(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0) node-os-utils: specifier: 1.3.7 version: 1.3.7 @@ -6241,6 +6244,13 @@ packages: sass: optional: true + nextjs-toploader@3.9.17: + resolution: {integrity: sha512-9OF0KSSLtoSAuNg2LZ3aTl4hR9mBDj5L9s9DZiFCbMlXehyICGjkIz5dVGzuATU2bheJZoBdFgq9w07AKSuQQw==} + peerDependencies: + next: '>= 6.0.0' + react: '>= 16.0.0' + react-dom: '>= 16.0.0' + node-abort-controller@3.1.1: resolution: {integrity: sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==} @@ -6339,6 +6349,9 @@ packages: resolution: {integrity: sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==} deprecated: This package is no longer supported. + nprogress@0.2.0: + resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==} + object-assign@4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} @@ -13714,6 +13727,14 @@ snapshots: - '@babel/core' - babel-plugin-macros + nextjs-toploader@3.9.17(next@15.3.2(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0): + dependencies: + next: 15.3.2(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + nprogress: 0.2.0 + prop-types: 15.8.1 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + node-abort-controller@3.1.1: {} node-addon-api@5.1.0: {} @@ -13798,6 +13819,8 @@ snapshots: gauge: 3.0.2 set-blocking: 2.0.0 + nprogress@0.2.0: {} + object-assign@4.1.1: {} object-hash@3.0.0: {} From e4aefe7f9dc02ba6580e900186fda53cfb1f1015 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Wed, 1 Oct 2025 03:35:29 +0000 Subject: [PATCH 2/2] feat: Add theme-aware top-loading progress bar This commit introduces a top-loading progress bar that provides visual feedback during page transitions, improving the user's navigation experience. - **Package Integration:** The `nextjs-toploader` package has been added to provide a lightweight and efficient progress bar solution for Next.js. - **Theme-Aware Color:** The progress bar's color is dynamically set using the `hsl(var(--sidebar-ring))` CSS variable, ensuring it automatically adapts to the application's current theme (light or dark mode). - **Implementation:** The `NextTopLoader` component is integrated into the main `_app.tsx` file, making it active across the entire application. --- apps/dokploy/pages/_app.tsx | 2 +- dev_server.log | 0 2 files changed, 1 insertion(+), 1 deletion(-) delete mode 100644 dev_server.log diff --git a/apps/dokploy/pages/_app.tsx b/apps/dokploy/pages/_app.tsx index 706dbbba6..b59468b21 100644 --- a/apps/dokploy/pages/_app.tsx +++ b/apps/dokploy/pages/_app.tsx @@ -58,7 +58,7 @@ const MyApp = ({ disableTransitionOnChange forcedTheme={Component.theme} > - + {getLayout()} diff --git a/dev_server.log b/dev_server.log deleted file mode 100644 index e69de29bb..000000000