a tool for shared writing and social publishing
little tweaks to the pub settings
+85
-38
+23
-13
app/lish/[did]/[publication]/UpgradeModal.tsx
+23
-13
app/lish/[did]/[publication]/UpgradeModal.tsx
···
86
86
);
87
87
};
88
88
89
-
export const InlineUpgrade = (props: { compact?: boolean }) => {
89
+
export const InlineUpgradeToPro = (props: { compact?: boolean }) => {
90
90
return (
91
91
<div className="text-center text-secondary">
92
-
<UpgradeModal
93
-
asChild
94
-
trigger={
95
-
<ButtonPrimary
96
-
compact={props.compact}
97
-
fullWidth
98
-
className={props.compact ? `text-sm` : "text-base"}
99
-
>
100
-
Upgrade to Leaflet Pro!
101
-
</ButtonPrimary>
102
-
}
103
-
/>
92
+
<UpgradeToProButton fullWidth compact={props.compact} />
104
93
<div
105
94
className={`${props.compact ? `text-sm` : "text-base"} leading-snug text-tertiary pt-2`}
106
95
>
···
109
98
</div>
110
99
);
111
100
};
101
+
102
+
export const UpgradeToProButton = (props: {
103
+
fullWidth?: boolean;
104
+
compact?: boolean;
105
+
}) => {
106
+
return (
107
+
<UpgradeModal
108
+
asChild
109
+
trigger={
110
+
<ButtonPrimary
111
+
type="button"
112
+
compact={props.compact}
113
+
fullWidth={props.fullWidth}
114
+
className={props.compact ? `text-sm` : "text-base"}
115
+
>
116
+
Upgrade to Leaflet Pro!
117
+
</ButtonPrimary>
118
+
}
119
+
/>
120
+
);
121
+
};
+3
-1
app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
+3
-1
app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
···
134
134
const tagCount = tags?.length || 0;
135
135
136
136
let interactionsAvailable =
137
-
props.showComments || props.showMentions || props.showRecommends;
137
+
props.showComments ||
138
+
(props.showMentions && props.quotesCount > 0) ||
139
+
props.showRecommends;
138
140
139
141
return (
140
142
<div
+35
-10
app/lish/[did]/[publication]/dashboard/settings/ManageProSubscription.tsx
+35
-10
app/lish/[did]/[publication]/dashboard/settings/ManageProSubscription.tsx
···
7
7
import { GoBackSmall } from "components/Icons/GoBackSmall";
8
8
import { PRODUCT_DEFINITION } from "stripe/products";
9
9
10
-
export const ManageProSubscription = (props: {}) => {
10
+
export const ManageProSubscription = (props: { compact?: boolean }) => {
11
11
const [loading, setLoading] = useState(false);
12
12
const [error, setError] = useState<string | null>(null);
13
13
const { identity } = useIdentityData();
···
29
29
setLoading(false);
30
30
}
31
31
}
32
+
if (props.compact) {
33
+
return (
34
+
<div className="text-secondary font-bold flex flex-col gap-1 justify-end">
35
+
<ButtonPrimary
36
+
className=""
37
+
compact
38
+
onClick={handleManageBilling}
39
+
disabled={loading}
40
+
>
41
+
{loading ? <DotLoader /> : "Manage Billing"}
42
+
</ButtonPrimary>
43
+
<div className="text-tertiary text-sm font-normal">
44
+
{subscription?.status === "canceled"
45
+
? "Your subscription has ended"
46
+
: subscription?.status === "canceling"
47
+
? `Access until ${renewalDate}`
48
+
: `Renews ${renewalDate}`}
49
+
</div>
32
50
51
+
{error && <div className="text-sm text-red-500 mt-2">{error}</div>}
52
+
</div>
53
+
);
54
+
}
33
55
return (
34
56
<div>
35
-
<div className="text-secondary text-center flex flex-col justify-center gap-2 py-2">
57
+
<div className="text-secondary text-center flex flex-col leading-snug justify-center gap-2 py-2">
36
58
<div>
37
-
You have a <br />
38
-
{PRODUCT_DEFINITION.name} subscription
39
-
<div className="text-lg font-bold text-primary">
59
+
You are subscribed to
60
+
<br />
61
+
<div className="text-xl font-bold text-primary pb-1">
40
62
{PRODUCT_DEFINITION.name}
41
63
</div>
42
-
{subscription?.status === "canceled"
43
-
? "Your subscription has ended"
44
-
: subscription?.status === "canceling"
45
-
? `Access until ${renewalDate}`
46
-
: `Renews on ${renewalDate}`}
64
+
<div className="text-tertiary italic text-sm">
65
+
{subscription?.status === "canceled"
66
+
? "Your subscription has ended"
67
+
: subscription?.status === "canceling"
68
+
? `Access until ${renewalDate}`
69
+
: `Renews ${renewalDate}`}
70
+
</div>
47
71
</div>
48
72
<ButtonPrimary
49
73
className="mx-auto"
74
+
type="button"
50
75
compact
51
76
onClick={handleManageBilling}
52
77
disabled={loading}
+9
-7
app/lish/[did]/[publication]/dashboard/settings/PostSettings.tsx
+9
-7
app/lish/[did]/[publication]/dashboard/settings/PostSettings.tsx
···
24
24
onToggle={() => props.setShowInDiscover(!props.showInDiscover)}
25
25
>
26
26
<div className="flex flex-col justify-start">
27
-
<div className="font-bold">Make Public</div>
27
+
<div className="font-bold text-secondary">Make Public</div>
28
28
<div className="text-tertiary text-sm leading-tight">
29
29
Your posts will appear in{" "}
30
30
<a href="/reader" target="_blank">
···
35
35
</div>
36
36
</Toggle>
37
37
</DashboardContainer>
38
-
{cardBorderHidden && <hr className="border-border-light" />}
38
+
{cardBorderHidden && <hr className="border-border-light my-2" />}
39
39
40
40
<DashboardContainer>
41
41
<h3>Post Layout</h3>
···
43
43
toggle={props.showPrevNext}
44
44
onToggle={() => props.setShowPrevNext(!props.showPrevNext)}
45
45
>
46
-
<div className="font-bold">Show Prev/Next Buttons on Post</div>
46
+
<div className="font-bold text-secondary">
47
+
Show Prev/Next Buttons on Post
48
+
</div>
47
49
</Toggle>
48
50
</DashboardContainer>
49
-
{cardBorderHidden && <hr className="border-border-light" />}
51
+
{cardBorderHidden && <hr className="border-border-light my-2" />}
50
52
<DashboardContainer>
51
53
<h3>Post Interactions</h3>
52
54
<div className="flex flex-col gap-2">
···
54
56
toggle={props.showComments}
55
57
onToggle={() => props.setShowComments(!props.showComments)}
56
58
>
57
-
<div className="font-bold">Show Comments</div>
59
+
<div className="font-bold text-secondary">Show Comments</div>
58
60
</Toggle>
59
61
60
62
<Toggle
···
62
64
onToggle={() => props.setShowMentions(!props.showMentions)}
63
65
>
64
66
<div className="flex flex-col justify-start">
65
-
<div className="font-bold">Show Mentions</div>
67
+
<div className="font-bold text-secondary">Show Mentions</div>
66
68
<div className="text-tertiary text-sm leading-tight">
67
69
Display a list of Bluesky mentions about your post
68
70
</div>
···
74
76
onToggle={() => props.setShowRecommends(!props.showRecommends)}
75
77
>
76
78
<div className="flex flex-col justify-start">
77
-
<div className="font-bold">Show Recommends</div>
79
+
<div className="font-bold text-secondary">Show Recommends</div>
78
80
<div className="text-tertiary text-sm leading-tight">
79
81
Allow readers to recommend/like your post
80
82
</div>
+13
-5
app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
+13
-5
app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
···
17
17
import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
18
18
import { ManageProSubscription } from "./ManageProSubscription";
19
19
import { useIsPro, useCanSeePro } from "src/hooks/useEntitlement";
20
-
import { InlineUpgrade } from "../../UpgradeModal";
20
+
import { InlineUpgradeToPro, UpgradeToProButton } from "../../UpgradeModal";
21
21
22
22
type SettingsView = "all" | "theme";
23
23
···
114
114
setIconFile={setIconFile}
115
115
/>
116
116
117
-
{cardBorderHidden && <hr className="border-border-light" />}
117
+
{cardBorderHidden && <hr className="border-border-light my-2" />}
118
118
119
119
{/* ── Post Settings ── */}
120
120
<PostSettings
···
130
130
setShowInDiscover={setShowInDiscover}
131
131
/>
132
132
133
-
{cardBorderHidden && <hr className="border-border-light" />}
133
+
{cardBorderHidden && <hr className="border-border-light my-2" />}
134
134
135
135
<DashboardContainer>
136
136
<ThemeSettings />
137
137
</DashboardContainer>
138
138
139
-
{cardBorderHidden && <hr className="border-border-light" />}
139
+
{cardBorderHidden && <hr className="border-border-light my-2" />}
140
140
141
141
<DashboardContainer>
142
142
<PubDomainSettings />
143
143
</DashboardContainer>
144
+
{cardBorderHidden && <hr className="border-border-light my-2" />}
145
+
144
146
<DashboardContainer className="bg-[rgb(var(--accent-light))]">
145
-
{canSeePro && !isPro ? <InlineUpgrade /> : <ManageProSubscription />}
147
+
<h3>Leaflet Pro</h3>
148
+
{canSeePro && !isPro ? (
149
+
<UpgradeToProButton />
150
+
) : (
151
+
<ManageProSubscription compact />
152
+
)}
146
153
</DashboardContainer>
154
+
{cardBorderHidden && <div className="spacer h-4" />}
147
155
148
156
<SettingsFooter loading={loading} />
149
157
</div>
+2
-2
components/ActionBar/ProfileButton.tsx
+2
-2
components/ActionBar/ProfileButton.tsx
···
9
9
import { SpeedyLink } from "components/SpeedyLink";
10
10
import { Popover } from "components/Popover";
11
11
import { Modal } from "components/Modal";
12
-
import { InlineUpgrade } from "app/lish/[did]/[publication]/UpgradeModal";
12
+
import { InlineUpgradeToPro } from "app/lish/[did]/[publication]/UpgradeModal";
13
13
import { ManageProSubscription } from "app/lish/[did]/[publication]/dashboard/settings/ManageProSubscription";
14
14
import { ManageDomains } from "components/Domains/ManageDomains";
15
15
import { WebSmall } from "components/Icons/WebSmall";
···
99
99
<hr className="border-border-light border-dashed" />
100
100
<div className="py-2">
101
101
<div className="p-2 accent-container">
102
-
<InlineUpgrade compact />
102
+
<InlineUpgradeToPro compact />
103
103
</div>
104
104
</div>
105
105
</>