) => {
}
const TaskDescription = ({ className, ...props }: ComponentProps<'p'>) => {
- const { task } = useTaskContext()
+ const { task, density } = useTaskContext()
return (
task.description && (
) => {
const {
- task: { labels }
+ task: { labels },
+ density
} = useTaskContext()
- if (!labels?.length) return null
+ const { data } = useSettings(state => state.label)
+
+ if (!labels?.length || data?.labelDisplay === 'hidden') return null
+
+ let max = data?.maxLabelsShown
- const labelsPerRow = 3
+ if (max === 0) max = Infinity
+
+ const visibleLabels = labels.slice(0, max)
+
+ const hiddenCount = labels.length - visibleLabels.length
return (
- {labels.slice(0, labelsPerRow).map(label => (
+ {visibleLabels.map(label => (
))}
- {labels.length > labelsPerRow && (
+ {hiddenCount > 0 && (
- +{labels.length - labelsPerRow}
+ +{hiddenCount}
)}
@@ -159,16 +197,22 @@ const TaskLabels = ({ className, ...props }: ComponentProps<'div'>) => {
}
const TaskPriority = ({ className }: { className?: string }) => {
- const { task } = useTaskContext()
+ const { task, density } = useTaskContext()
+
+ const isCompact = density === 'compact'
return (
-
Priority
+ {!isCompact && (
+
+ Priority
+
+ )}
{
getTaskPriorityColor(task.priority)
)}
/>
-
{capitalize(task.priority)}
+ {isCompact ? (
+
Priority: {capitalize(task.priority)}
+ ) : (
+
{capitalize(task.priority)}
+ )}
)
}
const TaskDeadline = ({ className }: { className?: string }) => {
- const { task } = useTaskContext()
+ const { task, density } = useTaskContext()
+
+ const { data: dateFormat } = useSettings(state => state.general.dateFormat)
+
+ const { data: overdueHighlight } = useSettings(
+ state => state.task.overdueHighlight
+ )
+
+ const deadline = parseDeadline(task.deadline)
+
+ const isOverdue =
+ !!deadline && !task.completed && isBefore(deadline, startOfToday())
return (
- task.deadline && (
+ deadline && (
-
- Deadline
+ {density === 'comfortable' && (
+
+ Deadline
+
+ )}
+
+ {formatDeadline(
+ deadline,
+ DATE_FORMAT_MAP[dateFormat ?? 'dd_mm_yyyy']
+ )}
-
{formatDeadlineDate(task.deadline)}
)
)
@@ -204,11 +274,13 @@ const TaskDeadline = ({ className }: { className?: string }) => {
const TaskDeadlineTodayIndicator = ({ className }: { className?: string }) => {
const { task } = useTaskContext()
+ const deadline = parseDeadline(task.deadline)
+
return (
- task.deadline &&
- isToday(task.deadline) && (
+ deadline &&
+ isToday(deadline) && (
)
)
@@ -222,9 +294,9 @@ const TaskActionButton = ({
const defaultProps: useRender.ElementProps<'button'> = {
type: 'button',
className: cn(
- `focus-visible:styled-outline hocus:text-black
- dark:hocus:text-white-soft dark:text-white-soft/50 text-black/50
- [&_svg]:size-4`,
+ `focus-visible:styled-outline dark:text-white-soft text-black
+ [&_svg]:size-4 [&_svg]:opacity-50 hocus:[&_svg]:opacity-100
+ [&_svg]:transition-opacity`,
className
)
}
diff --git a/src/entities/user/@x/setting.ts b/src/entities/user/@x/setting.ts
new file mode 100644
index 000000000..7251ced96
--- /dev/null
+++ b/src/entities/user/@x/setting.ts
@@ -0,0 +1 @@
+export { ACCENT_COLOR_MAP } from '../config/accent-colors-map'
diff --git a/src/entities/user/api/queries.ts b/src/entities/user/api/queries.ts
index a19086dae..74da9817b 100644
--- a/src/entities/user/api/queries.ts
+++ b/src/entities/user/api/queries.ts
@@ -1,14 +1,40 @@
+import type { InferedSession } from '../model/types'
+
import { queryOptions } from '@tanstack/react-query'
import { authClient } from '@/shared/api'
export const sessionQueries = {
all: () => ['session'] as const,
+ lists: () => [...sessionQueries.all(), 'list'] as const,
+ list: () =>
+ queryOptions({
+ queryKey: sessionQueries.lists(),
+ staleTime: 1000 * 30,
+ queryFn: async () =>
+ (await authClient.listSessions()) as unknown as InferedSession[]
+ }),
+ passkeys: () => [...sessionQueries.all(), 'passkeys'] as const,
+ passkey: () =>
+ queryOptions({
+ queryKey: sessionQueries.passkeys(),
+ staleTime: 1000 * 30,
+ queryFn: async () => await authClient.passkey.listUserPasskeys()
+ }),
+ accounts: () => [...sessionQueries.all(), 'accounts'] as const,
+ account: () =>
+ queryOptions({
+ queryKey: sessionQueries.accounts(),
+ staleTime: 1000 * 30,
+ queryFn: async () => await authClient.listAccounts()
+ }),
+ currents: () => [...sessionQueries.all(), 'current'] as const,
current: () =>
queryOptions({
- queryKey: sessionQueries.all(),
+ queryKey: sessionQueries.currents(),
queryFn: async () => await authClient.getSession(),
staleTime: 1000 * 60 * 10, // 10 minutes
- retry: false
+ retry: false,
+ refetchOnWindowFocus: true
})
}
diff --git a/src/entities/user/config/accent-colors-map.ts b/src/entities/user/config/accent-colors-map.ts
new file mode 100644
index 000000000..689be5e64
--- /dev/null
+++ b/src/entities/user/config/accent-colors-map.ts
@@ -0,0 +1,12 @@
+import type { AccentColor } from '@/shared/api'
+
+export const ACCENT_COLOR_MAP: Record
= {
+ blue: '#8FB8D8',
+ purple: '#C3A6D8',
+ green: '#BEDBB0',
+ red: '#E7A6A6',
+ yellow: '#F2D28B',
+ cyan: '#91D4D8',
+ indigo: '#A7B1E8',
+ gray: '#B8B8B8'
+} as const
diff --git a/src/entities/user/index.ts b/src/entities/user/index.ts
index bf492b2c6..675872be2 100644
--- a/src/entities/user/index.ts
+++ b/src/entities/user/index.ts
@@ -1,5 +1,6 @@
export * as UserTypes from './model/types'
-export * as UserContracts from './model/contracts'
+export * as UserContracts from './model/contract'
export { defaultAvatarUrl } from './config/default-avatar-url'
+export { useMetaThemeColor } from './lib/useMetaThemeColor'
export { sessionQueries } from './api/queries'
export { useMe } from './model/useMe'
diff --git a/src/entities/user/lib/useMetaThemeColor.ts b/src/entities/user/lib/useMetaThemeColor.ts
new file mode 100644
index 000000000..281daf495
--- /dev/null
+++ b/src/entities/user/lib/useMetaThemeColor.ts
@@ -0,0 +1,39 @@
+import { useEffect } from 'react'
+
+import { useSettings } from '@/entities/setting/@x/user'
+
+import { resolveTheme } from '@/shared/config'
+
+const THEME_COLORS = { light: '#fcfcfc', dark: '#161616' }
+
+export const useMetaThemeColor = () => {
+ const { data: theme } = useSettings(select => select.general.theme)
+
+ useEffect(() => {
+ let themeColorMeta = document.querySelector(
+ 'meta[name="theme-color"]'
+ )
+
+ if (!themeColorMeta) {
+ themeColorMeta = document.createElement('meta')
+ themeColorMeta.name = 'theme-color'
+ document.head.appendChild(themeColorMeta)
+ }
+
+ const meta = themeColorMeta
+
+ const apply = () => {
+ meta.content = THEME_COLORS[resolveTheme(theme)]
+ }
+
+ apply()
+
+ if (theme !== 'system') return
+
+ const mq = window.matchMedia('(prefers-color-scheme: dark)')
+
+ mq.addEventListener('change', apply)
+
+ return () => mq.removeEventListener('change', apply)
+ }, [theme])
+}
diff --git a/src/entities/user/model/contracts.ts b/src/entities/user/model/contract.ts
similarity index 55%
rename from src/entities/user/model/contracts.ts
rename to src/entities/user/model/contract.ts
index 6fb96e8e7..6a96cf7d4 100644
--- a/src/entities/user/model/contracts.ts
+++ b/src/entities/user/model/contract.ts
@@ -1,11 +1,8 @@
import * as v from 'valibot'
-import { THEMES } from '@/shared/config'
-
export const UserSchema = v.object({
id: v.string(),
name: v.string(),
email: v.string(),
- image: v.nullable(v.string()),
- theme: v.picklist(THEMES)
+ image: v.nullable(v.string())
})
diff --git a/src/entities/user/model/types.ts b/src/entities/user/model/types.ts
index 3321fddb1..e7596260e 100644
--- a/src/entities/user/model/types.ts
+++ b/src/entities/user/model/types.ts
@@ -1,4 +1,6 @@
+import type { authClient } from '@/shared/api'
import type { InferOutput } from 'valibot'
-import type { UserSchema } from './contracts'
+import type { UserSchema } from './contract'
export type UserSchema = InferOutput
+export type InferedSession = typeof authClient.$Infer.Session.session
diff --git a/src/features/board/add/api/useAddBoard.ts b/src/features/board/add/api/useAddBoard.ts
index 72c2083bf..57bc67426 100644
--- a/src/features/board/add/api/useAddBoard.ts
+++ b/src/features/board/add/api/useAddBoard.ts
@@ -3,7 +3,9 @@ import type { Dispatch, SetStateAction } from 'react'
import { useMutation } from '@tanstack/react-query'
import { useNavigate } from '@tanstack/react-router'
-import { createBoardMutation, getAllBoardsQueryKey } from '@/shared/api'
+import { boardQueries } from '@/entities/board'
+
+import { createBoardMutation } from '@/shared/api'
import { useSidebarStore } from '@/shared/store'
export const useAddBoard = (
@@ -16,9 +18,9 @@ export const useAddBoard = (
return useMutation({
...createBoardMutation(),
meta: {
- invalidates: [getAllBoardsQueryKey()],
+ invalidates: [boardQueries.lists()],
errorMessage:
- 'An error occurred while creating the board. Please try again shortly.'
+ 'An error occurred while creating the board. Please try again.'
},
onSuccess(data) {
setIsDialogOpen(false)
diff --git a/src/features/board/add/model/contract.ts b/src/features/board/add/model/contract.ts
index 6d517ea64..1bdf57e17 100644
--- a/src/features/board/add/model/contract.ts
+++ b/src/features/board/add/model/contract.ts
@@ -1,6 +1,6 @@
import * as v from 'valibot'
-import { BOARD_BG_IMAGES_IDS, BOARD_ICONS } from '@/entities/board'
+import { vBoardBackgroundId, vBoardIcon } from '@/shared/api'
export const AddBoardSchema = v.object({
title: v.pipe(
@@ -8,8 +8,8 @@ export const AddBoardSchema = v.object({
v.trim(),
v.minLength(3, 'Please enter at least 3 characters.')
),
- icon: v.fallback(v.picklist(BOARD_ICONS), 'sparkles'),
- background: v.fallback(v.picklist(BOARD_BG_IMAGES_IDS), 'default')
+ icon: v.fallback(vBoardIcon, 'sparkles'),
+ background: v.fallback(vBoardBackgroundId, 'default')
})
export type AddBoardSchema = v.InferOutput
diff --git a/src/features/board/delete/api/useDeleteBoard.ts b/src/features/board/delete/api/useDeleteBoard.ts
index 51c1e353b..d41198891 100644
--- a/src/features/board/delete/api/useDeleteBoard.ts
+++ b/src/features/board/delete/api/useDeleteBoard.ts
@@ -1,10 +1,10 @@
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { useNavigate } from '@tanstack/react-router'
-import { parse } from 'valibot'
+import { array, parse } from 'valibot'
-import { BoardContracts, useGetParamBoardId } from '@/entities/board'
+import { boardQueries, useGetParamBoardId } from '@/entities/board'
-import { deleteBoard, getAllBoardsQueryKey } from '@/shared/api'
+import { deleteBoard, vBoard } from '@/shared/api'
export const useDeleteBoard = () => {
const queryClient = useQueryClient()
@@ -13,28 +13,25 @@ export const useDeleteBoard = () => {
const navigate = useNavigate()
- const allBoardsQueryKey = getAllBoardsQueryKey()
+ const allBoardsQueryKey = boardQueries.lists()
return useMutation({
mutationFn: () => deleteBoard({ path: { boardId } }),
meta: {
errorMessage:
- 'An error occurred while deleting the board. Please try again shortly.'
+ 'An error occurred while deleting the board. Please try again.'
},
onMutate: async () => {
await queryClient.cancelQueries({ queryKey: allBoardsQueryKey })
const previousBoards = queryClient.getQueryData(allBoardsQueryKey)
- const parsedPreviousBoards = parse(
- BoardContracts.BoardsSchema,
- previousBoards
- )
+ const parsedPreviousBoards = parse(array(vBoard), previousBoards)
queryClient.setQueryData(allBoardsQueryKey, oldBoards => {
if (!oldBoards) return oldBoards
- const parsedOldBoards = parse(BoardContracts.BoardsSchema, oldBoards)
+ const parsedOldBoards = parse(array(vBoard), oldBoards)
return parsedOldBoards.filter(b => b.id !== boardId)
})
diff --git a/src/features/board/delete/ui/DeleteBoardAlertDialog.tsx b/src/features/board/delete/ui/DeleteBoardAlertDialog.tsx
index 0eadc7045..6c9c802fe 100644
--- a/src/features/board/delete/ui/DeleteBoardAlertDialog.tsx
+++ b/src/features/board/delete/ui/DeleteBoardAlertDialog.tsx
@@ -1,5 +1,7 @@
import { TrashIcon } from 'lucide-react'
+import { ConfirmDeleteTrigger } from '@/entities/setting'
+
import {
AlertDialog,
AlertDialogAction,
@@ -16,27 +18,36 @@ import { useDeleteBoard } from '../api/useDeleteBoard'
export const DeleteBoardAlertDialog = () => {
const { mutate: deleteBoard } = useDeleteBoard()
+ const handleDeleteBoard = () => {
+ deleteBoard()
+ }
+
return (
-
-
-
-
-
- Delete board?
-
- This action cannot be undone. The board and all of its contents will
- be permanently deleted.
-
-
- Cancel
- deleteBoard()}>
- Delete
-
-
-
-
+
+
+
+
+
+
+ Delete board?
+
+ This action cannot be undone. The board and all of its contents will
+ be permanently deleted.
+
+
+ Cancel
+
+ Delete
+
+
+
+
+
)
}
diff --git a/src/features/board/edit/api/useEditBoard.ts b/src/features/board/edit/api/useEditBoard.ts
index 496d254b5..90a7a61c1 100644
--- a/src/features/board/edit/api/useEditBoard.ts
+++ b/src/features/board/edit/api/useEditBoard.ts
@@ -3,13 +3,9 @@ import type { EditBoardSchema } from '../model/contract'
import { useMutation } from '@tanstack/react-query'
-import { useGetParamBoardId } from '@/entities/board'
+import { boardQueries, useGetParamBoardId } from '@/entities/board'
-import {
- getAllBoardsQueryKey,
- getBoardByIdQueryKey,
- updateBoard
-} from '@/shared/api'
+import { updateBoard } from '@/shared/api'
export const useEditBoard = (
setIsDialogOpen: Dispatch>
@@ -20,12 +16,9 @@ export const useEditBoard = (
mutationFn: (data: EditBoardSchema) =>
updateBoard({ path: { boardId }, body: data }),
meta: {
- invalidates: [
- getAllBoardsQueryKey(),
- getBoardByIdQueryKey({ path: { boardId } })
- ],
+ invalidates: [boardQueries.all()],
errorMessage:
- 'An error occurred while editing the board. Please try again shortly.'
+ 'An error occurred while editing the board. Please try again.'
},
onSuccess: () => {
setIsDialogOpen(false)
diff --git a/src/features/board/edit/model/contract.ts b/src/features/board/edit/model/contract.ts
index b46e4ea74..06f242350 100644
--- a/src/features/board/edit/model/contract.ts
+++ b/src/features/board/edit/model/contract.ts
@@ -1,6 +1,6 @@
import * as v from 'valibot'
-import { BOARD_BG_IMAGES_IDS, BOARD_ICONS } from '@/entities/board'
+import { vBoardBackgroundId, vBoardIcon } from '@/shared/api'
export const EditBoardSchema = v.partial(
v.object({
@@ -9,8 +9,8 @@ export const EditBoardSchema = v.partial(
v.trim(),
v.minLength(3, 'Please enter at least 3 characters.')
),
- icon: v.picklist(BOARD_ICONS),
- background: v.picklist(BOARD_BG_IMAGES_IDS)
+ icon: vBoardIcon,
+ background: vBoardBackgroundId
})
)
diff --git a/src/features/board/edit/model/types.ts b/src/features/board/edit/model/types.ts
index 687902de8..d4365e5fd 100644
--- a/src/features/board/edit/model/types.ts
+++ b/src/features/board/edit/model/types.ts
@@ -1,7 +1,7 @@
-import type { BoardTypes } from '@/entities/board'
+import type { BoardBackgroundId, BoardIcon } from '@/shared/api'
export type EditBoardData = {
title: string
- icon: BoardTypes.BoardIcon
- background: BoardTypes.BoardBgImageId
+ icon: BoardIcon
+ background: BoardBackgroundId
}
diff --git a/src/features/board/edit/ui/EditBoardDialog.tsx b/src/features/board/edit/ui/EditBoardDialog.tsx
index bdb35555e..d7e359b11 100644
--- a/src/features/board/edit/ui/EditBoardDialog.tsx
+++ b/src/features/board/edit/ui/EditBoardDialog.tsx
@@ -26,9 +26,12 @@ export const EditBoardDialog = ({ data }: EditBoardDialogProps) => {
onOpenChange={setIsDialogOpen}>
-
+ className='focus-visible:styled-outline dark:text-white-soft group
+ text-black'>
+
Edit board
diff --git a/src/features/column/add/api/useAddColumn.ts b/src/features/column/add/api/useAddColumn.ts
index 8ca2b9e89..5f21e8624 100644
--- a/src/features/column/add/api/useAddColumn.ts
+++ b/src/features/column/add/api/useAddColumn.ts
@@ -3,9 +3,9 @@ import type { AddColumnSchema } from '../model/contract'
import { useMutation } from '@tanstack/react-query'
-import { useGetParamBoardId } from '@/entities/board'
+import { boardQueries, useGetParamBoardId } from '@/entities/board'
-import { createColumn, getBoardByIdQueryKey } from '@/shared/api'
+import { createColumn } from '@/shared/api'
export const useAddColumn = (
setIsDialogOpen: Dispatch>
@@ -16,9 +16,9 @@ export const useAddColumn = (
mutationFn: (data: AddColumnSchema) =>
createColumn({ path: { boardId }, body: data }),
meta: {
- invalidates: [getBoardByIdQueryKey({ path: { boardId } })],
+ invalidates: [boardQueries.details()],
errorMessage:
- 'An error occurred while creating the column. Please try again shortly.'
+ 'An error occurred while creating the column. Please try again.'
},
onSuccess() {
setIsDialogOpen(false)
diff --git a/src/features/column/delete/api/useDeleteColumn.ts b/src/features/column/delete/api/useDeleteColumn.ts
index 993ce51cb..8367a0b27 100644
--- a/src/features/column/delete/api/useDeleteColumn.ts
+++ b/src/features/column/delete/api/useDeleteColumn.ts
@@ -1,41 +1,38 @@
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { parse } from 'valibot'
-import { BoardContracts, useGetParamBoardId } from '@/entities/board'
+import { boardQueries, useGetParamBoardId } from '@/entities/board'
-import { deleteColumnMutation, getBoardByIdQueryKey } from '@/shared/api'
+import { deleteColumnMutation, vBoard } from '@/shared/api'
export const useDeleteColumn = () => {
const queryClient = useQueryClient()
const boardId = useGetParamBoardId()
- const boardQueryKey = getBoardByIdQueryKey({ path: { boardId } })
+ const boardQueryKey = boardQueries.detail(boardId).queryKey
return useMutation({
...deleteColumnMutation(),
meta: {
errorMessage:
- 'An error occurred while deleting the column. Please try again shortly.'
+ 'An error occurred while deleting the column. Please try again.'
},
onMutate: async ({ path: { columnId } }) => {
await queryClient.cancelQueries({ queryKey: boardQueryKey })
const previousBoard = queryClient.getQueryData(boardQueryKey)
- const parsedPreviousBoard = parse(
- BoardContracts.BoardSchema,
- previousBoard
- )
+ const parsedPreviousBoard = parse(vBoard, previousBoard)
queryClient.setQueryData(boardQueryKey, oldBoard => {
if (!oldBoard) return oldBoard
- const parsedOldBoard = parse(BoardContracts.BoardSchema, oldBoard)
+ const parsedOldBoard = parse(vBoard, oldBoard)
return {
...parsedOldBoard,
- columns: parsedOldBoard.columns.filter(
+ columns: parsedOldBoard.columns?.filter(
column => column.id !== columnId
)
}
diff --git a/src/features/column/delete/ui/DeleteColumnAlertDialog.tsx b/src/features/column/delete/ui/DeleteColumnAlertDialog.tsx
index 993b4b930..a5113df78 100644
--- a/src/features/column/delete/ui/DeleteColumnAlertDialog.tsx
+++ b/src/features/column/delete/ui/DeleteColumnAlertDialog.tsx
@@ -1,6 +1,7 @@
import { TrashIcon } from 'lucide-react'
import { Column } from '@/entities/column'
+import { ConfirmDeleteTrigger } from '@/entities/setting'
import {
AlertDialog,
@@ -18,27 +19,32 @@ import { useDeleteColumn } from '../api/useDeleteColumn'
export const DeleteColumnAlertDialog = ({ columnId }: { columnId: string }) => {
const { mutate: deleteColumn } = useDeleteColumn()
+ const handleDeleteColumn = () => {
+ deleteColumn({ path: { columnId } })
+ }
+
return (
-
- }
- aria-label='Delete column'>
-
-
-
- Delete column?
-
- This action cannot be undone. The column and all of its contents will
- be permanently deleted.
-
-
- Cancel
- deleteColumn({ path: { columnId } })}>
- Delete
-
-
-
-
+
+
+ }
+ aria-label='Delete column'>
+
+
+
+ Delete column?
+
+ This action cannot be undone. The column and all of its contents
+ will be permanently deleted.
+
+
+ Cancel
+
+ Delete
+
+
+
+
+
)
}
diff --git a/src/features/column/edit/api/useEditColumn.ts b/src/features/column/edit/api/useEditColumn.ts
index 69abb8794..de159d5fc 100644
--- a/src/features/column/edit/api/useEditColumn.ts
+++ b/src/features/column/edit/api/useEditColumn.ts
@@ -2,24 +2,21 @@ import type { Dispatch, SetStateAction } from 'react'
import { useMutation } from '@tanstack/react-query'
-import { useGetParamBoardId } from '@/entities/board'
+import { boardQueries } from '@/entities/board'
-import { getBoardByIdQueryKey, updateColumnMutation } from '@/shared/api'
+import { updateColumnMutation } from '@/shared/api'
export const useEditColumn = (
setIsDialogOpen: Dispatch>
-) => {
- const boardId = useGetParamBoardId()
-
- return useMutation({
+) =>
+ useMutation({
...updateColumnMutation(),
meta: {
- invalidates: [getBoardByIdQueryKey({ path: { boardId } })],
+ invalidates: [boardQueries.details()],
errorMessage:
- 'An error occurred while editing the column. Please try again shortly.'
+ 'An error occurred while editing the column. Please try again.'
},
onSuccess: () => {
setIsDialogOpen(false)
}
})
-}
diff --git a/src/features/drag-and-drop/api/useUpdateColumnOrder.ts b/src/features/drag-and-drop/api/useUpdateColumnOrder.ts
index cab982780..81f001798 100644
--- a/src/features/drag-and-drop/api/useUpdateColumnOrder.ts
+++ b/src/features/drag-and-drop/api/useUpdateColumnOrder.ts
@@ -2,9 +2,9 @@ import type { UpdateColumnsOrderData } from '@/shared/api'
import { useMutation } from '@tanstack/react-query'
-import { useGetParamBoardId } from '@/entities/board'
+import { boardQueries, useGetParamBoardId } from '@/entities/board'
-import { getBoardByIdQueryKey, updateColumnsOrder } from '@/shared/api'
+import { updateColumnsOrder } from '@/shared/api'
export const useUpdateColumnOrder = () => {
const boardId = useGetParamBoardId()
@@ -13,7 +13,7 @@ export const useUpdateColumnOrder = () => {
mutationFn: ({ ids }: UpdateColumnsOrderData['body']) =>
updateColumnsOrder({ path: { boardId }, body: { ids } }),
meta: {
- invalidates: [getBoardByIdQueryKey({ path: { boardId } })],
+ invalidates: [boardQueries.details()],
errorMessage:
'Unexpected error during columns reordering. We apologize for the inconvenience. Please try again later.'
}
diff --git a/src/features/drag-and-drop/api/useUpdateTaskOrder.ts b/src/features/drag-and-drop/api/useUpdateTaskOrder.ts
index 03ade8822..f07e47c54 100644
--- a/src/features/drag-and-drop/api/useUpdateTaskOrder.ts
+++ b/src/features/drag-and-drop/api/useUpdateTaskOrder.ts
@@ -1,18 +1,15 @@
import { useMutation } from '@tanstack/react-query'
-import { useGetParamBoardId } from '@/entities/board'
+import { boardQueries } from '@/entities/board'
-import { getBoardByIdQueryKey, updateTasksOrderMutation } from '@/shared/api'
+import { updateTasksOrderMutation } from '@/shared/api'
-export const useUpdateTaskOrder = () => {
- const boardId = useGetParamBoardId()
-
- return useMutation({
+export const useUpdateTaskOrder = () =>
+ useMutation({
...updateTasksOrderMutation(),
meta: {
- invalidates: [getBoardByIdQueryKey({ path: { boardId } })],
+ invalidates: [boardQueries.details()],
errorMessage:
'Unexpected error during tasks reordering. We apologize for the inconvenience. Please try again later.'
}
})
-}
diff --git a/src/features/drag-and-drop/index.ts b/src/features/drag-and-drop/index.ts
index 57936b2d3..897bee079 100644
--- a/src/features/drag-and-drop/index.ts
+++ b/src/features/drag-and-drop/index.ts
@@ -1 +1 @@
-export { DragAndDropProvider, useDragAndDrop } from './model/context'
+export { DragAndDropProvider, useDragAndDropSelector } from './model/context'
diff --git a/src/features/drag-and-drop/lib/getDraggingTaskData.ts b/src/features/drag-and-drop/lib/getDraggingTaskData.ts
index 5b5d32c2d..f816f6272 100644
--- a/src/features/drag-and-drop/lib/getDraggingTaskData.ts
+++ b/src/features/drag-and-drop/lib/getDraggingTaskData.ts
@@ -1,12 +1,11 @@
-import type { ColumnTypes } from '@/entities/column'
-import type { TaskTypes } from '@/entities/task'
+import type { Column, Task } from '@/shared/api'
import type { UniqueIdentifier } from '@dnd-kit/core'
export const getDraggingTaskData = (
taskId: UniqueIdentifier,
columnId: string | null,
- columns: ColumnTypes.ColumnsSchema,
- tasks: TaskTypes.TasksSchema
+ columns: Column[],
+ tasks: Task[]
) => {
const columnTasks = tasks.filter(c => c.columnId === columnId)
const taskPosition = columnTasks.findIndex(c => c.id === taskId)
diff --git a/src/features/drag-and-drop/model/context.tsx b/src/features/drag-and-drop/model/context.tsx
index 11e2cb409..0914e7951 100644
--- a/src/features/drag-and-drop/model/context.tsx
+++ b/src/features/drag-and-drop/model/context.tsx
@@ -1,6 +1,6 @@
import type { DragAndDropContext, DragAndDropProviderProps } from './types'
-import { createContext, use, useMemo } from 'react'
+import { useMemo } from 'react'
import {
DndContext,
KeyboardSensor,
@@ -9,6 +9,7 @@ import {
useSensor,
useSensors
} from '@dnd-kit/core'
+import { createContext, useContextSelector } from 'use-context-selector'
import { coordinateGetter } from '../lib/coordinateGetter'
import { useGetAccessibilityAnnouncements } from '../lib/useGetAccessibilityAnnouncements'
@@ -61,7 +62,8 @@ export const DragAndDropProvider = ({
)
return (
-
+ // eslint-disable-next-line @eslint-react/no-context-provider
+
{children}
-
+
)
}
-export const useDragAndDrop = () => {
- const context = use(DragAndDropContext)
+export const useDragAndDropSelector = (
+ selector: (value: DragAndDropContext) => T
+) => {
+ const selected = useContextSelector(DragAndDropContext, ctx => {
+ if (!ctx) {
+ throw new Error(
+ 'useDragAndDropSelector must be used within a DragAndDropProvider'
+ )
+ }
- if (!context) {
- throw new Error('useDragAndDrop must be used within a DragAndDropProvider')
- }
+ return selector(ctx)
+ })
- return context
+ return selected
}
diff --git a/src/features/drag-and-drop/model/types.ts b/src/features/drag-and-drop/model/types.ts
index f147ca4eb..90135d19b 100644
--- a/src/features/drag-and-drop/model/types.ts
+++ b/src/features/drag-and-drop/model/types.ts
@@ -1,25 +1,24 @@
-import type { ColumnTypes } from '@/entities/column'
-import type { TaskTypes } from '@/entities/task'
+import type { Column, Task } from '@/shared/api'
import type { Dispatch, ReactNode, SetStateAction } from 'react'
export type DragAndDropContext = {
- columns: ColumnTypes.ColumnsSchema
- tasks: TaskTypes.TasksSchema
- activeColumn: ColumnTypes.ColumnSchema | null
- activeTask: TaskTypes.TaskSchema | null
+ columns: Column[]
+ tasks: Task[]
+ activeColumn: Column | null
+ activeTask: Task | null
}
export type DragAndDropProviderProps = {
children: ReactNode
- initialColumns: ColumnTypes.ColumnsSchema | undefined
+ initialColumns: Column[] | undefined
}
export type TaskDragHandlersProps = Pick & {
- setTasks: Dispatch>
- setActiveTask: Dispatch>
+ setTasks: Dispatch>
+ setActiveTask: Dispatch>
}
export type ColumnDragHandlersProps = Pick & {
- setColumns: Dispatch>
- setActiveColumn: Dispatch>
+ setColumns: Dispatch>
+ setActiveColumn: Dispatch>
}
diff --git a/src/features/drag-and-drop/model/useDndState.ts b/src/features/drag-and-drop/model/useDndState.ts
index 09ca0df98..74f24ea2c 100644
--- a/src/features/drag-and-drop/model/useDndState.ts
+++ b/src/features/drag-and-drop/model/useDndState.ts
@@ -1,48 +1,25 @@
-import type { ColumnTypes } from '@/entities/column'
-import type { TaskTypes } from '@/entities/task'
-
-import { useMemo, useState } from 'react'
-import { parse } from 'valibot'
-
-import { ColumnContracts } from '@/entities/column'
-import { TaskContracts } from '@/entities/task'
-
-export const useDndState = (
- initialColumns: ColumnTypes.ColumnsSchema | undefined
-) => {
- const [parsedColumns, parsedTasks] = useMemo(
- () => [
- parse(ColumnContracts.ColumnsSchema, initialColumns),
- parse(
- TaskContracts.TasksSchema,
- initialColumns?.flatMap(c => c.tasks)
- )
- ],
- [initialColumns]
+import type { Column, Task } from '@/shared/api'
+
+import { useState } from 'react'
+
+export const useDndState = (initialColumns: Column[] | undefined) => {
+ const [columns, setColumns] = useState(initialColumns ?? [])
+
+ const [tasks, setTasks] = useState(
+ initialColumns?.flatMap(c => c.tasks ?? []) ?? []
)
- const [columns, setColumns] = useState(parsedColumns)
- const [tasks, setTasks] = useState(parsedTasks)
const [prevInitialColumns, setPrevInitialColumns] = useState(initialColumns)
- const [activeTask, setActiveTask] = useState(
- null
- )
+ const [activeTask, setActiveTask] = useState(null)
- const [activeColumn, setActiveColumn] =
- useState(null)
+ const [activeColumn, setActiveColumn] = useState(null)
if (initialColumns !== prevInitialColumns) {
setPrevInitialColumns(initialColumns)
- const parsedColumns = parse(ColumnContracts.ColumnsSchema, initialColumns)
- const parsedTasks = parse(
- TaskContracts.TasksSchema,
- parsedColumns.flatMap(c => c.tasks)
- )
-
- setColumns(parsedColumns)
- setTasks(parsedTasks)
+ setColumns(initialColumns ?? [])
+ setTasks(initialColumns?.flatMap(c => c.tasks ?? []) ?? [])
}
return {
diff --git a/src/features/drag-and-drop/model/useTaskDragHandlers.ts b/src/features/drag-and-drop/model/useTaskDragHandlers.ts
index 41f574e6f..4177fade3 100644
--- a/src/features/drag-and-drop/model/useTaskDragHandlers.ts
+++ b/src/features/drag-and-drop/model/useTaskDragHandlers.ts
@@ -29,40 +29,38 @@ export const useTaskDragHandlers = ({
const onDragOver = ({ active, over }: DragOverEvent) => {
if (!over || active.id === over.id) return
+ if (recentlyDraggedOverIdRef.current === over.id) return
+
const isActiveATask = active.data.current?.type === 'task'
const isDraggingOverATask = over.data.current?.type === 'task'
const isDraggingOverAColumn = over.data.current?.type === 'column'
if (!isActiveATask) return
+ recentlyDraggedOverIdRef.current = over.id
+
if (isDraggingOverATask) {
- setTimeout(() => {
- setTasks(prevTasks => {
- const activeTaskIndex = prevTasks.findIndex(c => c.id === active.id)
- const overTaskIndex = prevTasks.findIndex(c => c.id === over.id)
-
- const activeTask = prevTasks[activeTaskIndex]
- const overTask = prevTasks[overTaskIndex]
-
- recentlyDraggedOverIdRef.current = over.id
-
- if (
- activeTask &&
- overTask &&
- activeTask.columnId !== overTask.columnId
- ) {
- activeTask.columnId = overTask.columnId
-
- return arrayMove(
- prevTasks,
- activeTaskIndex,
- Math.max(0, overTaskIndex - 1)
- )
- }
-
- return arrayMove(prevTasks, activeTaskIndex, overTaskIndex)
- })
- }, 0)
+ setTasks(prevTasks => {
+ const activeTaskIndex = prevTasks.findIndex(c => c.id === active.id)
+ const overTaskIndex = prevTasks.findIndex(c => c.id === over.id)
+
+ const activeTask = prevTasks[activeTaskIndex]
+ const overTask = prevTasks[overTaskIndex]
+
+ if (!activeTask || !overTask) return prevTasks
+
+ if (activeTask.columnId !== overTask.columnId) {
+ activeTask.columnId = overTask.columnId
+
+ return arrayMove(
+ prevTasks,
+ activeTaskIndex,
+ Math.max(0, overTaskIndex - 1)
+ )
+ }
+
+ return arrayMove(prevTasks, activeTaskIndex, overTaskIndex)
+ })
}
if (isDraggingOverAColumn) {
@@ -86,11 +84,10 @@ export const useTaskDragHandlers = ({
const onDragEnd = ({ active }: DragEndEvent) => {
setActiveTask(null)
- if (
- !active ||
- active.data.current?.type !== 'task' ||
- !recentlyDraggedOverIdRef.current
- ) {
+ const draggedOverId = recentlyDraggedOverIdRef.current
+ recentlyDraggedOverIdRef.current = null
+
+ if (!active || active.data.current?.type !== 'task' || !draggedOverId) {
return
}
diff --git a/src/features/label/add/api/useAddLabel.ts b/src/features/label/add/api/useAddLabel.ts
deleted file mode 100644
index 3d51aea8a..000000000
--- a/src/features/label/add/api/useAddLabel.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useMutation } from '@tanstack/react-query'
-
-import { useLabelModalStore } from '@/entities/label'
-
-import { createLabelMutation, getAllLabelsQueryKey } from '@/shared/api'
-
-export const useAddLabel = (onCreatedLabel: (...event: unknown[]) => void) => {
- const { setModal } = useLabelModalStore()
-
- return useMutation({
- ...createLabelMutation(),
- meta: {
- invalidates: [getAllLabelsQueryKey()],
- errorMessage:
- 'An error occurred while adding the label. Please try again shortly.'
- },
- onSuccess(data) {
- setModal({ isOpen: false })
- onCreatedLabel(data)
- }
- })
-}
diff --git a/src/features/label/add/index.ts b/src/features/label/add/index.ts
deleted file mode 100644
index ae9daabe4..000000000
--- a/src/features/label/add/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { AddLabelDialog } from './ui/AddLabelDialog'
diff --git a/src/features/label/add/model/contract.ts b/src/features/label/add/model/contract.ts
deleted file mode 100644
index e388ad000..000000000
--- a/src/features/label/add/model/contract.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as v from 'valibot'
-
-import { LABEL_COLORS } from '@/entities/label'
-
-export const AddLabelSchema = v.object({
- name: v.pipe(
- v.string(),
- v.trim(),
- v.minLength(2, 'Please enter at least 2 characters.')
- ),
- color: v.fallback(v.picklist(LABEL_COLORS), 'blue')
-})
-
-export type AddLabelSchema = v.InferOutput
diff --git a/src/features/label/add/ui/AddLabelForm.tsx b/src/features/label/add/ui/AddLabelForm.tsx
deleted file mode 100644
index 7eef58a6d..000000000
--- a/src/features/label/add/ui/AddLabelForm.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { useAppForm } from '@/shared/lib'
-import {
- Form,
- FormControl,
- FormField,
- FormItem,
- FormLabel,
- FormMessage,
- Input,
- PlusButtonWithLoader
-} from '@/shared/ui'
-
-import { useAddLabel } from '../api/useAddLabel'
-import { AddLabelSchema } from '../model/contract'
-import { LabelColorPicker } from './LabelColorPicker'
-
-type AddLabelFormProps = {
- name?: string
- onCreatedLabel: (...event: unknown[]) => void
-}
-
-export const AddLabelForm = ({ name, onCreatedLabel }: AddLabelFormProps) => {
- const form = useAppForm(AddLabelSchema, {
- defaultValues: { name: name ?? '', color: 'blue' }
- })
-
- const { mutate: addLabel, isPending } = useAddLabel(onCreatedLabel)
-
- return (
-
-
- )
-}
diff --git a/src/features/settings/general/api/useUpdateGeneralSettings.ts b/src/features/settings/general/api/useUpdateGeneralSettings.ts
new file mode 100644
index 000000000..7997d80c5
--- /dev/null
+++ b/src/features/settings/general/api/useUpdateGeneralSettings.ts
@@ -0,0 +1,51 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { parse } from 'valibot'
+
+import { SettingContracts, settingQueries } from '@/entities/setting'
+
+import { updateGeneralSettingsMutation } from '@/shared/api'
+
+export const useUpdateGeneralSettings = () => {
+ const queryClient = useQueryClient()
+
+ const allSettinsQueryKey = settingQueries.lists()
+
+ return useMutation({
+ ...updateGeneralSettingsMutation(),
+ meta: {
+ errorMessage: 'We couldn’t update your settings. Please try again.'
+ },
+ onMutate: async ({ body }) => {
+ await queryClient.cancelQueries({ queryKey: allSettinsQueryKey })
+
+ const previousSettings = queryClient.getQueryData(allSettinsQueryKey)
+
+ const parsedPreviousSettings = parse(
+ SettingContracts.SettingsSchema,
+ previousSettings
+ )
+
+ queryClient.setQueryData(allSettinsQueryKey, oldSettings => {
+ if (!oldSettings) return oldSettings
+
+ const parsedOldSettings = parse(
+ SettingContracts.SettingsSchema,
+ oldSettings
+ )
+
+ return {
+ ...parsedOldSettings,
+ general: { ...parsedOldSettings.general, ...body }
+ }
+ })
+
+ return { previousSettings: parsedPreviousSettings }
+ },
+ onError: (_, __, context) => {
+ queryClient.setQueryData(allSettinsQueryKey, context?.previousSettings)
+ },
+ onSettled: () => {
+ queryClient.invalidateQueries({ queryKey: allSettinsQueryKey })
+ }
+ })
+}
diff --git a/src/features/settings/general/config/board-background-blur-options.ts b/src/features/settings/general/config/board-background-blur-options.ts
new file mode 100644
index 000000000..86a919b87
--- /dev/null
+++ b/src/features/settings/general/config/board-background-blur-options.ts
@@ -0,0 +1,7 @@
+import type { SettingTypes } from '@/entities/setting'
+
+export const BOARD_BACKGROUND_BLUR_OPTIONS: SettingTypes.Option[] = [
+ { value: 'off', label: 'Off' },
+ { value: 'low', label: 'Low' },
+ { value: 'medium', label: 'Medium' }
+] as const
diff --git a/src/features/settings/general/config/date-format-options.ts b/src/features/settings/general/config/date-format-options.ts
new file mode 100644
index 000000000..527b7e111
--- /dev/null
+++ b/src/features/settings/general/config/date-format-options.ts
@@ -0,0 +1,7 @@
+import type { SettingTypes } from '@/entities/setting'
+
+export const DATE_FORMAT_OPTIONS: SettingTypes.Option[] = [
+ { value: 'dd_mm_yyyy', label: '31/12/2026' },
+ { value: 'mm_dd_yyyy', label: '12/31/2026' },
+ { value: 'yyyy_mm_dd', label: '2026/12/31' }
+] as const
diff --git a/src/features/settings/general/config/enable-animations-options.ts b/src/features/settings/general/config/enable-animations-options.ts
new file mode 100644
index 000000000..1a4b24cc4
--- /dev/null
+++ b/src/features/settings/general/config/enable-animations-options.ts
@@ -0,0 +1,7 @@
+import type { SettingTypes } from '@/entities/setting'
+
+export const ENABLE_ANIMATIONS_OPTIONS: SettingTypes.Option[] = [
+ { value: 'system', label: 'System' },
+ { value: 'on', label: 'On' },
+ { value: 'off', label: 'Off' }
+] as const
diff --git a/src/features/settings/general/config/first-day-week-options.ts b/src/features/settings/general/config/first-day-week-options.ts
new file mode 100644
index 000000000..a86eacaeb
--- /dev/null
+++ b/src/features/settings/general/config/first-day-week-options.ts
@@ -0,0 +1,6 @@
+import type { SettingTypes } from '@/entities/setting'
+
+export const FIRST_DAY_WEEK_OPTIONS: SettingTypes.Option[] = [
+ { value: 'sunday', label: 'Sunday' },
+ { value: 'monday', label: 'Monday' }
+] as const
diff --git a/src/features/settings/general/config/font-size-options.ts b/src/features/settings/general/config/font-size-options.ts
new file mode 100644
index 000000000..5926ac017
--- /dev/null
+++ b/src/features/settings/general/config/font-size-options.ts
@@ -0,0 +1,7 @@
+import type { SettingTypes } from '@/entities/setting'
+
+export const FONT_SIZE_OPTIONS: SettingTypes.Option[] = [
+ { value: 'small', label: 'Small' },
+ { value: 'medium', label: 'Medium' },
+ { value: 'large', label: 'Large' }
+] as const
diff --git a/src/features/settings/general/config/general-settings-data.ts b/src/features/settings/general/config/general-settings-data.ts
new file mode 100644
index 000000000..6667b8b08
--- /dev/null
+++ b/src/features/settings/general/config/general-settings-data.ts
@@ -0,0 +1,69 @@
+import type { SettingTypes } from '@/entities/setting'
+import type { GeneralSettings } from '@/shared/api'
+
+import { BOARD_BACKGROUND_BLUR_OPTIONS } from './board-background-blur-options'
+import { DATE_FORMAT_OPTIONS } from './date-format-options'
+import { ENABLE_ANIMATIONS_OPTIONS } from './enable-animations-options'
+import { FIRST_DAY_WEEK_OPTIONS } from './first-day-week-options'
+import { FONT_SIZE_OPTIONS } from './font-size-options'
+import { THEME_OPTIONS } from './theme-options'
+
+export const GENERAL_SETTINGS: SettingTypes.SettingDefinition<
+ GeneralSettings,
+ 'accentColor'
+>[] = [
+ {
+ type: 'select',
+ key: 'theme',
+ title: 'Theme',
+ description: 'Choose between light, dark, or system appearance.',
+ options: THEME_OPTIONS
+ },
+ {
+ type: 'custom',
+ key: 'accentColor',
+ title: 'Accent color',
+ description: 'Set the primary color used throughout the app.'
+ },
+ {
+ type: 'select',
+ key: 'firstDayOfWeek',
+ title: 'First day of the week',
+ description: 'Choose which day your calendars and date pickers start on.',
+ options: FIRST_DAY_WEEK_OPTIONS
+ },
+ {
+ type: 'select',
+ key: 'dateFormat',
+ title: 'Date format',
+ description: 'Select how dates are displayed across the app.',
+ options: DATE_FORMAT_OPTIONS
+ },
+ {
+ type: 'select',
+ key: 'boardBackgroundBlur',
+ title: 'Board background blur',
+ description: 'Adjust the blur applied to board backgrounds.',
+ options: BOARD_BACKGROUND_BLUR_OPTIONS
+ },
+ {
+ type: 'select',
+ key: 'fontSize',
+ title: 'Font size',
+ description: 'Adjust the size of text throughout the app.',
+ options: FONT_SIZE_OPTIONS
+ },
+ {
+ type: 'select',
+ key: 'enableAnimations',
+ title: 'Enable animations',
+ description: 'Enable animations and transitions throughout the app.',
+ options: ENABLE_ANIMATIONS_OPTIONS
+ },
+ {
+ type: 'switch',
+ key: 'confirmBeforeDelete',
+ title: 'Confirm before delete',
+ description: 'Ask for confirmation before permanently deleting items.'
+ }
+] as const
diff --git a/src/features/settings/general/config/theme-options.ts b/src/features/settings/general/config/theme-options.ts
new file mode 100644
index 000000000..ae2dfe5f1
--- /dev/null
+++ b/src/features/settings/general/config/theme-options.ts
@@ -0,0 +1,7 @@
+import type { SettingTypes } from '@/entities/setting'
+
+export const THEME_OPTIONS: SettingTypes.Option[] = [
+ { value: 'light', label: 'Light' },
+ { value: 'dark', label: 'Dark' },
+ { value: 'system', label: 'System' }
+] as const
diff --git a/src/features/settings/general/index.ts b/src/features/settings/general/index.ts
new file mode 100644
index 000000000..68021e0db
--- /dev/null
+++ b/src/features/settings/general/index.ts
@@ -0,0 +1 @@
+export { GeneralSettings } from './ui/GeneralSettings'
diff --git a/src/features/settings/general/ui/AccentColorSelect.tsx b/src/features/settings/general/ui/AccentColorSelect.tsx
new file mode 100644
index 000000000..d938e0984
--- /dev/null
+++ b/src/features/settings/general/ui/AccentColorSelect.tsx
@@ -0,0 +1,57 @@
+import { ACCENT_COLOR_MAP } from '@/entities/user/@x/setting'
+
+import { AccentColor } from '@/shared/api'
+import { capitalize } from '@/shared/lib'
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectItemText,
+ SelectTrigger,
+ SelectValue
+} from '@/shared/ui'
+
+type AccentColorSelectProps = {
+ value: AccentColor | undefined
+ onChange: (v: AccentColor | null) => void
+}
+
+export const AccentColorSelect = ({
+ value,
+ onChange
+}: AccentColorSelectProps) => (
+
+)
diff --git a/src/features/settings/general/ui/GeneralSettings.tsx b/src/features/settings/general/ui/GeneralSettings.tsx
new file mode 100644
index 000000000..615f35b59
--- /dev/null
+++ b/src/features/settings/general/ui/GeneralSettings.tsx
@@ -0,0 +1,55 @@
+import { Settings, useSettings } from '@/entities/setting'
+
+import { Switch } from '@/shared/ui'
+
+import { useUpdateGeneralSettings } from '../api/useUpdateGeneralSettings'
+import { GENERAL_SETTINGS } from '../config/general-settings-data'
+import { AccentColorSelect } from './AccentColorSelect'
+
+export const GeneralSettings = () => {
+ const { data: generalSettings, isPending } = useSettings(
+ select => select.general
+ )
+
+ const { mutate: update } = useUpdateGeneralSettings()
+
+ return (
+
+ {GENERAL_SETTINGS.map(setting => (
+
+
+ {setting.title}
+ {setting.description}
+
+
+ {setting.type === 'select' && (
+ update({ body: { [setting.key]: value } })}
+ />
+ )}
+
+ {setting.type === 'switch' && (
+
+ update({ body: { [setting.key]: checked } })
+ }
+ />
+ )}
+
+ {setting.type === 'custom' && (
+ update({ body: { accentColor: value! } })}
+ />
+ )}
+
+
+ ))}
+
+ )
+}
diff --git a/src/features/settings/labels/api/useAddLabel.ts b/src/features/settings/labels/api/useAddLabel.ts
new file mode 100644
index 000000000..7d2b0e98d
--- /dev/null
+++ b/src/features/settings/labels/api/useAddLabel.ts
@@ -0,0 +1,30 @@
+import { useMutation } from '@tanstack/react-query'
+import { isAxiosError } from 'axios'
+
+import { labelQueries, useLabelModalStore } from '@/entities/label'
+
+import { createLabelMutation } from '@/shared/api'
+
+export const useAddLabel = (
+ onCreatedLabel: ((...event: unknown[]) => void) | undefined
+) => {
+ const { setModal } = useLabelModalStore()
+
+ return useMutation({
+ ...createLabelMutation(),
+ meta: {
+ invalidates: [labelQueries.lists()],
+ errorMessage: e => {
+ if (isAxiosError(e)) {
+ return e.response?.status === 409
+ ? 'A label with this name already exists.'
+ : 'An error occurred while adding the label. Please try again.'
+ }
+ }
+ },
+ onSuccess(data) {
+ setModal({ isOpen: false })
+ onCreatedLabel?.(data)
+ }
+ })
+}
diff --git a/src/features/settings/labels/api/useDeleteLabel.ts b/src/features/settings/labels/api/useDeleteLabel.ts
new file mode 100644
index 000000000..d7a0c4642
--- /dev/null
+++ b/src/features/settings/labels/api/useDeleteLabel.ts
@@ -0,0 +1,46 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { array, parse } from 'valibot'
+
+import { boardQueries } from '@/entities/board'
+import { labelQueries } from '@/entities/label'
+
+import { deleteLabelMutation, vLabel } from '@/shared/api'
+
+export const useDeleteLabel = () => {
+ const queryClient = useQueryClient()
+
+ const allLabelsQueryKey = labelQueries.lists()
+
+ return useMutation({
+ ...deleteLabelMutation(),
+ meta: {
+ errorMessage:
+ 'An error occurred while deleting the label. Please try again.'
+ },
+ onMutate: async ({ path: { labelId } }) => {
+ await queryClient.cancelQueries({ queryKey: allLabelsQueryKey })
+
+ const previousLabels = queryClient.getQueryData(allLabelsQueryKey)
+
+ const parsedPreviousLabels = parse(array(vLabel), previousLabels)
+
+ queryClient.setQueryData(allLabelsQueryKey, oldLabels => {
+ if (!oldLabels) return oldLabels
+
+ const parsedOldLabels = parse(array(vLabel), oldLabels)
+
+ return parsedOldLabels.filter(l => l.id !== labelId)
+ })
+
+ return { previousLabels: parsedPreviousLabels }
+ },
+ onError: (_, __, context) => {
+ queryClient.setQueryData(allLabelsQueryKey, context?.previousLabels)
+ },
+ onSettled: () => {
+ queryClient.invalidateQueries({ queryKey: allLabelsQueryKey })
+ queryClient.invalidateQueries({ queryKey: boardQueries.lists() })
+ queryClient.invalidateQueries({ queryKey: boardQueries.details() })
+ }
+ })
+}
diff --git a/src/features/settings/labels/api/useEditLabel.ts b/src/features/settings/labels/api/useEditLabel.ts
new file mode 100644
index 000000000..55975c943
--- /dev/null
+++ b/src/features/settings/labels/api/useEditLabel.ts
@@ -0,0 +1,33 @@
+import type { Dispatch, SetStateAction } from 'react'
+
+import { useMutation } from '@tanstack/react-query'
+import { isAxiosError } from 'axios'
+
+import { boardQueries } from '@/entities/board'
+import { labelQueries } from '@/entities/label'
+
+import { updateLabelMutation } from '@/shared/api'
+
+export const useEditLabel = (
+ setIsDialogOpen: Dispatch>
+) =>
+ useMutation({
+ ...updateLabelMutation(),
+ meta: {
+ invalidates: [
+ labelQueries.lists(),
+ boardQueries.lists(),
+ boardQueries.details()
+ ],
+ errorMessage: e => {
+ if (isAxiosError(e)) {
+ return e.response?.status === 409
+ ? 'A label with this name already exists.'
+ : 'An error occurred while editing the label. Please try again.'
+ }
+ }
+ },
+ onSuccess() {
+ setIsDialogOpen(false)
+ }
+ })
diff --git a/src/features/settings/labels/api/useGetLabelsSettings.ts b/src/features/settings/labels/api/useGetLabelsSettings.ts
new file mode 100644
index 000000000..8acb9a6b7
--- /dev/null
+++ b/src/features/settings/labels/api/useGetLabelsSettings.ts
@@ -0,0 +1,17 @@
+import { useQueries } from '@tanstack/react-query'
+
+import { labelQueries } from '@/entities/label'
+import { settingQueries } from '@/entities/setting'
+
+export const useGetLabelsSettings = () =>
+ useQueries({
+ queries: [
+ labelQueries.list(),
+ settingQueries.list({ select: settings => settings.label })
+ ],
+ combine: results => ({
+ labels: results[0].data,
+ labelSettings: results[1].data,
+ isPending: results.some(result => result.isPending)
+ })
+ })
diff --git a/src/features/settings/labels/api/useUpdateLabelsSettings.ts b/src/features/settings/labels/api/useUpdateLabelsSettings.ts
new file mode 100644
index 000000000..0fe2bc1f4
--- /dev/null
+++ b/src/features/settings/labels/api/useUpdateLabelsSettings.ts
@@ -0,0 +1,51 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { parse } from 'valibot'
+
+import { SettingContracts, settingQueries } from '@/entities/setting'
+
+import { updateLabelSettingsMutation } from '@/shared/api'
+
+export const useUpdateLabelsSettings = () => {
+ const queryClient = useQueryClient()
+
+ const allSettinsQueryKey = settingQueries.lists()
+
+ return useMutation({
+ ...updateLabelSettingsMutation(),
+ meta: {
+ errorMessage: 'We couldn’t update your settings. Please try again'
+ },
+ onMutate: async ({ body }) => {
+ await queryClient.cancelQueries({ queryKey: allSettinsQueryKey })
+
+ const previousSettings = queryClient.getQueryData(allSettinsQueryKey)
+
+ const parsedPreviousSettings = parse(
+ SettingContracts.SettingsSchema,
+ previousSettings
+ )
+
+ queryClient.setQueryData(allSettinsQueryKey, oldSettings => {
+ if (!oldSettings) return oldSettings
+
+ const parsedOldSettings = parse(
+ SettingContracts.SettingsSchema,
+ oldSettings
+ )
+
+ return {
+ ...parsedOldSettings,
+ label: { ...parsedOldSettings.label, ...body }
+ }
+ })
+
+ return { previousSettings: parsedPreviousSettings }
+ },
+ onError: (_, __, context) => {
+ queryClient.setQueryData(allSettinsQueryKey, context?.previousSettings)
+ },
+ onSettled: () => {
+ queryClient.invalidateQueries({ queryKey: allSettinsQueryKey })
+ }
+ })
+}
diff --git a/src/features/settings/labels/config/label-display-options.ts b/src/features/settings/labels/config/label-display-options.ts
new file mode 100644
index 000000000..aab401534
--- /dev/null
+++ b/src/features/settings/labels/config/label-display-options.ts
@@ -0,0 +1,7 @@
+import type { SettingTypes } from '@/entities/setting'
+
+export const LABEL_DISPLAY_OPTIONS: SettingTypes.Option[] = [
+ { value: 'full', label: 'Full' },
+ { value: 'compact', label: 'Compact' },
+ { value: 'hidden', label: 'Hidden' }
+] as const
diff --git a/src/features/settings/labels/config/labels-settings-data.ts b/src/features/settings/labels/config/labels-settings-data.ts
new file mode 100644
index 000000000..9ce65a69a
--- /dev/null
+++ b/src/features/settings/labels/config/labels-settings-data.ts
@@ -0,0 +1,23 @@
+import type { SettingTypes } from '@/entities/setting'
+import type { LabelSettings } from '@/shared/api'
+
+import { LABEL_DISPLAY_OPTIONS } from './label-display-options'
+import { MAX_LABELS_SHOWN_OPTIONS } from './max-labels-shown-options'
+
+export const LABELS_SETTINGS: SettingTypes.SettingDefinition[] =
+ [
+ {
+ type: 'select',
+ key: 'labelDisplay',
+ title: 'Label display',
+ description: 'Choose how labels appear on task cards.',
+ options: LABEL_DISPLAY_OPTIONS
+ },
+ {
+ type: 'select',
+ key: 'maxLabelsShown',
+ title: 'Maximum labels shown',
+ description: 'Set the maximum number of labels displayed on each task.',
+ options: MAX_LABELS_SHOWN_OPTIONS
+ }
+ ] as const
diff --git a/src/features/settings/labels/config/max-labels-shown-options.ts b/src/features/settings/labels/config/max-labels-shown-options.ts
new file mode 100644
index 000000000..d43b80905
--- /dev/null
+++ b/src/features/settings/labels/config/max-labels-shown-options.ts
@@ -0,0 +1,8 @@
+import type { SettingTypes } from '@/entities/setting'
+
+export const MAX_LABELS_SHOWN_OPTIONS: SettingTypes.Option[] = [
+ { value: '0', label: 'All' },
+ { value: '1', label: '1' },
+ { value: '2', label: '2' },
+ { value: '3', label: '3' }
+] as const
diff --git a/src/features/settings/labels/index.ts b/src/features/settings/labels/index.ts
new file mode 100644
index 000000000..84ba3d678
--- /dev/null
+++ b/src/features/settings/labels/index.ts
@@ -0,0 +1,2 @@
+export { LabelsSettings } from './ui/LabelsSettings'
+export { AddLabelDialog } from './ui/add/AddLabelDialog'
diff --git a/src/features/settings/labels/model/contract.ts b/src/features/settings/labels/model/contract.ts
new file mode 100644
index 000000000..bae9e9cf1
--- /dev/null
+++ b/src/features/settings/labels/model/contract.ts
@@ -0,0 +1,32 @@
+import * as v from 'valibot'
+
+import { vAccentColor } from '@/shared/api'
+
+export const AddLabelSchema = v.object({
+ name: v.pipe(
+ v.string(),
+ v.trim(),
+ v.minLength(2, 'Please enter at least 2 characters.')
+ ),
+ color: v.fallback(vAccentColor, 'blue')
+})
+
+export const EditLabelSchema = v.intersect([
+ v.partial(AddLabelSchema),
+ v.object({
+ description: v.union([
+ v.pipe(
+ v.literal(''),
+ v.transform(() => null)
+ ),
+ v.pipe(
+ v.string(),
+ v.trim(),
+ v.minLength(3, 'Please enter at least 3 characters.')
+ )
+ ])
+ })
+])
+
+export type AddLabelSchema = v.InferOutput
+export type EditLabelSchema = v.InferOutput
diff --git a/src/features/settings/labels/ui/LabelsSettings.tsx b/src/features/settings/labels/ui/LabelsSettings.tsx
new file mode 100644
index 000000000..848051b6f
--- /dev/null
+++ b/src/features/settings/labels/ui/LabelsSettings.tsx
@@ -0,0 +1,50 @@
+import { Settings } from '@/entities/setting'
+
+import { Switch } from '@/shared/ui'
+
+import { useGetLabelsSettings } from '../api/useGetLabelsSettings'
+import { useUpdateLabelsSettings } from '../api/useUpdateLabelsSettings'
+import { LABELS_SETTINGS } from '../config/labels-settings-data'
+import { AddLabelDialogButton } from './add/AddLabelDialogButton'
+import { LabelsTable } from './LabelsTable'
+
+export const LabelsSettings = () => {
+ const { labels, labelSettings, isPending } = useGetLabelsSettings()
+
+ const { mutate: update } = useUpdateLabelsSettings()
+
+ return (
+
+
+
+ {LABELS_SETTINGS.map(setting => (
+
+
+ {setting.title}
+ {setting.description}
+
+
+ {setting.type === 'select' && (
+ update({ body: { [setting.key]: value } })}
+ />
+ )}
+
+ {setting.type === 'switch' && (
+
+ update({ body: { [setting.key]: checked } })
+ }
+ />
+ )}
+
+
+ ))}
+
+ )
+}
diff --git a/src/features/settings/labels/ui/LabelsTable.tsx b/src/features/settings/labels/ui/LabelsTable.tsx
new file mode 100644
index 000000000..7cc5c5af8
--- /dev/null
+++ b/src/features/settings/labels/ui/LabelsTable.tsx
@@ -0,0 +1,100 @@
+import type { Label } from '@/shared/api'
+
+import { format } from 'date-fns'
+import { AnimatePresence } from 'motion/react'
+import * as m from 'motion/react-m'
+
+import { LABEL_BASE_COLOR_MAP } from '@/entities/label'
+
+import { cn, useMediaQuery } from '@/shared/lib'
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow
+} from '@/shared/ui'
+
+import { DeleteLabelAlertDialog } from './delete/DeleteLabelAlertDialog'
+import { EditLabelDialog } from './edit/EditLabelDialog'
+
+const MotionTableRow = m.create(TableRow)
+
+type LabelsTableProps = {
+ labels: Label[] | undefined
+}
+
+export const LabelsTable = ({ labels }: LabelsTableProps) => {
+ const isDesktop = useMediaQuery('(min-width: 1440px)')
+
+ return (
+
+
+
+ Name
+
+ Description
+
+ Created
+ Actions
+
+
+
+
+ {labels && labels.length > 0 ? (
+ labels.map(({ id, name, description, color, createdAt }) => (
+
+
+
+ {name}
+
+
+ {description}
+
+
+ {format(createdAt, 'MMM yyyy')}
+
+
+
+
+
+
+ ))
+ ) : (
+
+
+ No labels yet. Add your first label to get started.
+
+
+ )}
+
+
+
+ )
+}
diff --git a/src/features/label/add/ui/AddLabelDialog.tsx b/src/features/settings/labels/ui/add/AddLabelDialog.tsx
similarity index 100%
rename from src/features/label/add/ui/AddLabelDialog.tsx
rename to src/features/settings/labels/ui/add/AddLabelDialog.tsx
diff --git a/src/features/settings/labels/ui/add/AddLabelDialogButton.tsx b/src/features/settings/labels/ui/add/AddLabelDialogButton.tsx
new file mode 100644
index 000000000..e08ba4d2d
--- /dev/null
+++ b/src/features/settings/labels/ui/add/AddLabelDialogButton.tsx
@@ -0,0 +1,22 @@
+import { PlusIcon } from 'lucide-react'
+
+import { useLabelModalStore } from '@/entities/label'
+
+import { Button } from '@/shared/ui'
+
+export const AddLabelDialogButton = () => {
+ const { setModal } = useLabelModalStore()
+
+ return (
+
+ )
+}
diff --git a/src/features/settings/labels/ui/add/AddLabelForm.tsx b/src/features/settings/labels/ui/add/AddLabelForm.tsx
new file mode 100644
index 000000000..13d37deda
--- /dev/null
+++ b/src/features/settings/labels/ui/add/AddLabelForm.tsx
@@ -0,0 +1,80 @@
+import * as m from 'motion/react-m'
+
+import { LabelColorPicker } from '@/entities/label'
+
+import { formVariants, useAppForm } from '@/shared/lib'
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+ Input,
+ PlusButtonWithLoader
+} from '@/shared/ui'
+
+import { useAddLabel } from '../../api/useAddLabel'
+import { AddLabelSchema } from '../../model/contract'
+
+type AddLabelFormProps = {
+ name?: string
+ onCreatedLabel?: (...event: unknown[]) => void
+}
+
+export const AddLabelForm = ({ name, onCreatedLabel }: AddLabelFormProps) => {
+ const form = useAppForm(AddLabelSchema, {
+ defaultValues: { name: name ?? '', color: 'blue' }
+ })
+
+ const { mutate: addLabel, isPending } = useAddLabel(onCreatedLabel)
+
+ return (
+
+ )
+}
diff --git a/src/features/settings/labels/ui/delete/DeleteLabelAlertDialog.tsx b/src/features/settings/labels/ui/delete/DeleteLabelAlertDialog.tsx
new file mode 100644
index 000000000..d5cd14682
--- /dev/null
+++ b/src/features/settings/labels/ui/delete/DeleteLabelAlertDialog.tsx
@@ -0,0 +1,53 @@
+import { TrashIcon } from 'lucide-react'
+
+import { ConfirmDeleteTrigger } from '@/entities/setting'
+
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogTitle,
+ AlertDialogTrigger
+} from '@/shared/ui'
+
+import { useDeleteLabel } from '../../api/useDeleteLabel'
+
+export const DeleteLabelAlertDialog = ({ labelId }: { labelId: string }) => {
+ const { mutate: deleteLabel } = useDeleteLabel()
+
+ const handleDeleteLabel = () => {
+ deleteLabel({ path: { labelId } })
+ }
+
+ return (
+
+
+
+
+
+
+ Delete label?
+
+ This action cannot be undone. The label will be permanently deleted
+ and removed from all tasks that use it.
+
+
+ Cancel
+
+ Delete
+
+
+
+
+
+ )
+}
diff --git a/src/features/settings/labels/ui/edit/EditLabelDialog.tsx b/src/features/settings/labels/ui/edit/EditLabelDialog.tsx
new file mode 100644
index 000000000..4ba36b06b
--- /dev/null
+++ b/src/features/settings/labels/ui/edit/EditLabelDialog.tsx
@@ -0,0 +1,46 @@
+import type { Label } from '@/shared/api'
+
+import { useState } from 'react'
+import { PencilIcon } from 'lucide-react'
+
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogTitle,
+ DialogTrigger
+} from '@/shared/ui'
+
+import { EditLabelForm } from './EditLabelForm'
+
+type EditLabelDialogProps = {
+ formData: Pick
+}
+
+export const EditLabelDialog = ({ formData }: EditLabelDialogProps) => {
+ const [isDialogOpen, setIsDialogOpen] = useState(false)
+
+ return (
+
+ )
+}
diff --git a/src/features/settings/labels/ui/edit/EditLabelForm.tsx b/src/features/settings/labels/ui/edit/EditLabelForm.tsx
new file mode 100644
index 000000000..f9b19eedc
--- /dev/null
+++ b/src/features/settings/labels/ui/edit/EditLabelForm.tsx
@@ -0,0 +1,94 @@
+import type { Label } from '@/shared/api'
+import type { Dispatch, SetStateAction } from 'react'
+
+import { LabelColorPicker } from '@/entities/label'
+
+import { useAppForm } from '@/shared/lib'
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+ Input,
+ PlusButtonWithLoader,
+ TextArea
+} from '@/shared/ui'
+
+import { useEditLabel } from '../../api/useEditLabel'
+import { EditLabelSchema } from '../../model/contract'
+
+type EditLabelFormProps = {
+ formData: Pick
+ setIsDialogOpen: Dispatch>
+}
+
+export const EditLabelForm = ({
+ formData: { name, color, description, id },
+ setIsDialogOpen
+}: EditLabelFormProps) => {
+ const form = useAppForm(EditLabelSchema, {
+ defaultValues: { name, color, description: description ?? '' }
+ })
+
+ const { mutate: editLabel, isPending } = useEditLabel(setIsDialogOpen)
+
+ return (
+
+
+ )
+}
diff --git a/src/features/settings/security/api/useAccountConnection.ts b/src/features/settings/security/api/useAccountConnection.ts
new file mode 100644
index 000000000..e625fafcb
--- /dev/null
+++ b/src/features/settings/security/api/useAccountConnection.ts
@@ -0,0 +1,42 @@
+import { useMutation } from '@tanstack/react-query'
+import { useLocation } from '@tanstack/react-router'
+
+import { sessionQueries } from '@/entities/user'
+
+import { authClient, getAuthErrorMessage } from '@/shared/api'
+import { env } from '@/shared/config'
+
+type AccountConnectionMutationData = {
+ providerId: string
+ isConnected: boolean
+}
+
+export const useAccountConnection = () => {
+ const { href } = useLocation()
+
+ return useMutation({
+ mutationFn: async ({
+ providerId,
+ isConnected
+ }: AccountConnectionMutationData) => {
+ if (isConnected) return authClient.unlinkAccount({ providerId })
+
+ return authClient.linkSocial({
+ provider: providerId,
+ callbackURL: env.VITE_BASE_URL + href,
+ errorCallbackURL: env.VITE_BASE_URL + href
+ })
+ },
+ meta: {
+ invalidates: [sessionQueries.accounts()],
+ errorMessage: e => {
+ if (e && 'error' in e) {
+ return (
+ getAuthErrorMessage(e.error.code) ??
+ 'An error occurred while updating the account connection. Please try again.'
+ )
+ }
+ }
+ }
+ })
+}
diff --git a/src/features/settings/security/api/useAddPasskey.ts b/src/features/settings/security/api/useAddPasskey.ts
new file mode 100644
index 000000000..9079b3870
--- /dev/null
+++ b/src/features/settings/security/api/useAddPasskey.ts
@@ -0,0 +1,36 @@
+import { useMutation } from '@tanstack/react-query'
+
+import { sessionQueries } from '@/entities/user'
+
+import { authClient, getAuthErrorMessage } from '@/shared/api'
+import { toast } from '@/shared/lib'
+
+import { usePasskeyDialogStore } from '../model/passkey-dialog.store'
+
+export const useAddPasskey = () => {
+ const { setIsOpen } = usePasskeyDialogStore()
+
+ return useMutation({
+ mutationFn: () => authClient.passkey.addPasskey(),
+ meta: {
+ invalidates: [sessionQueries.passkeys()],
+ errorMessage:
+ 'An error occurred while adding the passkey. Please try again.'
+ },
+ onSuccess({ error }) {
+ if (error && 'code' in error) {
+ if (error.code === 'ERROR_PASSTHROUGH_SEE_CAUSE_PROPERTY') {
+ return toast.warning('Passkey sign-in cancelled.')
+ }
+
+ const errorMessage = getAuthErrorMessage(error.code)
+
+ toast.error(errorMessage, {
+ description: 'The authenticator is already registered.'
+ })
+ }
+
+ if (!error) setIsOpen(true)
+ }
+ })
+}
diff --git a/src/features/settings/security/api/useDeletePasskey.ts b/src/features/settings/security/api/useDeletePasskey.ts
new file mode 100644
index 000000000..d80bf5b0f
--- /dev/null
+++ b/src/features/settings/security/api/useDeletePasskey.ts
@@ -0,0 +1,39 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { sessionQueries } from '@/entities/user'
+
+import { authClient } from '@/shared/api'
+
+export const useDeletePasskey = () => {
+ const queryClient = useQueryClient()
+
+ const allPasskeysQueryKey = sessionQueries.passkey().queryKey
+
+ return useMutation({
+ mutationFn: ({ id }: { id: string }) =>
+ authClient.passkey.deletePasskey({ id }),
+ meta: {
+ errorMessage:
+ 'An error occurred while deleting the passkey. Please try again.'
+ },
+ onMutate: async ({ id: passkeyId }) => {
+ await queryClient.cancelQueries({ queryKey: allPasskeysQueryKey })
+
+ const previousPasskeys = queryClient.getQueryData(allPasskeysQueryKey)
+
+ queryClient.setQueryData(allPasskeysQueryKey, oldPasskeys => {
+ if (!oldPasskeys) return oldPasskeys
+
+ return oldPasskeys.filter(passkey => passkey.id !== passkeyId)
+ })
+
+ return { previousPasskeys }
+ },
+ onError: (_, __, context) => {
+ queryClient.setQueryData(allPasskeysQueryKey, context?.previousPasskeys)
+ },
+ onSettled: () => {
+ queryClient.invalidateQueries({ queryKey: allPasskeysQueryKey })
+ }
+ })
+}
diff --git a/src/features/settings/security/api/useGetSecuritySettings.ts b/src/features/settings/security/api/useGetSecuritySettings.ts
new file mode 100644
index 000000000..bb897f85b
--- /dev/null
+++ b/src/features/settings/security/api/useGetSecuritySettings.ts
@@ -0,0 +1,18 @@
+import { useQueries } from '@tanstack/react-query'
+
+import { sessionQueries } from '@/entities/user'
+
+export const useGetSecuritySettings = () =>
+ useQueries({
+ queries: [
+ sessionQueries.list(),
+ sessionQueries.passkey(),
+ sessionQueries.account()
+ ],
+ combine: results => ({
+ sessions: results[0].data,
+ passkeys: results[1].data,
+ accounts: results[2].data,
+ isPending: results.some(result => result.isPending)
+ })
+ })
diff --git a/src/features/settings/security/api/useRevokeSession.ts b/src/features/settings/security/api/useRevokeSession.ts
new file mode 100644
index 000000000..76cb43ad0
--- /dev/null
+++ b/src/features/settings/security/api/useRevokeSession.ts
@@ -0,0 +1,31 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useNavigate } from '@tanstack/react-router'
+
+import { sessionQueries } from '@/entities/user'
+
+import { authClient } from '@/shared/api'
+
+export const useRevokeSession = () => {
+ const { data: currentSession } = useQuery(sessionQueries.current())
+
+ const queryClient = useQueryClient()
+
+ const navigate = useNavigate()
+
+ return useMutation({
+ mutationFn: ({ id }: { id: string }) =>
+ authClient.revokeSessionById({ id }),
+ meta: {
+ invalidates: [sessionQueries.lists()],
+ errorMessage:
+ 'An error occurred while revoking the session. Please try again.'
+ },
+ onSuccess: async (_, variables) => {
+ if (variables.id !== currentSession?.session.id) return
+
+ await authClient.signOut()
+ queryClient.setQueryData(sessionQueries.currents(), null)
+ navigate({ to: '/' })
+ }
+ })
+}
diff --git a/src/features/settings/security/api/useUpdatePasskey.ts b/src/features/settings/security/api/useUpdatePasskey.ts
new file mode 100644
index 000000000..252079258
--- /dev/null
+++ b/src/features/settings/security/api/useUpdatePasskey.ts
@@ -0,0 +1,24 @@
+import { useMutation } from '@tanstack/react-query'
+
+import { sessionQueries } from '@/entities/user'
+
+import { authClient } from '@/shared/api'
+
+type UpdatePasskeyMutation = {
+ id: string
+ name: string
+}
+
+export const useUpdatePasskey = (closeDialog: () => void) =>
+ useMutation({
+ mutationFn: (data: UpdatePasskeyMutation) =>
+ authClient.passkey.updatePasskey(data),
+ meta: {
+ invalidates: [sessionQueries.passkeys()],
+ errorMessage:
+ 'An error occurred while updating the passkey. Please try again.'
+ },
+ onSuccess() {
+ closeDialog()
+ }
+ })
diff --git a/src/features/settings/security/config/account-data.ts b/src/features/settings/security/config/account-data.ts
new file mode 100644
index 000000000..f92ca6f06
--- /dev/null
+++ b/src/features/settings/security/config/account-data.ts
@@ -0,0 +1,6 @@
+import { Google, Microsoft } from '@thesvg/react'
+
+export const ACCOUNT_DATA = [
+ { id: 'google', icon: Google, label: 'Google' },
+ { id: 'microsoft', icon: Microsoft, label: 'Microsoft' }
+]
diff --git a/src/features/settings/security/config/browser-icons.ts b/src/features/settings/security/config/browser-icons.ts
new file mode 100644
index 000000000..43c3a44ca
--- /dev/null
+++ b/src/features/settings/security/config/browser-icons.ts
@@ -0,0 +1,34 @@
+import type { ElementType } from 'react'
+
+import {
+ Bing,
+ BraveBrowser,
+ Chrome,
+ Chromium,
+ Duckduckgo,
+ Ecosia,
+ FirefoxBrowser,
+ MicrosoftEdge,
+ Opera,
+ Safari,
+ SamsungBrowser,
+ Vivaldi
+} from '@thesvg/react'
+
+export const BROWSER_ICONS: Record = {
+ Chrome,
+ Safari,
+ Firefox: FirefoxBrowser,
+ Edge: MicrosoftEdge,
+ Brave: BraveBrowser,
+ Opera,
+ Bing,
+ Vivaldi,
+ DuckDuckGo: Duckduckgo,
+ Chromium,
+ Ecosia,
+ 'Samsung Internet': SamsungBrowser,
+ 'Mobile Chrome': Chrome,
+ 'Mobile Firefox': FirefoxBrowser,
+ 'Mobile Safari': Safari
+} as const
diff --git a/src/features/settings/security/index.ts b/src/features/settings/security/index.ts
new file mode 100644
index 000000000..8426dba75
--- /dev/null
+++ b/src/features/settings/security/index.ts
@@ -0,0 +1 @@
+export { SecuritySettings } from './ui/SecuritySettings'
diff --git a/src/features/settings/security/model/contract.ts b/src/features/settings/security/model/contract.ts
new file mode 100644
index 000000000..9b199ce92
--- /dev/null
+++ b/src/features/settings/security/model/contract.ts
@@ -0,0 +1,11 @@
+import * as v from 'valibot'
+
+export const PasskeyNameSchema = v.object({
+ name: v.pipe(
+ v.string(),
+ v.trim(),
+ v.minLength(2, 'Please enter at least 2 characters.')
+ )
+})
+
+export type PasskeyNameSchema = v.InferOutput
diff --git a/src/features/settings/security/model/passkey-dialog.store.ts b/src/features/settings/security/model/passkey-dialog.store.ts
new file mode 100644
index 000000000..0cbc804eb
--- /dev/null
+++ b/src/features/settings/security/model/passkey-dialog.store.ts
@@ -0,0 +1,5 @@
+import { createStore } from 'stan-js'
+
+export const { useStore: usePasskeyDialogStore } = createStore({
+ isOpen: false
+})
diff --git a/src/features/settings/security/ui/SecurityActionButton.tsx b/src/features/settings/security/ui/SecurityActionButton.tsx
new file mode 100644
index 000000000..db7395f67
--- /dev/null
+++ b/src/features/settings/security/ui/SecurityActionButton.tsx
@@ -0,0 +1,21 @@
+import type { ComponentProps } from 'react'
+
+import { cn } from '@/shared/lib'
+
+export const SecurityActionButton = ({
+ children,
+ className,
+ onClick,
+ ...props
+}: ComponentProps<'button'>) => (
+
+)
diff --git a/src/features/settings/security/ui/SecuritySettings.tsx b/src/features/settings/security/ui/SecuritySettings.tsx
new file mode 100644
index 000000000..189ba0382
--- /dev/null
+++ b/src/features/settings/security/ui/SecuritySettings.tsx
@@ -0,0 +1,27 @@
+import { Settings } from '@/entities/setting'
+
+import { useGetSecuritySettings } from '../api/useGetSecuritySettings'
+import { AccountList } from './account-list/AccountList'
+import { AccountOAuthErrorHandler } from './account-list/AccountOAuthErrorHandler'
+import { PasskeysSection } from './passkeys/PasskeysSection'
+import { SessionsList } from './session-list/SessionList'
+
+export const SecuritySettings = () => {
+ const { sessions, passkeys, accounts, isPending } = useGetSecuritySettings()
+
+ return (
+
+ Sessions
+
+ Passkeys
+
+
+ Connected accounts
+
+
+
+
+ )
+}
diff --git a/src/features/settings/security/ui/account-list/AccountConnectionButton.tsx b/src/features/settings/security/ui/account-list/AccountConnectionButton.tsx
new file mode 100644
index 000000000..42c4cab7e
--- /dev/null
+++ b/src/features/settings/security/ui/account-list/AccountConnectionButton.tsx
@@ -0,0 +1,28 @@
+import { useAccountConnection } from '../../api/useAccountConnection'
+import { SecurityActionButton } from '../SecurityActionButton'
+
+type AccountConnectionButtonProps = {
+ isConnected: boolean
+ providerId: string
+}
+
+export const AccountConnectionButton = ({
+ isConnected,
+ providerId
+}: AccountConnectionButtonProps) => {
+ const { mutate, isPending } = useAccountConnection()
+
+ return (
+ mutate({ providerId, isConnected })}
+ disabled={isPending}>
+ {isPending
+ ? isConnected
+ ? 'Disconnecting...'
+ : 'Connecting...'
+ : isConnected
+ ? 'Disconnect'
+ : 'Connect'}
+
+ )
+}
diff --git a/src/features/settings/security/ui/account-list/AccountList.tsx b/src/features/settings/security/ui/account-list/AccountList.tsx
new file mode 100644
index 000000000..f9619ef6d
--- /dev/null
+++ b/src/features/settings/security/ui/account-list/AccountList.tsx
@@ -0,0 +1,51 @@
+import type { Account } from 'better-auth'
+
+import { AnimatePresence } from 'motion/react'
+import * as m from 'motion/react-m'
+
+import { Settings } from '@/entities/setting'
+
+import { ACCOUNT_DATA } from '../../config/account-data'
+import { AccountConnectionButton } from './AccountConnectionButton'
+
+type AccountListProps = {
+ accounts: Account[] | undefined
+}
+
+export const AccountList = ({ accounts }: AccountListProps) =>
+ ACCOUNT_DATA.map(({ id, icon: Icon, label }) => {
+ const isConnected = !!accounts?.some(account => account.providerId === id)
+
+ return (
+
+
+
+
+
{label}
+
+ {isConnected && (
+
+
+ Connected
+
+ )}
+
+
+
+
+ {!hasPasskeys
+ ? 'No passkeys registered'
+ : pluralize(passkeys!.length, 'passkey')}
+
+
+
+ {hasPasskeys && (
+ <>
+
+
+ {passkeys!.map(passkey => (
+
+
+ {passkey.name}
+
+
+
+
+
+
+ ))}
+
+
+ )}
+
+ )
+}
diff --git a/src/features/settings/security/ui/session-list/BrowserIcon.tsx b/src/features/settings/security/ui/session-list/BrowserIcon.tsx
new file mode 100644
index 000000000..46bfecfa7
--- /dev/null
+++ b/src/features/settings/security/ui/session-list/BrowserIcon.tsx
@@ -0,0 +1,13 @@
+import { Globe } from 'lucide-react'
+
+import { BROWSER_ICONS } from '../../config/browser-icons'
+
+export const BrowserIcon = ({ browser }: { browser?: string }) => {
+ const icon = BROWSER_ICONS[browser as keyof typeof BROWSER_ICONS]
+
+ if (!icon) return
+
+ const Icon = icon
+
+ return
+}
diff --git a/src/features/settings/security/ui/session-list/RevokeSessionButton.tsx b/src/features/settings/security/ui/session-list/RevokeSessionButton.tsx
new file mode 100644
index 000000000..3db327c30
--- /dev/null
+++ b/src/features/settings/security/ui/session-list/RevokeSessionButton.tsx
@@ -0,0 +1,35 @@
+import { Loader } from '@/shared/ui'
+
+import { useRevokeSession } from '../../api/useRevokeSession'
+import { SecurityActionButton } from '../SecurityActionButton'
+
+type RevokeSessionButtonProps = {
+ sessionId: string
+ isCurrent: boolean
+}
+
+export const RevokeSessionButton = ({
+ sessionId,
+ isCurrent
+}: RevokeSessionButtonProps) => {
+ const { mutate: revokeSession, isPending, variables } = useRevokeSession()
+
+ const isRevoking = isPending && variables?.id === sessionId
+
+ return (
+ revokeSession({ id: sessionId })}>
+ {isRevoking ? (
+
+
+ {isCurrent ? 'Logging out...' : 'Revoking...'}
+
+ ) : isCurrent ? (
+ 'Log out'
+ ) : (
+ 'Revoke'
+ )}
+
+ )
+}
diff --git a/src/features/settings/security/ui/session-list/SessionList.tsx b/src/features/settings/security/ui/session-list/SessionList.tsx
new file mode 100644
index 000000000..f3e72f4c9
--- /dev/null
+++ b/src/features/settings/security/ui/session-list/SessionList.tsx
@@ -0,0 +1,75 @@
+import type { UserTypes } from '@/entities/user'
+
+import { Fragment } from 'react/jsx-runtime'
+import { Separator } from '@base-ui/react'
+import { formatDistanceToNowStrict } from 'date-fns'
+import { AnimatePresence } from 'motion/react'
+
+import { Settings } from '@/entities/setting'
+
+import { BrowserIcon } from './BrowserIcon'
+import { RevokeSessionButton } from './RevokeSessionButton'
+
+type SessionsListProps = {
+ sessions: UserTypes.InferedSession[] | undefined
+}
+
+export const SessionsList = ({ sessions }: SessionsListProps) => (
+
+ {sessions?.map(({ id, browser, os, isCurrent, updatedAt }) => {
+ const meta = [
+ isCurrent && (
+
+
+ Current session
+
+ ),
+
+ !isCurrent && updatedAt && (
+
+ Last active{' '}
+ {formatDistanceToNowStrict(new Date(updatedAt), {
+ addSuffix: true
+ })}
+
+ )
+ ].filter(Boolean)
+
+ return (
+
+
+
+ {browser && os && (
+
+ {browser} on {os}
+
+ )}
+
+ {meta.map((item, index) => (
+
+ {index > 0 && (
+
+ )}
+ {item}
+
+ ))}
+
+
+ {TASK_DEADLINES.map(value => (
+ toggleFilter('deadline', value)}>
+ {value}
+
))}
-
+
)
}
diff --git a/src/features/task/filter/ui/FilterOption.tsx b/src/features/task/filter/ui/FilterOption.tsx
new file mode 100644
index 000000000..ef3ccb9fd
--- /dev/null
+++ b/src/features/task/filter/ui/FilterOption.tsx
@@ -0,0 +1,32 @@
+import type { ComponentProps } from 'react'
+
+import { cn } from '@/shared/lib'
+import { Checkbox } from '@/shared/ui'
+
+type FilterOptionProps = {
+ isChecked: boolean
+ onCheckedChange: () => void
+} & Omit, 'onChange'>
+
+export const FilterOption = ({
+ isChecked,
+ onCheckedChange,
+ className,
+ children,
+ ...props
+}: FilterOptionProps) => (
+
+)
diff --git a/src/features/task/filter/ui/LabelFilter.tsx b/src/features/task/filter/ui/LabelFilter.tsx
new file mode 100644
index 000000000..971a13cd5
--- /dev/null
+++ b/src/features/task/filter/ui/LabelFilter.tsx
@@ -0,0 +1,53 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { LABEL_BASE_COLOR_MAP, labelQueries } from '@/entities/label'
+
+import { cn } from '@/shared/lib'
+import { Loader } from '@/shared/ui'
+
+import { useTaskFilters } from '../lib/useTaskFilters'
+import { FilterOption } from './FilterOption'
+
+export const LabelFilter = () => {
+ const { labels, toggleFilter } = useTaskFilters()
+
+ const { data: allLabels = [], isPending } = useQuery(labelQueries.list())
+
+ if (isPending) {
+ return (
+
+
+ Loading labels...
+
+ )
+ }
+
+ if (!allLabels.length) {
+ return (
+
+ You have no labels yet.
+
+ )
+ }
+
+ return (
+
+ {allLabels.map(label => (
+ toggleFilter('labels', label.id)}>
+
+ {label.name}
+
+ ))}
+
+ )
+}
diff --git a/src/features/task/filter/ui/PriorityFilter.tsx b/src/features/task/filter/ui/PriorityFilter.tsx
index 4120faced..fa35cae74 100644
--- a/src/features/task/filter/ui/PriorityFilter.tsx
+++ b/src/features/task/filter/ui/PriorityFilter.tsx
@@ -1,33 +1,27 @@
-import { getTaskPriorityColor, TASK_PRIORITIES } from '@/entities/task'
+import { getTaskPriorityColor } from '@/entities/task'
-import { capitalize } from '@/shared/lib'
-import { RadioGroup, RadioGroupItem } from '@/shared/ui'
+import { TaskPriority } from '@/shared/api'
+import { capitalize, cn } from '@/shared/lib'
import { useTaskFilters } from '../lib/useTaskFilters'
+import { FilterOption } from './FilterOption'
export const PriorityFilter = () => {
- const { priority, handleParamsChange } = useTaskFilters()
+ const { priority, toggleFilter } = useTaskFilters()
return (
- handleParamsChange('priority', v)}>
- {TASK_PRIORITIES.map(priority => (
-
+ {capitalize(value)}
+
))}
-
+