feat: confirmation dialog for deeplinks (#783)

2025-01-26 11:15:40 -05:00
parent b1d3b7d31d
commit 4548710f2f
5 changed files with 179 additions and 15 deletions
@@ -0,0 +1,14 @@
+export function extractCommand(link: string): string {
+  const url = new URL(link);
+  const cmd = url.searchParams.get('cmd') || 'Unknown Command';
+  const args = url.searchParams.getAll('arg').map(decodeURIComponent);
+
+  // Combine the command and its arguments into a reviewable format
+  return `${cmd} ${args.join(' ')}`.trim();
+}
+
+export function extractExtensionName(link: string): string {
+  const url = new URL(link);
+  const name = url.searchParams.get('name');
+  return name ? decodeURIComponent(name) : 'Unknown Extension';
+}
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Card } from './card';
+
+export function BaseModal({
+  isOpen,
+  title,
+  children,
+  actions,
+  onClose,
+}: {
+  isOpen: boolean;
+  title: string;
+  children: React.ReactNode;
+  actions: React.ReactNode; // Buttons for actions
+  onClose: () => void;
+}) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/20 backdrop-blur-sm z-[9999]">
+      <Card className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[440px] bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden p-[16px] pt-[24px] pb-0">
+        <div className="px-8 pb-0 space-y-8">
+          {/* Header */}
+          <div className="flex">
+            <h2 className="text-2xl font-regular dark:text-white text-gray-900">{title}</h2>
+          </div>
+
+          {/* Content */}
+          {children && <div className="px-8">{children}</div>}
+
+          {/* Actions */}
+          <div className="mt-[8px] ml-[-24px] mr-[-24px] pt-[16px]">{actions}</div>
+        </div>
+      </Card>
+    </div>
+  );
+}
@@ -0,0 +1,50 @@
+import { BaseModal } from './BaseModal';
+import React from 'react';
+
+export function ConfirmationModal({
+  isOpen,
+  title,
+  message,
+  onConfirm,
+  onCancel,
+  confirmLabel = 'Yes',
+  cancelLabel = 'No',
+  isSubmitting = false,
+}: {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  isSubmitting?: boolean; // To handle debounce state
+}) {
+  return (
+    <BaseModal
+      isOpen={isOpen}
+      title={title}
+      onClose={onCancel}
+      actions={
+        <>
+          <button
+            onClick={onConfirm}
+            disabled={isSubmitting}
+            className="w-full h-[60px] rounded-none border-t dark:border-gray-600 text-indigo-500 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 dark:border-gray-600 text-lg font-regular"
+          >
+            {isSubmitting ? 'Processing...' : confirmLabel}
+          </button>
+          <button
+            onClick={onCancel}
+            disabled={isSubmitting}
+            className="w-full h-[60px] rounded-none border-t dark:border-gray-600 text-gray-400 text-lg font-regular hover:bg-gray-50"
+          >
+            {cancelLabel}
+          </button>
+        </>
+      }
+    >
+      <p className="text-sm text-gray-600 dark:text-gray-400 whitespace-pre-wrap">{message}</p>
+    </BaseModal>
+  );
+}