Ncto 155 make notifications system by Notgoyome · Pull Request #46 · Naucto/Frontend

Notgoyome · 2026-02-28T01:31:40Z

Jira ticket

https://naucto.atlassian.net/jira/software/projects/NCTO/boards/2?selectedIssue=NCTO-155

What does your MR do ?

adding notification system

Use of websocket to send notifications if the user is connected.
on page load, get notifications

How to test it

go to swagger, there will be am api call notification test which can be used to notify itself (need backend branch)

Screenshot

Notes

I also added a docker-compose.dev.yml, let you me know if its good (this file is used to get access to hot reload)

…stDto for handling notifications

…ications handling

…rove UI read

src/shared/navbar/notifications/NotificationMenu.tsx

package.json

…ility

Copilot

Pull request overview

Adds a frontend notification system integrated into the navbar, backed by a new notifications API client and a WebSocket connection to receive/update notifications in real time.

Changes:

Introduces notification UI components (badge + menu) and NotificationItem typing.
Adds OpenAPI-generated notifications service/models and exports them from the API index.
Adds a dev Docker Compose setup for hot reload and updates README accordingly.

Reviewed changes

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

Show a summary per file

File	Description
src/shared/navbar/notifications/types.ts	Adds the `NotificationItem` type used across the notification UI.
src/shared/navbar/notifications/NotificationMenu.tsx	Implements the menu container that renders notification items (or empty state).
src/shared/navbar/notifications/NotificationListItem.tsx	Adds UI for a single notification entry and a “Mark as read” action.
src/shared/navbar/notifications/NotificationBox.tsx	Connects to a notifications WebSocket, maintains notification state, renders badge/menu, and calls mark-as-read API.
src/shared/navbar/NavBar.tsx	Inserts `NotificationBox` into the navbar.
src/shared/authOverlay/AuthOverlay.tsx	Stops storing a refresh token on login/register (aligns with API DTO change).
src/assets/inbox.svg	Adds an inbox icon asset.
src/api/services/NotificationsService.ts	Adds generated API client for notifications endpoints.
src/api/models/NotificationTestDto.ts	Adds generated DTO model for test notifications.
src/api/models/AuthResponseDto.ts	Removes `refresh_token` from the auth response model.
src/api/index.ts	Exports notifications types/services (and an additional model export).
src/api/core/OpenAPI.ts	Changes default API base URL fallback to localhost.
package.json	Removes `eslint-config-airbnb-typescript` dev dependency.
docker-compose.dev.yml	Adds a dev-only compose setup using Bun + volume mounts for hot reload.
bun.lock	Updates lockfile to reflect dependency changes.
README.md	Documents the new dev docker compose command.

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

README.md

src/shared/navbar/notifications/NotificationBox.tsx

src/shared/navbar/notifications/NotificationListItem.tsx

src/shared/navbar/notifications/NotificationBox.tsx

src/shared/navbar/notifications/NotificationListItem.tsx

src/shared/navbar/notifications/NotificationMenu.tsx

src/api/core/OpenAPI.ts

Copilot · 2026-02-28T03:07:25Z

docker-compose.dev.yml

@@ -0,0 +1,15 @@
+services:
+  frontend:
+    image: oven/bun:latest


Using oven/bun:latest makes the dev environment non-reproducible (the image can change under you and break hot reload or dependency installs). Pin to a specific Bun tag/version (and optionally document the required Bun version) to keep dev setups stable.

Suggested change

image: oven/bun:latest

image: oven/bun:1.1.34

…teraction in notification actions

…nEntry

… as read

…nd simplify NotificationMenu structure

alexis-belmonte · 2026-02-28T19:25:48Z

src/api/core/OpenAPI.ts


 export const OpenAPI: OpenAPIConfig = {
-    BASE: import.meta.env.VITE_BACKEND_URL || 'none',
+    BASE: (import.meta.env.VITE_BACKEND_URL || "none "),


Why this change?

b9328ea i did something and forgot to revert completely mb

alexis-belmonte · 2026-02-28T19:27:19Z

src/shared/navbar/notifications/NotificationBox.tsx

+  const [showMenu, setShowMenu] = useState(false);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>(undefined);
+  const socketRef = useRef<WebSocket | null>(null);
+  const backendUrl = (import.meta.env.VITE_BACKEND_URL || "http://localhost:3000").trim();


Is there a way for you to get that info from OpenAPI.BASE?

src/shared/navbar/notifications/NotificationBox.tsx

alexis-belmonte · 2026-02-28T19:29:12Z

src/shared/navbar/notifications/NotificationBox.tsx

+      try {
+        socket.send(JSON.stringify({ type: "auth", token }));
+      } catch {
+        // eslint-disable-next-line no-console


I prefer that you remove this and let it just warn when linting -- maybe we could make a simple API to do logging so that we can use internally console.* or something else

But I don't really get it why it was decided to ban the use of console altogether though

alexis-belmonte · 2026-02-28T19:30:49Z

docker-compose.dev.yml

@@ -0,0 +1,15 @@
+services:


Ialso have a docker-compose.dev.yml file on my frontend branch, this will conflict -- I'll see if I either keep your version or mine

alexis-belmonte · 2026-02-28T19:31:20Z

docker-compose.dev.yml

+      - "3001:3001"
+    environment:
+      - CHOKIDAR_USEPOLLING=true
+    command: sh -lc "bun install --frozen-lockfile && bun run dev --host 0.0.0.0 --port 3001"


I don't like this, please declare a rule in the package.json file instead of writing commands to do the work so that we can also run it outside of Docker

will change depending of your choice 👍

alexis-belmonte · 2026-02-28T19:32:53Z

src/shared/navbar/notifications/NotificationBox.tsx

+      ),
+    );
+    NotificationsService.notificationsControllerMarkAsRead(notificationId).catch(() => {
+      // eslint-disable-next-line no-console


Ditto as previous comment

…I.BASE

Louis-rollet

Seems all good!

Notgoyome added 8 commits February 15, 2026 18:17

[MISC][CLEANUP] remove useless line

43906a0

[NOTIFICATIONS][FEATURE]: add notifications inbox

3850d31

[MISC][FEATURE]: add dev docker compose to get hot reload

d3d7ed1

[CONFIG][FIX]: update BASE URL fallback to use localhost for OpenAPI

2091eb5

[NOTIFICATIONS][FEATURE]: add NotificationsService and NotificationTe…

90a2826

…stDto for handling notifications

[NOTIFICATIONS][FEATURE]: better notifications and reading/init notif…

2276177

…ications handling

[NOTIFICATIONS][REFACTO]: refactor notification read handling and imp…

483d4e5

…rove UI read

[NOTIFICATIONS][FEAT]: api generate

a4c93d2

Notgoyome force-pushed the NCTO-155-make-notifications-system branch from 4085a40 to a4c93d2 Compare February 28, 2026 02:33

[NOTIFICATIONS][CLEANUP]: remove comments

c6cf3cd

Notgoyome commented Feb 28, 2026

View reviewed changes

src/shared/navbar/notifications/NotificationMenu.tsx Outdated Show resolved Hide resolved

package.json Outdated Show resolved Hide resolved

[NOTIFICATIONS][item]:notification item as a component for menu lisib…

14b2266

…ility

Notgoyome requested a review from Copilot February 28, 2026 03:01

Copilot started reviewing on behalf of Notgoyome February 28, 2026 03:02 View session

Copilot AI reviewed Feb 28, 2026

View reviewed changes

Notgoyome self-assigned this Feb 28, 2026

Notgoyome added 4 commits February 28, 2026 12:25

[DOCS][UPDATE]: clean readme

b179283

[NOTIFICATIONS][FEAT]: error handling

9019972

[NOTIFICATIONS][FEAT]: replace Typography with MenuItem for better in…

d25454d

…teraction in notification actions

[CONFIG][UPDATE]: change default BASE URL to "none"

df060f3

Notgoyome force-pushed the NCTO-155-make-notifications-system branch from f4a6b97 to df060f3 Compare February 28, 2026 03:36

Notgoyome added 3 commits February 28, 2026 12:49

[NOTIFICATIONS][UPDATE]: remove cursor pointer style from Notificatio…

58d34b3

…nEntry

[NOTIFICATIONS][UPDATE]: add error handling for marking notifications…

465c254

… as read

[NOTIFICATIONS][UPDATE]: refactor NotificationEntry to use MenuItem a…

6f7ade7

…nd simplify NotificationMenu structure

Notgoyome force-pushed the NCTO-155-make-notifications-system branch from 6786b18 to 6f7ade7 Compare February 28, 2026 04:06

Notgoyome requested review from Louis-rollet and alexis-belmonte February 28, 2026 04:07

Notgoyome changed the title ~~[DRAFT] Ncto 155 make notifications system~~ Ncto 155 make notifications system Feb 28, 2026

alexis-belmonte requested changes Feb 28, 2026

View reviewed changes

[API][FIX] revert

b9328ea

Notgoyome added 2 commits March 1, 2026 14:50

[NOTIFICATIONS][UPDATE]: refactor backend URL retrieval to use OpenAP…

31b971b

…I.BASE

[NOTIFICATIONS][UPDATE]: removed eslint disable next line

5c88326

Notgoyome requested a review from alexis-belmonte March 1, 2026 05:54

Louis-rollet approved these changes Mar 1, 2026

View reviewed changes

[DEV][REMOVE]: delete docker-compose.dev.yml file

a4ff490

alexis-belmonte mentioned this pull request Mar 7, 2026

NCTO-23 client server system for multiplayer #47

Merged

Conversation

Notgoyome commented Feb 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Jira ticket

What does your MR do ?

How to test it

Screenshot

Notes

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Feb 28, 2026

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!

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!

Notgoyome Mar 1, 2026 • 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!

Louis-rollet left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Notgoyome commented Feb 28, 2026 •

edited

Loading

Notgoyome Mar 1, 2026 •

edited

Loading