xan.lol
forked from
atpota.to/flushes.app
The 1st decentralized social network for sharing when you're on the toilet. Post a "flush" today! Powered by the AT Protocol.
fix
+67
-17
+40
src/components/EditFlushModal.module.css
+40
src/components/EditFlushModal.module.css
···
99
99
border-color: var(--primary-color);
100
100
}
101
101
102
+
.inputWrapper {
103
+
display: flex;
104
+
align-items: center;
105
+
width: 100%;
106
+
position: relative;
107
+
border: 1px solid var(--input-border);
108
+
border-radius: 4px;
109
+
background-color: var(--input-background);
110
+
}
111
+
112
+
.inputWrapper:focus-within {
113
+
border-color: var(--primary-color);
114
+
}
115
+
116
+
.inputPrefix {
117
+
padding: 0.8rem 0.8rem 0.8rem 0.8rem;
118
+
font-size: 1rem;
119
+
color: var(--text-color);
120
+
font-weight: 500;
121
+
background-color: var(--input-prefix-background);
122
+
border-right: 1px solid var(--input-border);
123
+
border-radius: 4px 0 0 4px;
124
+
}
125
+
126
+
.inputWithPrefix {
127
+
flex: 1;
128
+
border: none;
129
+
padding: 0.8rem;
130
+
font-size: 1rem;
131
+
background: transparent;
132
+
border-radius: 0 4px 4px 0;
133
+
color: var(--text-color);
134
+
font-family: inherit;
135
+
}
136
+
137
+
.inputWithPrefix:focus {
138
+
outline: none;
139
+
box-shadow: none;
140
+
}
141
+
102
142
.textInput:focus {
103
143
outline: none;
104
144
border-color: var(--primary);
+27
-17
src/components/EditFlushModal.tsx
+27
-17
src/components/EditFlushModal.tsx
···
34
34
// Update form when flushData changes
35
35
useEffect(() => {
36
36
if (flushData) {
37
-
setText(flushData.text || '');
37
+
// Remove "is " prefix if it exists in the stored text
38
+
let displayText = flushData.text || '';
39
+
if (displayText.toLowerCase().startsWith('is ')) {
40
+
displayText = displayText.substring(3);
41
+
}
42
+
setText(displayText);
38
43
setSelectedEmoji(flushData.emoji || '🚽');
39
44
setError(null);
40
45
setShowDeleteConfirm(false);
···
52
57
return;
53
58
}
54
59
55
-
// Check character limit
56
-
if (text.length > 59) {
57
-
setError('Your flush status is too long! Please keep it under 59 characters.');
60
+
// Check character limit (text + "is " = 56 + 3 = 59)
61
+
if (text.length > 56) {
62
+
setError('Your flush status is too long! Please keep it under 56 characters (59 total with "is").');
58
63
return;
59
64
}
60
65
···
66
71
67
72
setIsSubmitting(true);
68
73
try {
69
-
await onSave(sanitizeText(text), selectedEmoji);
74
+
// Add "is " prefix when saving
75
+
const fullText = text.trim() ? `is ${text.trim()}` : 'is flushing';
76
+
await onSave(sanitizeText(fullText), selectedEmoji);
70
77
onClose();
71
78
} catch (err: any) {
72
79
console.error('Error updating flush:', err);
···
119
126
)}
120
127
121
128
<div className={styles.formGroup}>
122
-
<label htmlFor="flush-text">Status Text</label>
123
-
<input
124
-
id="flush-text"
125
-
type="text"
126
-
value={text}
127
-
onChange={(e) => setText(e.target.value)}
128
-
placeholder="is flushing"
129
-
maxLength={59}
130
-
disabled={isSubmitting}
131
-
className={styles.textInput}
132
-
/>
129
+
<label htmlFor="flush-text">What's your status? (optional)</label>
130
+
<div className={styles.inputWrapper}>
131
+
<span className={styles.inputPrefix}>is </span>
132
+
<input
133
+
id="flush-text"
134
+
type="text"
135
+
value={text}
136
+
onChange={(e) => setText(e.target.value)}
137
+
placeholder="flushing"
138
+
maxLength={56}
139
+
disabled={isSubmitting}
140
+
className={styles.inputWithPrefix}
141
+
/>
142
+
</div>
133
143
<div className={styles.charCount}>
134
-
{text.length}/59
144
+
{text.length + 3}/59
135
145
</div>
136
146
</div>
137
147