nsarrazin HF staff victor HF staff commited on
Commit
c1c75fd
1 Parent(s): ed27197

Add delete confirmation to nav menu (#188)

Browse files

* Add delete confirmation to nav menu
- Refactored chat nav column item into a separate NavElement

* Fix linting?

* Update src/lib/components/NavElement.svelte

Co-authored-by: Victor Muštar <[email protected]>

* Renamed NavElement to NavConversationItem

* remove double spaces

* fixed linting

---------

Co-authored-by: Victor Muštar <[email protected]>

src/lib/components/NavConversationItem.svelte ADDED
@@ -0,0 +1,87 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script lang="ts">
2
+ import { base } from "$app/paths";
3
+ import { page } from "$app/stores";
4
+ import { createEventDispatcher } from "svelte";
5
+
6
+ import CarbonCheckmark from "~icons/carbon/checkmark";
7
+ import CarbonTrashCan from "~icons/carbon/trash-can";
8
+ import CarbonClose from "~icons/carbon/close";
9
+ import CarbonEdit from "~icons/carbon/edit";
10
+
11
+ export let conv: { id: string; title: string };
12
+
13
+ let confirmDelete = false;
14
+
15
+ const dispatch = createEventDispatcher<{
16
+ deleteConversation: string;
17
+ editConversationTitle: { id: string; title: string };
18
+ }>();
19
+ </script>
20
+
21
+ <a
22
+ data-sveltekit-noscroll
23
+ on:mouseleave={() => {
24
+ confirmDelete = false;
25
+ }}
26
+ href="{base}/conversation/{conv.id}"
27
+ class="group flex h-11 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 {conv.id ===
28
+ $page.params.id
29
+ ? 'bg-gray-100 dark:bg-gray-700'
30
+ : ''}"
31
+ >
32
+ <div class="flex-1 truncate">
33
+ {#if confirmDelete}
34
+ <span class="font-semibold"> Delete </span>
35
+ {/if}
36
+ {conv.title}
37
+ </div>
38
+
39
+ {#if confirmDelete}
40
+ <button
41
+ type="button"
42
+ class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
43
+ title="Confirm delete action"
44
+ on:click|preventDefault={() => dispatch("deleteConversation", conv.id)}
45
+ >
46
+ <CarbonCheckmark class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
47
+ </button>
48
+ <button
49
+ type="button"
50
+ class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
51
+ title="Cancel delete action"
52
+ on:click|preventDefault={() => {
53
+ confirmDelete = false;
54
+ }}
55
+ >
56
+ <CarbonClose class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
57
+ </button>
58
+ {:else}
59
+ <button
60
+ type="button"
61
+ class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
62
+ title="Edit conversation title"
63
+ on:click|preventDefault={() => {
64
+ const newTitle = prompt("Edit this conversation title:", conv.title);
65
+ if (!newTitle) return;
66
+ dispatch("editConversationTitle", { id: conv.id, title: newTitle });
67
+ }}
68
+ >
69
+ <CarbonEdit class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
70
+ </button>
71
+
72
+ <button
73
+ type="button"
74
+ class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
75
+ title="Delete conversation"
76
+ on:click|preventDefault={(event) => {
77
+ if (event.shiftKey) {
78
+ dispatch("deleteConversation", conv.id);
79
+ } else {
80
+ confirmDelete = true;
81
+ }
82
+ }}
83
+ >
84
+ <CarbonTrashCan class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
85
+ </button>
86
+ {/if}
87
+ </a>
src/lib/components/NavMenu.svelte CHANGED
@@ -1,20 +1,15 @@
1
  <script lang="ts">
2
  import { base } from "$app/paths";
3
- import { page } from "$app/stores";
4
  import { createEventDispatcher } from "svelte";
5
 
6
  import Logo from "$lib/components/icons/Logo.svelte";
7
- import CarbonTrashCan from "~icons/carbon/trash-can";
8
- import CarbonEdit from "~icons/carbon/edit";
9
-
10
  import { switchTheme } from "$lib/switchTheme";
11
  import { PUBLIC_ORIGIN } from "$env/static/public";
 
12
 
13
  const dispatch = createEventDispatcher<{
14
  shareConversation: { id: string; title: string };
15
- deleteConversation: string;
16
  clickSettings: void;
17
- editConversationTitle: { id: string; title: string };
18
  }>();
19
 
20
  export let conversations: Array<{
@@ -36,43 +31,10 @@
36
  </a>
37
  </div>
38
  <div
39
- class="scrollbar-custom flex flex-col gap-1 overflow-y-auto rounded-r-xl bg-gradient-to-l from-gray-50 px-3 pb-3 pt-2 dark:from-gray-800/30"
40
  >
41
  {#each conversations as conv (conv.id)}
42
- <a
43
- data-sveltekit-noscroll
44
- href="{base}/conversation/{conv.id}"
45
- class="group flex h-11 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 {conv.id ===
46
- $page.params.id
47
- ? 'bg-gray-100 dark:bg-gray-700'
48
- : ''}"
49
- >
50
- <div class="flex-1 truncate">{conv.title}</div>
51
-
52
- <button
53
- type="button"
54
- class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
55
- title="Edit conversation title"
56
- on:click|preventDefault={() => {
57
- const newTitle = prompt("Edit this conversation title:", conv.title);
58
- if (!newTitle) return;
59
- dispatch("editConversationTitle", { id: conv.id, title: newTitle });
60
- }}
61
- >
62
- <CarbonEdit class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
63
- </button>
64
-
65
- <button
66
- type="button"
67
- class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
68
- title="Delete conversation"
69
- on:click|preventDefault={() => dispatch("deleteConversation", conv.id)}
70
- >
71
- <CarbonTrashCan
72
- class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300"
73
- />
74
- </button>
75
- </a>
76
  {/each}
77
  </div>
78
  <div
 
1
  <script lang="ts">
2
  import { base } from "$app/paths";
 
3
  import { createEventDispatcher } from "svelte";
4
 
5
  import Logo from "$lib/components/icons/Logo.svelte";
 
 
 
6
  import { switchTheme } from "$lib/switchTheme";
7
  import { PUBLIC_ORIGIN } from "$env/static/public";
8
+ import NavConversationItem from "./NavConversationItem.svelte";
9
 
10
  const dispatch = createEventDispatcher<{
11
  shareConversation: { id: string; title: string };
 
12
  clickSettings: void;
 
13
  }>();
14
 
15
  export let conversations: Array<{
 
31
  </a>
32
  </div>
33
  <div
34
+ class="scrollbar-custom flex flex-col gap-1 overflow-y-auto rounded-r-xl bg-gradient-to-l from-gray-50 px-3 pb-3 pt-2 dark:from-gray-800/30"
35
  >
36
  {#each conversations as conv (conv.id)}
37
+ <NavConversationItem on:editConversationTitle on:deleteConversation {conv} />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
38
  {/each}
39
  </div>
40
  <div