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 && (