@opencode-ai/ui 0.0.0-beta-202606251302

package/src/hooks/create-auto-scroll.tsx

@@ -0,0 +1,237 @@
+import { createEffect, on, onCleanup } from "solid-js"
+import { createStore } from "solid-js/store"
+import { createEventListener } from "@solid-primitives/event-listener"
+import { createResizeObserver } from "@solid-primitives/resize-observer"
+
+export interface AutoScrollOptions {
+  working: () => boolean
+  onUserInteracted?: () => void
+  overflowAnchor?: "none" | "auto" | "dynamic"
+  bottomThreshold?: number
+}
+
+export function createAutoScroll(options: AutoScrollOptions) {
+  let settling = false
+  let settleTimer: ReturnType<typeof setTimeout> | undefined
+  let autoTimer: ReturnType<typeof setTimeout> | undefined
+  let auto: { top: number; time: number } | undefined
+
+  const threshold = () => options.bottomThreshold ?? 10
+
+  const [store, setStore] = createStore({
+    contentRef: undefined as HTMLElement | undefined,
+    scrollRef: undefined as HTMLElement | undefined,
+    userScrolled: false,
+  })
+
+  const active = () => options.working() || settling
+
+  const distanceFromBottom = (el: HTMLElement) => {
+    return el.scrollHeight - el.clientHeight - el.scrollTop
+  }
+
+  const canScroll = (el: HTMLElement) => {
+    return el.scrollHeight - el.clientHeight > 1
+  }
+
+  // Browsers can dispatch scroll events asynchronously. If new content arrives
+  // between us calling `scrollTo()` and the subsequent `scroll` event firing,
+  // the handler can see a non-zero `distanceFromBottom` and incorrectly assume
+  // the user scrolled.
+  const markAuto = (el: HTMLElement) => {
+    auto = {
+      top: Math.max(0, el.scrollHeight - el.clientHeight),
+      time: Date.now(),
+    }
+
+    if (autoTimer) clearTimeout(autoTimer)
+    autoTimer = setTimeout(() => {
+      auto = undefined
+      autoTimer = undefined
+    }, 1500)
+  }
+
+  const isAuto = (el: HTMLElement) => {
+    const a = auto
+    if (!a) return false
+
+    if (Date.now() - a.time > 1500) {
+      auto = undefined
+      return false
+    }
+
+    return Math.abs(el.scrollTop - a.top) < 2
+  }
+
+  const scrollToBottomNow = (behavior: ScrollBehavior) => {
+    const el = store.scrollRef
+    if (!el) return
+    markAuto(el)
+    if (behavior === "smooth") {
+      el.scrollTo({ top: el.scrollHeight, behavior })
+      return
+    }
+
+    // `scrollTop` assignment bypasses any CSS `scroll-behavior: smooth`.
+    el.scrollTop = el.scrollHeight
+  }
+
+  const scrollToBottom = (force: boolean) => {
+    if (!force && !active()) return
+
+    if (force && store.userScrolled) setStore("userScrolled", false)
+
+    const el = store.scrollRef
+    if (!el) return
+
+    if (!force && store.userScrolled) return
+
+    const distance = distanceFromBottom(el)
+    if (distance < 2) {
+      markAuto(el)
+      return
+    }
+
+    // For auto-following content we prefer immediate updates to avoid
+    // visible "catch up" animations while content is still settling.
+    scrollToBottomNow("auto")
+  }
+
+  const stop = () => {
+    const el = store.scrollRef
+    if (!el) return
+    if (!canScroll(el)) {
+      if (store.userScrolled) setStore("userScrolled", false)
+      return
+    }
+    if (store.userScrolled) return
+
+    setStore("userScrolled", true)
+    options.onUserInteracted?.()
+  }
+
+  const handleWheel = (e: WheelEvent) => {
+    if (e.deltaY >= 0) return
+    // If the user is scrolling within a nested scrollable region (tool output,
+    // code block, etc), don't treat it as leaving the "follow bottom" mode.
+    // Those regions opt in via `data-scrollable`.
+    const el = store.scrollRef
+    const target = e.target instanceof Element ? e.target : undefined
+    const nested = target?.closest("[data-scrollable]")
+    if (el && nested && nested !== el) return
+    stop()
+  }
+
+  const handleScroll = () => {
+    const el = store.scrollRef
+    if (!el) return
+
+    if (!canScroll(el)) {
+      if (store.userScrolled) setStore("userScrolled", false)
+      return
+    }
+
+    if (distanceFromBottom(el) < threshold()) {
+      if (store.userScrolled) setStore("userScrolled", false)
+      return
+    }
+
+    // Ignore scroll events triggered by our own scrollToBottom calls.
+    if (!store.userScrolled && isAuto(el)) {
+      scrollToBottom(false)
+      return
+    }
+
+    stop()
+  }
+
+  const handleInteraction = () => {
+    if (!active()) return
+    const selection = window.getSelection()
+    if (selection && selection.toString().length > 0) {
+      stop()
+    }
+  }
+
+  const updateOverflowAnchor = (el: HTMLElement) => {
+    const mode = options.overflowAnchor ?? "dynamic"
+
+    if (mode === "none") {
+      el.style.overflowAnchor = "none"
+      return
+    }
+
+    if (mode === "auto") {
+      el.style.overflowAnchor = "auto"
+      return
+    }
+
+    el.style.overflowAnchor = store.userScrolled ? "auto" : "none"
+  }
+
+  createResizeObserver(
+    () => store.contentRef,
+    () => {
+      const el = store.scrollRef
+      if (el && !canScroll(el)) {
+        if (store.userScrolled) setStore("userScrolled", false)
+        return
+      }
+      if (!active()) return
+      if (store.userScrolled) return
+      // ResizeObserver fires after layout, before paint.
+      // Keep the bottom locked in the same frame to avoid visible
+      // "jump up then catch up" artifacts while streaming content.
+      scrollToBottom(false)
+    },
+  )
+
+  createEffect(
+    on(options.working, (working: boolean) => {
+      settling = false
+      if (settleTimer) clearTimeout(settleTimer)
+      settleTimer = undefined
+
+      if (working) {
+        if (!store.userScrolled) scrollToBottom(true)
+        return
+      }
+
+      settling = true
+      settleTimer = setTimeout(() => {
+        settling = false
+      }, 300)
+    }),
+  )
+
+  createEffect(() => {
+    // Track `userScrolled` even before `scrollRef` is attached, so we can
+    // update overflow anchoring once the element exists.
+    store.userScrolled
+    const el = store.scrollRef
+    if (!el) return
+    updateOverflowAnchor(el)
+  })
+
+  createEventListener(() => store.scrollRef, "wheel", handleWheel, { passive: true })
+
+  onCleanup(() => {
+    if (settleTimer) clearTimeout(settleTimer)
+    if (autoTimer) clearTimeout(autoTimer)
+  })
+
+  return {
+    scrollRef: (el: HTMLElement | undefined) => setStore("scrollRef", el),
+    contentRef: (el: HTMLElement | undefined) => setStore("contentRef", el),
+    handleScroll,
+    handleInteraction,
+    pause: stop,
+    resume: () => {
+      if (store.userScrolled) setStore("userScrolled", false)
+      scrollToBottom(true)
+    },
+    scrollToBottom: () => scrollToBottom(false),
+    forceScrollToBottom: () => scrollToBottom(true),
+    userScrolled: () => store.userScrolled,
+  }
+}

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from "./use-filtered-list"
+export * from "./create-auto-scroll"

package/src/hooks/use-filtered-list.tsx

@@ -0,0 +1,134 @@
+import fuzzysort from "fuzzysort"
+import { entries, flatMap, groupBy, map, pipe } from "remeda"
+import { createEffect, createMemo, createResource, on } from "solid-js"
+import { createStore } from "solid-js/store"
+import { createList } from "solid-list"
+
+export interface FilteredListProps<T> {
+  items: T[] | ((filter: string) => T[] | Promise<T[]>)
+  key: (item: T) => string
+  filterKeys?: string[]
+  current?: T
+  groupBy?: (x: T) => string
+  sortBy?: (a: T, b: T) => number
+  sortGroupsBy?: (a: { category: string; items: T[] }, b: { category: string; items: T[] }) => number
+  skipFilter?: (item: T) => boolean
+  onSelect?: (value: T | undefined, index: number) => void
+  noInitialSelection?: boolean
+}
+
+export function useFilteredList<T>(props: FilteredListProps<T>) {
+  const [store, setStore] = createStore<{ filter: string }>({ filter: "" })
+
+  type Group = { category: string; items: [T, ...T[]] }
+  const empty: Group[] = []
+
+  const [grouped, { refetch }] = createResource(
+    () => ({
+      filter: store.filter,
+      items: typeof props.items === "function" ? props.items(store.filter) : props.items,
+    }),
+    async ({ filter, items }) => {
+      const query = filter ?? ""
+      const needle = query.toLowerCase()
+      const all = (await Promise.resolve(items)) || []
+      const result = pipe(
+        all,
+        (x) => {
+          if (!needle) return x
+          const skipFilter = props.skipFilter
+          const filterable = skipFilter ? x.filter((item) => !skipFilter(item)) : x
+          const skipped = skipFilter ? x.filter(skipFilter) : []
+          const filtered =
+            !props.filterKeys && Array.isArray(filterable) && filterable.every((e) => typeof e === "string")
+              ? (fuzzysort.go(needle, filterable).map((x) => x.target) as T[])
+              : fuzzysort.go(needle, filterable, { keys: props.filterKeys! }).map((x) => x.obj)
+          return skipped.length ? [...filtered, ...skipped] : filtered
+        },
+        groupBy((x) => (props.groupBy ? props.groupBy(x) : "")),
+        entries(),
+        map(([k, v]) => ({ category: k, items: props.sortBy ? v.sort(props.sortBy) : v })),
+        (groups) => (props.sortGroupsBy ? groups.sort(props.sortGroupsBy) : groups),
+      )
+      return result
+    },
+    { initialValue: empty },
+  )
+
+  const flat = createMemo(() => {
+    return pipe(
+      grouped.latest || [],
+      flatMap((x) => x.items),
+    )
+  })
+
+  function initialActive() {
+    if (props.noInitialSelection) return ""
+    if (props.current) return props.key(props.current)
+
+    const items = flat()
+    if (items.length === 0) return ""
+    return props.key(items[0])
+  }
+
+  const list = createList({
+    items: () => flat().map(props.key),
+    initialActive: initialActive(),
+    loop: true,
+  })
+
+  const reset = () => {
+    if (props.noInitialSelection) {
+      list.setActive("")
+      return
+    }
+    const all = flat()
+    if (all.length === 0) return
+    list.setActive(props.key(all[0]))
+  }
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "Enter" && !event.isComposing) {
+      event.preventDefault()
+      const selectedIndex = flat().findIndex((x) => props.key(x) === list.active())
+      const selected = flat()[selectedIndex]
+      if (selected) props.onSelect?.(selected, selectedIndex)
+    } else if (event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey) {
+      if (event.key === "n" || event.key === "p") {
+        event.preventDefault()
+        const navEvent = new KeyboardEvent("keydown", {
+          key: event.key === "n" ? "ArrowDown" : "ArrowUp",
+          bubbles: true,
+        })
+        list.onKeyDown(navEvent)
+      }
+    } else {
+      // Skip list navigation for text editing shortcuts (e.g., Option+Arrow, Option+Backspace on macOS)
+      if (event.altKey || event.metaKey) return
+      list.onKeyDown(event)
+    }
+  }
+
+  createEffect(
+    on(grouped, () => {
+      reset()
+    }),
+  )
+
+  const onInput = (value: string) => {
+    setStore("filter", value)
+  }
+
+  return {
+    grouped,
+    filter: () => store.filter,
+    flat,
+    reset,
+    refetch,
+    clear: () => setStore("filter", ""),
+    onKeyDown,
+    onInput,
+    active: list.active,
+    setActive: list.setActive,
+  }
+}

package/src/i18n/ar.ts

@@ -0,0 +1,168 @@
+export const dict = {
+  "ui.sessionReview.title": "تغييرات الجلسة",
+  "ui.sessionReview.title.lastTurn": "تغييرات آخر دور",
+  "ui.sessionReview.diffStyle.unified": "موحد",
+  "ui.sessionReview.diffStyle.split": "منقسم",
+  "ui.sessionReview.openFile": "فتح ملف",
+  "ui.sessionReview.selection.line": "سطر {{line}}",
+  "ui.sessionReview.selection.lines": "الأسطر {{start}}-{{end}}",
+  "ui.sessionReview.expandAll": "توسيع الكل",
+  "ui.sessionReview.collapseAll": "طي الكل",
+  "ui.sessionReview.change.added": "مضاف",
+  "ui.sessionReview.change.removed": "محذوف",
+  "ui.sessionReview.change.modified": "معدل",
+  "ui.sessionReview.image.loading": "جار التحميل...",
+  "ui.sessionReview.image.placeholder": "صورة",
+  "ui.sessionReview.largeDiff.title": "Diff كبير جدا لعرضه",
+  "ui.sessionReview.largeDiff.meta": "الحد: {{limit}} سطرًا متغيرًا. الحالي: {{current}} سطرًا متغيرًا.",
+  "ui.sessionReview.largeDiff.renderAnyway": "اعرض على أي حال",
+  "ui.fileMedia.kind.image": "صورة",
+  "ui.fileMedia.kind.audio": "صوت",
+  "ui.fileMedia.state.removed": "تمت إزالة {{kind}}",
+  "ui.fileMedia.state.loading": "جاري تحميل {{kind}}...",
+  "ui.fileMedia.state.error": "خطأ في تحميل {{kind}}",
+  "ui.fileMedia.state.unavailable": "{{kind}} غير متوفر",
+  "ui.fileMedia.binary.title": "ملف ثنائي",
+  "ui.fileMedia.binary.description.path": "{{path}} عبارة عن ملف ثنائي ولا يمكن عرضه.",
+  "ui.fileMedia.binary.description.default": "هذا ملف ثنائي ولا يمكن عرضه.",
+
+  "ui.lineComment.label.prefix": "تعليق على ",
+  "ui.lineComment.label.suffix": "",
+  "ui.lineComment.editorLabel.prefix": "جارٍ التعليق على ",
+  "ui.lineComment.editorLabel.suffix": "",
+  "ui.lineComment.placeholder": "أضف تعليقًا",
+  "ui.lineComment.submit": "تعليق",
+
+  "ui.sessionTurn.steps.show": "إظهار الخطوات",
+  "ui.sessionTurn.steps.hide": "إخفاء الخطوات",
+  "ui.sessionTurn.summary.response": "استجابة",
+  "ui.sessionTurn.diff.showMore": "إظهار المزيد من التغييرات ({{count}})",
+
+  "ui.sessionTurn.retry.retrying": "إعادة المحاولة",
+  "ui.sessionTurn.retry.inSeconds": "خلال {{seconds}} ثواني",
+  "ui.sessionTurn.retry.attempt": "المحاولة رقم {{attempt}}",
+  "ui.sessionTurn.retry.attemptLine": "{{line}} - المحاولة رقم {{attempt}}",
+  "ui.sessionTurn.retry.geminiHot": "gemini مزدحم حاليا",
+  "ui.sessionTurn.error.freeUsageExceeded": "تم تجاوز حد الاستخدام المجاني",
+  "ui.sessionTurn.error.addCredits": "إضافة رصيد",
+
+  "dialog.usageExceeded.freeTier.title": "تم الوصول إلى الحد المجاني",
+  "dialog.usageExceeded.freeTier.description":
+    "اشترك في OpenCode Go للحصول على وصول موثوق إلى أفضل النماذج مفتوحة المصدر، ابتداءً من $5/شهر.",
+  "dialog.usageExceeded.freeTier.actionLabel": "اشترك",
+  "dialog.usageExceeded.accountRateLimit.title": "تم الوصول إلى حد Go",
+  "dialog.usageExceeded.accountRateLimit.description":
+    "تم الوصول إلى حد الاستخدام. لمتابعة استخدام هذا النموذج الآن، قم بتفعيل الاستخدام من رصيدك المتاح",
+  "dialog.usageExceeded.accountRateLimit.actionLabel": "فتح الإعدادات",
+
+  "ui.sessionTurn.status.delegating": "تفويض العمل",
+  "ui.sessionTurn.status.planning": "تخطيط الخطوات التالية",
+  "ui.sessionTurn.status.gatheringContext": "استكشاف",
+  "ui.sessionTurn.status.gatheredContext": "تم الاستكشاف",
+  "ui.sessionTurn.status.searchingCodebase": "البحث في قاعدة التعليمات البرمجية",
+  "ui.sessionTurn.status.searchingWeb": "البحث في الويب",
+  "ui.sessionTurn.status.makingEdits": "إجراء تعديلات",
+  "ui.sessionTurn.status.runningCommands": "تشغيل الأوامر",
+  "ui.sessionTurn.status.thinking": "تفكير",
+  "ui.sessionTurn.status.thinkingWithTopic": "تفكير - {{topic}}",
+  "ui.sessionTurn.status.gatheringThoughts": "جمع الأفكار",
+  "ui.sessionTurn.status.consideringNextSteps": "النظر في الخطوات التالية",
+
+  "ui.messagePart.questions.dismissed": "تم رفض الأسئلة",
+  "ui.messagePart.compaction": "تم ضغط الجلسة",
+  "ui.messagePart.context.read.one": "{{count}} قراءة",
+  "ui.messagePart.context.read.other": "{{count}} قراءات",
+  "ui.messagePart.context.search.one": "{{count}} بحث",
+  "ui.messagePart.context.search.other": "{{count}} عمليات بحث",
+  "ui.messagePart.context.list.one": "{{count}} قائمة",
+  "ui.messagePart.context.list.other": "{{count}} قوائم",
+  "ui.messagePart.diagnostic.error": "خطأ",
+  "ui.messagePart.title.edit": "تحرير",
+  "ui.messagePart.title.write": "كتابة",
+  "ui.messagePart.option.typeOwnAnswer": "اكتب إجابتك الخاصة",
+  "ui.messagePart.review.title": "مراجعة إجاباتك",
+
+  "ui.list.loading": "جارٍ التحميل",
+  "ui.list.empty": "لا توجد نتائج",
+  "ui.list.clearFilter": "مسح عامل التصفية",
+  "ui.list.emptyWithFilter.prefix": "لا توجد نتائج لـ",
+  "ui.list.emptyWithFilter.suffix": "",
+
+  "ui.messageNav.newMessage": "رسالة جديدة",
+
+  "ui.textField.copyToClipboard": "نسخ إلى الحافظة",
+  "ui.textField.copyLink": "نسخ الرابط",
+  "ui.textField.copied": "تم النسخ",
+
+  "ui.imagePreview.alt": "معاينة الصورة",
+  "ui.scrollView.ariaLabel": "محتوى قابل للتمرير",
+
+  "ui.tool.read": "قراءة",
+  "ui.tool.loaded": "تم التحميل",
+  "ui.tool.list": "قائمة",
+  "ui.tool.glob": "Glob",
+  "ui.tool.grep": "Grep",
+  "ui.tool.webfetch": "جلب الويب",
+  "ui.tool.websearch": "بحث الويب",
+  "ui.tool.shell": "Shell",
+  "ui.tool.patch": "تصحيح",
+  "ui.tool.todos": "المهام",
+  "ui.tool.todos.read": "قراءة المهام",
+  "ui.tool.questions": "أسئلة",
+  "ui.tool.agent": "وكيل {{type}}",
+  "ui.tool.agent.default": "وكيل",
+
+  "ui.common.file.one": "ملف",
+  "ui.common.file.other": "ملفات",
+  "ui.common.question.one": "سؤال",
+  "ui.common.question.other": "أسئلة",
+
+  "ui.common.add": "إضافة",
+  "ui.common.back": "رجوع",
+  "ui.common.cancel": "إلغاء",
+  "ui.common.confirm": "تأكيد",
+  "ui.common.dismiss": "رفض",
+  "ui.common.close": "إغلاق",
+  "ui.common.next": "التالي",
+  "ui.common.submit": "إرسال",
+
+  "ui.permission.deny": "رفض",
+  "ui.permission.allowAlways": "السماح دائمًا",
+  "ui.permission.allowOnce": "السماح مرة واحدة",
+
+  "ui.message.expand": "توسيع الرسالة",
+  "ui.message.collapse": "طي الرسالة",
+  "ui.message.copy": "نسخ",
+  "ui.message.copyMessage": "نسخ الرسالة",
+  "ui.message.forkMessage": "تشعب إلى جلسة جديدة",
+  "ui.message.revertMessage": "إعادة التعيين إلى هذه النقطة",
+  "ui.message.copyResponse": "نسخ الرد",
+  "ui.message.copied": "تم النسخ!",
+  "ui.message.interrupted": "تمت المقاطعة",
+  "ui.message.queued": "في الانتظار",
+  "ui.message.attachment.alt": "مرفق",
+
+  "ui.patch.action.deleted": "محذوف",
+  "ui.patch.action.created": "تم الإنشاء",
+  "ui.patch.action.moved": "منقول",
+  "ui.patch.action.patched": "مصحح",
+
+  "ui.question.subtitle.answered": "{{count}} أجيب",
+  "ui.question.answer.none": "(لا توجد إجابة)",
+  "ui.question.review.notAnswered": "(لم يتم الرد)",
+  "ui.question.multiHint": "حدد كل ما ينطبق",
+  "ui.question.singleHint": "حدد إجابة واحدة",
+  "ui.question.custom.placeholder": "اكتب إجابتك...",
+
+  "ui.fileSearch.placeholder": "بحث",
+  "ui.fileSearch.previousMatch": "المطابقة السابقة",
+  "ui.fileSearch.nextMatch": "المطابقة التالية",
+  "ui.fileSearch.close": "إغلاق البحث",
+  "ui.tool.task": "مهمة",
+  "ui.tool.skill": "مهارة",
+  "ui.basicTool.called": "تم استدعاء `{{tool}}`",
+  "ui.toolErrorCard.failed": "فشل",
+  "ui.toolErrorCard.copyError": "نسخ الخطأ",
+  "ui.message.duration.seconds": "{{count}}ث",
+  "ui.message.duration.minutesSeconds": "{{minutes}}د {{seconds}}ث",
+}