Initial commit

snippets-frontend/components/snippet-editor.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import { useMemo } from 'react'
+import CodeMirror from '@uiw/react-codemirror'
+import { javascript } from '@codemirror/lang-javascript'
+import { json } from '@codemirror/lang-json'
+import { markdown } from '@codemirror/lang-markdown'
+import { python } from '@codemirror/lang-python'
+import { rust } from '@codemirror/lang-rust'
+import { sql } from '@codemirror/lang-sql'
+import { xml } from '@codemirror/lang-xml'
+import { css } from '@codemirror/lang-css'
+import { go } from '@codemirror/lang-go'
+import { java } from '@codemirror/lang-java'
+import { cpp } from '@codemirror/lang-cpp'
+import { yaml } from '@codemirror/lang-yaml'
+import { oneDark } from '@codemirror/theme-one-dark'
+
+type Props = {
+  value: string
+  filename: string
+  onChange?: (value: string) => void
+  readOnly?: boolean
+}
+
+function languageFor(filename: string) {
+  const extension = filename.split('.').pop()?.toLowerCase()
+  if (!extension) return null
+  if (['js', 'jsx', 'ts', 'tsx', 'mjs', 'cjs'].includes(extension)) {
+    return javascript({ jsx: true, typescript: extension.includes('ts') })
+  }
+  if (['html', 'xml', 'svg'].includes(extension)) return xml()
+  if (['css', 'scss', 'less'].includes(extension)) return css()
+  if (extension === 'go') return go()
+  if (['java', 'kt', 'kts'].includes(extension)) return java()
+  if (['c', 'cpp', 'cc', 'cxx', 'h', 'hpp', 'cs'].includes(extension)) return cpp()
+  if (['yaml', 'yml'].includes(extension)) return yaml()
+  if (extension === 'json') return json()
+  if (['md', 'markdown'].includes(extension)) return markdown()
+  if (extension === 'py') return python()
+  if (extension === 'rs') return rust()
+  if (extension === 'sql') return sql()
+
+  return null
+}
+
+export function SnippetEditor({ value, filename, onChange, readOnly = false }: Props) {
+  const extensions = useMemo(() => {
+    const language = languageFor(filename)
+    return language ? [language] : []
+  }, [filename])
+
+  return (
+      <div className="overflow-hidden rounded-xl border border-border bg-editor shadow-sm">
+        <CodeMirror
+            value={value}
+            height="min(58vh, 560px)"
+            extensions={extensions}
+            theme={oneDark}
+            onChange={onChange}
+            readOnly={readOnly}
+            basicSetup={{
+              lineNumbers: true,
+              foldGutter: true,
+              highlightActiveLine: !readOnly,
+              autocompletion: !readOnly
+            }}
+            className="snippet-codemirror font-mono text-sm"
+            aria-label={readOnly ? 'Snippet content' : 'Snippet editor'}
+        />
+      </div>
+  )
+}
+
+export function languageLabel(filename: string) {
+  const extension = filename.split('.').pop()?.toUpperCase()
+  return extension && extension.length <= 6 ? extension : 'TEXT'
+}
+
+export function rawSnippetUrl(id: string) {
+  return `http://127.0.0.1:6868/${encodeURIComponent(id)}?mode=raw`
+}
+
+export function snippetUrl(id: string) {
+  if (typeof window === 'undefined') return `/${encodeURIComponent(id)}`
+  return new URL(`/${encodeURIComponent(id)}`, window.location.origin).toString()
+}

snippets-frontend/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import { Button as ButtonPrimitive } from '@base-ui/react/button'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        outline:
+          'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+        ghost:
+          'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
+        destructive:
+          'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default:
+          'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        icon: 'size-8',
+        'icon-xs':
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm':
+          'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+        'icon-lg': 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Button({
+  className,
+  variant = 'default',
+  size = 'default',
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }