pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
update dropdown styles
+29
-9
+2
src/components/Icon.tsx
+2
src/components/Icon.tsx
···
82
82
BELL = "bell",
83
83
RELOAD = "reload",
84
84
REPEAT = "repeat",
85
+
PLUS = "plus",
85
86
}
86
87
87
88
export interface IconProps {
···
181
182
bell: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640" fill="currentColor"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 64C302.3 64 288 78.3 288 96L288 99.2C215 114 160 178.6 160 256L160 277.7C160 325.8 143.6 372.5 113.6 410.1L103.8 422.3C98.7 428.6 96 436.4 96 444.5C96 464.1 111.9 480 131.5 480L508.4 480C528 480 543.9 464.1 543.9 444.5C543.9 436.4 541.2 428.6 536.1 422.3L526.3 410.1C496.4 372.5 480 325.8 480 277.7L480 256C480 178.6 425 114 352 99.2L352 96C352 78.3 337.7 64 320 64zM258 528C265.1 555.6 290.2 576 320 576C349.8 576 374.9 555.6 382 528L258 528z"/></svg>`,
182
183
reload: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640" fill="currentColor"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M544.1 256L552 256C565.3 256 576 245.3 576 232L576 88C576 78.3 570.2 69.5 561.2 65.8C552.2 62.1 541.9 64.2 535 71L483.3 122.8C439 86.1 382 64 320 64C191 64 84.3 159.4 66.6 283.5C64.1 301 76.2 317.2 93.7 319.7C111.2 322.2 127.4 310 129.9 292.6C143.2 199.5 223.3 128 320 128C364.4 128 405.2 143 437.7 168.3L391 215C384.1 221.9 382.1 232.2 385.8 241.2C389.5 250.2 398.3 256 408 256L544.1 256zM573.5 356.5C576 339 563.8 322.8 546.4 320.3C529 317.8 512.7 330 510.2 347.4C496.9 440.4 416.8 511.9 320.1 511.9C275.7 511.9 234.9 496.9 202.4 471.6L249 425C255.9 418.1 257.9 407.8 254.2 398.8C250.5 389.8 241.7 384 232 384L88 384C74.7 384 64 394.7 64 408L64 552C64 561.7 69.8 570.5 78.8 574.2C87.8 577.9 98.1 575.8 105 569L156.8 517.2C201 553.9 258 576 320 576C449 576 555.7 480.6 573.4 356.5z"/></svg>`,
183
184
repeat: `<svg viewBox="0 0 24 24" width="1em" height="1em" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg>`,
185
+
plus: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="1em" height="1em" fill="currentColor"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M352 128C352 110.3 337.7 96 320 96C302.3 96 288 110.3 288 128L288 288L128 288C110.3 288 96 302.3 96 320C96 337.7 110.3 352 128 352L288 352L288 512C288 529.7 302.3 544 320 544C337.7 544 352 529.7 352 512L352 352L512 352C529.7 352 544 337.7 544 320C544 302.3 529.7 288 512 288L352 288L352 128z"/></svg>`,
184
186
};
185
187
186
188
export const Icon = memo((props: IconProps) => {
+27
-9
src/components/form/GroupDropdown.tsx
+27
-9
src/components/form/GroupDropdown.tsx
···
4
4
import { Icon, Icons } from "@/components/Icon";
5
5
import { UserIcon, UserIcons } from "@/components/UserIcon";
6
6
7
+
import { Button } from "../buttons/Button";
8
+
7
9
interface GroupDropdownProps {
8
10
groups: string[];
9
11
currentGroups: string[];
···
122
124
)}
123
125
{groups.map((group) => {
124
126
const { icon, name } = parseGroupString(group);
127
+
const isChecked = currentGroups.includes(group);
125
128
return (
126
129
<label
127
130
key={group}
···
129
132
>
130
133
<input
131
134
type="checkbox"
132
-
checked={currentGroups.includes(group)}
135
+
checked={isChecked}
133
136
onChange={() => handleToggleGroup(group)}
134
-
className="accent-type-link"
137
+
className="sr-only"
135
138
/>
136
-
<span className="w-5 h-5 flex items-center justify-center ml-1">
139
+
<div
140
+
className={`relative w-4 h-4 rounded border-2 transition-all duration-200 flex items-center justify-center ${
141
+
isChecked
142
+
? "bg-buttons-purple border-buttons-purple"
143
+
: "border-background-secondary hover:border-buttons-purple/50"
144
+
}`}
145
+
>
146
+
<Icon
147
+
icon={Icons.CHECKMARK}
148
+
className={`w-4 h-4 transition-all duration-200 ${
149
+
isChecked
150
+
? "text-white opacity-100 scale-75"
151
+
: "opacity-0"
152
+
}`}
153
+
/>
154
+
</div>
155
+
<span className="w-4 h-4 flex items-center justify-center ml-1">
137
156
<UserIcon
138
157
icon={icon}
139
158
className="inline-block w-full h-full"
···
158
177
}}
159
178
style={{ minWidth: 0 }}
160
179
/>
161
-
<button
162
-
type="button"
163
-
className="text-type-link font-bold px-2 py-1 min-w-[2.5rem]"
180
+
<Button
181
+
theme="purple"
164
182
onClick={() => handleCreate(newGroup, selectedIcon)}
165
183
disabled={!newGroup.trim()}
166
-
style={{ flexShrink: 0 }}
184
+
className="h-6 w-6 min-w-12 md:min-w-6 justify-center items-center"
167
185
>
168
-
{t("home.bookmarks.groups.dropdown.addButton")}
169
-
</button>
186
+
<Icon icon={Icons.PLUS} className="text-white w-4 h-4" />
187
+
</Button>
170
188
</div>
171
189
{newGroup.trim().length > 0 && (
172
190
<div className="flex items-center gap-2 flex-wrap pt-2 w-full justify-center">