-
+
);
}
diff --git a/apps/client/src/features/editor/styles/core.css b/apps/client/src/features/editor/styles/core.css
index a3b4f4285..ab3d23676 100644
--- a/apps/client/src/features/editor/styles/core.css
+++ b/apps/client/src/features/editor/styles/core.css
@@ -211,7 +211,8 @@
}
}
- .resize-cursor {
+ &.resize-cursor,
+ &.resize-cursor * {
cursor: ew-resize;
cursor: col-resize;
}
diff --git a/apps/client/src/features/editor/styles/editor.module.css b/apps/client/src/features/editor/styles/editor.module.css
index dfe7393f8..ed5f86432 100644
--- a/apps/client/src/features/editor/styles/editor.module.css
+++ b/apps/client/src/features/editor/styles/editor.module.css
@@ -9,3 +9,15 @@
}
}
+.byline {
+ padding-left: 3rem;
+
+ @media (max-width: $mantine-breakpoint-sm) {
+ padding-left: 1rem;
+ }
+
+ @media print {
+ padding-left: 0;
+ }
+}
+
diff --git a/apps/client/src/features/editor/styles/indent.css b/apps/client/src/features/editor/styles/indent.css
new file mode 100644
index 000000000..cd2bd5857
--- /dev/null
+++ b/apps/client/src/features/editor/styles/indent.css
@@ -0,0 +1,14 @@
+.ProseMirror {
+ --indent-step: 2rem;
+}
+
+.ProseMirror [data-indent="1"] { padding-inline-start: calc(var(--indent-step) * 1); }
+.ProseMirror [data-indent="2"] { padding-inline-start: calc(var(--indent-step) * 2); }
+.ProseMirror [data-indent="3"] { padding-inline-start: calc(var(--indent-step) * 3); }
+.ProseMirror [data-indent="4"] { padding-inline-start: calc(var(--indent-step) * 4); }
+.ProseMirror [data-indent="5"] { padding-inline-start: calc(var(--indent-step) * 5); }
+.ProseMirror [data-indent="6"] { padding-inline-start: calc(var(--indent-step) * 6); }
+.ProseMirror [data-indent="7"] { padding-inline-start: calc(var(--indent-step) * 7); }
+.ProseMirror [data-indent="8"] { padding-inline-start: calc(var(--indent-step) * 8); }
+.ProseMirror [data-indent="9"] { padding-inline-start: calc(var(--indent-step) * 9); }
+.ProseMirror [data-indent="10"] { padding-inline-start: calc(var(--indent-step) * 10); }
diff --git a/apps/client/src/features/editor/styles/index.css b/apps/client/src/features/editor/styles/index.css
index ffec33f3d..7b1ce93e8 100644
--- a/apps/client/src/features/editor/styles/index.css
+++ b/apps/client/src/features/editor/styles/index.css
@@ -9,10 +9,12 @@
@import "./media.css";
@import "./code.css";
@import "./print.css";
+@import "./page-break.css";
@import "./find.css";
@import "./mention.css";
@import "./ordered-list.css";
@import "./highlight.css";
+@import "./indent.css";
@import "./columns.css";
@import "./status.css";
@import "./base-embed.css";
diff --git a/apps/client/src/features/editor/styles/page-break.css b/apps/client/src/features/editor/styles/page-break.css
new file mode 100644
index 000000000..6dc97c738
--- /dev/null
+++ b/apps/client/src/features/editor/styles/page-break.css
@@ -0,0 +1,50 @@
+.ProseMirror .page-break {
+ position: relative;
+ margin: 1.5rem 0;
+ border-top: 1px dashed var(--mantine-color-default-border);
+ height: 0;
+ user-select: none;
+}
+
+.ProseMirror[contenteditable="false"] .page-break {
+ margin: 0;
+ border: none;
+ height: 0;
+}
+
+.ProseMirror[contenteditable="false"] .page-break::after {
+ content: none;
+}
+
+.ProseMirror .page-break::after {
+ content: "Page break";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ padding: 0 0.5rem;
+ background: var(--mantine-color-body);
+ color: var(--mantine-color-dimmed);
+ font-size: 0.75rem;
+ line-height: 1;
+ letter-spacing: 0.02em;
+ text-transform: uppercase;
+}
+
+.ProseMirror .page-break.ProseMirror-selectednode {
+ border-top-color: var(--mantine-primary-color-filled);
+}
+
+@media print {
+ .ProseMirror .page-break {
+ break-before: always;
+ page-break-before: always;
+ visibility: hidden;
+ border: none;
+ margin: 0;
+ }
+
+ .ProseMirror .page-break::after {
+ content: none;
+ }
+}
diff --git a/apps/client/src/features/editor/styles/placeholder.css b/apps/client/src/features/editor/styles/placeholder.css
index be5225bf6..9d42f22b0 100644
--- a/apps/client/src/features/editor/styles/placeholder.css
+++ b/apps/client/src/features/editor/styles/placeholder.css
@@ -1,7 +1,7 @@
.ProseMirror .is-editor-empty:first-child::before {
content: attr(data-placeholder);
float: left;
- color: #adb5bd;
+ color: var(--mantine-color-placeholder);
pointer-events: none;
height: 0;
@@ -13,7 +13,7 @@
.ProseMirror .is-empty::before {
content: attr(data-placeholder);
float: left;
- color: #adb5bd;
+ color: var(--mantine-color-placeholder);
pointer-events: none;
height: 0;
diff --git a/apps/client/src/features/editor/styles/table.css b/apps/client/src/features/editor/styles/table.css
index 9926d0bc0..5d802e4ab 100644
--- a/apps/client/src/features/editor/styles/table.css
+++ b/apps/client/src/features/editor/styles/table.css
@@ -15,7 +15,8 @@
}
.table-dnd-drop-indicator {
- background-color: #adf;
+ background-color: var(--mantine-color-blue-5);
+ z-index: 3;
}
.ProseMirror {
@@ -57,13 +58,14 @@
}
.column-resize-handle {
- background-color: #adf;
+ background-color: var(--mantine-color-blue-5);
bottom: -1px;
position: absolute;
- right: -2px;
+ right: -1px;
pointer-events: none;
top: 0;
- width: 4px;
+ width: 2px;
+ z-index: 3;
}
.selectedCell:after {
@@ -129,6 +131,139 @@
}
}
+
+/* Header-row pinning. Two CSS paths, picked by `header-pin/controller.ts`:
+ - native sticky (preferred): wrapper drops its overflow constraint so
+ `position: sticky` on the row can resolve against the document scroll.
+ - transform fallback: wrapper keeps `overflow-x: auto` for horizontal
+ scrolling; the row is positioned imperatively per scroll frame.
+
+ `--editor-pin-offset` is published to :root by `pinOffsetWatcher` in
+ `header-pin/offset.ts`, measured against the lowest fixed surface above
+ the editor (app shell header, page header, fixed toolbar). */
+
+.tableWrapper.tableWrapperNoOverflow,
+.tableWrapper.tableWrapperNoOverflow table {
+ overflow: visible;
+}
+
+.tableWrapper.tableHeaderPinned table tr:first-child {
+ z-index: 2;
+}
+
+.tableWrapper.tableWrapperNoOverflow.tableHeaderPinned table tr:first-child {
+ position: sticky;
+ top: var(--editor-pin-offset, 90px);
+}
+
+.tableWrapper.tableHeaderPinned:not(.tableWrapperNoOverflow) table tr:first-child {
+ position: relative;
+ transform: translateY(var(--table-pin-offset, 0px));
+}
+
+@media print {
+ .tableWrapper.tableHeaderPinned table tr:first-child {
+ position: static;
+ transform: none;
+ }
+}
+
+.tableReadonlySortChevron {
+ /* Anchor to the cell's right edge, vertically centered with the cell
+ content. The cell content (a
) is block-level so an inline chevron
+ would wrap to a new line; absolute positioning takes it out of flow. */
+ position: absolute;
+ top: 50%;
+ right: 6px;
+ transform: translateY(-50%);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 18px;
+ height: 18px;
+ border-radius: 4px;
+ background: light-dark(
+ rgba(55, 53, 47, 0.08),
+ rgba(255, 255, 255, 0.08)
+ );
+ color: light-dark(
+ rgba(55, 53, 47, 0.55),
+ rgba(255, 255, 255, 0.55)
+ );
+ user-select: none;
+ cursor: pointer;
+ z-index: 1;
+ /* Hidden by default; revealed on header-cell hover or when this column is
+ the active sort (see selectors below). */
+ opacity: 0;
+ transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
+}
+
+.ProseMirror table th:hover .tableReadonlySortChevron,
+.tableReadonlySortChevron[data-sort] {
+ opacity: 1;
+}
+
+.ProseMirror table th:has(.tableReadonlySortChevron) {
+ padding-right: 30px;
+}
+
+.tableReadonlySortChevron:hover {
+ background: light-dark(
+ rgba(55, 53, 47, 0.16),
+ rgba(255, 255, 255, 0.16)
+ );
+}
+
+/* Immediate tooltip on the chevron — same style language as the rest of the
+ app (small, dark, rounded), unlike the native `title` tooltip which only
+ appears after a long delay. */
+.tableReadonlySortChevron::after {
+ content: attr(data-tooltip);
+ position: absolute;
+ /* Below the chevron — placing it above the cell hits the table's
+ overflow clipping (the wrapper has `overflow-x: auto` which forces
+ `overflow-y: auto` per spec). */
+ top: calc(100% + 6px);
+ right: 0;
+ padding: 4px 8px;
+ border-radius: 4px;
+ background: var(--mantine-color-dark-7);
+ color: var(--mantine-color-white);
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 1.4;
+ white-space: nowrap;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 120ms ease;
+ z-index: 10;
+}
+
+.tableReadonlySortChevron:hover::after {
+ opacity: 1;
+}
+
+.tableReadonlySortChevron svg {
+ display: block;
+}
+
+.tableReadonlySortChevron[data-sort="asc"],
+.tableReadonlySortChevron[data-sort="desc"] {
+ background: light-dark(
+ var(--mantine-color-blue-1),
+ var(--mantine-color-blue-9)
+ );
+ color: light-dark(
+ var(--mantine-color-blue-7),
+ var(--mantine-color-blue-2)
+ );
+}
+
+.tableReadonlySortChevron[data-sort="asc"] svg {
+ transform: rotate(180deg);
+}
+
.editor-container:has(.table-dnd-drop-indicator[data-dragging="true"]) {
.prosemirror-dropcursor-block {
display: none;
diff --git a/apps/client/src/features/editor/title-editor.tsx b/apps/client/src/features/editor/title-editor.tsx
index 15c3ff028..fefe9f330 100644
--- a/apps/client/src/features/editor/title-editor.tsx
+++ b/apps/client/src/features/editor/title-editor.tsx
@@ -7,6 +7,7 @@ import { Text } from "@tiptap/extension-text";
import { Placeholder } from "@tiptap/extension-placeholder";
import { useAtomValue } from "jotai";
import {
+ currentPageEditModeAtom,
pageEditorAtom,
titleEditorAtom,
} from "@/features/editor/atoms/editor-atoms";
@@ -24,9 +25,9 @@ import { useTranslation } from "react-i18next";
import EmojiCommand from "@/features/editor/extensions/emoji-command.ts";
import { UpdateEvent } from "@/features/websocket/types";
import localEmitter from "@/lib/local-emitter.ts";
-import { currentUserAtom } from "@/features/user/atoms/current-user-atom.ts";
import { PageEditMode } from "@/features/user/types/user.types.ts";
import { searchSpotlight } from "@/features/search/constants.ts";
+import { platformModifierKey } from "@/lib";
export interface TitleEditorProps {
pageId: string;
@@ -51,9 +52,7 @@ export function TitleEditor({
const emit = useQueryEmit();
const navigate = useNavigate();
const [activePageId, setActivePageId] = useState(pageId);
- const [currentUser] = useAtom(currentUserAtom);
- const userPageEditMode =
- currentUser?.user?.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
+ const currentPageEditMode = useAtomValue(currentPageEditModeAtom);
const titleEditor = useEditor({
extensions: [
@@ -88,13 +87,16 @@ export function TitleEditor({
immediatelyRender: true,
shouldRerenderOnTransaction: false,
editorProps: {
+ attributes: {
+ "aria-label": t("Page title"),
+ },
handleDOMEvents: {
keydown: (_view, event) => {
- if ((event.ctrlKey || event.metaKey) && event.code === "KeyS") {
+ if (platformModifierKey(event) && event.code === "KeyS") {
event.preventDefault();
return true;
}
- if ((event.ctrlKey || event.metaKey) && event.code === "KeyK") {
+ if (platformModifierKey(event) && event.code === "KeyK") {
searchSpotlight.open();
return true;
}
@@ -171,18 +173,9 @@ export function TitleEditor({
}, [pageId]);
useEffect(() => {
- if (titleEditor) {
- if (userPageEditMode && editable) {
- if (userPageEditMode === PageEditMode.Edit) {
- titleEditor.setEditable(true);
- } else if (userPageEditMode === PageEditMode.Read) {
- titleEditor.setEditable(false);
- }
- } else {
- titleEditor.setEditable(false);
- }
- }
- }, [userPageEditMode, titleEditor, editable]);
+ if (!titleEditor) return;
+ titleEditor.setEditable(editable && currentPageEditMode === PageEditMode.Edit);
+ }, [currentPageEditMode, titleEditor, editable]);
const openSearchDialog = () => {
const event = new CustomEvent("openFindDialogFromEditor", {});
diff --git a/apps/client/src/features/favorite/components/star-button.tsx b/apps/client/src/features/favorite/components/star-button.tsx
index 6a99e01e9..2b341c736 100644
--- a/apps/client/src/features/favorite/components/star-button.tsx
+++ b/apps/client/src/features/favorite/components/star-button.tsx
@@ -1,4 +1,5 @@
import { ActionIcon, Tooltip } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
import { IconStar, IconStarFilled } from "@tabler/icons-react";
import {
useFavoriteIds,
@@ -14,6 +15,8 @@ type StarButtonProps = {
pageId?: string;
spaceId?: string;
templateId?: string;
+ /** Name of the item being favorited, used to make the button's accessible name descriptive. */
+ name?: string;
size?: number;
};
@@ -25,7 +28,7 @@ function getEntityId(props: StarButtonProps): string | undefined {
}
export default function StarButton(props: StarButtonProps) {
- const { type, size = 18 } = props;
+ const { type, name, size = 18 } = props;
const { t } = useTranslation();
const favoriteIds = useFavoriteIds(type);
const addMutation = useAddFavoriteMutation();
@@ -47,21 +50,47 @@ export default function StarButton(props: StarButtonProps) {
};
if (isFavorited) {
- removeMutation.mutate(params);
+ removeMutation.mutate(params, {
+ onSuccess: () => {
+ notifications.show({
+ message: name
+ ? t("Removed {{name}} from favorites", { name })
+ : t("Removed from favorites"),
+ });
+ },
+ });
} else {
- addMutation.mutate(params);
+ addMutation.mutate(params, {
+ onSuccess: () => {
+ notifications.show({
+ message: name
+ ? t("Added {{name}} to favorites", { name })
+ : t("Added to favorites"),
+ });
+ },
+ });
}
};
+ // Tooltip label stays short. Accessible name expands to include the item
+ // so screen reader users can distinguish stars on different rows.
+ const tooltipLabel = isFavorited
+ ? t("Remove from favorites")
+ : t("Add to favorites");
+
+ const ariaLabel = name
+ ? isFavorited
+ ? t("Remove {{name}} from favorites", { name })
+ : t("Add {{name}} to favorites", { name })
+ : tooltipLabel;
+
return (
-
+
diff --git a/apps/client/src/features/group/components/add-group-member-modal.tsx b/apps/client/src/features/group/components/add-group-member-modal.tsx
index a5abaa70f..0cf81f5a0 100644
--- a/apps/client/src/features/group/components/add-group-member-modal.tsx
+++ b/apps/client/src/features/group/components/add-group-member-modal.tsx
@@ -31,7 +31,12 @@ export default function AddGroupMemberModal() {
<>
-
+
diff --git a/apps/client/src/features/group/components/create-group-modal.tsx b/apps/client/src/features/group/components/create-group-modal.tsx
index 1cff53fbd..307a38f3c 100644
--- a/apps/client/src/features/group/components/create-group-modal.tsx
+++ b/apps/client/src/features/group/components/create-group-modal.tsx
@@ -11,7 +11,12 @@ export default function CreateGroupModal() {
<>
-
+
diff --git a/apps/client/src/features/group/components/edit-group-form.tsx b/apps/client/src/features/group/components/edit-group-form.tsx
index f8b1671cd..68b6ba60c 100644
--- a/apps/client/src/features/group/components/edit-group-form.tsx
+++ b/apps/client/src/features/group/components/edit-group-form.tsx
@@ -9,6 +9,7 @@ import { z } from "zod/v4";
import { useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { zod4Resolver } from "mantine-form-zod-resolver";
+import { IGroup } from "@/features/group/types/group.types.ts";
const formSchema = z.object({
name: z.string().min(2).max(100),
@@ -18,13 +19,16 @@ const formSchema = z.object({
type FormValues = z.infer;
interface EditGroupFormProps {
onClose?: () => void;
+ group?: IGroup;
}
-export function EditGroupForm({ onClose }: EditGroupFormProps) {
+export function EditGroupForm({ onClose, group: groupProp }: EditGroupFormProps) {
const { t } = useTranslation();
const updateGroupMutation = useUpdateGroupMutation();
const { isSuccess } = updateGroupMutation;
- const { groupId } = useParams();
- const { data: group } = useGroupQuery(groupId);
+ const { groupId: routeGroupId } = useParams();
+ const groupId = groupProp?.id ?? routeGroupId;
+ const { data: queriedGroup } = useGroupQuery(groupProp ? undefined : groupId);
+ const group = groupProp ?? queriedGroup;
useEffect(() => {
if (isSuccess) {
@@ -66,6 +70,7 @@ export function EditGroupForm({ onClose }: EditGroupFormProps) {
label={t("Group name")}
placeholder={t("e.g Developers")}
variant="filled"
+ data-autofocus
{...form.getInputProps("name")}
/>
diff --git a/apps/client/src/features/group/components/edit-group-modal.tsx b/apps/client/src/features/group/components/edit-group-modal.tsx
index 4da933f25..a2fc28f2f 100644
--- a/apps/client/src/features/group/components/edit-group-modal.tsx
+++ b/apps/client/src/features/group/components/edit-group-modal.tsx
@@ -1,23 +1,31 @@
import { Divider, Modal } from "@mantine/core";
import { EditGroupForm } from "@/features/group/components/edit-group-form.tsx";
import { useTranslation } from "react-i18next";
+import { IGroup } from "@/features/group/types/group.types.ts";
interface EditGroupModalProps {
opened: boolean;
onClose: () => void;
+ group?: IGroup;
}
export default function EditGroupModal({
opened,
onClose,
+ group,
}: EditGroupModalProps) {
const { t } = useTranslation();
return (
<>
-
+
-
+
);
diff --git a/apps/client/src/features/group/components/group-action-menu.tsx b/apps/client/src/features/group/components/group-action-menu.tsx
index 331ea3dea..cb50f4bfa 100644
--- a/apps/client/src/features/group/components/group-action-menu.tsx
+++ b/apps/client/src/features/group/components/group-action-menu.tsx
@@ -10,18 +10,28 @@ import { useDisclosure } from "@mantine/hooks";
import EditGroupModal from "@/features/group/components/edit-group-modal.tsx";
import { modals } from "@mantine/modals";
import { useTranslation } from "react-i18next";
+import { IGroup } from "@/features/group/types/group.types.ts";
-export default function GroupActionMenu() {
+interface GroupActionMenuProps {
+ group?: IGroup;
+}
+
+export default function GroupActionMenu(props: GroupActionMenuProps = {}) {
const { t } = useTranslation();
- const { groupId } = useParams();
- const { data: group, isLoading } = useGroupQuery(groupId);
+ const { groupId: routeGroupId } = useParams();
+ const groupId = props.group?.id ?? routeGroupId;
+ const { data: queriedGroup } = useGroupQuery(props.group ? undefined : groupId);
+ const group = props.group ?? queriedGroup;
const deleteGroupMutation = useDeleteGroupMutation();
const navigate = useNavigate();
const [opened, { open, close }] = useDisclosure(false);
const onDelete = async () => {
await deleteGroupMutation.mutateAsync(groupId);
- navigate("/settings/groups");
+ // Only navigate away if we're currently viewing this group's detail page.
+ if (routeGroupId === groupId) {
+ navigate("/settings/groups");
+ }
};
const openDeleteModal = () =>
@@ -53,7 +63,11 @@ export default function GroupActionMenu() {
arrowPosition="center"
>
-
+
@@ -76,7 +90,7 @@ export default function GroupActionMenu() {
)}
-
+
);
}
diff --git a/apps/client/src/features/group/components/group-list.tsx b/apps/client/src/features/group/components/group-list.tsx
index d88e1ec02..5f5fed472 100644
--- a/apps/client/src/features/group/components/group-list.tsx
+++ b/apps/client/src/features/group/components/group-list.tsx
@@ -1,4 +1,4 @@
-import { Table, Group, Text, Anchor } from "@mantine/core";
+import { Table, Group, Text, Anchor, VisuallyHidden } from "@mantine/core";
import { useGetGroupsQuery } from "@/features/group/queries/group-query";
import { Link } from "react-router-dom";
import { IconGroupCircle } from "@/components/icons/icon-people-circle.tsx";
@@ -12,6 +12,8 @@ import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx";
import { SearchInput } from "@/components/common/search-input.tsx";
import NoTableResults from "@/components/common/no-table-results.tsx";
import { usePaginateAndSearch } from "@/hooks/use-paginate-and-search.tsx";
+import rowClasses from "@/components/ui/clickable-table-row.module.css";
+import GroupActionMenu from "@/features/group/components/group-action-menu.tsx";
export default function GroupList() {
const { t } = useTranslation();
@@ -34,13 +36,16 @@ export default function GroupList() {
{t("Group")}
{t("Members")}
+
+ {t("Actions")}
+
{data?.items.length > 0 ? (
data?.items.map((group: IGroup, index: number) => (
-
+
prefetchGroupMembers(group.id)}>
@@ -80,10 +86,13 @@ export default function GroupList() {
{formatMemberCount(group.memberCount, t)}
+
+
+
))
) : (
-
+
)}