From 4cb973d51186a27b0ba196946612bb4dd2f3f85d Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Tue, 14 Apr 2026 03:48:08 +0000
Subject: [PATCH] making the settings more legible, adding unwire delete pub button

---
 app/lish/[did]/[publication]/dashboard/settings/GeneralSettings.tsx | 3 +--
 app/lish/[did]/[publication]/dashboard/settings/PostSettings.tsx | 12 ++++--------
 app/lish/[did]/[publication]/dashboard/settings/PubDomainSettings.tsx | 1 -
 app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx | 85 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------
 app/lish/[did]/[publication]/dashboard/settings/ThemeSettings.tsx | 1 -
 5 file(s) changed, 76 insertion(s)(+), 26 deletion(s)(-)

diff --git a/app/lish/[did]/[publication]/dashboard/settings/GeneralSettings.tsx b/app/lish/[did]/[publication]/dashboard/settings/GeneralSettings.tsx
--- a/app/lish/[did]/[publication]/dashboard/settings/GeneralSettings.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/GeneralSettings.tsx
@@ -16,8 +16,7 @@
   let fileInputRef = useRef<HTMLInputElement>(null);
 
   return (
-    <DashboardContainer>
-      <h3 className="font-bold text-primary">General Settings</h3>
+    <DashboardContainer section="General Settings">
 
       <div className="flex flex-col gap-2 pb-2">
         <p className=" text-secondary  font-bold">
diff --git a/app/lish/[did]/[publication]/dashboard/settings/PostSettings.tsx b/app/lish/[did]/[publication]/dashboard/settings/PostSettings.tsx
--- a/app/lish/[did]/[publication]/dashboard/settings/PostSettings.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/PostSettings.tsx
@@ -17,8 +17,7 @@
   let cardBorderHidden = useCardBorderHidden();
   return (
     <>
-      <DashboardContainer>
-        <h3>Discovery</h3>
+      <DashboardContainer section="Discovery">
         <Toggle
           toggle={props.showInDiscover}
           onToggle={() => props.setShowInDiscover(!props.showInDiscover)}
@@ -35,10 +34,8 @@
           </div>
         </Toggle>
       </DashboardContainer>
-      {cardBorderHidden && <hr className="border-border-light my-2" />}
 
-      <DashboardContainer>
-        <h3>Post Layout</h3>
+      <DashboardContainer section="Post Layout">
         <Toggle
           toggle={props.showPrevNext}
           onToggle={() => props.setShowPrevNext(!props.showPrevNext)}
@@ -48,9 +45,8 @@
           </div>
         </Toggle>
       </DashboardContainer>
-      {cardBorderHidden && <hr className="border-border-light my-2" />}
-      <DashboardContainer>
-        <h3>Post Interactions</h3>
+
+      <DashboardContainer section="Post Interactions">
         <div className="flex flex-col gap-2">
           <Toggle
             toggle={props.showComments}
diff --git a/app/lish/[did]/[publication]/dashboard/settings/PubDomainSettings.tsx b/app/lish/[did]/[publication]/dashboard/settings/PubDomainSettings.tsx
--- a/app/lish/[did]/[publication]/dashboard/settings/PubDomainSettings.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/PubDomainSettings.tsx
@@ -43,7 +43,6 @@
 
   return (
     <>
-      <h3 className="font-bold text-primary">Domains</h3>
       <div className="flex flex-col gap-1">
         <h4>This Publication&apos;s Domains</h4>
         <div className="text-xs text-tertiary -mb-1">DEFAULT</div>
diff --git a/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx b/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
--- a/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect, useMemo } from "react";
-import { ButtonSecondary } from "components/Buttons";
+import { ButtonPrimary, ButtonSecondary } from "components/Buttons";
 import { DotLoader } from "components/utils/DotLoader";
 import { useToaster } from "components/Toast";
 import { mutate } from "swr";
@@ -18,6 +18,8 @@
 import { ManageProSubscription } from "./ManageProSubscription";
 import { useIsPro, useCanSeePro } from "src/hooks/useEntitlement";
 import { InlineUpgradeToPro, UpgradeToProButton } from "../../UpgradeModal";
+import { Modal } from "components/Modal";
+import { Input } from "components/Input";
 
 type SettingsView = "all" | "theme";
 
@@ -163,12 +165,9 @@
           setIconFile={setIconFile}
         />
 
-        {cardBorderHidden && <hr className="border-border-light my-2" />}
-        <DashboardContainer>
+        <DashboardContainer section="Theme and Layout">
           <ThemeSettings />
         </DashboardContainer>
-
-        {cardBorderHidden && <hr className="border-border-light my-2" />}
 
         {/* ── Post Settings ── */}
         <PostSettings
@@ -184,22 +183,27 @@
           setShowInDiscover={setShowInDiscover}
         />
 
-        {cardBorderHidden && <hr className="border-border-light my-2" />}
-
-        <DashboardContainer>
-          <PubDomainSettings />
+        <DashboardContainer section="Domains">
+          <div className="text-secondary">
+            <PubDomainSettings />
+          </div>
         </DashboardContainer>
-        {cardBorderHidden && <hr className="border-border-light my-2" />}
 
-        <DashboardContainer className="bg-[rgb(var(--accent-light))]">
-          <h3>Leaflet Pro</h3>
+        <DashboardContainer section="Leaflet Pro" className="pb-4">
           {canSeePro && !isPro ? (
             <UpgradeToProButton />
           ) : (
             <ManageProSubscription compact />
           )}
         </DashboardContainer>
-        {cardBorderHidden && <div className="spacer h-4" />}
+        <div className="flex flex-col gap-1">
+          <hr className="border-border border-2" />
+          <hr className="border-border border-2" />
+        </div>
+
+        <DashboardContainer section="DANGER!" className="pb-4">
+          <DeletePublication />
+        </DashboardContainer>
 
         {hasUnsavedChanges && <SettingsFooter loading={loading} />}
       </div>
@@ -254,13 +258,66 @@
 export const DashboardContainer = (props: {
   children: React.ReactNode;
   className?: string;
+  section?: string;
 }) => {
   let cardBorderHidden = useCardBorderHidden();
   return (
     <div
-      className={`flex flex-col rounded-lg! gap-2 ${!cardBorderHidden ? "container p-3 sm:px-4" : "bg-transparent"}`}
+      className={`container flex flex-col rounded-lg! gap-2 p-3 sm:px-4 ${!cardBorderHidden ? "" : "bg-trasparent!"} ${props.className}`}
     >
+      {props.section && (
+        <>
+          <h3 className="font-bold text-primary">{props.section}</h3>
+          <hr className="-mt-1 mb-2 border-border-light" />
+        </>
+      )}
       {props.children}
     </div>
+  );
+};
+
+const DeletePublication = () => {
+  let [value, setValue] = useState("");
+  let record = useNormalizedPublicationRecord();
+  let { data: pub } = usePublicationData();
+  let postCount = pub?.documents?.length;
+  let subCount = pub?.publication?.publication_subscriptions?.length;
+  return (
+    <Modal
+      asChild
+      className="text-center"
+      trigger={<ButtonPrimary>Delete Publication</ButtonPrimary>}
+      title="Are you sure?"
+    >
+      <div className="text-secondary flex flex-col">
+        <div className="pb-2">
+          You will permanently lose <br />
+          {postCount !== 0
+            ? `${pub?.documents?.length} post${postCount !== 1 && "s"}`
+            : null}
+          <br />
+          {subCount !== 0
+            ? `${pub?.documents?.length} subscriber${subCount !== 1 && "s"}`
+            : null}
+        </div>
+        <div className="font-bold pb-1">
+          Enter the name of this publication to confirm
+        </div>
+
+        <Input
+          className="input-with-border w-full mb-3 text-primary max-w-prose"
+          placeholder={record?.name ? record.name : "Publication Name"}
+          type={`text`}
+          value={value}
+          onChange={(e) => setValue(e.currentTarget.value)}
+        />
+        <ButtonPrimary
+          className="mx-auto mb-1"
+          disabled={record?.name !== value}
+        >
+          Delete Publication
+        </ButtonPrimary>
+      </div>
+    </Modal>
   );
 };
diff --git a/app/lish/[did]/[publication]/dashboard/settings/ThemeSettings.tsx b/app/lish/[did]/[publication]/dashboard/settings/ThemeSettings.tsx
--- a/app/lish/[did]/[publication]/dashboard/settings/ThemeSettings.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/ThemeSettings.tsx
@@ -10,7 +10,6 @@
 
   return (
     <>
-      <h3 className="font-bold text-primary">Theme and Layout</h3>
       <SpeedyLink
         className="text-left flex gap-2 items-center text-accent-contrast font-bold no-underline! w-fit"
         href={href}

--
tangled.sh