Added transitions for grids and added loop each identifiers

Author: niemyjski

src/Exceptionless.Web/ClientApp/src/lib/components/DateRangeDropdown.svelte

@@ -27,7 +27,7 @@
         <Select.Value placeholder="" />
     </Select.Trigger>
     <Select.Content>
-        {#each items as item}
+        {#each items as item (item.label)}
             <Select.Item value={item.value}>{item.label}</Select.Item>
         {/each}
     </Select.Content>

src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-body.svelte

@@ -38,7 +38,7 @@
         <Table.Header>
             {#each $table.getHeaderGroups() as headerGroup}
                 <Table.Row>
-                    {#each headerGroup.headers as header}
+                    {#each headerGroup.headers as header (header.id)}
                         <Table.Head class={getHeaderColumnClass(header)}>
                             <DataTableColumnHeader column={header.column}
                                 ><svelte:component this={flexRender(header.column.columnDef.header, header.getContext())} /></DataTableColumnHeader
@@ -52,9 +52,9 @@
             <Table.Row class="hidden text-center only:table-row">
                 <Table.Cell colspan={$table.getVisibleLeafColumns().length}>No data was found with the current filter.</Table.Cell>
             </Table.Row>
-            {#each $table.getRowModel().rows as row}
+            {#each $table.getRowModel().rows as row (row.id)}
                 <Table.Row>
-                    {#each row.getVisibleCells() as cell}
+                    {#each row.getVisibleCells() as cell (cell.id)}
                         <Table.Cell on:click={() => onCellClick(cell)} class={getCellClass(cell)}>
                             <svelte:component this={flexRender(cell.column.columnDef.cell, cell.getContext())} />
                         </Table.Cell>

src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter.svelte

@@ -52,7 +52,7 @@
                             {values.length} Selected
                         </Badge>
                     {:else}
-                        {#each values as option}
+                        {#each values as option (option)}
                             <Badge variant="secondary" class="rounded-sm px-1 font-normal">
                                 {option}
                             </Badge>
@@ -68,7 +68,7 @@
             <Command.List>
                 <Command.Empty>No results found.</Command.Empty>
                 <Command.Group>
-                    {#each options as option}
+                    {#each options as option (option.value)}
                         <Command.Item value={option.value} onSelect={onValueSelected}>
                             <div
                                 class={cn(

src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-page-size.svelte

@@ -39,7 +39,7 @@
             <Select.Value placeholder="Select page size" />
         </Select.Trigger>
         <Select.Content>
-            {#each items as item}
+            {#each items as item (item.value)}
                 <Select.Item value={item.value}>{item.label}</Select.Item>
             {/each}
         </Select.Content>

src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-view-options.svelte

@@ -20,7 +20,7 @@
     <DropdownMenu.Content>
         <DropdownMenu.Label>Toggle columns</DropdownMenu.Label>
         <DropdownMenu.Separator />
-        {#each $table.getAllLeafColumns() as column}
+        {#each $table.getAllLeafColumns() as column (column.id)}
             {#if column.getCanHide()}
                 <DropdownMenu.CheckboxItem checked={column.getIsVisible()} on:click={() => column.toggleVisibility()}>
                     {column.columnDef.header}

src/Exceptionless.Web/ClientApp/src/lib/components/events/EventsDrawer.svelte

@@ -153,12 +153,12 @@
 
     <Tabs.Root value={activeTab} class="mb-4 mt-4">
         <Tabs.List class="mb-4 w-full justify-normal">
-            {#each $tabs as tab}
+            {#each $tabs as tab (tab)}
                 <Tabs.Trigger value={tab}>{tab}</Tabs.Trigger>
             {/each}
         </Tabs.List>
 
-        {#each $tabs as tab}
+        {#each $tabs as tab (tab)}
             <Tabs.Content value={tab}>
                 {#if tab === 'Overview'}
                     <Overview event={$eventResponse.data}></Overview>

src/Exceptionless.Web/ClientApp/src/lib/components/events/views/Overview.svelte

@@ -162,7 +162,7 @@
             <Table.Row>
                 <Table.Head class="whitespace-nowrap">Tags</Table.Head>
                 <Table.Cell class="flex flex-wrap justify-start gap-2 overflow-auto">
-                    {#each event.tags as tag}
+                    {#each event.tags as tag (tag)}
                         <ClickableStringFilter term="tag" value={tag}><Badge color="dark">{tag}</Badge></ClickableStringFilter>
                     {/each}
                 </Table.Cell>

src/Exceptionless.Web/ClientApp/src/lib/components/events/views/Request.svelte

@@ -137,7 +137,7 @@
             </Table.Row>
         </Table.Header>
         <Table.Body>
-            {#each Object.entries(sortedHeaders) as [key, value]}
+            {#each Object.entries(sortedHeaders) as [key, value] (key)}
                 <Table.Row>
                     <Table.Cell>{key}</Table.Cell>
                     <Table.Cell><span class="line-clamp-3 inline">{value}</span></Table.Cell>
@@ -157,7 +157,7 @@
             </Table.Row>
         </Table.Header>
         <Table.Body>
-            {#each Object.entries(request.cookies || {}) as [key, value]}
+            {#each Object.entries(request.cookies || {}) as [key, value] (key)}
                 <Table.Row>
                     <Table.Cell>{key}</Table.Cell>
                     <Table.Cell><span class="line-clamp-3 inline">{value}</span></Table.Cell>

src/Exceptionless.Web/ClientApp/src/lib/components/ui/table/table-row.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { cn } from '$lib/utils';
     import type { HTMLAttributes } from 'svelte/elements';
+    import { slide } from 'svelte/transition';
 
     type $$Props = HTMLAttributes<HTMLTableRowElement> & {
         'data-state'?: unknown;
@@ -10,6 +11,12 @@
     export { className as class };
 </script>
 
-<tr class={cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className)} {...$$restProps} on:click on:keydown>
+<tr
+    class={cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className)}
+    {...$$restProps}
+    on:click
+    on:keydown
+    transition:slide={{ delay: 0, duration: 250, axis: 'y' }}
+>
     <slot />
 </tr>

src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/NavigationCommand.svelte

@@ -17,9 +17,9 @@
     <Command.Input placeholder="Type a command or search..." />
     <Command.List>
         <Command.Empty>No results found.</Command.Empty>
-        {#each Object.entries(groupedRoutes) as [group, items], index}
+        {#each Object.entries(groupedRoutes) as [group, items], index (group)}
             <Command.Group heading={group}>
-                {#each items as route}
+                {#each items as route (route.href)}
                     <Command.Item>
                         <A href={route.href} class="flex gap-x-2" on:click={closeCommandWindow}>
                             <svelte:component this={route.icon} />