feat: sticky header, header actions, nav link to About by YuliaDemir · Pull Request #50 · AlyaEngineer/swagger-editor-app

YuliaDemir · 2026-06-30T07:18:23Z

Summary

Implemented the app header behavior for authenticated and non-authenticated users, added sticky header behavior with animation, and introduced a reusable AppLinkButton component for navigation-style buttons.

Changes Made

Added header actions for non-authenticated users:
- Sign In
- Sign Up
Added header actions for authenticated users:
- History
- Sign Out
Added navigation link to the About page in the header
Added sticky header behavior with animation when the page is scrolled.
Created reusable AppLinkButton component for link-based buttons.
Used AppLinkButton for navigation actions to keep button styling and behavior consistent across the app.

Related issue

Closes #19 #17 #9

Feature

Feature 1: App Header
Feature 7: General Requirements

Also add the matching labels from the Labels panel on the right:

Feature 1: App Header
Feature 7: General Requirements

Acceptance criteria

Feature 1: App Header

Non-auth users see Sign In / Sign Up in header (upper right) — 15
Auth users see History / Sign Out in header — 10
About link in header and footer — 10
Expired/invalid token → redirect from private routes to Main — 10
Sign In / Sign Up buttons redirect to respective form route — 15

Feature 2: Sign In / Sign Up

Sign In / Sign Up / Sign Out buttons present everywhere they should be — 10
Client-side validation (email, password: 8+ chars, letter+digit+special, Unicode) — 20
Successful login → redirect to Main — 10
Logged-in user on Sign In / Sign Up routes → redirect to Main — 10

Feature 3: Swagger Editor

Load/paste schema in JSON and YAML — 25
Auto-detect input format (JSON vs YAML) — 20
Format switch with JSON ↔ YAML conversion, no data loss — 20
Schema validation with error indication — 15
Auth users save schema; restored on next login — 10
Viewer auto-populates with endpoints on valid schema — 10
Responsive split view (horizontal/vertical by orientation) — 20

Feature 4: Swagger Viewer

Endpoint list organized by path/method — 20
Details: method, path, all param types (path/query/header/cookie) — 25
Request schema and example payloads displayed — 20
Response schema, examples, all status codes displayed — 25
Try-It-Out: fill params/headers/body, execute, show response — 20
Generate cURL + copy-to-clipboard — 10

Feature 5: History and Analytics

SSR-generated; empty state with links to editor/viewer — 15
Requests sorted by timestamp (most recent first) — 10
Server-side analytics: duration, status, timestamp, method, request size, response size, error details, endpoint/URL — 45

Feature 6: About Page

Public route, accessible to all — 5
Info about RS School course — 5
Team info (names, roles, GitHub links) — 10
Design consistent with the app — 5

Feature 7: General Requirements

i18n: 2+ languages with toggler in header — 30
Sticky header with animation on stick — 10
User-friendly error display — 10
Private routes protected (401 if not authenticated) — 5

Feature 8: YouTube Video

5–7 min YouTube walkthrough linked, covers all criteria — 50

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would break existing functionality)
Documentation update

Checklist

Self-review done
No console errors / warnings / logs
No any / @ts-ignore
Tests added / updated and passing

vercel · 2026-06-30T07:18:28Z

@YuliaDemir is attempting to deploy a commit to the alyaengineer's projects team on Vercel, but is not a member of this team. To resolve this issue, you can:

Make your repository public. Collaboration is free for open source and public repositories.
Upgrade to pro and add @YuliaDemir as a member. A Pro subscription is required to access Vercel's collaborative features.
- If you're the owner of the team, click here to upgrade and add @YuliaDemir as a member.
- If you're the user who initiated this build request, click here to request access.
- If you're already a member of the alyaengineer's projects team, make sure that your Vercel account is connected to your GitHub account.

To read more about collaboration on Vercel, click here.

AlyaEngineer · 2026-07-01T10:17:13Z

+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {


два одинаковых media-query, давай объединять :) строки 6 и 56

AlyaEngineer · 2026-07-01T10:20:56Z

+html,
+body {
+  max-width: 100%;
+}


в файле три отдельных body { } блока, совместный html, body { } и отдельный html { }. объединить бы

AlyaEngineer · 2026-07-01T10:34:53Z

+  display: flex;
+  flex-direction: column;
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;


думаю, надо еще юзать next/font для оптимизированной загрузки шрифтов

AlyaEngineer · 2026-07-01T10:36:36Z

+  const { locale } = await params;
+
+  return (
+    <html lang={locale}>


//TODO, что называется))
добавить оптимизированную загрузку шрифтов

AlyaEngineer · 2026-07-01T10:46:48Z

этот файл удаляем?

AlyaEngineer · 2026-07-01T11:07:02Z

кнопочка не полностью окрашивается 💔

AlyaEngineer · 2026-07-01T11:11:57Z

у хедера наблюдается shift layout 💔

AlyaEngineer · 2026-07-01T11:50:53Z

useScroll нигде не импортируется и копирует логику useScrollTrigger от MUI. при этом пороговое значение тоже отличается - 8 vs 32 px. что оставляем? мне кажется, лучше MUI)

AlyaEngineer · 2026-07-01T11:54:37Z

+export function Header() {
+  const isCompact = useScrollTrigger({
+    disableHysteresis: true,
+    threshold: 32,


32 - магическое число, надо положить в константу, как в хуке useScroll (по нему тоже есть комментарий)

const STICKY_SCROLL_OFFSET = 32; export function Header() { const isCompact = useScrollTrigger({ disableHysteresis: true, threshold: STICKY_SCROLL_OFFSET, });

AlyaEngineer · 2026-07-01T12:03:38Z

+          minHeight: {
+            sm: isCompact ? 52 : 64,
+          },


может здесь тоже вынести в константу? например,

const HEADER_SIZES = { compact: { minHeight: 52, py: 0.5 }, expanded: { minHeight: 64, py: 1.25 }, };

и тогда

const STICKY_SCROLL_OFFSET = 32; const HEADER_SIZES = { compact: { minHeight: 52, py: 0.5 }, expanded: { minHeight: 64, py: 1.25 }, }; export function Header() { const isCompact = useScrollTrigger({ disableHysteresis: true, threshold: STICKY_SCROLL_OFFSET, }); const { minHeight, py } = isCompact ? HEADER_SIZES.compact : HEADER_SIZES.expanded; return ( )

vercel · 2026-07-01T14:25:49Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
swagger-editor-app	Ready	Preview, Comment	Jul 1, 2026 2:26pm

* Story/1 sticky header general (#50) * feat: install next+ts+linter+prettier+ husky+redux * feat: configs + perfectionist + lint fix * feat: install scss * refactor: add some folders * feat: install i18n + basic configs * feat: add internatiolisation * feat: language switcher * feat: dependencies update * feat: add sticky header * feat: add mui Button-and-Link-like component * fix: lint * style: add style for header * refactor: remove css from language selector * refactor: add const for flex styles in the header boxes * refactor: history style as link * fix: add some fixes * feat: footer with about page link (#59) * feat: add Inter and JetBrains Mono fonts via next/font * feat: reorganize theme into palette, components, typography, theme modules * feat: add i18n translations for header navigation links * fix: prevent header layout shift on language switcher toggle click * feat: add footer with translated links and styling * test: add tests for footer * fix: correct invalid box-shadow offset * fix: fix header height * fix: fix language switcher * refactor: extract routes and external links into constants * refactor: remove leftover placeholder before merge * fix: add InitColorSchemeScript to prevent SSR flash * style: apply Prettier formatting --------- Co-authored-by: YuliaDemir <129578495+YuliaDemir@users.noreply.github.com>

* Story/1 sticky header general (#50) * feat: install next+ts+linter+prettier+ husky+redux * feat: configs + perfectionist + lint fix * feat: install scss * refactor: add some folders * feat: install i18n + basic configs * feat: add internatiolisation * feat: language switcher * feat: dependencies update * feat: add sticky header * feat: add mui Button-and-Link-like component * fix: lint * style: add style for header * refactor: remove css from language selector * refactor: add const for flex styles in the header boxes * refactor: history style as link * fix: add some fixes * feat: schema json yaml support (#63) * chore: setup libraries * feat: swagger-editor * refactor: move title and description into a separated component * refactor: moved controls into the swaggerControl component * chore: update package-lock.json * fix: fix import in swagger-view * feat: add translations into SwaggerControl, SwaggerEditor, SwaggerViewer * fix: fix title translation in main text * fix: enforce unique keys when parsing YAML * refactor: extract DEFAULT_SCHEMA into a constant * feat: add tooltip explaining disabled format toggle * test: add test coverage for schema editing flow * fix: resolve component type errors in swagger viewer * fix: add request timeout with AbortController * fix: preserve Monaco editor undo history and cursor position on format switch * fix: prevent restore fetch from overwriting user-edited schema * fix: handle rejected promise in restoreSchema to prevent unhandled rejection * fix: replace missing setEditorValue with handleEditorChange in SwaggerEditor * fix: apply syntax highlighting immediately on editor mount * fix: preserve original JSON parse error * fix: disable external $ref resolution in schema validation to prevent SSRF * refactor: split SwaggerControl into service, component, and helper move save request to schema-service extract FormatToggle component extract getSignalWithTimeout helper switch errors to toast notifications * refactor: rename useSwaggerHook and drop unnecessary useMemo * test: fix tests after refactor * refactor: extract duplicated language-setting logic into helper in SwaggerMonacoEditor * refactor: remove redundant SwaggerViewer title * fix: use translated conversionError message instead of hardcoded string * refactor: extract SchemaFormat and isRecord into shared schema-types module * fix: reserve space for status alert to prevent layout shift on locale switch * feat: sync Monaco editor theme with app color scheme * style: add shadow, border-radius, deduplicate panel styles * test: fix ReactElement import in swagger-control tests * feat: extract schema fetch logic into SchemaService with restore and save methods * fix: extract magic number into named constant * refactor: extract isRecord type guard into its own module * fix: validate restore payload and cancel restore request on unmount * test: add tests for monaco theme * feat: add SwaggerViewer placeholder component * fix: route SwaggerControl toast messages through shared toaster namespace --------- Co-authored-by: Yulia Demir <Nightelfin91@gmail.com> * fix: remove duplicate SwaggerViewer implementation in swagger-view folder * fix: remove unused key from swaggerControl i18n namespace * fix: guard non-object JSON in SchemaService.restore * refactor: catch unhandled rejection in debounced validation --------- Co-authored-by: YuliaDemir <129578495+YuliaDemir@users.noreply.github.com> Co-authored-by: Yulia Demir <Nightelfin91@gmail.com>

YuliaDemir added 15 commits June 22, 2026 09:42

feat: install next+ts+linter+prettier+ husky+redux

703e3c2

feat: configs + perfectionist + lint fix

1855bba

feat: install scss

86c647b

refactor: add some folders

46b70e0

feat: install i18n + basic configs

8088d66

feat: add internatiolisation

270d688

feat: language switcher

b788741

feat: dependencies update

c1ac58a

feat: add sticky header

132faa2

feat: add mui Button-and-Link-like component

9dcf438

fix: lint

c36eedf

style: add style for header

3168aae

refactor: remove css from language selector

c18e733

refactor: add const for flex styles in the header boxes

debb7c0

refactor: history style as link

20a242c

YuliaDemir requested a review from AlyaEngineer June 30, 2026 07:18

AlyaEngineer added the feature-1-header Feature 1: App Header - a header with navigation controls and authentication options label Jun 30, 2026

AlyaEngineer approved these changes Jul 1, 2026

View reviewed changes

fix: add some fixes

34c7ef6

vercel Bot deployed to Preview July 1, 2026 14:26 View deployment

YuliaDemir merged commit b830fd7 into feature/1-app-header Jul 1, 2026
2 checks passed

AlyaEngineer changed the title ~~Story/1 sticky header general~~ feat: sticky header, header actions, nav link to About Jul 1, 2026

AlyaEngineer added this to the Week 1 - 22/06 - 28/06 milestone Jul 1, 2026

This was linked to issues Jul 1, 2026

Language switching #8

Closed

Sticky header #9

Closed

Guest header actions #17

Closed

Authenticated header actions #19

Closed

AlyaEngineer removed a link to an issue Jul 1, 2026

Language switching #8

Closed

AlyaEngineer deleted the story/1-sticky-header-general branch July 2, 2026 08:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: sticky header, header actions, nav link to About - #50

feat: sticky header, header actions, nav link to About#50
YuliaDemir merged 16 commits into
feature/1-app-headerfrom
story/1-sticky-header-general

YuliaDemir commented Jun 30, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jun 30, 2026

Uh oh!

AlyaEngineer Jul 1, 2026

Uh oh!

AlyaEngineer Jul 1, 2026

Uh oh!

AlyaEngineer Jul 1, 2026

Uh oh!

AlyaEngineer Jul 1, 2026

Uh oh!

AlyaEngineer Jul 1, 2026

Uh oh!

AlyaEngineer Jul 1, 2026

Uh oh!

AlyaEngineer Jul 1, 2026

Uh oh!

AlyaEngineer Jul 1, 2026

Uh oh!

AlyaEngineer Jul 1, 2026

Uh oh!

AlyaEngineer Jul 1, 2026

Uh oh!

vercel Bot commented Jul 1, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

YuliaDemir commented Jun 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes Made

Related issue

Feature

Acceptance criteria

Type of change

Checklist

Uh oh!

vercel Bot commented Jun 30, 2026

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!

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!

vercel Bot commented Jul 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

YuliaDemir commented Jun 30, 2026 •

edited

Loading

vercel Bot commented Jul 1, 2026 •

edited

Loading