Mirror of
fix project edit margins
deploy
+213
-223
+213
-223
src/pages/projects/[id]/edit.tsx
+213
-223
src/pages/projects/[id]/edit.tsx
···
198
198
return (
199
199
<div className="flex w-full flex-col">
200
200
<main className="flex min-h-[calc(100vh-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10">
201
-
<div className="grid flex-1 auto-rows-max gap-4">
202
-
<div className="flex items-center gap-4 overflow-hidden min-h-9">
203
-
<Link href={`/projects/${project.id}`} className="text-muted-foreground">
204
-
<Button variant="outline" size="icon" className="h-7 w-7">
205
-
<ChevronLeft className="h-4 w-4" />
206
-
<span className="sr-only">Back</span>
207
-
</Button>
208
-
</Link>
209
-
<h1 className="text-xl font-semibold tracking-tight truncate">{project.name}</h1>
210
-
<Badge variant="outline" className="ml-auto sm:ml-0 py-2 bg-background max-xs:hidden">
211
-
<PriorityIconLabel priorityValue={project.priority} className="text-muted-foreground" />
212
-
</Badge>
213
-
<Badge variant="outline" className="ml-auto sm:ml-0 py-2 bg-background max-sm:hidden">
214
-
<StatusIconLabel statusValue={project.status} className="text-muted-foreground" />
215
-
</Badge>
216
-
<div className="flex max-md:hidden items-center gap-2 md:ml-auto">
217
-
<DropdownMenu
218
-
open={otherActionsDropdownIsOpen || archiveDialogIsOpen || deleteDialogIsOpen}
219
-
onOpenChange={setOtherActionsDropdownIsOpen}
220
-
>
221
-
<DropdownMenuTrigger asChild>
222
-
<Button variant="outline" size={"sm"}>
223
-
Other Actions
224
-
</Button>
225
-
</DropdownMenuTrigger>
226
-
<DropdownMenuContent className="w-56">
227
-
<DropdownMenuItem>
228
-
<Dialog open={archiveDialogIsOpen} onOpenChange={setArchiveDialogIsOpen}>
229
-
<DialogTrigger className="w-full text-left">Archive Project</DialogTrigger>
230
-
<DialogContent>
231
-
<DialogHeader>
232
-
<DialogTitle>Are you absolutely sure?</DialogTitle>
233
-
<DialogDescription>
234
-
This action cannot be undone. This will permanently delete all
235
-
your projects and remove this data from your local storage.
236
-
</DialogDescription>
237
-
</DialogHeader>
238
-
<DialogFooter>
239
-
<DialogClose>
240
-
<Button variant={"outline"}>Cancel</Button>
241
-
</DialogClose>
242
-
<Button onClick={handleArchiveProject}>Continue</Button>
243
-
</DialogFooter>
244
-
</DialogContent>
245
-
</Dialog>
246
-
</DropdownMenuItem>
247
-
<DropdownMenuItem>
248
-
<Dialog open={deleteDialogIsOpen} onOpenChange={setDeleteDialogIsOpen}>
249
-
<DialogTrigger className="w-full text-left">Delete Project</DialogTrigger>
250
-
<DialogContent>
251
-
<DialogHeader>
252
-
<DialogTitle>Are you absolutely sure?</DialogTitle>
253
-
<DialogDescription>
254
-
This action cannot be undone. This will permanently delete your
255
-
project {project.name} and remove this data from your local
256
-
storage.
257
-
</DialogDescription>
258
-
</DialogHeader>
259
-
<DialogFooter>
260
-
<DialogClose>
261
-
<Button variant={"outline"}>Cancel</Button>
262
-
</DialogClose>
263
-
<Button onClick={handleDeleteProject}>Continue</Button>
264
-
</DialogFooter>
265
-
</DialogContent>
266
-
</Dialog>
267
-
</DropdownMenuItem>
268
-
</DropdownMenuContent>
269
-
</DropdownMenu>
270
-
<Link href={`/projects/${project.id}`} className="text-muted-foreground">
271
-
<Button variant="outline" size="sm">
272
-
Discard
273
-
</Button>
274
-
</Link>
275
-
<Button size="sm" onClick={handleSaveProject}>
276
-
Save Project
277
-
</Button>
278
-
</div>
279
-
</div>
280
-
<div className="grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8">
281
-
<div className="grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8">
282
-
<Card x-chunk="dashboard-07-chunk-0">
283
-
<CardHeader>
284
-
<CardTitle>Project Details</CardTitle>
285
-
<CardDescription>Edit the name and description of the project.</CardDescription>
286
-
</CardHeader>
287
-
<CardContent>
288
-
<div className="grid gap-6">
289
-
<div className="grid gap-3">
290
-
<Label htmlFor="name">Identifier</Label>
291
-
<Input id="id" type="text" className="w-full" value={project.id} disabled />
292
-
</div>
293
-
<div className="grid gap-3">
294
-
<Label htmlFor="name">Name</Label>
295
-
<Input
296
-
id="name"
297
-
type="text"
298
-
className="w-full"
299
-
value={project.name}
300
-
onChange={(e) => handleInputChange("name", e.target.value)}
301
-
/>
302
-
</div>
303
-
<div className="grid gap-3">
304
-
<Label htmlFor="description">Description</Label>
305
-
<Textarea
306
-
id="description"
307
-
value={project.description}
308
-
onChange={(e) => handleInputChange("description", e.target.value)}
309
-
className="min-h-36"
310
-
/>
311
-
</div>
312
-
</div>
313
-
</CardContent>
314
-
</Card>
315
-
</div>
316
-
<div className="grid auto-rows-max items-start gap-4 lg:gap-8">
317
-
<Card x-chunk="dashboard-07-chunk-3">
318
-
<CardHeader>
319
-
<CardTitle>
320
-
<div className="flex items-center justify-between">
321
-
<div>Task Status</div>
322
-
<HoverCard>
323
-
<HoverCardTrigger asChild>
324
-
<BadgeInfo className="h-5 w-5 text-primary" />
325
-
</HoverCardTrigger>
326
-
<HoverCardContent className="w-80" align="end">
327
-
<div className="flex justify-between space-x-4">
328
-
<Avatar>
329
-
<AvatarImage src="https://github.com/trueberryless.png" />
330
-
<AvatarFallback>T</AvatarFallback>
331
-
</Avatar>
332
-
<div className="space-y-1">
333
-
<h4 className="text-sm font-semibold">@trueberryless</h4>
334
-
<p className="text-sm">
335
-
We try to automate this status in order to help you
336
-
focus on your projects, not this app.
337
-
</p>
338
-
<div className="flex items-center pt-2">
339
-
<span className="text-xs text-muted-foreground">
340
-
For example we will automatically move this task
341
-
from “Planned” to “In Progress”, when you start
342
-
working on it - when the first session is started.
343
-
</span>
344
-
</div>
345
-
</div>
346
-
</div>
347
-
</HoverCardContent>
348
-
</HoverCard>
349
-
</div>
350
-
</CardTitle>
351
-
</CardHeader>
352
-
<CardContent>
353
-
<div className="grid gap-6">
354
-
<div className="grid gap-3">
355
-
<Label htmlFor="status">Status</Label>
356
-
<Select
357
-
value={projectStatus}
358
-
onValueChange={(value) => {
359
-
setProjectStatus(value);
360
-
handleInputChange("status", value);
361
-
}}
362
-
>
363
-
<SelectTrigger id="status" aria-label="Select status">
364
-
<SelectValue placeholder="Select status" />
365
-
</SelectTrigger>
366
-
<SelectContent>
367
-
{statuses.map((status) => (
368
-
<SelectItem key={status.value} value={status.value}>
369
-
<StatusIconLabel statusValue={status.value} />
370
-
</SelectItem>
371
-
))}
372
-
</SelectContent>
373
-
</Select>
374
-
</div>
375
-
</div>
376
-
</CardContent>
377
-
</Card>
378
-
<Card x-chunk="dashboard-07-chunk-3">
379
-
<CardHeader>
380
-
<CardTitle>Project Priority</CardTitle>
381
-
</CardHeader>
382
-
<CardContent>
383
-
<div className="grid gap-6">
384
-
<div className="grid gap-3">
385
-
<Label htmlFor="priority">Priority</Label>
386
-
<Select
387
-
value={projectPriority}
388
-
onValueChange={(value) => {
389
-
setProjectPriority(value);
390
-
handleInputChange("priority", value);
391
-
}}
392
-
>
393
-
<SelectTrigger id="priority" aria-label="Select priority">
394
-
<SelectValue placeholder="Select priority" />
395
-
</SelectTrigger>
396
-
<SelectContent>
397
-
{priorities.map((priority) => (
398
-
<SelectItem key={priority.value} value={priority.value}>
399
-
<PriorityIconLabel priorityValue={priority.value} />
400
-
</SelectItem>
401
-
))}
402
-
</SelectContent>
403
-
</Select>
404
-
</div>
405
-
</div>
406
-
</CardContent>
407
-
</Card>
408
-
</div>
409
-
</div>
410
-
<div className="flex items-center justify-end gap-2 md:hidden">
201
+
<div className="flex items-center gap-4 overflow-hidden min-h-9">
202
+
<Link href={`/projects/${project.id}`} className="text-muted-foreground">
203
+
<Button variant="outline" size="icon" className="h-7 w-7">
204
+
<ChevronLeft className="h-4 w-4" />
205
+
<span className="sr-only">Back</span>
206
+
</Button>
207
+
</Link>
208
+
<h1 className="text-xl font-semibold tracking-tight truncate">{project.name}</h1>
209
+
<Badge variant="outline" className="ml-auto sm:ml-0 py-2 bg-background max-xs:hidden">
210
+
<PriorityIconLabel priorityValue={project.priority} className="text-muted-foreground" />
211
+
</Badge>
212
+
<Badge variant="outline" className="ml-auto sm:ml-0 py-2 bg-background max-sm:hidden">
213
+
<StatusIconLabel statusValue={project.status} className="text-muted-foreground" />
214
+
</Badge>
215
+
<div className="flex max-md:hidden items-center gap-2 md:ml-auto">
411
216
<DropdownMenu
412
-
open={
413
-
otherActionsDropdownMobileIsOpen ||
414
-
archiveDialogMobileIsOpen ||
415
-
deleteDialogMobileIsOpen
416
-
}
417
-
onOpenChange={setOtherActionsDropdownMobileIsOpen}
217
+
open={otherActionsDropdownIsOpen || archiveDialogIsOpen || deleteDialogIsOpen}
218
+
onOpenChange={setOtherActionsDropdownIsOpen}
418
219
>
419
220
<DropdownMenuTrigger asChild>
420
221
<Button variant="outline" size={"sm"}>
···
423
224
</DropdownMenuTrigger>
424
225
<DropdownMenuContent className="w-56">
425
226
<DropdownMenuItem>
426
-
<Dialog
427
-
open={archiveDialogMobileIsOpen}
428
-
onOpenChange={setArchiveDialogMobileIsOpen}
429
-
>
430
-
<DialogTrigger className="w-full text-left">Archive</DialogTrigger>
227
+
<Dialog open={archiveDialogIsOpen} onOpenChange={setArchiveDialogIsOpen}>
228
+
<DialogTrigger className="w-full text-left">Archive Project</DialogTrigger>
431
229
<DialogContent>
432
230
<DialogHeader>
433
231
<DialogTitle>Are you absolutely sure?</DialogTitle>
···
446
244
</Dialog>
447
245
</DropdownMenuItem>
448
246
<DropdownMenuItem>
449
-
<Dialog open={deleteDialogMobileIsOpen} onOpenChange={setDeleteDialogMobileIsOpen}>
450
-
<DialogTrigger className="w-full text-left">Delete</DialogTrigger>
247
+
<Dialog open={deleteDialogIsOpen} onOpenChange={setDeleteDialogIsOpen}>
248
+
<DialogTrigger className="w-full text-left">Delete Project</DialogTrigger>
451
249
<DialogContent>
452
250
<DialogHeader>
453
251
<DialogTitle>Are you absolutely sure?</DialogTitle>
···
476
274
Save Project
477
275
</Button>
478
276
</div>
277
+
</div>
278
+
<div className="grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8">
279
+
<div className="grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8">
280
+
<Card x-chunk="dashboard-07-chunk-0">
281
+
<CardHeader>
282
+
<CardTitle>Project Details</CardTitle>
283
+
<CardDescription>Edit the name and description of the project.</CardDescription>
284
+
</CardHeader>
285
+
<CardContent>
286
+
<div className="grid gap-6">
287
+
<div className="grid gap-3">
288
+
<Label htmlFor="name">Identifier</Label>
289
+
<Input id="id" type="text" className="w-full" value={project.id} disabled />
290
+
</div>
291
+
<div className="grid gap-3">
292
+
<Label htmlFor="name">Name</Label>
293
+
<Input
294
+
id="name"
295
+
type="text"
296
+
className="w-full"
297
+
value={project.name}
298
+
onChange={(e) => handleInputChange("name", e.target.value)}
299
+
/>
300
+
</div>
301
+
<div className="grid gap-3">
302
+
<Label htmlFor="description">Description</Label>
303
+
<Textarea
304
+
id="description"
305
+
value={project.description}
306
+
onChange={(e) => handleInputChange("description", e.target.value)}
307
+
className="min-h-36"
308
+
/>
309
+
</div>
310
+
</div>
311
+
</CardContent>
312
+
</Card>
313
+
</div>
314
+
<div className="grid auto-rows-max items-start gap-4 lg:gap-8">
315
+
<Card x-chunk="dashboard-07-chunk-3">
316
+
<CardHeader>
317
+
<CardTitle>
318
+
<div className="flex items-center justify-between">
319
+
<div>Task Status</div>
320
+
<HoverCard>
321
+
<HoverCardTrigger asChild>
322
+
<BadgeInfo className="h-5 w-5 text-primary" />
323
+
</HoverCardTrigger>
324
+
<HoverCardContent className="w-80" align="end">
325
+
<div className="flex justify-between space-x-4">
326
+
<Avatar>
327
+
<AvatarImage src="https://github.com/trueberryless.png" />
328
+
<AvatarFallback>T</AvatarFallback>
329
+
</Avatar>
330
+
<div className="space-y-1">
331
+
<h4 className="text-sm font-semibold">@trueberryless</h4>
332
+
<p className="text-sm">
333
+
We try to automate this status in order to help you focus on
334
+
your projects, not this app.
335
+
</p>
336
+
<div className="flex items-center pt-2">
337
+
<span className="text-xs text-muted-foreground">
338
+
For example we will automatically move this task from
339
+
“Planned” to “In Progress”, when you start working on it
340
+
- when the first session is started.
341
+
</span>
342
+
</div>
343
+
</div>
344
+
</div>
345
+
</HoverCardContent>
346
+
</HoverCard>
347
+
</div>
348
+
</CardTitle>
349
+
</CardHeader>
350
+
<CardContent>
351
+
<div className="grid gap-6">
352
+
<div className="grid gap-3">
353
+
<Label htmlFor="status">Status</Label>
354
+
<Select
355
+
value={projectStatus}
356
+
onValueChange={(value) => {
357
+
setProjectStatus(value);
358
+
handleInputChange("status", value);
359
+
}}
360
+
>
361
+
<SelectTrigger id="status" aria-label="Select status">
362
+
<SelectValue placeholder="Select status" />
363
+
</SelectTrigger>
364
+
<SelectContent>
365
+
{statuses.map((status) => (
366
+
<SelectItem key={status.value} value={status.value}>
367
+
<StatusIconLabel statusValue={status.value} />
368
+
</SelectItem>
369
+
))}
370
+
</SelectContent>
371
+
</Select>
372
+
</div>
373
+
</div>
374
+
</CardContent>
375
+
</Card>
376
+
<Card x-chunk="dashboard-07-chunk-3">
377
+
<CardHeader>
378
+
<CardTitle>Project Priority</CardTitle>
379
+
</CardHeader>
380
+
<CardContent>
381
+
<div className="grid gap-6">
382
+
<div className="grid gap-3">
383
+
<Label htmlFor="priority">Priority</Label>
384
+
<Select
385
+
value={projectPriority}
386
+
onValueChange={(value) => {
387
+
setProjectPriority(value);
388
+
handleInputChange("priority", value);
389
+
}}
390
+
>
391
+
<SelectTrigger id="priority" aria-label="Select priority">
392
+
<SelectValue placeholder="Select priority" />
393
+
</SelectTrigger>
394
+
<SelectContent>
395
+
{priorities.map((priority) => (
396
+
<SelectItem key={priority.value} value={priority.value}>
397
+
<PriorityIconLabel priorityValue={priority.value} />
398
+
</SelectItem>
399
+
))}
400
+
</SelectContent>
401
+
</Select>
402
+
</div>
403
+
</div>
404
+
</CardContent>
405
+
</Card>
406
+
</div>
407
+
</div>
408
+
<div className="flex items-center justify-end gap-2 md:hidden">
409
+
<DropdownMenu
410
+
open={otherActionsDropdownMobileIsOpen || archiveDialogMobileIsOpen || deleteDialogMobileIsOpen}
411
+
onOpenChange={setOtherActionsDropdownMobileIsOpen}
412
+
>
413
+
<DropdownMenuTrigger asChild>
414
+
<Button variant="outline" size={"sm"}>
415
+
Other Actions
416
+
</Button>
417
+
</DropdownMenuTrigger>
418
+
<DropdownMenuContent className="w-56">
419
+
<DropdownMenuItem>
420
+
<Dialog open={archiveDialogMobileIsOpen} onOpenChange={setArchiveDialogMobileIsOpen}>
421
+
<DialogTrigger className="w-full text-left">Archive</DialogTrigger>
422
+
<DialogContent>
423
+
<DialogHeader>
424
+
<DialogTitle>Are you absolutely sure?</DialogTitle>
425
+
<DialogDescription>
426
+
This action cannot be undone. This will permanently delete all your
427
+
projects and remove this data from your local storage.
428
+
</DialogDescription>
429
+
</DialogHeader>
430
+
<DialogFooter>
431
+
<DialogClose>
432
+
<Button variant={"outline"}>Cancel</Button>
433
+
</DialogClose>
434
+
<Button onClick={handleArchiveProject}>Continue</Button>
435
+
</DialogFooter>
436
+
</DialogContent>
437
+
</Dialog>
438
+
</DropdownMenuItem>
439
+
<DropdownMenuItem>
440
+
<Dialog open={deleteDialogMobileIsOpen} onOpenChange={setDeleteDialogMobileIsOpen}>
441
+
<DialogTrigger className="w-full text-left">Delete</DialogTrigger>
442
+
<DialogContent>
443
+
<DialogHeader>
444
+
<DialogTitle>Are you absolutely sure?</DialogTitle>
445
+
<DialogDescription>
446
+
This action cannot be undone. This will permanently delete your project{" "}
447
+
{project.name} and remove this data from your local storage.
448
+
</DialogDescription>
449
+
</DialogHeader>
450
+
<DialogFooter>
451
+
<DialogClose>
452
+
<Button variant={"outline"}>Cancel</Button>
453
+
</DialogClose>
454
+
<Button onClick={handleDeleteProject}>Continue</Button>
455
+
</DialogFooter>
456
+
</DialogContent>
457
+
</Dialog>
458
+
</DropdownMenuItem>
459
+
</DropdownMenuContent>
460
+
</DropdownMenu>
461
+
<Link href={`/projects/${project.id}`} className="text-muted-foreground">
462
+
<Button variant="outline" size="sm">
463
+
Discard
464
+
</Button>
465
+
</Link>
466
+
<Button size="sm" onClick={handleSaveProject}>
467
+
Save Project
468
+
</Button>
479
469
</div>
480
470
</main>
481
471
</div>