hey @HridyaKK no updates from you on this ticket, hence removing you as the assignee. Please feel free to re-claim if you feel like working on this.
For the meanwhile lets open up this ticket for others to pick it up

Thanks

Thank you for tagging this task with good first task for Wikimedia newcomers!

Newcomers often may not be aware of things that may seem obvious to seasoned contributors, so please take a moment to reflect on how this task might look to somebody who has never contributed to Wikimedia projects.

A good first task is a self-contained, non-controversial task with a clear approach. It should be well-described with pointers to help a completely new contributor, for example it should clearly point to the codebase URL and provide clear steps to help a contributor get set up for success. We've included some guidelines at https://phabricator.wikimedia.org/tag/good_first_task/ !

Thank you for helping us drive new contributions to our projects <3

hey @Jason2000-cpu do let me know if you need some context around anything regarding the tool. Feel free to post here on phab, i'll help you resolve them
thanks ;-)

Hello @Reputation22 . Is there a design of how the 404 page should look like? I am trying to find one

Ideally something like this. You can suggest some new art work for 404 if you have in mind. We have one planned for under-maintenance, you can take reference from it

PFA

@Reputation22 Hello

I am trying to run the application in development using the below docker command

docker-compose -f .\docker-compose.dev.yml up --build -V

but getting the error below

58.27 npm error code EINTEGRITY
58.27 npm error sha512-k3Da+QreMb9waaGCHNAHox5QqxnZEYlQmvIVYwQibrI6OpIRyIIyFGgDV5dXRLr1AJ32JLqEh0VxQEq20dFskw== integrity checksum failed when using sha512: wanted sha512-k3Da+QreMb9waaGCHNAHox5QqxnZEYlQmvIVYwQibrI6OpIRyIIyFGgDV5dXRLr1AJ32JLqEh0VxQEq20dFskw== but got sha512-r/UcFj7JS3lRjv9cgYjgpDNbAsGUdqU64n6ZUOgSF7s1UFBbGu7pUDwKEjHu9NBCy6j2AmmjNW4rijR4De65eA==. (2809 bytes)
58.27 npm verbose cwd /app
58.28 npm verbose os Linux 6.6.87.2-microsoft-standard-WSL2
58.28 npm verbose node v18.20.8
58.28 npm verbose npm v10.8.2
58.28 npm verbose exit 1
58.28 npm verbose code 1
58.28 npm error A complete log of this run can be found in: /root/.npm/_logs/2025-11-17T11_32_14_558Z-debug-0.log
58.33 npm verbose stack Error: command failed
58.33 npm verbose stack at promiseSpawn (/usr/local/lib/node_modules/npm/node_modules/@npmcli/promise-spawn/lib/index.js:22:22)
58.33 npm verbose stack at spawnWithShell (/usr/local/lib/node_modules/npm/node_modules/@npmcli/promise-spawn/lib/index.js:124:10)
58.33 npm verbose stack at promiseSpawn (/usr/local/lib/node_modules/npm/node_modules/@npmcli/promise-spawn/lib/index.js:12:12)
58.33 npm verbose stack at runScriptPkg (/usr/local/lib/node_modules/npm/node_modules/@npmcli/run-script/lib/run-script-pkg.js:77:13)
58.33 npm verbose stack at runScript (/usr/local/lib/node_modules/npm/node_modules/@npmcli/run-script/lib/run-script.js:12:10)
58.33 npm verbose stack at async CI.exec (/usr/local/lib/node_modules/npm/lib/commands/ci.js:116:9)
58.33 npm verbose stack at async Npm.exec (/usr/local/lib/node_modules/npm/lib/npm.js:207:9)
58.33 npm verbose stack at async module.exports (/usr/local/lib/node_modules/npm/lib/cli/entry.js:74:5)
58.33 npm verbose pkgid video-cut-tool@0.5.0
58.33 npm error code 1
58.33 npm error path /app
58.33 npm error command failed
58.33 npm error command sh -c npm --prefix ./server install
58.33 npm verbose cwd /app
58.33 npm verbose os Linux 6.6.87.2-microsoft-standard-WSL2
58.33 npm verbose node v18.20.8
58.33 npm verbose npm v10.8.2
58.33 npm notice
58.33 npm notice New major version of npm available! 10.8.2 -> 11.6.2
58.33 npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.6.2
58.33 npm notice To update run: npm install -g npm@11.6.2
58.33 npm notice
58.33 npm verbose exit 1
58.33 npm verbose code 1

58.33 npm error A complete log of this run can be found in: /root/.npm/_logs/2025-11-17T11_31_40_582Z-debug-0.log

Dockerfile.dev:23

21 |     ENV WATCHPACK_POLLING=true

22 |

23 | >>> RUN npm ci --legacy-peer-deps --loglevel verbose

24 |

25 |     EXPOSE 3000 4000

failed to solve: process "/bin/sh -c npm ci --legacy-peer-deps --loglevel verbose" did not complete successfully: exit code: 1

View build details: docker-desktop://dashboard/build/default/default/vmyqx6fjiu1o8rm6syc098sql

[Hi, please check the Preview below the comment field, to make sure pasted text is correctly formatted and remains readable.]

58.27 npm error code EINTEGRITY

What have you tried to fix this problem? First result I get when searching on Google is https://stackoverflow.com/questions/47545940/when-i-run-npm-install-it-returns-with-err-code-eintegrity-npm-5-3-0

Hello @Aklapper Thank you I was able to fix this problem

Likely, but how? Please don't keep things mysterious :)

@Aklapper Sorry, I realized the package-lock.json file I had was outdated and so I removed it and did a fresh npm install --legacy-perer-deps This added a new package-lock.json file

In T400529#11390890, @Jason2000-cpu wrote:

@Aklapper Sorry, I realized the package-lock.json file I had was outdated and so I removed it and did a fresh npm install --legacy-perer-deps This added a new package-lock.json file

Hey @Jason2000-cpu is this resolved?

Hi @Aklapper ,
I’ve reviewed this issue and have a clear understanding of how the 404 handling for invalid edit URLs can be implemented.
I would like to work on this task. Kindly assign it to me.
Thank you.

@Kunal2512: Hi, please see https://www.mediawiki.org/wiki/New_Developers#Communication_tips - no need to ping random people (me).

Thanks for pointing this out, I’ll follow these guidelines going forward.

Hi,
I’ve drafted a possible UI direction for the common 404 page in VideoCutTool and wanted to check if this approach looks reasonable for the project.
At the moment, the idea is to keep the implementation fully React-based and lightweight, without introducing additional images or assets, and focus on a clear, purpose-driven 404 experience. That said, I wanted to ask whether this minimal approach is preferred, or if adding some simple visuals would be better for user experience.
Please let me know if this direction makes sense, or if you’d suggest any changes to the layout, wording, or overall approach. I’m happy to iterate based on feedback.
Thanks.

Hi
I’ve opened a merge request for this task:
This is the Merge Request MR-61
Please let me know if any changes are needed.

In T400529#11590287, @Kunal2512 wrote:

Hi,
I’ve drafted a possible UI direction for the common 404 page in VideoCutTool and wanted to check if this approach looks reasonable for the project.
At the moment, the idea is to keep the implementation fully React-based and lightweight, without introducing additional images or assets, and focus on a clear, purpose-driven 404 experience. That said, I wanted to ask whether this minimal approach is preferred, or if adding some simple visuals would be better for user experience.
Please let me know if this direction makes sense, or if you’d suggest any changes to the layout, wording, or overall approach. I’m happy to iterate based on feedback.
Thanks.

Hey @Kunal2512 where does the two hyperlink(s) redirect to?

Hi,their is a slight change in UI I have discarded one button because root route or home route contain the main tool and no different routes
so only have one button now redirectly to root route
Current UI :

In T400529#11593691, @Kunal2512 wrote:

Hi,their is a slight change in UI I have discarded one button because root route or home route contain the main tool and no different routes
so only have one button now redirectly to root route
Current UI :

lets have the header (nav bar), footer and sidebar in place so that this 4xx page doesn't look out of place here
also can you please share the screenshot of the mobile view?
and in dark mode as well (both website and mobile)

thanks

Done.
I’ve added the existing header, sidebar, and footer to the 404 page and fixed the layout so it matches other pages.
Screenshots below (desktop and mobile, light and dark modes).
Thanks
Desktop :

Mobile :
{F71724683}
{F71724709}

Hi
I’ve pushed the updates to the same merge request - MR-61
The 404 page now includes the existing header, sidebar and footer.
Screenshots in previous comment reflect the latest changes.

In T400529#11594059, @Kunal2512 wrote:

Hi
I’ve pushed the updates to the same merge request - MR-61
The 404 page now includes the existing header, sidebar and footer.
Screenshots in previous comment reflect the latest changes.

Sure thanks
will review in sometime (in a day or two)

Thanks, I’ll wait for the review.

Hi, please review it and let me know if there are any changes to make.

In T400529#11594060, @Reputation22 wrote:

In T400529#11594059, @Kunal2512 wrote:

Hi
I’ve pushed the updates to the same merge request - MR-61
The 404 page now includes the existing header, sidebar and footer.
Screenshots in previous comment reflect the latest changes.

Sure thanks
will review in sometime (in a day or two)