Skip to content

Feat(web): Компонент Header #65 #97

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AlexMadM merged 6 commits into from
Mar 5, 2026
Merged

Feat(web): Компонент Header #65 #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
098d421
refactor(ui): обновил globals.css root стили
AlexMadM Mar 5, 2026
8b3a423
refactor(web): перевел dashboard-страницы на глобальные стили из glob…
AlexMadM Mar 5, 2026
11d3f32
feat(web): добавить заглушку breadcrumbs и обновить user dropdown в h…
AlexMadM Mar 5, 2026
7a50710
refactor(web): обновить Header, поправить user avatar
AlexMadM Mar 6, 2026
6a8b8c7
refactor(web): open sidebar by default in sidebar store
AlexMadM Mar 6, 2026
8ce5fa5
feat(web): добавить иконку уведомлений-заглушку в Header
AlexMadM Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 24 additions & 36 deletions apps/web/app/(dashboard)/projects/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,46 +40,43 @@ export default function ProjectsPage() {
}

return (
<div className='bg-slate-950 text-slate-100 w-full h-full'>
<div className='bg-background text-foreground w-full h-full'>
<div className='mx-auto flex w-full max-w-[1600px] flex-col gap-10 px-6 py-8 md:px-10 md:py-10'>
<header className='flex flex-col gap-6 md:flex-row md:items-start md:justify-between'>
<div className='space-y-2'>
<h1 className='text-4xl font-semibold tracking-tight md:text-5xl'>Проекты</h1>
<p className='text-xl text-slate-400'>Product Team</p>
<p className='text-xl text-muted-foreground'>Product Team</p>
</div>

<Button className='h-16 rounded-2xl bg-blue-500 px-8 text-2xl font-medium hover:bg-blue-400 md:text-4xl'>
<Button className='h-16 rounded-2xl bg-primary px-8 text-2xl font-medium text-primary-foreground hover:bg-primary/90 md:text-4xl'>
Создать проект
</Button>
</header>

<input
type='text'
placeholder='Поиск проектов...'
className='h-16 w-full max-w-[700px] rounded-2xl border border-slate-700 bg-slate-950 px-6 text-2xl text-slate-100 placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500'
className='h-16 w-full max-w-[700px] rounded-2xl border border-border bg-background px-6 text-2xl text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
/>

<section className='grid grid-cols-1 gap-6 xl:grid-cols-3'>
{projectCards.map((project) => (
<Card
key={project.code}
className='rounded-3xl border-slate-700 bg-slate-900 py-0'
>
<Card key={project.code} className='rounded-3xl border-border bg-card py-0'>
<CardHeader className='gap-6 px-8 pt-8'>
<div className='flex h-16 w-16 items-center justify-center rounded-2xl bg-slate-800 text-4xl font-semibold text-blue-400'>
<div className='flex h-16 w-16 items-center justify-center rounded-2xl bg-muted text-4xl font-semibold text-primary'>
{project.code}
</div>
<div className='space-y-3'>
<CardTitle className='text-4xl font-semibold text-slate-100'>
<CardTitle className='text-4xl font-semibold text-card-foreground'>
{project.name}
</CardTitle>
<CardDescription className='text-2xl text-slate-400'>
<CardDescription className='text-2xl text-muted-foreground'>
{project.description}
</CardDescription>
</div>
</CardHeader>
<CardContent className='px-8 pb-8'>
<p className='text-xl text-slate-400'>
<p className='text-xl text-muted-foreground'>
{project.boards} · {project.tasks}
</p>
</CardContent>
Expand All @@ -89,25 +86,22 @@ export default function ProjectsPage() {

<section className='grid grid-cols-1 gap-6 xl:grid-cols-3'>
{projectCards.map((project) => (
<Card
key={project.code}
className='rounded-3xl border-slate-700 bg-slate-900 py-0'
>
<Card key={project.code} className='rounded-3xl border-border bg-card py-0'>
<CardHeader className='gap-6 px-8 pt-8'>
<div className='flex h-16 w-16 items-center justify-center rounded-2xl bg-slate-800 text-4xl font-semibold text-blue-400'>
<div className='flex h-16 w-16 items-center justify-center rounded-2xl bg-muted text-4xl font-semibold text-primary'>
{project.code}
</div>
<div className='space-y-3'>
<CardTitle className='text-4xl font-semibold text-slate-100'>
<CardTitle className='text-4xl font-semibold text-card-foreground'>
{project.name}
</CardTitle>
<CardDescription className='text-2xl text-slate-400'>
<CardDescription className='text-2xl text-muted-foreground'>
{project.description}
</CardDescription>
</div>
</CardHeader>
<CardContent className='px-8 pb-8'>
<p className='text-xl text-slate-400'>
<p className='text-xl text-muted-foreground'>
{project.boards} · {project.tasks}
</p>
</CardContent>
Expand All @@ -116,25 +110,22 @@ export default function ProjectsPage() {
</section>
<section className='grid grid-cols-1 gap-6 xl:grid-cols-3'>
{projectCards.map((project) => (
<Card
key={project.code}
className='rounded-3xl border-slate-700 bg-slate-900 py-0'
>
<Card key={project.code} className='rounded-3xl border-border bg-card py-0'>
<CardHeader className='gap-6 px-8 pt-8'>
<div className='flex h-16 w-16 items-center justify-center rounded-2xl bg-slate-800 text-4xl font-semibold text-blue-400'>
<div className='flex h-16 w-16 items-center justify-center rounded-2xl bg-muted text-4xl font-semibold text-primary'>
{project.code}
</div>
<div className='space-y-3'>
<CardTitle className='text-4xl font-semibold text-slate-100'>
<CardTitle className='text-4xl font-semibold text-card-foreground'>
{project.name}
</CardTitle>
<CardDescription className='text-2xl text-slate-400'>
<CardDescription className='text-2xl text-muted-foreground'>
{project.description}
</CardDescription>
</div>
</CardHeader>
<CardContent className='px-8 pb-8'>
<p className='text-xl text-slate-400'>
<p className='text-xl text-muted-foreground'>
{project.boards} · {project.tasks}
</p>
</CardContent>
Expand All @@ -144,25 +135,22 @@ export default function ProjectsPage() {

<section className='grid grid-cols-1 gap-6 xl:grid-cols-3'>
{projectCards.map((project) => (
<Card
key={project.code}
className='rounded-3xl border-slate-700 bg-slate-900 py-0'
>
<Card key={project.code} className='rounded-3xl border-border bg-card py-0'>
<CardHeader className='gap-6 px-8 pt-8'>
<div className='flex h-16 w-16 items-center justify-center rounded-2xl bg-slate-800 text-4xl font-semibold text-blue-400'>
<div className='flex h-16 w-16 items-center justify-center rounded-2xl bg-muted text-4xl font-semibold text-primary'>
{project.code}
</div>
<div className='space-y-3'>
<CardTitle className='text-4xl font-semibold text-slate-100'>
<CardTitle className='text-4xl font-semibold text-card-foreground'>
{project.name}
</CardTitle>
<CardDescription className='text-2xl text-slate-400'>
<CardDescription className='text-2xl text-muted-foreground'>
{project.description}
</CardDescription>
</div>
</CardHeader>
<CardContent className='px-8 pb-8'>
<p className='text-xl text-slate-400'>
<p className='text-xl text-muted-foreground'>
{project.boards} · {project.tasks}
</p>
</CardContent>
Expand Down
28 changes: 14 additions & 14 deletions apps/web/app/(dashboard)/sprints/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,19 +79,19 @@ export default function SprintsPage() {
}

return (
<div className='bg-slate-950 text-slate-100 w-full h-full'>
<div className='bg-background text-foreground w-full h-full'>
<div className='mx-auto flex w-full max-w-[1700px] flex-col gap-4 px-3 py-4 md:px-5'>
<header className='rounded-lg border border-slate-800 bg-slate-900 px-3 py-2.5'>
<header className='rounded-lg border border-border bg-card px-3 py-2.5'>
<div className='flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between'>
<div>
<h1 className='text-2xl font-semibold tracking-tight'>Sprint Board</h1>
<p className='text-sm text-slate-100'>Tracker Task</p>
<p className='text-sm text-foreground'>Tracker Task</p>
</div>
<div className='grid grid-cols-1 gap-2 sm:grid-cols-2'>
<select className='h-9 rounded-md border border-slate-700 bg-slate-950 px-2.5 text-sm text-slate-100'>
<select className='h-9 rounded-md border border-border bg-background px-2.5 text-sm text-foreground'>
<option>Все типы</option>
</select>
<select className='h-9 rounded-md border border-slate-700 bg-slate-950 px-2.5 text-sm text-slate-100'>
<select className='h-9 rounded-md border border-border bg-background px-2.5 text-sm text-foreground'>
<option>Все</option>
</select>
</div>
Expand All @@ -102,18 +102,18 @@ export default function SprintsPage() {
{sprintColumns.map((column) => (
<div
key={column.name}
className='rounded-lg border border-slate-800 bg-slate-950 p-2.5'
className='rounded-lg border border-border bg-background p-2.5'
>
<div className='mb-2.5 flex items-center justify-between'>
<h2 className='text-lg font-semibold text-slate-100'>
<h2 className='text-lg font-semibold text-foreground'>
{column.name}{' '}
<span className='rounded-md bg-slate-800 px-1.5 py-0.5 text-xs text-slate-100'>
<span className='rounded-md bg-muted px-1.5 py-0.5 text-xs text-foreground'>
{column.tasks.length}
</span>
</h2>
<button
type='button'
className='h-6 rounded-md border border-slate-700 px-2 text-xs text-slate-100'
className='h-6 rounded-md border border-border px-2 text-xs text-foreground'
>
Добавить
</button>
Expand All @@ -123,27 +123,27 @@ export default function SprintsPage() {
{column.tasks.map((task) => (
<Card
key={task.id}
className='gap-2 rounded-lg border-slate-800 bg-slate-900 py-0'
className='gap-2 rounded-lg border-border bg-card py-0'
>
<CardContent className='space-y-2.5 px-3 py-3 text-slate-100'>
<CardContent className='space-y-2.5 px-3 py-3 text-foreground'>
<div className='flex items-center gap-2'>
<span
className={`rounded-full px-2 py-0.5 text-xs font-medium ${typeClassName[task.type]}`}
>
{task.type}
</span>
<span className='text-xs text-slate-100'>{task.id}</span>
<span className='text-xs text-foreground'>{task.id}</span>
</div>

<p className='text-lg font-medium leading-snug text-slate-100'>
<p className='text-lg font-medium leading-snug text-foreground'>
{task.title}
</p>

<div className='flex flex-wrap gap-1.5'>
{task.tags.map((tag) => (
<span
key={tag}
className='rounded-md bg-slate-800 px-1.5 py-0.5 text-xs text-slate-100'
className='rounded-md bg-muted px-1.5 py-0.5 text-xs text-foreground'
>
{tag}
</span>
Expand Down
34 changes: 17 additions & 17 deletions apps/web/app/(dashboard)/tasks/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,11 +59,11 @@ export default function TasksPage() {
}

return (
<div className='bg-slate-950 text-slate-100 w-full h-full'>
<div className='bg-background text-foreground w-full h-full'>
<div className='mx-auto flex w-full max-w-[2100px] flex-col gap-8 px-5 py-8 md:px-8'>
<header className='flex flex-col gap-4 md:flex-row md:items-center md:justify-between'>
<h1 className='text-3xl font-semibold tracking-tight'>Задачи</h1>
<Button className='h-10 rounded-lg bg-blue-500 px-5 text-base font-medium hover:bg-blue-400'>
<Button className='h-10 rounded-lg bg-primary px-5 text-base font-medium text-primary-foreground hover:bg-primary/90'>
Создать задачу
</Button>
</header>
Expand All @@ -72,25 +72,25 @@ export default function TasksPage() {
<input
type='text'
placeholder='Поиск по названию или ключу...'
className='h-10 rounded-lg border border-slate-700 bg-slate-950 px-3 text-base text-slate-100 placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500'
className='h-10 rounded-lg border border-border bg-background px-3 text-base text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
/>
<select className='h-10 rounded-lg border border-slate-700 bg-slate-950 px-3 text-base text-slate-100'>
<select className='h-10 rounded-lg border border-border bg-background px-3 text-base text-foreground'>
<option>Все типы</option>
</select>
<select className='h-10 rounded-lg border border-slate-700 bg-slate-950 px-3 text-base text-slate-100'>
<select className='h-10 rounded-lg border border-border bg-background px-3 text-base text-foreground'>
<option>Все статусы</option>
</select>
<select className='h-10 rounded-lg border border-slate-700 bg-slate-950 px-3 text-base text-slate-100'>
<select className='h-10 rounded-lg border border-border bg-background px-3 text-base text-foreground'>
<option>Все</option>
</select>
</section>

<div className='overflow-x-auto rounded-3xl border border-slate-800 bg-slate-900'>
<div className='overflow-x-auto rounded-3xl border border-border bg-card'>
<table className='min-w-full border-collapse'>
<thead className='border-b border-slate-800'>
<tr className='text-left text-base text-slate-400'>
<thead className='border-b border-border'>
<tr className='text-left text-base text-muted-foreground'>
<th className='w-12 px-4 py-4'>
<span className='block h-5 w-5 rounded-md border-2 border-blue-500' />
<span className='block h-5 w-5 rounded-md border-2 border-primary' />
</th>
<th className='min-w-28 px-3 py-4 font-semibold'>Ключ</th>
<th className='min-w-[360px] px-3 py-4 font-semibold'>Название</th>
Expand All @@ -102,12 +102,12 @@ export default function TasksPage() {
</thead>
<tbody>
{tasks.map((task) => (
<tr key={task.key} className='border-b border-slate-800 last:border-b-0'>
<tr key={task.key} className='border-b border-border last:border-b-0'>
<td className='px-4 py-3'>
<span className='block h-5 w-5 rounded-md border-2 border-blue-500' />
<span className='block h-5 w-5 rounded-md border-2 border-primary' />
</td>
<td className='px-3 py-3 text-xl text-slate-400'>{task.key}</td>
<td className='px-3 py-3 text-xl font-medium text-slate-100'>
<td className='px-3 py-3 text-xl text-muted-foreground'>{task.key}</td>
<td className='px-3 py-3 text-xl font-medium text-foreground'>
{task.title}
</td>
<td className='px-3 py-3'>
Expand All @@ -117,9 +117,9 @@ export default function TasksPage() {
{task.type}
</span>
</td>
<td className='px-3 py-3 text-xl text-slate-200'>{task.status}</td>
<td className='px-3 py-3 text-xl text-slate-200'>{task.priority}</td>
<td className='px-3 py-3 text-xl text-slate-200'>{task.assignee}</td>
<td className='px-3 py-3 text-xl text-foreground'>{task.status}</td>
<td className='px-3 py-3 text-xl text-foreground'>{task.priority}</td>
<td className='px-3 py-3 text-xl text-foreground'>{task.assignee}</td>
</tr>
))}
</tbody>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/widgets/main-layout/model/sidebar/store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { create } from 'zustand'
import type { SideBarStore } from './types'

export const useSideBarStore = create<SideBarStore>((set) => ({
isOpen: false,
isOpen: true,
open: () => set({ isOpen: true }),
close: () => set({ isOpen: false }),
toggle: () => set((state) => ({ isOpen: !state.isOpen })),
Expand Down
Loading
Loading