+
+
+ )
+ }
+
+ return (
+
+
+
+
+
+
+ )
+}
diff --git a/v2/src/background.ts b/v2/src/background.ts
new file mode 100644
index 0000000..4d738d4
--- /dev/null
+++ b/v2/src/background.ts
@@ -0,0 +1,54 @@
+import { StorageKey, EncryptionMode } from './lib/constants'
+
+// Initialize defaults on install
+chrome.runtime.onInstalled.addListener(async () => {
+ const data = await chrome.storage.sync.get(StorageKey.SETTINGS)
+ if (!data[StorageKey.SETTINGS]) {
+ await chrome.storage.sync.set({
+ [StorageKey.SETTINGS]: JSON.stringify({
+ apiKey: 'MmU1OGNlMjcyMzllMzRhNzdjNWVmNjVkYmVhOGIyNGQ=',
+ encMode: EncryptionMode.AES_GCM,
+ keyLength: 16,
+ theme: 'light',
+ encryption: false,
+ default_action: 'Post to Pastebin',
+ page_timeout: 30,
+ }),
+ })
+ }
+
+ // Rebuild context menus on install/update to avoid duplicate registration errors
+ chrome.contextMenus.removeAll(() => {
+ chrome.contextMenus.create({
+ id: 'securebinOpen',
+ title: 'Open in SecureBin',
+ contexts: ['selection'],
+ })
+ })
+})
+
+// Also register context menu on startup (service worker restart)
+chrome.runtime.onStartup.addListener(() => {
+ chrome.contextMenus.removeAll(() => {
+ chrome.contextMenus.create({
+ id: 'securebinOpen',
+ title: 'Open in SecureBin',
+ contexts: ['selection'],
+ })
+ })
+})
+
+chrome.contextMenus.onClicked.addListener(async (info) => {
+ const text = info.selectionText
+ if (!text || info.menuItemId !== 'securebinOpen') return
+
+ // Store the selected text so the popup can load it into the editor
+ await chrome.storage.session.set({ pendingText: { text } })
+
+ // Open the extension popup
+ try {
+ await chrome.action.openPopup()
+ } catch {
+ // openPopup() may fail if popup is already open — safe to ignore
+ }
+})
diff --git a/v2/src/components/NavBar.tsx b/v2/src/components/NavBar.tsx
new file mode 100644
index 0000000..09cd054
--- /dev/null
+++ b/v2/src/components/NavBar.tsx
@@ -0,0 +1,49 @@
+import { useNavigate, useLocation } from 'react-router-dom'
+import { PenLine, Clock, Settings } from 'lucide-react'
+import { cn } from '@/lib/cn'
+import { useStore } from '@/lib/store'
+
+export default function NavBar() {
+ const navigate = useNavigate()
+ const location = useLocation()
+ const isDark = useStore((s) => s.settings.theme === 'dark')
+
+ const navItems = [
+ { icon: PenLine, path: '/home', label: 'Editor' },
+ { icon: Clock, path: '/history', label: 'History' },
+ { icon: Settings, path: '/settings', label: 'Settings' },
+ ]
+
+ return (
+
+ 
+
+
+
+ {label && (
+
+ )}
+
+ )
+}
diff --git a/v2/src/components/common/PageHeader.tsx b/v2/src/components/common/PageHeader.tsx
new file mode 100644
index 0000000..e4ed99a
--- /dev/null
+++ b/v2/src/components/common/PageHeader.tsx
@@ -0,0 +1,31 @@
+import { useNavigate } from 'react-router-dom'
+import { ChevronLeft } from 'lucide-react'
+
+interface PageHeaderProps {
+ title: string
+ subtitle?: string
+ showBack?: boolean
+}
+
+export default function PageHeader({ title, subtitle, showBack = true }: PageHeaderProps) {
+ const navigate = useNavigate()
+
+ return (
+
+ {multiline ? (
+
+ ) : (
+
+ )}
+
+
+ {masked && (
+
+ )}
+ {openInNew && (
+
+ )}
+ {allowCopy && (
+
+ )}
+
+
+ {showBack && (
+
+ )}
+
+ )
+}
diff --git a/v2/src/components/common/SettingsRow.tsx b/v2/src/components/common/SettingsRow.tsx
new file mode 100644
index 0000000..147eb2e
--- /dev/null
+++ b/v2/src/components/common/SettingsRow.tsx
@@ -0,0 +1,48 @@
+import { ReactNode } from 'react'
+import { ChevronRight } from 'lucide-react'
+import { cn } from '@/lib/cn'
+
+interface SettingsRowProps {
+ label: string
+ description?: string
+ children?: ReactNode
+ onClick?: () => void
+ chevron?: boolean
+ danger?: boolean
+ className?: string
+}
+
+export default function SettingsRow({
+ label,
+ description,
+ children,
+ onClick,
+ chevron = false,
+ danger = false,
+ className,
+}: SettingsRowProps) {
+ const Comp = onClick ? 'button' : 'div'
+
+ return (
+
+
+ {title}
+ {subtitle && ( +{subtitle}
+ )} +
+
+ {label}
+ {description && ( +{description}
+ )} +
+ {children}
+ {chevron &&
+
+
+ )
+}
diff --git a/v2/src/components/dialog/ConfirmDialog.tsx b/v2/src/components/dialog/ConfirmDialog.tsx
new file mode 100644
index 0000000..19908f7
--- /dev/null
+++ b/v2/src/components/dialog/ConfirmDialog.tsx
@@ -0,0 +1,75 @@
+import * as Dialog from '@radix-ui/react-dialog'
+import { AlertTriangle, X } from 'lucide-react'
+import { cn } from '@/lib/cn'
+
+interface ConfirmDialogProps {
+ open: boolean
+ title: string
+ description: string
+ confirmLabel?: string
+ danger?: boolean
+ onConfirm: () => void
+ onCancel: () => void
+}
+
+export default function ConfirmDialog({
+ open,
+ title,
+ description,
+ confirmLabel = 'Confirm',
+ danger = true,
+ onConfirm,
+ onCancel,
+}: ConfirmDialogProps) {
+ return (
+
+
+ {title}
+ {subtitle && ( +{subtitle}
+ )} +
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+ setPasskey(e.target.value)}
+ onKeyDown={(e) => e.key === 'Enter' && handleConfirm()}
+ placeholder="Paste decryption key..."
+ className="w-full px-3 py-2.5 mb-4 text-[13px] font-mono rounded-xl border border-border bg-surface-secondary/50 focus:outline-none focus:border-primary transition-colors"
+ autoFocus
+ />
+
+
+
+
+ Decryption Key
+
+ Enter the passkey to decrypt the content
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Encryption Passkey
+
+ Enter a passkey or use the generated one
+
+
+
+ setPasskey(e.target.value)}
+ placeholder="Enter passkey..."
+ className="w-full px-3 py-2.5 pr-10 text-[13px] font-mono rounded-xl border border-border bg-surface-secondary/50 focus:outline-none focus:border-primary transition-colors"
+ autoFocus
+ />
+
+
+
+
+
+
+
+
+
+ {/* Usage bar */}
+ (null)
+ const debounceRef = useRef | undefined>(undefined)
+
+ const handleChange = useCallback(
+ (e: React.ChangeEvent) => {
+ const text = e.target.value
+ clearTimeout(debounceRef.current)
+ debounceRef.current = setTimeout(() => {
+ const action = detectAction(text, settings.default_action)
+ updateDraft({
+ plaintext: text,
+ action,
+ buttonEnabled: isWithinLimit(text, action),
+ })
+ }, 200)
+ // Immediate text update for responsive typing
+ updateDraft({ plaintext: text })
+ },
+ [settings.default_action, updateDraft],
+ )
+
+ useEffect(() => {
+ return () => clearTimeout(debounceRef.current)
+ }, [])
+
+ const placeholder = (() => {
+ if (draft.action === EditorAction.DECRYPT || draft.action === EditorAction.DECRYPT_PASTEBIN) {
+ return 'Paste encrypted text or Pastebin link...'
+ }
+ return 'Type or paste your text here...'
+ })()
+
+ const isEmpty = draft.plaintext.length === 0
+
+ return (
+
+
+
+ {/* Action button group */}
+
+
+
+
+ {draft.plaintext.length.toLocaleString()} / {maxLen.toLocaleString()}
+
+
+
+
+
+ {/* Dropdown menu */}
+ {menuOpen && (
+ <>
+
+ )
+}
diff --git a/v2/src/components/editor/TextEditor.tsx b/v2/src/components/editor/TextEditor.tsx
new file mode 100644
index 0000000..3902c2a
--- /dev/null
+++ b/v2/src/components/editor/TextEditor.tsx
@@ -0,0 +1,66 @@
+import { useRef, useEffect, useCallback } from 'react'
+import { useStore } from '@/lib/store'
+import { cn } from '@/lib/cn'
+import { EditorAction } from '@/lib/constants'
+import { detectAction, getMaxLength, isWithinLimit } from '@/lib/editor-utils'
+
+export default function TextEditor() {
+ const { draft, updateDraft, settings } = useStore()
+ const textareaRef = useRef setMenuOpen(false)} />
+
+
+ {menuItems.map((item, i) => (
+
+
+ )}
+
+ {item.divider && i > 0 && }
+
+
+ ))}
+
+