chore: Enhancement + New Feature (#185)

* wip

* wip page

* chore: style

* wip pages

* wip pages

* chore: toggle

* chore: link

* feat: topic search

* chore: page section

* refactor: apply tailwind class ordering

* fix: handle loggedIn user for guest route

* feat: folder & image schema

* chore: move utils to shared

* refactor: tailwind class ordering

* feat: img ext for editor

* refactor: remove qa

* fix: tanstack start

* fix: wrong import

* chore: use toast

* chore: schema

web/shared/editor/components/ui/icon.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { icons } from "lucide-react"
+
+export type IconProps = {
+  name: keyof typeof icons
+  className?: string
+  strokeWidth?: number
+  [key: string]: any
+}
+
+export const Icon = React.memo(
+  ({ name, className, size, strokeWidth, ...props }: IconProps) => {
+    const IconComponent = icons[name]
+
+    if (!IconComponent) {
+      return null
+    }
+
+    return (
+      <IconComponent
+        className={cn(!size ? "size-4" : size, className)}
+        strokeWidth={strokeWidth || 2}
+        {...props}
+      />
+    )
+  },
+)
+
+Icon.displayName = "Icon"

web/shared/editor/components/ui/popover-wrapper.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export type PopoverWrapperProps = React.HTMLProps<HTMLDivElement>
+
+export const PopoverWrapper = React.forwardRef<
+  HTMLDivElement,
+  PopoverWrapperProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      className={cn(
+        "rounded-lg border bg-popover text-popover-foreground shadow-sm",
+        className,
+      )}
+      {...props}
+      ref={ref}
+    >
+      {children}
+    </div>
+  )
+})
+
+PopoverWrapper.displayName = "PopoverWrapper"

web/shared/editor/components/ui/shortcut.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { getShortcutKey } from "@shared/utils"
+
+export interface ShortcutKeyWrapperProps
+  extends React.HTMLAttributes<HTMLSpanElement> {
+  ariaLabel: string
+}
+
+const ShortcutKeyWrapper = React.forwardRef<
+  HTMLSpanElement,
+  ShortcutKeyWrapperProps
+>(({ className, ariaLabel, children, ...props }, ref) => {
+  return (
+    <span
+      aria-label={ariaLabel}
+      className={cn("inline-flex items-center gap-0.5", className)}
+      {...props}
+      ref={ref}
+    >
+      {children}
+    </span>
+  )
+})
+
+ShortcutKeyWrapper.displayName = "ShortcutKeyWrapper"
+
+export interface ShortcutKeyProps
+  extends React.HTMLAttributes<HTMLSpanElement> {
+  shortcut: string
+}
+
+const ShortcutKey = React.forwardRef<HTMLSpanElement, ShortcutKeyProps>(
+  ({ className, shortcut, ...props }, ref) => {
+    return (
+      <kbd
+        className={cn(
+          "inline-block min-w-2.5 text-center align-baseline font-sans text-xs font-medium capitalize text-[rgb(156,157,160)]",
+          className,
+        )}
+        {...props}
+        ref={ref}
+      >
+        {getShortcutKey(shortcut).symbol}
+      </kbd>
+    )
+  },
+)
+
+ShortcutKey.displayName = "ShortcutKey"
+
+export const Shortcut = {
+  Wrapper: ShortcutKeyWrapper,
+  Key: ShortcutKey,
+}

web/shared/editor/components/ui/toolbar-button.tsx

@@ -0,0 +1,57 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Toggle } from "@/components/ui/toggle"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import type { TooltipContentProps } from "@radix-ui/react-tooltip"
+
+interface ToolbarButtonProps
+  extends React.ComponentPropsWithoutRef<typeof Toggle> {
+  isActive?: boolean
+  tooltip?: string
+  tooltipOptions?: TooltipContentProps
+}
+
+const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>(
+  function ToolbarButton(
+    { isActive, children, tooltip, className, tooltipOptions, ...props },
+    ref,
+  ) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Toggle
+            size="sm"
+            ref={ref}
+            className={cn(
+              "size-7 rounded-md p-0",
+              {
+                "bg-primary/10 text-primary hover:bg-primary/10 hover:text-primary":
+                  isActive,
+              },
+              className,
+            )}
+            {...props}
+          >
+            {children}
+          </Toggle>
+        </TooltipTrigger>
+        {tooltip && (
+          <TooltipContent {...tooltipOptions}>
+            <div className="flex flex-col items-center text-center">
+              {tooltip}
+            </div>
+          </TooltipContent>
+        )}
+      </Tooltip>
+    )
+  },
+)
+
+ToolbarButton.displayName = "ToolbarButton"
+
+export { ToolbarButton }