External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

style(topbar-edit-modal): match 4chan modal design and simplify subscription toggle

Browse Source
This commit is contained in:
plebeius
2025-11-07 22:10:06 +01:00
parent b886cbdf3b
commit d565d2ec87
2 changed files with 72 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/topbar-edit-modal/topbar-edit-modal.module.css
+47 -28
View File
@@ -10,19 +10,21 @@
.topbarEditDialog {
position: absolute;
width: 600px;
width: 400px;
max-height: 80vh;
top: 50px;
top: 50%;
left: 50%;
margin-left: -300px;
margin-left: -200px;
transform: translateY(-50%);
padding: 2px;
background-color: var(--settings-modal-background-color);
border-top: var(--settings-modal-border-top);
border-right: var(--settings-modal-border-right);
border-bottom: var(--settings-modal-border-bottom);
border-left: var(--settings-modal-border-left);
box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 0px 1px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 5px 0px;
font-size: var(--body-font-size);
line-height: 16.003px;
line-height: normal;
z-index: 1000;
display: flex;
flex-direction: column;
@@ -39,28 +41,29 @@
.hd {
position: relative;
padding: 4px 6px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 0px 5px;
margin: 5px 0px;
text-align: center;
border-bottom: var(--settings-modal-header-border-bottom);
}
.hd h2 {
margin: 0;
padding: 0;
font-size: 131%;
font-weight: bold;
font-size: 16px;
font-weight: 700;
line-height: 14px;
height: 14px;
}
.closeButton {
all: unset;
cursor: pointer;
width: 16px;
height: 16px;
width: 18px;
height: 18px;
position: absolute;
top: 4px;
right: 4px;
top: -2px;
right: 3px;
background-image: var(--settings-modal-close-button-background-image);
background-size: 100%;
background-position: center;
@@ -69,13 +72,14 @@
}
.bd {
padding: 10px;
overflow-y: auto;
flex: 1;
padding: 0;
margin: 0;
}
.section {
margin-bottom: 20px;
margin-bottom: 0;
}
.section:last-child {
@@ -92,15 +96,20 @@
.directoryInput {
width: 100%;
padding: 4px;
font-size: var(--body-font-size);
border: var(--reply-modal-field-input-border, 1px solid #aaa);
padding: 2px 4px 3px;
font-size: 13.3333px;
margin: 0 0 5px;
box-sizing: border-box;
outline: none;
font-family: var(--body-font-family, arial, helvetica, sans-serif);
font-family: Arial, sans-serif;
border: var(--post-form-field-input-border, revert);
background-color: var(--post-form-field-input-background-color, revert);
color: var(--post-form-field-input-color);
}
.directoryInput:focus {
border: var(--reply-modal-field-input-border-focus, 1px solid #ea8);
outline: none;
border: var(--post-form-field-input-focus-border, revert);
}
.checkboxGroup {
@@ -114,6 +123,7 @@
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 5px;
}
.checkboxItem input[type='checkbox'] {
@@ -126,11 +136,20 @@
user-select: none;
}
.topbarEditFooter {
padding: 10px;
display: flex;
justify-content: center;
gap: 10px;
border-top: var(--settings-modal-header-border-bottom);
.editSubscriptionsLink {
font-size: var(--body-font-size);
color: var(--link-color, #0000ee);
text-decoration: underline;
cursor: pointer;
}
.editSubscriptionsLink:hover {
color: var(--link-hover-color, #551a8b);
}
.topbarEditFooter {
padding: 0;
margin: 0;
text-align: center;
padding-bottom: 5px;
}
src/components/topbar-edit-modal/topbar-edit-modal.tsx
+25 -30
View File
@@ -1,6 +1,6 @@
import { useEffect, useState, useMemo } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { useAccount } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js';
import useTopbarEditModalStore from '../../stores/use-topbar-edit-modal-store';
import useTopbarVisibilityStore from '../../stores/use-topbar-visibility-store';
import { getAllBoardCodes } from '../../constants/board-codes';
@@ -11,6 +11,7 @@ const TopbarEditModal = () => {
const { visibleDirectories, visibleSubscriptions, setDirectoryVisibility, setSubscriptionVisibility } = useTopbarVisibilityStore();
const account = useAccount();
const subscriptions = account?.subscriptions || [];
const location = useLocation();
// Convert visible directories set to space-separated string for input
const directoriesToString = (dirs: Set<string>): string => {
@@ -36,16 +37,17 @@ const TopbarEditModal = () => {
// Local state for text input (will be saved on Save click)
// Empty string means all directories visible (default), otherwise show only the specified codes
const [localDirectoryInput, setLocalDirectoryInput] = useState<string>(allDirectoriesVisible ? '' : directoriesToString(visibleDirectories));
const [localSubscriptionVisibility, setLocalSubscriptionVisibility] = useState<Set<string>>(visibleSubscriptions);
// Check if all subscriptions are visible (if any subscription is visible, show subscriptions is checked)
const [showSubscriptions, setShowSubscriptions] = useState<boolean>(subscriptions.length > 0 && subscriptions.some((addr: string) => visibleSubscriptions.has(addr)));
// Update local state when modal opens or store changes
useEffect(() => {
if (showModal) {
const allVisible = allBoardCodes.every((code) => visibleDirectories.has(code));
setLocalDirectoryInput(allVisible ? '' : directoriesToString(visibleDirectories));
setLocalSubscriptionVisibility(new Set(visibleSubscriptions));
setShowSubscriptions(subscriptions.length > 0 && subscriptions.some((addr: string) => visibleSubscriptions.has(addr)));
}
}, [showModal, visibleDirectories, visibleSubscriptions, allBoardCodes]);
}, [showModal, visibleDirectories, visibleSubscriptions, allBoardCodes, subscriptions]);
if (!showModal) {
return null;
@@ -57,16 +59,6 @@ const TopbarEditModal = () => {
}
};
const handleSubscriptionToggle = (address: string) => {
const newSet = new Set(localSubscriptionVisibility);
if (newSet.has(address)) {
newSet.delete(address);
} else {
newSet.add(address);
}
setLocalSubscriptionVisibility(newSet);
};
const handleSave = () => {
// If input is empty, show all directories (default behavior)
// Otherwise, show only the directories specified in the input
@@ -84,8 +76,10 @@ const TopbarEditModal = () => {
}
// Apply subscription visibility changes
// If showSubscriptions is checked, make all subscriptions visible
// Otherwise, hide all subscriptions
subscriptions.forEach((address: string) => {
setSubscriptionVisibility(address, localSubscriptionVisibility.has(address));
setSubscriptionVisibility(address, showSubscriptions);
});
closeTopbarEditModal();
@@ -100,8 +94,6 @@ const TopbarEditModal = () => {
</div>
<div className={styles.bd}>
<div className={styles.section}>
<h3>Directory Boards</h3>
<p>Enter directory codes separated by spaces (e.g., "jp tg mu"):</p>
<input
type='text'
className={styles.directoryInput}
@@ -113,19 +105,22 @@ const TopbarEditModal = () => {
{subscriptions.length > 0 && (
<div className={styles.section}>
<h3>Subscriptions</h3>
<p>Select which subscriptions to show in the topbar:</p>
<div className={styles.checkboxGroup}>
{subscriptions.map((address: string) => {
const displayText = address.endsWith('.eth') || address.endsWith('.sol') ? address : Plebbit.getShortAddress(address);
const isChecked = localSubscriptionVisibility.has(address);
return (
<div key={address} className={styles.checkboxItem}>
<input type='checkbox' id={`subscription-${address}`} checked={isChecked} onChange={() => handleSubscriptionToggle(address)} />
<label htmlFor={`subscription-${address}`}>{displayText}</label>
</div>
);
})}
<div className={styles.checkboxItem}>
<input type='checkbox' id='show-subscriptions' checked={showSubscriptions} onChange={(e) => setShowSubscriptions(e.target.checked)} />
<label htmlFor='show-subscriptions'>
show subscriptions (
<Link
to={location.pathname.replace(/\/$/, '') + '/settings#subscriptions-settings'}
className={styles.editSubscriptionsLink}
onClick={(e) => {
e.stopPropagation();
closeTopbarEditModal();
}}
>
edit subscriptions
</Link>
)
</label>
</div>
</div>
)}