a tool for shared writing and social publishing
scrolling save button on settings
+46
-6
+46
-6
app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
+46
-6
app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
···
164
164
<DashboardContainer className="bg-[rgb(var(--accent-light))]">
165
165
{canSeePro && !isPro ? <InlineUpgrade /> : <ManageProSubscription />}
166
166
</DashboardContainer>
167
-
<div className="bg-[rgb(var(--accent-1))] text-accent-2 text-sm rounded-md sticky bottom-2 mx-2 border-border-light pr-1 pl-2 flex justify-between items-center py-1 ">
168
-
You have unsaved updates!
169
-
<ButtonSecondary type="submit" disabled={loading}>
170
-
{loading ? <DotLoader /> : "Update Pub"}
171
-
</ButtonSecondary>
172
-
</div>
167
+
168
+
<SettingsFooter loading={loading} />
173
169
</div>
174
170
</form>
171
+
);
172
+
}
173
+
174
+
function SettingsFooter(props: { loading: boolean }) {
175
+
let [distanceFromBottom, setDistanceFromBottom] = useState<number>(Infinity);
176
+
177
+
useEffect(() => {
178
+
const scrollContainer = document.getElementById("home-content");
179
+
if (!scrollContainer) return;
180
+
181
+
const handleScroll = () => {
182
+
const dist =
183
+
scrollContainer.scrollHeight -
184
+
scrollContainer.scrollTop -
185
+
scrollContainer.clientHeight;
186
+
setDistanceFromBottom(dist);
187
+
};
188
+
189
+
handleScroll();
190
+
scrollContainer.addEventListener("scroll", handleScroll);
191
+
return () => scrollContainer.removeEventListener("scroll", handleScroll);
192
+
}, []);
193
+
194
+
const threshold = 100;
195
+
// ratio: 1 = far from bottom (full margin), 0 = at bottom (no margin)
196
+
const ratio = Math.min(distanceFromBottom / threshold, 1);
197
+
const mx = ratio * 8; // 8px = mx-2
198
+
199
+
return (
200
+
<div
201
+
className="settingsFooter sticky bottom-0 z-10"
202
+
style={{
203
+
paddingLeft: `${mx}px`,
204
+
paddingRight: `${mx}px`,
205
+
paddingBottom: `${mx}px`,
206
+
}}
207
+
>
208
+
<div className="bg-[rgb(var(--accent-1))] text-accent-2 text-sm rounded-md border-border-light pr-1 pl-2 flex justify-between items-center py-1">
209
+
You have unsaved updates!
210
+
<ButtonSecondary type="submit" disabled={props.loading}>
211
+
{props.loading ? <DotLoader /> : "Update Pub"}
212
+
</ButtonSecondary>
213
+
</div>
214
+
</div>
175
215
);
176
216
}
177
217