wip

web/components/custom/sidebar/partial/feedback.tsx

@@ -0,0 +1,68 @@
+import { Button, buttonVariants } from "@/components/ui/button"
+import {
+	Dialog,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+	DialogPortal,
+	DialogOverlay,
+	DialogPrimitive
+} from "@/components/ui/dialog"
+import { LaIcon } from "@/components/custom/la-icon"
+import { MinimalTiptapEditor } from "@/components/minimal-tiptap"
+import { useState } from "react"
+import { Content } from "@tiptap/react"
+import { cn } from "@/lib/utils"
+
+export function Feedback() {
+	const [value, setValue] = useState<Content>("")
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button size="icon" className="shrink-0" variant="ghost">
+					<LaIcon name="CircleHelp" />
+				</Button>
+			</DialogTrigger>
+
+			<DialogPortal>
+				<DialogOverlay />
+				<DialogPrimitive.Content
+					className={cn(
+						"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+						"flex flex-col p-4 sm:max-w-2xl"
+					)}
+				>
+					<DialogHeader>
+						<DialogTitle>Share feedback</DialogTitle>
+						<DialogDescription className="sr-only">
+							Your feedback helps us improve. Please share your thoughts, ideas, and suggestions
+						</DialogDescription>
+					</DialogHeader>
+
+					<MinimalTiptapEditor
+						value={value}
+						onChange={setValue}
+						throttleDelay={500}
+						className="border-muted-foreground/50 mt-2 min-h-52 rounded-lg"
+						editorContentClassName="p-4 overflow-auto flex grow"
+						output="html"
+						placeholder="Your feedback helps us improve. Please share your thoughts, ideas, and suggestions."
+						autofocus={true}
+						immediatelyRender={true}
+						editable={true}
+						injectCSS={true}
+						editorClassName="focus:outline-none"
+					/>
+
+					<DialogFooter>
+						<DialogPrimitive.Close className={buttonVariants({ variant: "outline" })}>Cancel</DialogPrimitive.Close>
+						<Button type="submit">Send feedback</Button>
+					</DialogFooter>
+				</DialogPrimitive.Content>
+			</DialogPortal>
+		</Dialog>
+	)
+}

web/components/custom/sidebar/partial/profile-section.tsx

@@ -13,6 +13,7 @@ import Link from "next/link"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { usePathname } from "next/navigation"
+import { Feedback } from "./feedback"
 
 export const ProfileSection: React.FC = () => {
 	const { user, isSignedIn } = useUser()
@@ -84,6 +85,8 @@ export const ProfileSection: React.FC = () => {
 						</DropdownMenuContent>
 					</DropdownMenu>
 				</div>
+
+				<Feedback />
 			</div>
 		</div>
 	)

web/components/minimal-tiptap/minimal-tiptap.tsx

@@ -1,84 +1,84 @@
-import * as React from 'react'
-import './styles/index.css'
-
-import { EditorContent } from '@tiptap/react'
-import type { Content, Editor } from '@tiptap/react'
-import { Separator } from '@/components/ui/separator'
-import { cn } from '@/lib/utils'
-import { SectionOne } from './components/section/one'
-import { SectionTwo } from './components/section/two'
-import { SectionThree } from './components/section/three'
-import { SectionFour } from './components/section/four'
-import { SectionFive } from './components/section/five'
-import { LinkBubbleMenu } from './components/bubble-menu/link-bubble-menu'
-import { ImageBubbleMenu } from './components/bubble-menu/image-bubble-menu'
-import type { UseMinimalTiptapEditorProps } from './hooks/use-minimal-tiptap'
-import { useMinimalTiptapEditor } from './hooks/use-minimal-tiptap'
-
-export interface MinimalTiptapProps extends Omit<UseMinimalTiptapEditorProps, 'onUpdate'> {
-  value?: Content
-  onChange?: (value: Content) => void
-  className?: string
-  editorContentClassName?: string
+import * as React from "react"
+import "./styles/index.css"
+
+import { EditorContent } from "@tiptap/react"
+import type { Content, Editor } from "@tiptap/react"
+import { Separator } from "@/components/ui/separator"
+import { cn } from "@/lib/utils"
+import { SectionOne } from "./components/section/one"
+import { SectionTwo } from "./components/section/two"
+import { SectionThree } from "./components/section/three"
+import { SectionFour } from "./components/section/four"
+import { SectionFive } from "./components/section/five"
+import { LinkBubbleMenu } from "./components/bubble-menu/link-bubble-menu"
+import { ImageBubbleMenu } from "./components/bubble-menu/image-bubble-menu"
+import type { UseMinimalTiptapEditorProps } from "./hooks/use-minimal-tiptap"
+import { useMinimalTiptapEditor } from "./hooks/use-minimal-tiptap"
+
+export interface MinimalTiptapProps extends Omit<UseMinimalTiptapEditorProps, "onUpdate"> {
+	value?: Content
+	onChange?: (value: Content) => void
+	className?: string
+	editorContentClassName?: string
 }
 
 const Toolbar = ({ editor }: { editor: Editor }) => (
-  <div className="shrink-0 overflow-x-auto border-b border-border p-2">
-    <div className="flex w-max items-center gap-px">
-      <SectionOne editor={editor} activeLevels={[1, 2, 3, 4, 5, 6]} />
+	<div className="border-border shrink-0 overflow-x-auto border-b p-2">
+		<div className="flex w-max items-center gap-px">
+			<SectionOne editor={editor} activeLevels={[1, 2, 3, 4, 5, 6]} />
 
-      <Separator orientation="vertical" className="mx-2 h-7" />
+			<Separator orientation="vertical" className="mx-2 h-7" />
 
-      <SectionTwo
-        editor={editor}
-        activeActions={['bold', 'italic', 'strikethrough', 'code', 'clearFormatting']}
-        mainActionCount={2}
-      />
+			<SectionTwo
+				editor={editor}
+				activeActions={["bold", "italic", "strikethrough", "code", "clearFormatting"]}
+				mainActionCount={2}
+			/>
 
-      <Separator orientation="vertical" className="mx-2 h-7" />
+			<Separator orientation="vertical" className="mx-2 h-7" />
 
-      <SectionThree editor={editor} />
+			<SectionThree editor={editor} />
 
-      <Separator orientation="vertical" className="mx-2 h-7" />
+			<Separator orientation="vertical" className="mx-2 h-7" />
 
-      <SectionFour editor={editor} activeActions={['orderedList', 'bulletList']} mainActionCount={0} />
+			<SectionFour editor={editor} activeActions={["orderedList", "bulletList"]} mainActionCount={0} />
 
-      <Separator orientation="vertical" className="mx-2 h-7" />
+			<Separator orientation="vertical" className="mx-2 h-7" />
 
-      <SectionFive editor={editor} activeActions={['codeBlock', 'blockquote', 'horizontalRule']} mainActionCount={0} />
-    </div>
-  </div>
+			<SectionFive editor={editor} activeActions={["codeBlock", "blockquote", "horizontalRule"]} mainActionCount={0} />
+		</div>
+	</div>
 )
 
 export const MinimalTiptapEditor = React.forwardRef<HTMLDivElement, MinimalTiptapProps>(
-  ({ value, onChange, className, editorContentClassName, ...props }, ref) => {
-    const editor = useMinimalTiptapEditor({
-      value,
-      onUpdate: onChange,
-      ...props
-    })
-
-    if (!editor) {
-      return null
-    }
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          'flex h-auto min-h-72 w-full flex-col rounded-md border border-input shadow-sm focus-within:border-primary',
-          className
-        )}
-      >
-        <Toolbar editor={editor} />
-        <EditorContent editor={editor} className={cn('minimal-tiptap-editor', editorContentClassName)} />
-        <LinkBubbleMenu editor={editor} />
-        <ImageBubbleMenu editor={editor} />
-      </div>
-    )
-  }
+	({ value, onChange, className, editorContentClassName, ...props }, ref) => {
+		const editor = useMinimalTiptapEditor({
+			value,
+			onUpdate: onChange,
+			...props
+		})
+
+		if (!editor) {
+			return null
+		}
+
+		return (
+			<div
+				ref={ref}
+				className={cn(
+					"border-input focus-within:border-primary flex h-auto min-h-72 w-full flex-col rounded-md border shadow-sm",
+					className
+				)}
+			>
+				<Toolbar editor={editor} />
+				<EditorContent editor={editor} className={cn("minimal-tiptap-editor", editorContentClassName)} />
+				<LinkBubbleMenu editor={editor} />
+				<ImageBubbleMenu editor={editor} />
+			</div>
+		)
+	}
 )
 
-MinimalTiptapEditor.displayName = 'MinimalTiptapEditor'
+MinimalTiptapEditor.displayName = "MinimalTiptapEditor"
 
 export default MinimalTiptapEditor

web/components/ui/dialog.tsx

@@ -93,5 +93,6 @@ export {
 	DialogHeader,
 	DialogFooter,
 	DialogTitle,
-	DialogDescription
+	DialogDescription,
+	DialogPrimitive
 }

web/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

web/components/ui/toggle-group.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }

web/package.json

@@ -31,7 +31,9 @@
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@tanstack/react-virtual": "^3.10.7",
     "@tiptap/core": "^2.6.6",
@@ -40,6 +42,7 @@
     "@tiptap/extension-bullet-list": "^2.6.6",
     "@tiptap/extension-code": "^2.6.6",
     "@tiptap/extension-code-block-lowlight": "^2.6.6",
+    "@tiptap/extension-color": "^2.6.6",
     "@tiptap/extension-document": "^2.6.6",
     "@tiptap/extension-dropcursor": "^2.6.6",
     "@tiptap/extension-focus": "^2.6.6",
@@ -48,6 +51,7 @@
     "@tiptap/extension-heading": "^2.6.6",
     "@tiptap/extension-history": "^2.6.6",
     "@tiptap/extension-horizontal-rule": "^2.6.6",
+    "@tiptap/extension-image": "^2.6.6",
     "@tiptap/extension-italic": "^2.6.6",
     "@tiptap/extension-link": "^2.6.6",
     "@tiptap/extension-list-item": "^2.6.6",
@@ -61,6 +65,7 @@
     "@tiptap/extension-typography": "^2.6.6",
     "@tiptap/pm": "^2.6.6",
     "@tiptap/react": "^2.6.6",
+    "@tiptap/starter-kit": "^2.6.6",
     "@tiptap/suggestion": "^2.6.6",
     "axios": "^1.7.7",
     "cheerio": "1.0.0",