mirror of
https://github.com/temetro/temetro.git
synced 2026-08-19 14:46:29 +00:00
Add Notes page: Tiptap rich-text editor backed by the notes API
- lib/notes.ts: list/get/create/update/delete via the API client. - New /notes route + nav item (and shared lib/nav.ts entry, i18n key) so it shows in the sidebar and command palette. - components/notes/notes-view.tsx: a note list + "New note", with save/delete and toasts. - components/notes/notes-editor.tsx: a Word-like COSS Toolbar driving Tiptap (StarterKit + Placeholder) — bold/italic/underline, H1–H2, bullet/numbered lists, undo/redo — plus a title field and Save. Installed @coss/toolbar and @coss/toggle-group and the Tiptap packages. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Khalid Abdi
@@ -0,0 +1,103 @@
|
||||
"use client";
|
||||
|
||||
import type { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
|
||||
import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
|
||||
import type { VariantProps } from "class-variance-authority";
|
||||
import * as React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import {
|
||||
Toggle as ToggleComponent,
|
||||
type toggleVariants,
|
||||
} from "@/components/ui/toggle";
|
||||
|
||||
export const ToggleGroupContext: React.Context<
|
||||
VariantProps<typeof toggleVariants>
|
||||
> = React.createContext<VariantProps<typeof toggleVariants>>({
|
||||
size: "default",
|
||||
variant: "default",
|
||||
});
|
||||
|
||||
export function ToggleGroup({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
orientation = "horizontal",
|
||||
children,
|
||||
...props
|
||||
}: ToggleGroupPrimitive.Props &
|
||||
VariantProps<typeof toggleVariants>): React.ReactElement {
|
||||
return (
|
||||
<ToggleGroupPrimitive
|
||||
className={cn(
|
||||
"flex w-fit *:focus-visible:z-10 dark:*:[[data-slot=separator]:has(+[data-slot=toggle]:hover)]:before:bg-input/64 dark:*:[[data-slot=separator]:has(+[data-slot=toggle][data-pressed])]:before:bg-input dark:*:[[data-slot=toggle]:hover+[data-slot=separator]]:before:bg-input/64 dark:*:[[data-slot=toggle][data-pressed]+[data-slot=separator]]:before:bg-input",
|
||||
orientation === "horizontal"
|
||||
? "*:pointer-coarse:after:min-w-auto"
|
||||
: "*:pointer-coarse:after:min-h-auto",
|
||||
variant === "default"
|
||||
? "gap-0.5"
|
||||
: orientation === "horizontal"
|
||||
? "*:not-first:rounded-s-none *:not-last:rounded-e-none *:not-first:border-s-0 *:not-last:border-e-0 *:not-first:not-data-[slot=separator]:before:-start-[0.5px] *:not-last:not-data-[slot=separator]:before:-end-[0.5px] *:not-first:before:rounded-s-none *:not-last:before:rounded-e-none"
|
||||
: "flex-col *:not-first:rounded-t-none *:not-last:rounded-b-none *:not-first:border-t-0 *:not-last:border-b-0 *:not-first:not-data-[slot=separator]:before:-top-[0.5px] *:not-last:not-data-[slot=separator]:before:-bottom-[0.5px] *:not-first:before:rounded-t-none *:not-last:before:rounded-b-none *:data-[slot=toggle]:not-last:before:hidden dark:*:last:before:hidden dark:*:first:before:block",
|
||||
className,
|
||||
)}
|
||||
data-size={size}
|
||||
data-slot="toggle-group"
|
||||
data-variant={variant}
|
||||
orientation={orientation}
|
||||
{...props}
|
||||
>
|
||||
<ToggleGroupContext.Provider value={{ size, variant }}>
|
||||
{children}
|
||||
</ToggleGroupContext.Provider>
|
||||
</ToggleGroupPrimitive>
|
||||
);
|
||||
}
|
||||
|
||||
export function ToggleGroupItem({
|
||||
className,
|
||||
children,
|
||||
variant,
|
||||
size,
|
||||
...props
|
||||
}: TogglePrimitive.Props &
|
||||
VariantProps<typeof toggleVariants>): React.ReactElement {
|
||||
const context = React.useContext(ToggleGroupContext);
|
||||
|
||||
const resolvedVariant = context.variant || variant;
|
||||
const resolvedSize = context.size || size;
|
||||
|
||||
return (
|
||||
<ToggleComponent
|
||||
className={className}
|
||||
data-size={resolvedSize}
|
||||
data-variant={resolvedVariant}
|
||||
size={resolvedSize}
|
||||
variant={resolvedVariant}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</ToggleComponent>
|
||||
);
|
||||
}
|
||||
|
||||
export function ToggleGroupSeparator({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
...props
|
||||
}: {
|
||||
className?: string;
|
||||
} & React.ComponentProps<typeof Separator>): React.ReactElement {
|
||||
return (
|
||||
<Separator
|
||||
className={cn(
|
||||
"pointer-events-none relative bg-input before:absolute before:inset-0 dark:before:bg-input/32",
|
||||
className,
|
||||
)}
|
||||
orientation={orientation}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { ToggleGroupPrimitive };
|
||||
@@ -0,0 +1,46 @@
|
||||
"use client";
|
||||
|
||||
import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import type React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export const toggleVariants = cva(
|
||||
"relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base text-foreground outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 data-pressed:bg-input/64 data-pressed:text-accent-foreground sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
|
||||
{
|
||||
defaultVariants: {
|
||||
size: "default",
|
||||
variant: "default",
|
||||
},
|
||||
variants: {
|
||||
size: {
|
||||
default: "h-9 min-w-9 px-[calc(--spacing(2)-1px)] sm:h-8 sm:min-w-8",
|
||||
lg: "h-10 min-w-10 px-[calc(--spacing(2.5)-1px)] sm:h-9 sm:min-w-9",
|
||||
sm: "h-8 min-w-8 px-[calc(--spacing(1.5)-1px)] sm:h-7 sm:min-w-7",
|
||||
},
|
||||
variant: {
|
||||
default: "border-transparent",
|
||||
outline:
|
||||
"border-input bg-background not-dark:bg-clip-padding shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:data-pressed:bg-input dark:hover:bg-input/64 dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] dark:not-disabled:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/2%)] [:disabled,:active,[data-pressed]]:shadow-none",
|
||||
},
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
export function Toggle({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
...props
|
||||
}: TogglePrimitive.Props &
|
||||
VariantProps<typeof toggleVariants>): React.ReactElement {
|
||||
return (
|
||||
<TogglePrimitive
|
||||
className={cn(toggleVariants({ className, size, variant }))}
|
||||
data-slot="toggle"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { TogglePrimitive };
|
||||
@@ -0,0 +1,91 @@
|
||||
"use client";
|
||||
|
||||
import { Toolbar as ToolbarPrimitive } from "@base-ui/react/toolbar";
|
||||
import type React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function Toolbar({
|
||||
className,
|
||||
...props
|
||||
}: ToolbarPrimitive.Root.Props): React.ReactElement {
|
||||
return (
|
||||
<ToolbarPrimitive.Root
|
||||
className={cn(
|
||||
"relative flex gap-2 rounded-xl border bg-card not-dark:bg-clip-padding p-1 text-card-foreground",
|
||||
className,
|
||||
)}
|
||||
data-slot="toolbar"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function ToolbarButton({
|
||||
className,
|
||||
...props
|
||||
}: ToolbarPrimitive.Button.Props): React.ReactElement {
|
||||
return (
|
||||
<ToolbarPrimitive.Button
|
||||
className={cn(className)}
|
||||
data-slot="toolbar-button"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function ToolbarLink({
|
||||
className,
|
||||
...props
|
||||
}: ToolbarPrimitive.Link.Props): React.ReactElement {
|
||||
return (
|
||||
<ToolbarPrimitive.Link
|
||||
className={cn(className)}
|
||||
data-slot="toolbar-link"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function ToolbarInput({
|
||||
className,
|
||||
...props
|
||||
}: ToolbarPrimitive.Input.Props): React.ReactElement {
|
||||
return (
|
||||
<ToolbarPrimitive.Input
|
||||
className={cn(className)}
|
||||
data-slot="toolbar-input"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function ToolbarGroup({
|
||||
className,
|
||||
...props
|
||||
}: ToolbarPrimitive.Group.Props): React.ReactElement {
|
||||
return (
|
||||
<ToolbarPrimitive.Group
|
||||
className={cn("flex items-center gap-1", className)}
|
||||
data-slot="toolbar-group"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function ToolbarSeparator({
|
||||
className,
|
||||
...props
|
||||
}: ToolbarPrimitive.Separator.Props): React.ReactElement {
|
||||
return (
|
||||
<ToolbarPrimitive.Separator
|
||||
className={cn(
|
||||
"shrink-0 bg-border data-[orientation=horizontal]:my-0.5 data-[orientation=vertical]:my-1.5 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^='h-']]:not-[[class*='_h-']]:self-stretch",
|
||||
className,
|
||||
)}
|
||||
data-slot="toolbar-separator"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { ToolbarPrimitive };
|
||||
Reference in New Issue
Block a user