|
167 | 167 |
|
168 | 168 | <Drawer.Root bind:open={editDrawer} {onOpenChange} direction="right"> |
169 | 169 | <Drawer.Content> |
170 | | - <div class="mx-auto w-full"> |
171 | | - <Drawer.Header> |
| 170 | + <div class="mx-auto w-full max-h-[100vh] flex flex-col"> |
| 171 | + <Drawer.Header class="shrink-0"> |
172 | 172 | <Drawer.Description>Edit shares for</Drawer.Description> |
173 | 173 | <Drawer.Title class="flex items-center gap-2 mt-1"> |
174 | 174 | <Avatar.Root class="size-10"> |
|
180 | 180 | <b>{$userShare.name}</b></Drawer.Title |
181 | 181 | > |
182 | 182 | </Drawer.Header> |
183 | | - <div class="p-4 pb-0 mb-5"> |
| 183 | + <div class="p-4 pb-0 mb-5 min-h-0"> |
184 | 184 | <Tabs.Root |
185 | 185 | value={isUniformRestrictions ? 'uniform' : 'individual'} |
186 | 186 | onValueChange={onTabChanged} |
| 187 | + class="flex flex-col h-full" |
187 | 188 | > |
188 | | - <div class="flex items-center justify-between"> |
189 | | - <p class="text-lg font-bold grow self-end border-b border-b-neutral-800 mr-[-15px]"> |
190 | | - Limits and Permissions |
191 | | - </p> |
192 | | - |
193 | | - <Tabs.List> |
194 | | - <Tabs.Trigger value="uniform">User</Tabs.Trigger> |
195 | | - <Tabs.Trigger value="individual">Shockers</Tabs.Trigger> |
196 | | - </Tabs.List> |
197 | | - </div> |
198 | | - |
199 | | - <Tabs.Content value="uniform"> |
200 | | - <p class="mb-6 text-neutral-400 text-[10pt] mt-[-10px] text-right"> |
201 | | - Apply same restrictions to all shockers |
202 | | - </p> |
203 | | - <!-- Intensity Slider --> |
204 | | - <div class="flex flex-col gap-2 border-1 border-neutral-800 p-4 rounded-md h-75"> |
205 | | - <span class="flex"> |
206 | | - <span class="ml-auto"> |
207 | | - <MultiPauseToggle |
208 | | - shockers={shares.map((share) => ({ |
209 | | - shockerId: share.id, |
210 | | - paused: share.paused, |
211 | | - userShareUserId: $userShare.id, |
212 | | - }))} |
213 | | - onPausedChange={(paused) => { |
214 | | - shares.forEach((share) => (share.paused = paused)); // Update the local copy of the shares |
215 | | - |
216 | | - // Update the actual store shares |
217 | | - UserShares.update((current) => { |
218 | | - current.outgoing[storeIndex].shares.forEach((share) => (share.paused = paused)); |
219 | | - return current; |
220 | | - }); |
221 | | - }} |
222 | | - /> |
223 | | - </span> |
224 | | - </span> |
| 189 | + <div> |
| 190 | + <div class="flex items-center justify-between shrink-0"> |
| 191 | + <p class="text-lg font-bold grow self-end border-b border-b-neutral-800 mr-[-15px]"> |
| 192 | + Limits and Permissions |
| 193 | + </p> |
225 | 194 |
|
226 | | - <RestrictionsSelector |
227 | | - bind:permissions={uniformPermissions} |
228 | | - bind:limits={uniformLimits} |
229 | | - /> |
| 195 | + <Tabs.List> |
| 196 | + <Tabs.Trigger value="uniform">User</Tabs.Trigger> |
| 197 | + <Tabs.Trigger value="individual">Shockers</Tabs.Trigger> |
| 198 | + </Tabs.List> |
230 | 199 | </div> |
231 | | - </Tabs.Content> |
232 | | - <Tabs.Content value="individual"> |
233 | | - <p class="mb-6 text-neutral-400 text-[10pt] mt-[-10px] text-right"> |
234 | | - Change restrictions for individual shockers |
| 200 | + <p class="mb-6 text-neutral-400 text-[10pt] text-right"> |
| 201 | + {isUniformRestrictions |
| 202 | + ? 'Apply same restrictions to all shockers' |
| 203 | + : 'Change restrictions for individual shockers'} |
235 | 204 | </p> |
236 | | - <div class="flex flex-col gap-8 overflow-x-auto max-h-[30rem]"> |
237 | | - {#each shares as share, i (share.id)} |
238 | | - <div class="flex flex-col gap-2 border-1 border-neutral-800 p-4 rounded-md"> |
239 | | - <div class="flex justify-between"> |
240 | | - <span> |
241 | | - <Badge>{shares[i].name}</Badge> |
242 | | - </span> |
243 | | - <PauseToggle |
244 | | - shockerId={shares[i].id} |
245 | | - bind:paused={shares[i].paused} |
246 | | - userShareUserId={$userShare.id} |
| 205 | + </div> |
| 206 | + |
| 207 | + <div class="overflow-y-auto"> |
| 208 | + <Tabs.Content value="uniform"> |
| 209 | + <div class="flex flex-col gap-2 border-1 border-neutral-800 p-4 rounded-md h-75"> |
| 210 | + <span class="flex"> |
| 211 | + <span class="ml-auto"> |
| 212 | + <MultiPauseToggle |
| 213 | + shockers={shares.map((share) => ({ |
| 214 | + shockerId: share.id, |
| 215 | + paused: share.paused, |
| 216 | + userShareUserId: $userShare.id, |
| 217 | + }))} |
247 | 218 | onPausedChange={(paused) => { |
| 219 | + shares.forEach((share) => (share.paused = paused)); // Update the local copy of the shares |
| 220 | + |
| 221 | + // Update the actual store shares |
248 | 222 | UserShares.update((current) => { |
249 | | - current.outgoing[storeIndex].shares.forEach((s) => { |
250 | | - if (s.id === share.id) { |
251 | | - s.paused = paused; // Update the store shares list |
252 | | - } |
253 | | - }); |
| 223 | + current.outgoing[storeIndex].shares.forEach( |
| 224 | + (share) => (share.paused = paused) |
| 225 | + ); |
254 | 226 | return current; |
255 | 227 | }); |
256 | 228 | }} |
257 | 229 | /> |
| 230 | + </span> |
| 231 | + </span> |
| 232 | + |
| 233 | + <RestrictionsSelector |
| 234 | + bind:permissions={uniformPermissions} |
| 235 | + bind:limits={uniformLimits} |
| 236 | + /> |
| 237 | + </div> |
| 238 | + </Tabs.Content> |
| 239 | + <Tabs.Content value="individual"> |
| 240 | + <div class="flex flex-col gap-8"> |
| 241 | + {#each shares as share, i (share.id)} |
| 242 | + <div class="flex flex-col gap-2 border-1 border-neutral-800 p-4 rounded-md"> |
| 243 | + <div class="flex justify-between"> |
| 244 | + <span> |
| 245 | + <Badge>{shares[i].name}</Badge> |
| 246 | + </span> |
| 247 | + <PauseToggle |
| 248 | + shockerId={shares[i].id} |
| 249 | + bind:paused={shares[i].paused} |
| 250 | + userShareUserId={$userShare.id} |
| 251 | + onPausedChange={(paused) => { |
| 252 | + UserShares.update((current) => { |
| 253 | + current.outgoing[storeIndex].shares.forEach((s) => { |
| 254 | + if (s.id === share.id) { |
| 255 | + s.paused = paused; // Update the store shares list |
| 256 | + } |
| 257 | + }); |
| 258 | + return current; |
| 259 | + }); |
| 260 | + }} |
| 261 | + /> |
| 262 | + </div> |
| 263 | + <RestrictionsSelector |
| 264 | + bind:permissions={shares[i].permissions} |
| 265 | + bind:limits={shares[i].limits} |
| 266 | + /> |
258 | 267 | </div> |
259 | | - <RestrictionsSelector |
260 | | - bind:permissions={shares[i].permissions} |
261 | | - bind:limits={shares[i].limits} |
262 | | - /> |
263 | | - </div> |
264 | | - {/each} |
265 | | - </div> |
266 | | - </Tabs.Content> |
| 268 | + {/each} |
| 269 | + </div> |
| 270 | + </Tabs.Content> |
| 271 | + </div> |
267 | 272 | </Tabs.Root> |
268 | 273 | </div> |
269 | 274 |
|
270 | | - <Drawer.Footer class="flex flex-row justify-between mx-20"> |
| 275 | + <Drawer.Footer class="flex flex-row justify-between mx-20 shrink-0"> |
271 | 276 | <Drawer.Close>Cancel</Drawer.Close> |
272 | 277 | <Button onclick={handleSave} |
273 | 278 | >Save {#if saving}<LoadingCircle />{/if}</Button |
|
0 commit comments