Add arrows to popovers

Author: jpenilla

web/src/lib/components/settings-popover/SettingsPopover.svelte

@@ -35,10 +35,9 @@
         <span class="iconify size-4 shrink-0 octicon--gear-16" aria-hidden="true"></span>
     </Popover.Trigger>
     <Popover.Portal>
-        <Popover.Content aria-label="Options" class="z-50 mx-2 flex flex-col gap-1 rounded-sm border bg-neutral py-1 text-sm shadow" sideOffset={4}>
-            {#if children}
-                {@render children()}
-            {/if}
+        <Popover.Content aria-label="Options" class="z-50 mx-2 flex flex-col gap-1 rounded-sm border bg-neutral py-1 text-sm shadow">
+            {@render children?.()}
+            <Popover.Arrow class="text-edge" />
         </Popover.Content>
     </Popover.Portal>
 </Popover.Root>

web/src/routes/ActionsPopover.svelte

@@ -12,7 +12,7 @@
         <span aria-hidden="true" class="iconify size-4 bg-primary octicon--kebab-horizontal-16"></span>
     </Popover.Trigger>
     <Popover.Portal>
-        <Popover.Content class="flex flex-col overflow-hidden rounded-sm border bg-neutral text-sm shadow-sm select-none" sideOffset={4}>
+        <Popover.Content class="flex flex-col overflow-hidden rounded-sm border bg-neutral text-sm shadow-sm select-none">
             <Button.Root
                 class="btn-ghost px-2 py-1 text-left"
                 onclick={() => {
@@ -31,6 +31,7 @@
             >
                 Collapse All
             </Button.Root>
+            <Popover.Arrow class="text-edge" />
         </Popover.Content>
     </Popover.Portal>
 </Popover.Root>

web/src/routes/FileHeader.svelte

@@ -71,7 +71,7 @@
             <span class="iconify size-4 bg-primary octicon--kebab-horizontal-16" aria-hidden="true"></span>
         </Popover.Trigger>
         <Popover.Portal>
-            <Popover.Content class="flex flex-col overflow-hidden rounded-sm border bg-neutral text-sm shadow-sm select-none" sideOffset={4}>
+            <Popover.Content class="flex flex-col overflow-hidden rounded-sm border bg-neutral text-sm shadow-sm select-none">
                 <Button.Root onclick={showInFileTree} class="btn-ghost px-2 py-1">Show in file tree</Button.Root>
                 <LabeledCheckbox
                     labelText="File viewed"
@@ -83,6 +83,7 @@
                         }
                     }
                 />
+                <Popover.Arrow class="text-edge" />
             </Popover.Content>
         </Popover.Portal>
     </Popover.Root>

web/src/routes/InfoPopup.svelte

@@ -12,8 +12,9 @@
         <span aria-hidden="true" class="iconify size-4 bg-primary octicon--info-16"></span>
     </Popover.Trigger>
     <Popover.Portal>
-        <Popover.Content class="z-50 max-w-64 rounded-sm border bg-neutral px-2 py-1 text-sm">
+        <Popover.Content class="z-50 mx-2 max-w-64 rounded-sm border bg-neutral px-2 py-1 text-sm">
             {@render children?.()}
+            <Popover.Arrow class="text-edge" />
         </Popover.Content>
     </Popover.Portal>
 </Popover.Root>

web/src/routes/LoadDiffDialog.svelte

@@ -524,22 +524,21 @@
                     <DirectorySelect bind:directory={dirA} placeholder="Directory A" />
                     <span class="iconify size-4 shrink-0 octicon--arrow-right-16"></span>
                     <DirectorySelect bind:directory={dirB} placeholder="Directory B" />
-                    <div class="flex">
-                        <Button.Root type="submit" class="relative rounded-l-md btn-primary">
-                            <div class="px-2 py-1">Go</div>
-                            <div class="absolute top-0 right-0 h-full w-px bg-neutral-3/20"></div>
-                        </Button.Root>
-                        <Popover.Root>
-                            <Popover.Trigger title="Edit filters" class="flex rounded-r-md btn-primary p-2 data-[state=open]:btn-primary-hover">
-                                <span class="iconify size-4 shrink-0 place-self-center octicon--filter-16" aria-hidden="true"></span>
-                            </Popover.Trigger>
-                            <Popover.Portal>
-                                <Popover.Content side="top" class="z-50 overflow-hidden rounded-md border bg-neutral">
-                                    {@render blacklistPopoverContent()}
-                                </Popover.Content>
-                            </Popover.Portal>
-                        </Popover.Root>
-                    </div>
+                    <Button.Root type="submit" class="rounded-md btn-primary px-2 py-1">Go</Button.Root>
+                    <Popover.Root>
+                        <Popover.Trigger
+                            title="Edit filters"
+                            class="flex size-6 items-center justify-center rounded-md btn-primary data-[state=open]:btn-primary-hover"
+                        >
+                            <span class="iconify size-4 shrink-0 octicon--filter-16" aria-hidden="true"></span>
+                        </Popover.Trigger>
+                        <Popover.Portal>
+                            <Popover.Content side="top" class="z-50 overflow-hidden rounded-md border bg-neutral">
+                                {@render blacklistPopoverContent()}
+                                <Popover.Arrow class="text-edge" />
+                            </Popover.Content>
+                        </Popover.Portal>
+                    </Popover.Root>
                 </div>
             </form>
         </Dialog.Content>