tab search working, 4 web search options, shadcdn bits ui

README.md

@@ -10,21 +10,24 @@
 
 * Search Inside All Open Tabs Page Content
 
-* Scroll to and highlight the query on page
+* Scroll to and highlight the query on page, click result again for next
 
 * Resolve query against LLM search or Google
 
-
 ### Screenshot 
 
-<img src="https://i.imgur.com/tpToRRB.png">
+<img src="https://i.imgur.com/gG1nJQE.png">
 
 
 ## Ideas for Future Development
 
+* font speed https://media.nngroup.com/media/editor/2022/04/14/16-fonts-reading-speed.png
+*paste from clipboard and searh
 
 * Ask ChatGPT about Text Content of All Open Tabs
 
+* WordNet definintion and synonyms
+
 * Reader Mode to Extract main content text and cite 
 
 * Tree tab view and history view 

components.json

@@ -0,0 +1,14 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"style": "default",
+	"tailwind": {
+		"config": "tailwind.config.ts",
+		"css": "src\\pages\\sidepanel\\app.pcss",
+		"baseColor": "slate"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils"
+	},
+	"typescript": true
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "in10search-chrome",
-  "version": "4.0.0",
+  "version": "2.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -27,5 +27,13 @@
     "tslib": "^2.6.2",
     "typescript": "^5.4.5",
     "vite": "^5.2.11"
+  },
+  "dependencies": {
+    "@sveltejs/adapter-auto": "^3.2.2",
+    "bits-ui": "^0.21.11",
+    "clsx": "^2.1.1",
+    "lucide-svelte": "^0.399.0",
+    "tailwind-merge": "^2.3.0",
+    "tailwind-variants": "^0.2.1",
   }
 }

src/lib/components/ui/alert-dialog/alert-dialog-action.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+  import { buttonVariants } from "$components/ui/button/index.js";
+  import { cn } from "$lib/utils/style-transitions";
+
+  type $$Props = AlertDialogPrimitive.ActionProps;
+  type $$Events = AlertDialogPrimitive.ActionEvents;
+
+  let className: $$Props["class"] = undefined;
+  export { className as class };
+</script>
+
+<AlertDialogPrimitive.Action class={cn(buttonVariants(), className)} {...$$restProps} on:click on:keydown let:builder>
+  <slot {builder} />
+</AlertDialogPrimitive.Action>

src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+  import { buttonVariants } from "$components/ui/button/index.js";
+  import { cn } from "$lib/utils/style-transitions";
+
+  type $$Props = AlertDialogPrimitive.CancelProps;
+  type $$Events = AlertDialogPrimitive.CancelEvents;
+
+  let className: $$Props["class"] = undefined;
+  export { className as class };
+</script>
+
+<AlertDialogPrimitive.Cancel
+  class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+  {...$$restProps}
+  on:click
+  on:keydown
+  let:builder
+>
+  <slot {builder} />
+</AlertDialogPrimitive.Cancel>

src/lib/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+  import * as AlertDialog from "./index";
+  import { cn, flyAndScale } from "$lib/utils/style-transitions";
+
+  type $$Props = AlertDialogPrimitive.ContentProps;
+
+  export let transition: $$Props["transition"] = flyAndScale;
+  export let transitionConfig: $$Props["transitionConfig"] = undefined;
+
+  let className: $$Props["class"] = undefined;
+  export { className as class };
+</script>
+
+<AlertDialog.Portal>
+  <AlertDialog.Overlay />
+  <AlertDialogPrimitive.Content
+    {transition}
+    {transitionConfig}
+    class={cn(
+      "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full",
+      className
+    )}
+    {...$$restProps}
+  >
+    <slot />
+  </AlertDialogPrimitive.Content>
+</AlertDialog.Portal>

src/lib/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils/style-transitions";
+
+  type $$Props = AlertDialogPrimitive.DescriptionProps;
+
+  let className: $$Props["class"] = undefined;
+  export { className as class };
+</script>
+
+<AlertDialogPrimitive.Description class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
+  <slot />
+</AlertDialogPrimitive.Description>

src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { cn } from "$lib/utils/style-transitions";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type $$Props = HTMLAttributes<HTMLDivElement>;
+
+  let className: $$Props["class"] = undefined;
+  export { className as class };
+</script>
+
+<div class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...$$restProps}>
+  <slot />
+</div>

src/lib/components/ui/alert-dialog/alert-dialog-header.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { cn } from "$lib/utils/style-transitions";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type $$Props = HTMLAttributes<HTMLDivElement>;
+
+  let className: $$Props["class"] = undefined;
+  export { className as class };
+</script>
+
+<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...$$restProps}>
+  <slot />
+</div>

src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils/style-transitions";
+  import { fade } from "svelte/transition";
+
+  type $$Props = AlertDialogPrimitive.OverlayProps;
+
+  let className: $$Props["class"] = undefined;
+  export let transition: $$Props["transition"] = fade;
+  export let transitionConfig: $$Props["transitionConfig"] = {
+    duration: 150
+  };
+  export { className as class };
+</script>
+
+<AlertDialogPrimitive.Overlay
+  {transition}
+  {transitionConfig}
+  class={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ", className)}
+  {...$$restProps}
+/>

src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+  type $$Props = AlertDialogPrimitive.PortalProps;
+</script>
+
+<AlertDialogPrimitive.Portal {...$$restProps}>
+  <slot />
+</AlertDialogPrimitive.Portal>

src/lib/components/ui/alert-dialog/alert-dialog-title.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils/style-transitions";
+
+  type $$Props = AlertDialogPrimitive.TitleProps;
+
+  let className: $$Props["class"] = undefined;
+  export let level: $$Props["level"] = "h3";
+  export { className as class };
+</script>
+
+<AlertDialogPrimitive.Title class={cn("text-lg font-semibold", className)} {level} {...$$restProps}>
+  <slot />
+</AlertDialogPrimitive.Title>

src/lib/components/ui/alert-dialog/index.ts

@@ -0,0 +1,40 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+const Root = AlertDialogPrimitive.Root;
+const Trigger = AlertDialogPrimitive.Trigger;
+
+import Title from "./alert-dialog-title.svelte";
+import Action from "./alert-dialog-action.svelte";
+import Cancel from "./alert-dialog-cancel.svelte";
+import Portal from "./alert-dialog-portal.svelte";
+import Footer from "./alert-dialog-footer.svelte";
+import Header from "./alert-dialog-header.svelte";
+import Overlay from "./alert-dialog-overlay.svelte";
+import Content from "./alert-dialog-content.svelte";
+import Description from "./alert-dialog-description.svelte";
+
+export {
+  Root,
+  Title,
+  Action,
+  Cancel,
+  Portal,
+  Footer,
+  Header,
+  Trigger,
+  Overlay,
+  Content,
+  Description,
+  //
+  Root as AlertDialog,
+  Title as AlertDialogTitle,
+  Action as AlertDialogAction,
+  Cancel as AlertDialogCancel,
+  Portal as AlertDialogPortal,
+  Footer as AlertDialogFooter,
+  Header as AlertDialogHeader,
+  Trigger as AlertDialogTrigger,
+  Overlay as AlertDialogOverlay,
+  Content as AlertDialogContent,
+  Description as AlertDialogDescription
+};

src/lib/components/ui/avatar/avatar-fallback.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { Avatar as AvatarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils/style-transitions";
+
+  type $$Props = AvatarPrimitive.FallbackProps;
+
+  let className: $$Props["class"] = undefined;
+  export { className as class };
+</script>
+
+<AvatarPrimitive.Fallback class={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)} {...$$restProps}>
+  <slot />
+</AvatarPrimitive.Fallback>

src/lib/components/ui/avatar/avatar-image.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { Avatar as AvatarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils/style-transitions";
+
+  type $$Props = AvatarPrimitive.ImageProps;
+
+  let className: $$Props["class"] = undefined;
+  export let src: $$Props["src"] = undefined;
+  export let alt: $$Props["alt"] = undefined;
+  export { className as class };
+</script>
+
+<AvatarPrimitive.Image {src} {alt} class={cn("aspect-square h-full w-full", className)} {...$$restProps} />

src/lib/components/ui/avatar/avatar.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Avatar as AvatarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils/style-transitions";
+
+  type $$Props = AvatarPrimitive.Props;
+
+  let className: $$Props["class"] = undefined;
+  export let delayMs: $$Props["delayMs"] = undefined;
+  export { className as class };
+</script>
+
+<AvatarPrimitive.Root {delayMs} class={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)} {...$$restProps}>
+  <slot />
+</AvatarPrimitive.Root>

src/lib/components/ui/avatar/index.ts

@@ -0,0 +1,13 @@
+import Root from "./avatar.svelte";
+import Image from "./avatar-image.svelte";
+import Fallback from "./avatar-fallback.svelte";
+
+export {
+  Root,
+  Image,
+  Fallback,
+  //
+  Root as Avatar,
+  Image as AvatarImage,
+  Fallback as AvatarFallback
+};

src/lib/components/ui/badge/badge.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { type Variant, badgeVariants } from "./index";
+  import { cn } from "$lib/utils/style-transitions";
+
+  let className: string | undefined | null = undefined;
+  export let href: string | undefined = undefined;
+  export let variant: Variant = "default";
+  export { className as class };
+</script>
+
+<svelte:element this={href ? "a" : "span"} {href} class={cn(badgeVariants({ variant, className }))} {...$$restProps}>
+  <slot />
+</svelte:element>

src/lib/components/ui/badge/index.ts

@@ -0,0 +1,19 @@
+import { type VariantProps, tv } from "tailwind-variants";
+export { default as Badge } from "./badge.svelte";
+
+export const badgeVariants = tv({
+  base: "inline-flex select-none items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  variants: {
+    variant: {
+      default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+      secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+      outline: "text-foreground"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+
+export type Variant = VariantProps<typeof badgeVariants>["variant"];

src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import Ellipsis from "lucide-svelte/icons/ellipsis";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn } from "$lib/utils/style-transitions";
+
+  type $$Props = HTMLAttributes<HTMLSpanElement> & {
+    el?: HTMLSpanElement;
+  };
+
+  export let el: $$Props["el"] = undefined;
+  let className: $$Props["class"] = undefined;
+  export { className as class };
+</script>
+
+<span bind:this={el} role="presentation" aria-hidden="true" class={cn("flex h-9 w-9 items-center justify-center", className)} {...$$restProps}>
+  <Ellipsis class="h-4 w-4" />
+  <span class="sr-only">More</span>
+</span>

src/lib/components/ui/breadcrumb/breadcrumb-item.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { HTMLLiAttributes } from "svelte/elements";
+  import { cn } from "$lib/utils/style-transitions";
+
+  type $$Props = HTMLLiAttributes & {
+    el?: HTMLLIElement;
+  };
+
+  export let el: $$Props["el"] = undefined;
+  let className: $$Props["class"] = undefined;
+  export { className as class };
+</script>
+
+<li bind:this={el} class={cn("inline-flex items-center gap-1.5", className)}>
+  <slot />
+</li>