style: make button compat

web/src/App.scss

@@ -22,12 +22,12 @@ textarea {
   }
 }
 
-button {
+button, .btn {
   position: relative;
 
   @apply cursor-pointer disabled:cursor-default;
   @apply bg-brand hover:bg-brand-4 disabled:bg-brand-3 text-white rounded-md border-0 transition-colors;
-  @apply flex items-center justify-center gap-1 px-4 py-2;
+  @apply flex items-center justify-center gap-1 px-4 py-2 leading-none;
 
   &.btn-gray {
     @apply bg-coolGray-5 hover:bg-coolGray-4 disabled:bg-coolGray-3;

web/src/components/ContentInput.tsx

@@ -157,15 +157,15 @@ export const ContentInput = memo(() => {
           Add file
         </button>
 
+        <button onClick={doClear} className='btn-gray' key='clearBtn'>
+          Clear
+        </button>
+
         {files.map((file) => <AttachedFileItem
           key={file.id}
           file={file}
           removeFile={handleRemoveFile}
         />)}
-
-        <button onClick={doClear} className='btn-gray' key='clearBtn'>
-          Clear
-        </button>
       </div>
 
       {!!isDragOver && (
@@ -194,7 +194,7 @@ function AttachedFileItem({ file, removeFile }: { file: FileStoreItem; removeFil
     return () => URL.revokeObjectURL(url);
   }, [file]);
 
-  return <div className="bg-brand-4 text-white rounded-md flex items-center text-sm overflow-hidden">
+  return <div className="btn !p-0 cursor-default">
     {file.thumbnail ? (
       <img src={file.thumbnail} className="w-[2em] h-[2em] rounded-md mx-1" />
     ) : (

web/src/components/PopoverConfirm.tsx

@@ -0,0 +1,33 @@
+import { memo, useEffect, useRef, useState } from "react";
+
+export const PopoverConfirm = memo(({ children, onConfirm }: { children: React.ReactNode, onConfirm: () => void }) => {
+  const [visible, setVisible] = useState(false);
+  const confirmBtnRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    const el = visible && confirmBtnRef.current;
+    if (!el) return;
+
+    const onBlur = () => {
+      setVisible(false);
+    }
+    el.addEventListener('blur', onBlur);
+    el.focus();
+
+    return () => el.removeEventListener('blur', onBlur);
+  }, [visible])
+
+  return (
+    <div className="relative">
+      <div onClick={() => setVisible(true)}>{children}</div>
+
+      {
+        visible && (<div className="absolute right-0 bottom-full z-10 rounded shadow p-4 bg-white flex gap-2 b-2 b-solid b-red-9 mb-4">
+          <button className="btn-gray" onClick={() => setVisible(false)}>No</button>
+          <button className="btn" onClick={onConfirm} ref={confirmBtnRef}>Yes</button>
+          <div className="b-8 b-solid b-transparent b-t-red-9 absolute bottom-[-16px] right-4 w-0 h-0"></div>
+        </div>)
+      }
+    </div>
+  )
+})

web/src/components/UploadRecords.tsx

@@ -5,6 +5,7 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 
 import type { UploadRecord } from '../../../src/database';
 import { fetchAPI } from '../store/auth';
+import { PopoverConfirm } from './PopoverConfirm';
 
 dayjs.extend(relativeTime);
 
@@ -100,11 +101,15 @@ const UploadRecordItem = memo((props: { record: UploadRecord }) => {
       )
     }
 
-    <a className={`${actionLink} hover:text-red`} onClick={(e) => (e.preventDefault(), deleteRecord(props.record.id))} href='#' role='button'>
-      <i className="i-mdi-trash mr-1"></i>
-      Delete
-    </a>
-  </div>  
+    <PopoverConfirm onConfirm={() => deleteRecord(props.record.id)}>
+      <a
+        className={`${actionLink} hover:text-red`}
+        onClick={(e) => e.preventDefault()} href='#' role='button'>
+        <i className="i-mdi-trash mr-1"></i>
+        Delete
+      </a>
+    </PopoverConfirm>
+  </div>
 
   return (
     <div className="rounded-lg bg-white shadow mb-2">
@@ -176,7 +181,6 @@ function copyToClipboard(text: string) {
 }
 
 function deleteRecord(id: number) {
-  if (!confirm('Are you sure you want to delete this record?')) return;
   fetchAPI('/api/delete', {
     method: 'POST',
     headers: {