feat: kind based nostr permissions

src/app/components/Badge/index.tsx

@@ -1,24 +1,39 @@
-import { useTranslation } from "react-i18next";
+import { PopiconsXLine } from "@popicons/react";
 import { classNames } from "~/app/utils";
 
 type Props = {
-  label: "budget" | "auth" | "imported";
+  label: string;
   className: string;
+  onDelete?: () => void;
+  description?: string;
 };
 
-export default function Badge({ label, className }: Props) {
-  const { t: tComponents } = useTranslation("components", {
-    keyPrefix: "badge",
-  });
-
+export default function Badge({
+  label,
+  className,
+  onDelete,
+  description,
+}: Props) {
   return (
-    <span
+    <div
       className={classNames(
-        "inline-block leading-none rounded-full font-medium mr-2 py-1 px-2 text-xs",
+        "inline-flex items-center leading-none rounded-full font-medium mr-2 py-1 pr-2 pl-3 mb-2 text-xs cursor-default",
         className
       )}
+      title={description}
     >
-      {tComponents(`label.${label}`)}
-    </span>
+      {label.toUpperCase()}
+      {onDelete && (
+        <button
+          type="button"
+          onClick={() => {
+            onDelete();
+          }}
+          className="text-gray-400 dark:text-neutral-600 hover:text-gray-600 dark:hover:text-neutral-400"
+        >
+          <PopiconsXLine className="w-4 h-4" />
+        </button>
+      )}
+    </div>
   );
 }

src/app/components/BadgesList/index.tsx

@@ -1,11 +1,15 @@
 import Badge from "@components/Badge";
+import { useTranslation } from "react-i18next";
 import type { Allowance, Badge as BadgeType } from "~/types";
 
 type Props = {
   allowance: Allowance;
 };
 
 export default function BadgesList({ allowance }: Props) {
+  const { t: tComponents } = useTranslation("components", {
+    keyPrefix: "badge",
+  });
   const badges: BadgeType[] = [];
   if (allowance.remainingBudget > 0) {
     badges.push({
@@ -23,7 +27,13 @@ export default function BadgesList({ allowance }: Props) {
   return (
     <>
       {badges?.map((b) => {
-        return <Badge key={b.label} label={b.label} className={b.className} />;
+        return (
+          <Badge
+            key={b.label}
+            label={tComponents(`label.${b.label}`)}
+            className={b.className}
+          />
+        );
       })}
     </>
   );

src/app/components/Modal/index.tsx

@@ -36,7 +36,7 @@ export default function Modal({
       style={{ content: { maxHeight: "80vh" } }}
     >
       {title && (
-        <h2 className="text-2xl font-bold dark:text-white mb-6">{title}</h2>
+        <h2 className="text-2xl font-bold dark:text-white pb-5">{title}</h2>
       )}
       <button
         onClick={closeModal}

src/app/components/PermissionModal/index.tsx

@@ -0,0 +1,114 @@
+import { useState } from "react";
+import { Trans, useTranslation } from "react-i18next";
+import Button from "~/app/components/Button";
+import Modal from "~/app/components/Modal";
+import PublisherCard from "~/app/components/PublisherCard";
+import { useNavigationState } from "~/app/hooks/useNavigationState";
+import { classNames } from "~/app/utils";
+
+import { OriginData, PermissionOption } from "~/types";
+
+type Props = {
+  onClose: () => void;
+  isOpen: boolean;
+  permissionCallback: (permission: PermissionOption) => void;
+  permission: PermissionOption;
+};
+
+export default function PermissionModal({
+  isOpen,
+  onClose,
+  permissionCallback,
+  permission,
+}: Props) {
+  const { t: tCommon } = useTranslation("common");
+
+  const { t } = useTranslation("components", {
+    keyPrefix: "permissions_modal",
+  });
+
+  const navState = useNavigationState();
+  const [permissionOption, setPermissionOption] = useState(
+    PermissionOption.ASK_EVERYTIME
+  );
+  const origin = navState.origin as OriginData;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      close={() => {
+        onClose();
+      }}
+      contentLabel={t("content_label")}
+      position="top"
+    >
+      <div className="dark:text-white mt-6">
+        <PublisherCard
+          title={origin.name}
+          image={origin.icon}
+          url={origin.host}
+          isSmall={false}
+          isCard={false}
+        />
+        <div className="flex flex-col gap-2 py-1">
+          <p className="text-md">{t("set_permissions")}</p>
+
+          <div className="flex flex-col gap-1">
+            <ListItem checkedValue={PermissionOption.ASK_EVERYTIME} />
+            <ListItem checkedValue={PermissionOption.DONT_ASK_CURRENT} />
+            <ListItem checkedValue={PermissionOption.DONT_ASK_ANY} />
+          </div>
+          <div className="flex mt-5">
+            <Button
+              label={tCommon("actions.save")}
+              primary
+              flex
+              onClick={() => permissionCallback(permissionOption)}
+            />
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+
+  type ListItemProps = {
+    checkedValue: PermissionOption;
+  };
+
+  function ListItem({ checkedValue }: ListItemProps) {
+    return (
+      <div className="flex flex-row gap-2 items-center py-1">
+        <input
+          type="radio"
+          id={checkedValue}
+          name="permission"
+          value="permission"
+          checked={permissionOption === checkedValue}
+          onChange={() => {
+            setPermissionOption(checkedValue);
+          }}
+          className={classNames(
+            "border border-gray-200 dark:border-neutral-700 cursor-pointer text-primary focus:ring-0 focus:ring-offset-0",
+            permissionOption !== checkedValue
+              ? "bg-white dark:bg-surface-01dp"
+              : ""
+          )}
+        />
+        <label
+          htmlFor={checkedValue}
+          className="text-sm text-gray-600 dark:text-neutral-400 cursor-pointer"
+        >
+          <Trans
+            i18nKey={checkedValue}
+            t={t}
+            values={{ permission }}
+            components={[
+              // eslint-disable-next-line react/jsx-key
+              <b></b>,
+            ]}
+          />
+        </label>
+      </div>
+    );
+  }
+}

src/app/components/PublisherCard/index.tsx

@@ -31,8 +31,8 @@ export default function PublisherCard({
     <div
       className={classNames(
         isSmall ? "p-2" : "flex-col justify-center p-4",
-        isCard && "drop-shadow rounded-lg mt-4",
-        "flex items-center bg-white dark:bg-surface-02dp"
+        isCard && "drop-shadow rounded-lg mt-4 bg-white dark:bg-surface-02dp",
+        "flex items-center"
       )}
     >
       {image && (