Merge remote-tracking branch 'github/main'

Author: gsaslis

assets/css/tailwind.css

@@ -127,6 +127,12 @@ body {
   color: var(--color-foreground-contrast);
 }
 
+::selection, mark {
+  /* !important used to override selection color */
+  background: var(--color-fill-yellow-iconic) !important;
+  color: var(--color-foreground-black);
+}
+
 @layer components {
   .button-solid {
     @apply flex h-8 cursor-pointer items-center justify-center gap-2 rounded-sm bg-rad-fill-secondary px-3 text-sm font-semibold text-rad-foreground-match-background hover:bg-rad-fill-secondary-hover;

components/Column.vue

@@ -135,8 +135,16 @@ const doneTasksFilter = doneTaskStatuses
           'hover:cursor-grab': !isDraggingDisabled && !isTaskDone(task),
         }"
       >
-        <ColumnIssueCard v-if="isIssue(task)" :issue="task" />
-        <ColumnPatchCard v-else-if="isPatch(task)" :patch="task" />
+        <ColumnIssueCard
+          v-if="isIssue(task)"
+          :issue="task"
+          :highlights="tasks.taskHighlights.get(task.id)"
+        />
+        <ColumnPatchCard
+          v-else-if="isPatch(task)"
+          :patch="task"
+          :highlights="tasks.taskHighlights.get(task.id)"
+        />
       </li>
 
       <NewColumnIssueCard

components/ColumnCard.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { taskTruncatedIdLength } from '~/constants/tasks'
+import type { TaskHighlights } from '~/types/tasks'
 
 interface Props {
   id: string
@@ -13,9 +14,39 @@ interface Props {
     }
   }
   href: string
+  highlights?: TaskHighlights
 }
 
 defineProps<Props>()
+
+/**
+ * Truncates segmented text based on a character limit.
+ *
+ * @param {string[]} segments - The segmented text to truncate.
+ * @param {number} limit - The character limit.
+ * @returns The truncated segmented text.
+ *
+ * @example
+ * ```ts
+ * truncateSegmentedText(['foo', 'bar'], 5) // ['foo', 'ba']
+ * ```
+ */
+function truncateSegmentedText(segments: string[], limit: number): string[] {
+  const truncatedText = []
+  let currentLength = 0
+
+  for (const segment of segments) {
+    if (currentLength + segment.length > limit) {
+      truncatedText.push(segment.slice(0, limit - currentLength))
+      break
+    }
+
+    truncatedText.push(segment)
+    currentLength += segment.length
+  }
+
+  return truncatedText
+}
 </script>
 
 <template>
@@ -27,24 +58,25 @@ defineProps<Props>()
       <UTooltip :text="status.name" :popper="{ placement: 'top' }">
         <Icon :name="status.icon.name" size="16" :class="status.icon.class" />
       </UTooltip>
-      <pre class="text-xs font-medium text-rad-foreground-emphasized">{{
-        id.slice(0, taskTruncatedIdLength)
-      }}</pre>
+
+      <pre
+        class="text-xs font-medium text-rad-foreground-emphasized"
+      ><TextWithHighlights :content="highlights?.id ? truncateSegmentedText(highlights?.id, taskTruncatedIdLength) :  id.slice(0, taskTruncatedIdLength)" /></pre>
     </small>
 
     <h4>
       <a :href="href" target="_blank" class="w-fit text-sm hover:underline">
-        {{ title }}
+        <TextWithHighlights :content="highlights?.title ?? title" />
       </a>
     </h4>
 
     <ul v-if="labels.length > 0" class="flex flex-wrap gap-2">
       <li
-        v-for="label in labels"
-        :key="label"
+        v-for="(label, index) in highlights?.labels ?? labels"
+        :key="labels[index]"
         class="mt-2 rounded-full bg-rad-fill-ghost px-2 py-1 text-xs font-semibold text-rad-foreground-contrast group-hover:bg-rad-background-float"
       >
-        {{ label }}
+        <TextWithHighlights :content="label" />
       </li>
     </ul>
   </article>

components/ColumnIssueCard.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import ColumnCard from './ColumnCard.vue'
-import type { Issue } from '~/types/tasks'
+import type { Issue, TaskHighlights } from '~/types/tasks'
 
 const props = defineProps<{
   issue: Issue
+  highlights?: TaskHighlights
 }>()
 
 type ColumnCardStatus = InstanceType<typeof ColumnCard>['$props']['status']
@@ -23,12 +24,32 @@ const status = computed<ColumnCardStatus>(() => ({
 const radicleInterfaceBaseUrl = useRadicleInterfaceBaseUrl()
 const isDebugging = useIsDebugging()
 
+// TODO: zac reduce duplication between ColumnIssueCard and ColumnPatchCard
 const labels = computed(() =>
   isDebugging.value
     ? props.issue.labels
     : props.issue.labels.filter((label) => !label.startsWith(dataLabelNamespace)),
 )
 
+const highlights = computed(() => {
+  if (!props.highlights) {
+    return undefined
+  }
+
+  if (isDebugging.value) {
+    return props.highlights
+  }
+
+  const filteredHighlightLabels = props.highlights.labels.filter(
+    (label) => !(label[0] ?? '').startsWith(dataLabelNamespace),
+  )
+
+  return {
+    ...props.highlights,
+    labels: filteredHighlightLabels,
+  }
+})
+
 const href = computed(() =>
   new URL(
     `/nodes/${route.params.node}/${route.params.rid}/issues/${props.issue.id}`,
@@ -45,5 +66,6 @@ const href = computed(() =>
     :labels="labels"
     :href="href"
     :status="status"
+    :highlights="highlights"
   />
 </template>

components/ColumnPatchCard.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import ColumnCard from './ColumnCard.vue'
-import type { Patch } from '~/types/tasks'
+import type { Patch, TaskHighlights } from '~/types/tasks'
 
 const props = defineProps<{
   patch: Patch
+  highlights?: TaskHighlights
 }>()
 
 type ColumnCardStatus = InstanceType<typeof ColumnCard>['$props']['status']
@@ -28,12 +29,32 @@ const status = computed<ColumnCardStatus>(() => ({
 const radicleInterfaceBaseUrl = useRadicleInterfaceBaseUrl()
 const isDebugging = useIsDebugging()
 
+// TODO: zac reduce duplication between ColumnIssueCard and ColumnPatchCard
 const labels = computed(() =>
   isDebugging.value
     ? props.patch.labels
     : props.patch.labels.filter((label) => !label.startsWith(dataLabelNamespace)),
 )
 
+const highlights = computed(() => {
+  if (!props.highlights) {
+    return undefined
+  }
+
+  if (isDebugging.value) {
+    return props.highlights
+  }
+
+  const filteredHighlightLabels = props.highlights.labels.filter(
+    (label) => !(label[0] ?? '').startsWith(dataLabelNamespace),
+  )
+
+  return {
+    ...props.highlights,
+    labels: filteredHighlightLabels,
+  }
+})
+
 const href = computed(() =>
   new URL(
     `/nodes/${route.params.node}/${route.params.rid}/patches/${props.patch.id}`,
@@ -50,5 +71,6 @@ const href = computed(() =>
     :labels="labels"
     :href="href"
     :status="status"
+    :highlights="highlights"
   />
 </template>

components/Header.vue

@@ -40,8 +40,11 @@ async function handleImport() {
 </script>
 
 <template>
-  <header class="flex justify-between gap-4 px-4">
-    <TaskKindSelect />
+  <header class="flex justify-between gap-4 p-4">
+    <div class="flex gap-4">
+      <TaskKindSelect />
+      <TaskFilterInput />
+    </div>
 
     <div class="flex gap-4">
       <a

components/IconButton.vue

@@ -2,13 +2,15 @@
 defineProps<{
   label: string
   icon: string
+  padded?: boolean
 }>()
 </script>
 
 <template>
   <button
     type="button"
-    class="w-fit rounded p-1 leading-none text-rad-foreground-dim hover:bg-rad-fill-ghost disabled:bg-transparent disabled:text-rad-foreground-disabled"
+    class="w-fit cursor-pointer rounded leading-none text-rad-foreground-dim hover:bg-rad-fill-ghost disabled:cursor-none disabled:bg-transparent disabled:text-rad-foreground-disabled"
+    :class="{ 'p-1': padded ?? true }"
   >
     <span class="sr-only">{{ label }}</span>
     <Icon :name="icon" size="20" />

components/TaskFilterInput.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { elementIds } from '~/constants/elements'
+
+defineOptions({ inheritAttrs: false })
+
+const { queryParams } = useQueryParamsStore()
+
+const inputRef = ref<HTMLInputElement>()
+const { focused } = useFocus(inputRef)
+// TODO: zac disable this while a modal is open
+useEventListener('keydown', (event) => {
+  const ctrlF = (event.ctrlKey || event.metaKey) && event.code === 'KeyF'
+  if (!ctrlF) {
+    return
+  }
+
+  event.preventDefault()
+  inputRef.value?.focus()
+})
+
+// TODO: zac disable this while a modal is open
+onKeyStroke('Escape', (event) => {
+  if (!focused) {
+    return
+  }
+
+  event.preventDefault()
+  inputRef.value?.blur()
+})
+
+const board = useBoardStore()
+const label = computed(() => {
+  switch (board.state.filter.taskKind) {
+    case 'issue':
+      return 'Filter issues'
+    case 'patch':
+      return 'Filter patches'
+    default:
+      return 'Filter'
+  }
+})
+
+// Prevents blur when clicking outside the input element
+function handleMouseDown(event: MouseEvent) {
+  if (event.target !== inputRef.value) {
+    event.preventDefault()
+  }
+}
+
+// TODO: zac pull this out into a generic utility file if reused
+function isMac() {
+  // TODO: zac look into non-deprecated alternative
+  return navigator.platform.toLowerCase().includes('mac')
+}
+const filterShortcut = `${isMac() ? 'Cmd' : 'Ctrl'}+F`
+</script>
+
+<template>
+  <form
+    :id="elementIds.taskFilterForm"
+    role="search"
+    class="flex w-96 cursor-text items-center gap-2 rounded-sm border border-rad-border-hint bg-rad-background-dip px-2 text-sm focus-within:ring-2 focus-within:ring-rad-fill-secondary hover:border-rad-border-default"
+    @click="inputRef?.focus()"
+    @mousedown="handleMouseDown"
+    @submit.prevent
+  >
+    <Icon name="octicon:filter-16" class="text-rad-foreground-dim" size="16" />
+    <input
+      v-bind="$attrs"
+      ref="inputRef"
+      v-model="queryParams.filter"
+      type="text"
+      class="h-full flex-1 bg-inherit outline-none"
+      :aria-label="label"
+      :placeholder="`${label}…`"
+    />
+    <UTooltip v-show="Boolean(queryParams.filter)" text="Clear">
+      <IconButton
+        label="Clear"
+        icon="octicon:x-16"
+        :padded="false"
+        @click="queryParams.filter = ''"
+      />
+    </UTooltip>
+    <!-- TODO: zac hide on mobile devices -->
+    <UTooltip v-show="!focused" :text="`Press ${filterShortcut} to focus`">
+      <kbd
+        class="flex h-5 min-w-5 select-none items-center justify-center rounded-sm border border-rad-border-default px-1 font-sans text-xs font-medium"
+      >
+        {{ filterShortcut }}
+      </kbd>
+    </UTooltip>
+  </form>
+</template>

components/TextWithHighlights.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+interface Props {
+  content: string | string[]
+}
+
+defineProps<Props>()
+</script>
+
+
+<template>
+  <template v-if="typeof content === 'string'">
+    {{ content }}
+  </template>
+  <template v-for="(segment, index) in content" v-else :key="index">
+    <template v-if="isEven(index)">{{ segment }}</template>
+    <mark v-else>{{ segment }}</mark>
+  </template>
+</template>