Skip to content

feat(search): implement unified search for signals and decisions #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
siddy819 merged 2 commits into from
Mar 25, 2026
Merged

feat(search): implement unified search for signals and decisions #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c99e3c3
feat(search): implement search for signals and decisions (ref Sentine…
siddy819 Mar 25, 2026
0b67bc4
test(search): add unit tests and fix dynamic search rendering (ref Se…
siddy819 Mar 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion src/app/components/dashboard/dashboard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,8 +109,26 @@
font-size: 28px;
}

.signals-header {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}

.title-group {
display: flex;
align-items: center;
gap: 24px;
width: 100%;
}

.signals-search {
flex: 1;
max-width: 400px;
}

.section-copy {
margin: 6px 0 0;
margin: -10px 0 18px;
color: #4a5568;
}

Expand Down
7 changes: 4 additions & 3 deletions src/app/components/dashboard/dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,10 @@ <h3>No workspaces yet</h3>
</section>

<section class="content signals-section">
<div class="section-header">
<div>
<div class="section-header signals-header">
<div class="title-group">
<h2>Signals</h2>
<p class="section-copy">Slack messages and GitHub updates appear here as action-ready signals.</p>
<app-search-bar class="signals-search"></app-search-bar>
</div>
<div class="filter-row">
<button type="button" class="filter-pill" [class.active]="filters.source === 'all'" (click)="setSourceFilter('all')">All</button>
Expand All @@ -65,6 +65,7 @@ <h2>Signals</h2>
<button type="button" class="filter-pill" [class.active]="filters.status === 'unread'" (click)="setStatusFilter('unread')">Unread</button>
</div>
</div>
<p class="section-copy">Slack messages and GitHub updates appear here as action-ready signals.</p>

<app-signal-board
*ngIf="signals.length; else noSignals"
Expand Down
3 changes: 2 additions & 1 deletion src/app/components/dashboard/dashboard.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,12 @@ import { CommonModule } from '@angular/common';
import { Signal, SignalFilters } from '../../models/signal.model';
import { SignalService } from '../../services/signal.service';
import { SignalBoardComponent } from '../signal-board/signal-board';
import { SearchBarComponent } from '../search-bar/search-bar';

@Component({
selector: 'app-dashboard',
standalone: true,
imports: [CommonModule, RouterLink, SignalBoardComponent],
imports: [CommonModule, RouterLink, SignalBoardComponent, SearchBarComponent],
templateUrl: './dashboard.html',
styleUrl: './dashboard.css',
})
Expand Down
212 changes: 212 additions & 0 deletions src/app/components/search-bar/search-bar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
.search-container {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
z-index: 100;
}

.search-input-wrapper {
position: relative;
display: flex;
align-items: center;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 12px;
padding: 0 16px;
height: 48px;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.search-input-wrapper:focus-within {
background: #ffffff;
border-color: var(--primary-color, #6366f1);
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1), 0 2px 12px rgba(0, 0, 0, 0.08);
}

.search-icon {
color: rgba(0, 0, 0, 0.4);
margin-right: 12px;
display: flex;
}

.search-input {
flex: 1;
background: transparent;
border: none;
color: #1a1b26;
font-size: 15px;
outline: none;
width: 100%;
}

.search-input::placeholder {
color: rgba(0, 0, 0, 0.3);
}

.results-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
overflow: hidden;
max-height: 450px;
display: flex;
flex-direction: column;
}

.search-filters {
display: flex;
gap: 8px;
padding: 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
background: rgba(0, 0, 0, 0.02);
}

.filter-btn {
background: rgba(0, 0, 0, 0.05);
border: none;
color: #4a5568;
padding: 6px 12px;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}

.filter-btn.active {
background: var(--primary-color, #6366f1);
color: white;
}

.results-list {
overflow-y: auto;
padding: 8px 0;
}

.result-item {
display: flex;
align-items: center;
padding: 12px 16px;
cursor: pointer;
transition: background 0.2s;
}

.result-item:hover {
background: rgba(0, 0, 0, 0.03);
}

.result-type-icon {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
margin-right: 12px;
flex-shrink: 0;
}

.result-type-icon.slack { background: rgba(74, 21, 75, 0.1); color: #e01e5a; }
.result-type-icon.github { background: rgba(0, 0, 0, 0.05); color: #1a1b26; }
.result-type-icon.decision { background: rgba(99, 102, 241, 0.1); color: #4f46e5; }

.result-content {
flex: 1;
min-width: 0;
}

.result-title {
color: #1a1b26;
font-size: 14px;
font-weight: 500;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.result-preview {
color: #718096;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.result-meta {
font-size: 11px;
color: #a0aec0;
margin-left: 12px;
}

.recent-searches {
padding: 12px 0;
}

.recent-header {
display: flex;
justify-content: space-between;
padding: 0 16px 8px;
font-size: 12px;
color: #a0aec0;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.clear-btn {
background: transparent;
border: none;
color: var(--primary-color, #6366f1);
cursor: pointer;
font-size: 11px;
}

.recent-item {
display: flex;
align-items: center;
padding: 10px 16px;
gap: 12px;
color: #4a5568;
font-size: 14px;
cursor: pointer;
}

.recent-item:hover {
background: rgba(0, 0, 0, 0.03);
}

.no-results {
padding: 24px;
text-align: center;
color: #718096;
font-size: 14px;
}

mark {
background: rgba(99, 102, 241, 0.15);
color: #4f46e5;
padding: 0 2px;
border-radius: 2px;
font-weight: 500;
}

.spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(0, 0, 0, 0.1);
border-top-color: var(--primary-color, #6366f1);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}

@keyframes spin {
to { transform: rotate(360deg); }
}
69 changes: 69 additions & 0 deletions src/app/components/search-bar/search-bar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<div class="search-container">
<div class="search-input-wrapper">
<div class="search-icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</div>
<input
#searchInput
type="text"
[(ngModel)]="query"
(ngModelChange)="onSearchChange()"
(focus)="showResults = true"
placeholder="Search across signals and decisions..."
class="search-input"
>
<div class="search-loader" *ngIf="isSearching">
<div class="spinner"></div>
</div>
</div>

<div class="results-dropdown" *ngIf="showResults && (query.length >= 2 || recentSearches.length > 0)">
<!-- Filters -->
<div class="search-filters" *ngIf="query.length >= 2">
<button class="filter-btn" [class.active]="sourceFilter === 'all'" (mousedown)="$event.preventDefault()" (click)="onFilterChange('all')">All</button>
<button class="filter-btn" [class.active]="sourceFilter === 'slack'" (mousedown)="$event.preventDefault()" (click)="onFilterChange('slack')">Slack</button>
<button class="filter-btn" [class.active]="sourceFilter === 'github'" (mousedown)="$event.preventDefault()" (click)="onFilterChange('github')">GitHub</button>
<button class="filter-btn" [class.active]="sourceFilter === 'decision'" (mousedown)="$event.preventDefault()" (click)="onFilterChange('decision')">Decisions</button>
</div>

<!-- Results -->
<div class="results-list" *ngIf="query.length >= 2">
<div *ngIf="results.length === 0 && !isSearching" class="no-results">
No matches found for "{{query}}"
</div>

<div *ngFor="let res of results" class="result-item" (mousedown)="$event.preventDefault()" (click)="selectResult(res)">
<div class="result-type-icon" [ngClass]="res.source">
<span *ngIf="res.source === 'slack'">#</span>
<span *ngIf="res.source === 'github'">GH</span>
<span *ngIf="res.source === 'decision'">D</span>
</div>
<div class="result-content">
<div class="result-title" [innerHTML]="highlightMatch(res.title)"></div>
<div class="result-preview" [innerHTML]="highlightMatch(res.content)"></div>
</div>
<div class="result-meta">
{{ res.date | date:'shortDate' }}
</div>
</div>
</div>

<!-- Recent Searches -->
<div class="recent-searches" *ngIf="query.length < 2 && recentSearches.length > 0">
<div class="recent-header">
<span>Recent Searches</span>
<button (mousedown)="$event.preventDefault()" (click)="clearRecent()" class="clear-btn">Clear</button>
</div>
<div *ngFor="let s of recentSearches" class="recent-item" (mousedown)="$event.preventDefault()" (click)="useRecentSearch(s)">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="23 4 23 10 17 10"></polyline>
<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
</svg>
<span>{{ s }}</span>
</div>
</div>
</div>
</div>
Loading
Loading