bingocode 1.0.3 → 1.0.4

package/desktop/src/components/skills/SkillList.tsx

@@ -1,254 +0,0 @@
-import { useEffect, useMemo } from 'react'
-import { useSkillStore } from '../../stores/skillStore'
-import { useSessionStore } from '../../stores/sessionStore'
-import { useTranslation } from '../../i18n'
-import type { SkillMeta, SkillSource } from '../../types/skill'
-
-const SOURCE_ORDER: SkillSource[] = ['user', 'project', 'plugin', 'mcp', 'bundled']
-
-const SOURCE_ICONS: Record<SkillSource, string> = {
-  user: 'person',
-  project: 'folder',
-  plugin: 'extension',
-  mcp: 'hub',
-  bundled: 'inventory_2',
-}
-
-const SOURCE_ACCENT_CLASSES: Record<SkillSource, string> = {
-  user: 'bg-[var(--color-primary-fixed)] text-[var(--color-brand)]',
-  project: 'bg-[var(--color-success-container)] text-[var(--color-success)]',
-  plugin: 'bg-[var(--color-warning-container)] text-[var(--color-warning)]',
-  mcp: 'bg-[var(--color-info-container)] text-[var(--color-info)]',
-  bundled: 'bg-[var(--color-surface-container-high)] text-[var(--color-text-tertiary)]',
-}
-
-function estimateTokens(contentLength: number) {
-  return Math.ceil(contentLength / 4)
-}
-
-export function SkillList() {
-  const { skills, isLoading, error, fetchSkills, fetchSkillDetail } =
-    useSkillStore()
-  const sessions = useSessionStore((s) => s.sessions)
-  const activeSessionId = useSessionStore((s) => s.activeSessionId)
-  const t = useTranslation()
-  const activeSession = sessions.find((session) => session.id === activeSessionId)
-  const currentWorkDir = activeSession?.workDir || undefined
-
-  useEffect(() => {
-    fetchSkills(currentWorkDir)
-  }, [fetchSkills, currentWorkDir])
-
-  const grouped = useMemo(() => {
-    const result: Partial<Record<SkillSource, SkillMeta[]>> = {}
-    for (const skill of skills) {
-      const src = skill.source as SkillSource
-      ;(result[src] ??= []).push(skill)
-    }
-    return result
-  }, [skills])
-
-  const totalTokens = useMemo(
-    () => skills.reduce((sum, skill) => sum + estimateTokens(skill.contentLength), 0),
-    [skills],
-  )
-
-  const visibleGroupCount = useMemo(
-    () => SOURCE_ORDER.filter((source) => (grouped[source] ?? []).length > 0).length,
-    [grouped],
-  )
-
-  if (isLoading) {
-    return (
-      <div className="flex justify-center py-12">
-        <div className="animate-spin w-5 h-5 border-2 border-[var(--color-brand)] border-t-transparent rounded-full" />
-      </div>
-    )
-  }
-
-  if (error) {
-    return <div className="text-sm text-[var(--color-error)] py-4">{error}</div>
-  }
-
-  if (skills.length === 0) {
-    return (
-      <div className="text-center py-12 rounded-2xl border border-dashed border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-6">
-        <span className="material-symbols-outlined text-[40px] text-[var(--color-text-tertiary)] mb-2 block">
-          auto_awesome
-        </span>
-        <p className="text-sm text-[var(--color-text-tertiary)]">
-          {t('settings.skills.empty')}
-        </p>
-        <p className="text-xs text-[var(--color-text-tertiary)] mt-1">
-          {t('settings.skills.emptyHint')}
-        </p>
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex flex-col gap-6 min-w-0">
-      <section className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface-container-low)] overflow-hidden">
-        <div className="grid gap-4 px-5 py-5 min-w-0 xl:grid-cols-[minmax(0,1.6fr)_minmax(320px,1fr)] xl:items-end">
-          <div className="min-w-0">
-            <div className="text-[11px] font-semibold uppercase tracking-[0.2em] text-[var(--color-text-tertiary)] mb-2">
-              {t('settings.skills.browserEyebrow')}
-            </div>
-            <div className="flex items-center gap-3 mb-2">
-              <span className="material-symbols-outlined text-[22px] text-[var(--color-brand)]">
-                auto_awesome
-              </span>
-              <h3 className="text-lg font-semibold text-[var(--color-text-primary)]">
-                {t('settings.skills.browserTitle')}
-              </h3>
-            </div>
-            <p className="text-sm leading-6 text-[var(--color-text-secondary)] max-w-3xl">
-              {t('settings.skills.browserDescription')}
-            </p>
-          </div>
-
-          <div className="grid grid-cols-2 gap-3 min-w-0 sm:grid-cols-3">
-            <SummaryCard
-              label={t('settings.skills.summary.totalSkills')}
-              value={String(skills.length)}
-              icon="auto_awesome"
-            />
-            <SummaryCard
-              label={t('settings.skills.summary.sources')}
-              value={String(
-                SOURCE_ORDER.filter((source) => (grouped[source] ?? []).length > 0)
-                  .length,
-              )}
-              icon="layers"
-            />
-            <SummaryCard
-              label={t('settings.skills.summary.tokens')}
-              value={t('settings.skills.tokenEstimateShort', { count: String(totalTokens) })}
-              icon="notes"
-              className="col-span-2 sm:col-span-1"
-            />
-          </div>
-        </div>
-      </section>
-
-      <div className={`grid gap-4 ${visibleGroupCount >= 2 ? 'xl:grid-cols-2' : ''}`}>
-        {SOURCE_ORDER.map((source) => {
-          const group = grouped[source]
-          if (!group?.length) return null
-
-          const sourceLabel = t(`settings.skills.source.${source}`)
-          const sourceTokenCount = group.reduce(
-            (sum, skill) => sum + estimateTokens(skill.contentLength),
-            0,
-          )
-
-          return (
-            <section
-              key={source}
-              className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)] overflow-hidden min-w-0"
-            >
-              <div className="flex items-start justify-between gap-3 px-5 py-4 border-b border-[var(--color-border)] bg-[var(--color-surface-container-low)]">
-                <div className="min-w-0">
-                  <div className="flex items-center gap-2 mb-1">
-                    <span className={`inline-flex h-7 w-7 items-center justify-center rounded-full ${SOURCE_ACCENT_CLASSES[source]}`}>
-                      <span className="material-symbols-outlined text-[16px]">
-                        {SOURCE_ICONS[source]}
-                      </span>
-                    </span>
-                    <h4 className="text-sm font-semibold text-[var(--color-text-primary)]">
-                      {sourceLabel}
-                    </h4>
-                    <span className="text-xs text-[var(--color-text-tertiary)]">
-                      {group.length}
-                    </span>
-                  </div>
-                  <p className="text-xs leading-5 text-[var(--color-text-tertiary)]">
-                    {t('settings.skills.groupHint', {
-                      source: sourceLabel,
-                      count: String(group.length),
-                    })}
-                  </p>
-                </div>
-                <div className="text-[11px] text-[var(--color-text-tertiary)] whitespace-nowrap">
-                  {t('settings.skills.tokenEstimateShort', { count: String(sourceTokenCount) })}
-                </div>
-              </div>
-
-              <div className="flex flex-col p-2">
-                {group.map((skill) => (
-                  <button
-                    key={`${skill.source}-${skill.name}`}
-                    onClick={() =>
-                      skill.hasDirectory &&
-                      fetchSkillDetail(skill.source, skill.name, currentWorkDir)
-                    }
-                    disabled={!skill.hasDirectory}
-                    className="group rounded-xl border border-transparent px-3 py-3 text-left transition-all hover:border-[var(--color-border-focus)] hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-brand)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface)] disabled:opacity-60 disabled:cursor-default disabled:hover:bg-transparent disabled:hover:border-transparent"
-                  >
-                    <div className="flex items-start gap-3">
-                      <span className="mt-0.5 material-symbols-outlined text-[18px] text-[var(--color-text-tertiary)]">
-                        auto_awesome
-                      </span>
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-2 flex-wrap">
-                          <span className="text-sm font-semibold text-[var(--color-text-primary)] break-all">
-                            {skill.displayName || skill.name}
-                          </span>
-                          {skill.version && (
-                            <span className="rounded-full bg-[var(--color-surface-container-high)] px-2 py-0.5 text-[10px] font-medium text-[var(--color-text-tertiary)]">
-                              v{skill.version}
-                            </span>
-                          )}
-                          {skill.userInvocable && (
-                            <span className="rounded-full border border-[var(--color-border)] px-2 py-0.5 text-[10px] font-medium text-[var(--color-text-tertiary)]">
-                              {t('settings.skills.slashCommand')}
-                            </span>
-                          )}
-                        </div>
-                        <p className="mt-1 text-xs leading-5 text-[var(--color-text-secondary)] break-words">
-                          {skill.description}
-                        </p>
-                        <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-[var(--color-text-tertiary)]">
-                          <span>{sourceLabel}</span>
-                          <span>{t('settings.skills.tokenEstimateShort', { count: String(estimateTokens(skill.contentLength)) })}</span>
-                          <span>{skill.hasDirectory ? t('settings.skills.ready') : t('settings.skills.unavailable')}</span>
-                        </div>
-                      </div>
-                      <span className="material-symbols-outlined text-[18px] text-[var(--color-text-tertiary)] opacity-60 transition-transform group-hover:translate-x-0.5 group-hover:opacity-100">
-                        chevron_right
-                      </span>
-                    </div>
-                  </button>
-                ))}
-              </div>
-            </section>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
-
-function SummaryCard({
-  label,
-  value,
-  icon,
-  className = '',
-}: {
-  label: string
-  value: string
-  icon: string
-  className?: string
-}) {
-  return (
-    <div className={`rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-3 min-w-0 ${className}`}>
-      <div className="flex items-center gap-1.5 text-[11px] uppercase tracking-[0.12em] text-[var(--color-text-tertiary)] min-w-0">
-        <span className="material-symbols-outlined text-[14px] flex-shrink-0">{icon}</span>
-        <span className="truncate">{label}</span>
-      </div>
-      <div className="mt-2 text-lg font-semibold text-[var(--color-text-primary)] truncate">
-        {value}
-      </div>
-    </div>
-  )
-}

package/desktop/src/components/tasks/DayOfWeekPicker.tsx

@@ -1,57 +0,0 @@
-import { useTranslation } from '../../i18n'
-
-type Props = {
-  selected: number[]
-  onChange: (days: number[]) => void
-}
-
-// Display order: Mon(1) → Sun(0), matching Chinese convention
-const DAY_ORDER = [1, 2, 3, 4, 5, 6, 0]
-
-const DAY_KEYS = [
-  'newTask.daySun',
-  'newTask.dayMon',
-  'newTask.dayTue',
-  'newTask.dayWed',
-  'newTask.dayThu',
-  'newTask.dayFri',
-  'newTask.daySat',
-] as const
-
-export function DayOfWeekPicker({ selected, onChange }: Props) {
-  const t = useTranslation()
-
-  const toggle = (day: number) => {
-    if (selected.includes(day)) {
-      // Don't allow deselecting the last day
-      if (selected.length <= 1) return
-      onChange(selected.filter((d) => d !== day))
-    } else {
-      onChange([...selected, day])
-    }
-  }
-
-  return (
-    <div className="flex gap-1.5">
-      {DAY_ORDER.map((day) => {
-        const isActive = selected.includes(day)
-        return (
-          <button
-            key={day}
-            type="button"
-            onClick={() => toggle(day)}
-            className={`
-              w-8 h-8 rounded-full text-xs font-medium transition-colors
-              ${isActive
-                ? 'bg-[var(--color-surface-selected)] text-[var(--color-text-primary)] border border-[var(--color-border-focus)]'
-                : 'bg-[var(--color-surface)] text-[var(--color-text-tertiary)] border border-[var(--color-border)] hover:bg-[var(--color-surface-hover)]'
-              }
-            `}
-          >
-            {t(DAY_KEYS[day]!)}
-          </button>
-        )
-      })}
-    </div>
-  )
-}