DEV Community: Heghine

Creating a Command Palette Component in Angular (Part 2)

Heghine — Sun, 26 Apr 2026 22:43:23 +0000

Command Palette

Sources:

GitHub: https://github.com/ZeroaNinea/Command-Palette-Angular
GitHub Pages: https://zeroaninea.github.io/Command-Palette-Angular/

In this part, I implement the actual CommandPalette component and connect it to the dynamic theming system from Part 1. The result is a reusable, keyboard-driven UI component that can execute custom commands.

Command Model and Examples

Each command is an object that combines metadata (label, keywords) with behavior (handler). This allows the palette to remain generic while executing arbitrary logic.

There is a simple list of commands in the app.ts file: two alerts and commands that change the colors of palettes.

I'm planning to create more UI elements in the future, and I will add them as commands in the CommandPalette.

  commands: Command[] = [
    // id: string;
    // label: string;
    // keywords?: string[];
    // shortcut?: string;
    // payload?: unknown;
    // handler?: (payload?: unknown) => void;
    {
      id: 'alert-1',
      label: 'Alert 1',
      keywords: ['alert', '1'],
      shortcut: 'a1',
      handler: () => alert('Alert 1'),
    },
    {
      id: 'alert-2',
      label: 'Alert 2',
      keywords: ['alert', '2'],
      shortcut: 'a2',
      handler: () => alert('Alert 2'),
    },
    {
      id: 'primary-red',
      label: 'Set Primary to Red',
      handler: () => this.primary.set('#ff4d4f'),
    },
    {
      id: 'primary-blue',
      label: 'Set Primary to Blue',
      handler: () => this.primary.set('#4FC3F7'),
    },
    {
      id: 'reset',
      label: 'Reset Colors',
      handler: () => {
        this.primary.set('#4FC3F7');
        this.secondary.set('#2196F3');
        this.tertiary.set('#086CBC');
      },
    },
  ];

Importing the `CommandPalette` Component

The commands' list is passed to the CommandPalette component as the commands array.

  <app-command-palette
    [style.--cp-bg]="neutralPalette().bg"
    [style.--cp-surface]="neutralPalette().surface"
    [style.--cp-border]="neutralVariantPalette().border"
    [style.--cp-text]="neutralVariantPalette()['100']"
    [style.--cp-accent]="primaryPalette().accent"
    [style.--cp-hover]="neutralPalette().hover"
    [isOpen]="isOpen()"
    [commands]="commands"
    (isOpenChange)="isOpen.set($event)"
    (commandSelected)="onCommand($event)"
  ></app-command-palette>

The CommandPalette component also emits isOpenChange and commandSelected events. Accordingly:

The isOpenChange event is fired when the user changes the state of the CommandPalette component from shown to hidden, and back. The isOpenChange event is used to notify the parent when the palette should close (e.g., after selecting a command or clicking outside).
And the commandSelected event works when the user selects a command. It emits an entire element of the command from the commands array, and passes the required .payload to the command handler if it exists.

  onCommand(cmd: Command) {
    this.commandSelected.emit(cmd);
    cmd.handler?.(cmd.payload);
    this.isOpenChange.emit(false);
  }

  close() {
    this.isOpenChange.emit(false);
  }

Command Filtering and Keyboard Navigation

Not all commands are visible at the same time. If the user inputs something into the command palette, it filters visible commands. There are two properties that used for command filtering inside the CommandPalette component that participate in the filtering logic: query and filtered.

  @Input() commands: Command[] = [];
  @Input() isOpen: boolean = false;

  @Output() commandSelected = new EventEmitter<Command>();
  @Output() isOpenChange = new EventEmitter<boolean>();

  @ViewChild('searchInput') input!: ElementRef<HTMLInputElement>;

  query = '';
  filtered: Command[] = [];
  activeIndex = 0;

query: contains the value that user inputs into the component input.
filtered: it's the array of filtered commands.

The visibleCommands getter returns the filtered array if the user did not input queries. Otherwise, it will return the commands array received from the parent component.

  get visibleCommands(): Command[] {
    if (!this.query) return this.commands;
    return this.filtered;
  }

The filter filters commands by their label and keyboards.

  filter() {
    const q = this.query.toLowerCase();

    this.filtered = this.commands.filter(
      (cmd) =>
        cmd.label.toLowerCase().includes(q) ||
        cmd.keywords?.some((k) => k.toLowerCase().includes(q)),
    );

    this.activeIndex = 0;
  }

The filter method is bound to the input event, and it triggers only when the user inputs something.

@if (isOpen) {
  <div (click)="close()" class="overlay">
    <div (click)="$event.stopPropagation()" class="palette">
      <input
        #searchInput
        class="search"
        placeholder="Type a command..."
        [(ngModel)]="query"
        (input)="filter()"
        (keydown)="onKeydown($event)"
      />
      <div class="list">
        @for (command of visibleCommands; track $index; let i = $index) {
          <div class="item" [class.active]="i === activeIndex" (click)="onCommand(command)">
            {{ command.label }}
          </div>
        }
      </div>
    </div>
  </div>
}

There is also an onKeydown method that is bound to the keydown event. It works when the user focuses on the input and uses any key. But its logic only uses the ArrowDown, ArrowUp, Enter and Escape keys.

  onKeydown(e: KeyboardEvent) {
    const list = this.visibleCommands;

    if (!list.length) return;

    if (e.key === 'ArrowDown') {
      e.preventDefault();
      this.activeIndex = (this.activeIndex + 1) % list.length;
    }

    if (e.key === 'ArrowUp') {
      e.preventDefault();
      this.activeIndex = (this.activeIndex - 1 + list.length) % list.length;
    }

    if (e.key === 'Enter') {
      e.preventDefault();
      this.onCommand(list[this.activeIndex]);
    }

    if (e.key === 'Escape') {
      this.close();
    }

    setTimeout(() => {
      const el = document.querySelector('.item.active');
      el?.scrollIntoView({ block: 'nearest' });
    });
  }

The class .active is assigned to the element that has the same index in the visibleCommands array as the value of the activeIndex method.

When the user presses the ArrowDown or ArrowUp keys, the code decrements and increments the activeIndex, but it cannot be less than 0 and more than the length of the visibleCommands array.

The Enter key executes the function and closes the CommandPalette component. And the Escape key just closes it.

Then after iterating the conditional operations the application scrolls to the new active element.

`ngOnChanges`

The ngOnChanges lifecycle hook is used to react to changes in input properties. In this case, it listens for changes to the isOpen input.

When the command palette is opened, its internal state is reset:

the search query is cleared,
the filtered commands list is reset,
the active index is set to the first item.

This ensures that every time the palette opens, it starts in a clean and predictable state instead of preserving the previous search.

`ngAfterViewChecked`

The ngAfterViewChecked lifecycle hook runs after Angular updates the component’s view.

It is used here to automatically focus the input field when the command palette is opened.

This allows the user to start typing immediately without needing to click on the input manually.

Afterword

In this part, I implemented the core logic of the command palette: command definition, filtering, and keyboard navigation. The component is fully functional and can execute custom commands while remaining reusable and independent from specific business logic.

One of the key ideas behind this implementation is treating commands as objects that combine metadata (label, keywords, shortcut) with behavior (handler). This allows the component to stay generic while supporting a wide range of use cases.

The command palette is also integrated with the dynamic theming system created in the previous part, which makes it easy to adapt its appearance without changing the component itself.

There are still many possible improvements:

grouping commands by category,
adding icons,
highlighting matched search text,
improving accessibility and keyboard support.

I plan to continue expanding this project and use the command palette as a central interaction system for future UI components.

Creating a Command Palette Component in Angular (Part 1)

Heghine — Tue, 21 Apr 2026 22:17:18 +0000

Dynamic Palette Generation

Sources:

GitHub: https://github.com/ZeroaNinea/Command-Palette-Angular
GitHub Pages: https://zeroaninea.github.io/Command-Palette-Angular/

This is the first part of a series where I build a reusable and customizable command palette in Angular.

Since the component needs to support different themes, I started by creating a dynamic color palette generator. It takes a set of base colors and produces consistent palettes for primary, secondary, tertiary, neutral, and error roles.

Palette Generation

I've created a palette generation utility in the project's src/app/shared/utils/palette.util.ts directory. It uses the chroma-js library, and exports a single function createPalette that takes one parameter the base color of a string type, then it returns an object of Palette type.

The function generates a scale of 10 colors (from 50 to 900), similar to common design systems. These are then mapped to semantic roles like background, surface, text, and accent.

Here is the example of the code:

import chroma from 'chroma-js';
import { Palette } from '../../../types/palette.alias';

export function createPalette(base: string): Palette {
  const scale = chroma
    .scale([chroma(base).brighten(3), base, chroma(base).darken(3)])
    .mode('lab')
    .colors(10);

  return {
    50: scale[0],
    100: scale[1],
    200: scale[2],
    300: scale[3],
    400: scale[4],
    500: scale[5],
    600: scale[6],
    700: scale[7],
    800: scale[8],
    900: scale[9],

    // Semantic roles.
    bg: scale[0],
    surface: scale[8],
    surfaceAlt: scale[7],
    border: scale[6],
    text: chroma.contrast(scale[0], '#fff') > 4.5 ? '#fff' : '#000',
    textMuted: scale[3],
    accent: scale[4],
    accentHover: scale[3],
    accentActive: scale[2],

    // State colors.
    hover: chroma(base).brighten(0.5).hex(),
    active: chroma(base).darken(0.5).hex(),
    focus: chroma(base).saturate(1).hex(),

    // Base
    base: base,
  };
}

Updating the Palettes Reactively

And then in the, in the root of the project, in the app.ts file. I passed six base colors to the createPalette function as default values. I used signals and the computed function to reactively update the palettes later, when the user inputs new colors.

Here's how palettes are computed reactively using Angular signals:

import { Component, computed, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';

import { createPalette } from './shared/utils/palette.util';

import { Palette } from '../types/palette.alias';

import { CommandPalette } from './command-palette/command-palette';
import { ColorInput } from './color-input/color-input';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, CommandPalette, ColorInput],
  templateUrl: './app.html',
  styleUrl: './app.scss',
})
export class App {
  protected readonly title = signal('Command-Palette-Angular');

  primary = signal('#4FC3F7');
  secondary = signal('#2196F3');
  tertiary = signal('#086CBC');
  neutral = signal('#929CA6');
  neutralVariant = signal('#6E8E9D');
  error = signal('#E01B24');

  primaryPalette = computed<Palette>(() => createPalette(this.primary()));
  secondaryPalette = computed<Palette>(() => createPalette(this.secondary()));
  tertiaryPalette = computed<Palette>(() => createPalette(this.tertiary()));
  neutralPalette = computed<Palette>(() => createPalette(this.neutral()));
  neutralVariantPalette = computed<Palette>(() => createPalette(this.neutralVariant()));
  errorPalette = computed<Palette>(() => createPalette(this.error()));
}

After that I added the ColorInput component that reactively updates the chosen colors and emits them back to the root of the project.

The ColorInput component contains four elements positioned absolutely, label, .text-overlay, .ripple and .color-picker-overlay:

label: it's the label of the input element it raises up when user hovers or focuses on the input.
.text-overlay: overlays the text of the input when it is lowered, and disappears on focus or hover, when the label raises up.
.ripple: provides a ripple effect.
.color-picker-overlay: overlays the color picker input, but it has a pointer-events: none, it's only used for changing the color of the input on hover.

It also has two inputs .color-text and .color-picker.

The .color-text is needed to input colors as a text.
And the .color-picker uses the default browser color picker to input colors with a visual interface.

They are both working and there is no big difference which of them to use. They are both emitting the chosen color back to the App component.

<div class="input-container">
  <label>{{ label }}</label>
  <div class="text-overlay"></div>

  <div class="input">
    <input
      type="text"
      [value]="value"
      (input)="onInput($any($event.target).value)"
      class="color-text"
    />

    <div class="color-picker-wrapper" (click)="createRipple($event)">
      <input
        type="color"
        [value]="value"
        (input)="onInput($any($event.target).value)"
        class="color-picker"
      />
      <span class="ripple"></span>
      <div
        [style.background]="
          'color-mix(in oklab, var(--cp-base) 0%, ' + getColorPickerOverlayColor() + ' 20%)'
        "
        class="color-picker-overlay"
      ></div>
    </div>
  </div>
</div>

The most interesting part is that the .color-picker-overlay's color is calculated dynamically based on contrast. If the base color is dark, a lighter overlay is used, and vice versa. This ensures the hover effect remains visible regardless of the selected color.. It takes the base color, that is actually the value of the input element, and checks how light or dark it is. If it's light then it will make the overlay darker, and if it's dark the overlay will become lighter.

The .ts file of the ColorInput component looks like this:

import { Component, EventEmitter, Input, Output } from '@angular/core';

import chroma from 'chroma-js';

@Component({
  selector: 'app-color-input',
  imports: [],
  templateUrl: './color-input.html',
  styleUrl: './color-input.scss',
})
export class ColorInput {
  @Input() label = '';
  @Input() value = '#4FC3F7';
  @Output() valueChange = new EventEmitter<string>();

  getColorPickerOverlayColor() {
    return chroma.contrast(this.value, '#fff') > 4.5 ? '#fff' : '#000';
  }

  onInput(value: string) {
    this.valueChange.emit(value);
  }

  createRipple(event: MouseEvent) {
    const wrapper = event.currentTarget as HTMLElement;
    const ripple = wrapper.querySelector('.ripple') as HTMLElement;

    const rect = wrapper.getBoundingClientRect();

    const size = Math.max(rect.width, rect.height);
    const x = event.clientX - rect.left - size / 2;
    const y = event.clientY - rect.top - size / 2;

    ripple.style.width = ripple.style.height = `${size}px`;
    ripple.style.left = `${x}px`;
    ripple.style.top = `${y}px`;

    ripple.classList.remove('active');
    void ripple.offsetWidth;
    ripple.classList.add('active');
  }
}

And finally, I call the ColorInput component in the App component’s template six times, and pass them the CSS variables, the base color and accept the emitted new color.

        <app-color-input
          label="Primary"
          [value]="primary()"
          (valueChange)="primary.set($event)"
          [style.--cp-bg]="neutralPalette().bg"
          [style.--cp-text]="primaryPalette().text"
          [style.--cp-accent]="primaryPalette().accent"
          [style.--cp-border]="primaryPalette().border"
          [style.--cp-surface]="primaryPalette().surface"
          [style.--cp-base]="primaryPalette().base"
          [style.--cp-input-border]="primaryPalette()['300']"
          [style.--cp-input-label]="primaryPalette()['900']"
          [style.--cp-label-muted]="neutralPalette()['600']"
          [style.--cp-input-text]="neutralVariantPalette()['900']"
          [style.--cp-input-ripple]="primaryPalette()['100']"
        ></app-color-input>

Afterword

In the next part, I'll build the actual command palette (similar to VS Code's Ctrl + Shift + P), using this theming system. The goal is to make it fully customizable and reusable. It will allow users to create their own custom commands. They should name them and pass functions that they want to execute when the command it entered.

That component will be completely customizable. That's why I needed to create a color theme setup component first.

I Applied to Dozens of Freelance Developer Jobs on LinkedIn — Here's what Happened

Heghine — Wed, 08 Apr 2026 06:15:25 +0000

This week, my LinkedIn profile appeared 877 times.

I spent the last few days actively applying to freelance developer posts — sending messages, writing emails, and reaching out to people for React, Angular, and full-stack developers.

For long time, I didn't think deeply about the process of getting a job. I thought that building projects and learning new technologies would somehow help me start working as a freelancer.

It wasn't.

So instead of continuing to learn endlessly, I decided to do something different: I started treating LinkedIn like a real opportunity source — and began applying consistently.

What happened next was surprisingly different from what I expected.

What I Actually Did

Instead of just scrolling or learning passively, I started taking action:

Applied to multiple freelance posts every day;
Sent emails and LikedIn DMs;
Shared my work (my Real-Time Chat App and portfolio);
Shared conversations with potential clients.

I don't want to feel "ready." I just started.

What I Learned

1. Most People Don't Reply

This was the first thing I noticed. You can send multiple messages, and get no response at all. At first. it feels like rejection. But it's not.

I just how things work.

People are busy;
Posts get flooded with messages;
Many applications are ignored.

This is normal.

2. Timing Matters More Than I Expected

Applying early makes a big difference.

Posts that are:

Recently published;
Have fewer comments.

Are much more likely to get a response.

If you apply late, you're just one of many.

3. Messaging Matters

At first, I wrote very genetic messages. They didn't work well. What I worked better was being clear and direct:

What I can build;
What I've already built;
How I can help with their project.

People don't want long introductions. They want to understand quickly if you're useful.

4. A Board Tech Stack Helps — But Not in the Way I Expected

One unexpected advantage I had was knowing multiple frameworks. Since I've worked with:

Angular;
React;
React Native;
Next.js;
Vue.js;
Nest.js;
Node.js.

I didn't have to skip many posts.

I could apply to wide range of opportunities:

Frontend;
Full-stack;
Sometimes even backend-focused roles.

But this doesn't mean you need to learn everything. What actually matters is:

Being able to build real things.

The tech stack just gives you more entry points.

Real Conversations Started to Happen

After some time, I started getting responses.

Not many — but enough to notice a pattern.

I had a conversation about a JAMStack role and went through an interview.
I connected with other developers.
Some people told me they might reach out in the future.

Nothing immediate came out of it, but it felt like I was no longer just sending messages into nothing.

Eventually, I started having actual conversations with potential clients.

In one of them, I was asked:

"What are your charges for an app?"

It wasn't surprising — just a bit unexpected how quickly the conversation moved to pricing.

I tried to understand the project first and asked about the scope.

But they asked again.

So I gave a simple range:

basic MVP: around $300–800

They said they would get back to me. And maybe they will, maybe they won't. But that wasn't the important part.

The important part was that the process had changed:

From applying to having real discussions.

Advice If You're Starting

Don't wait until you feel ready;
Apply even if you don't match every requirement;
Build at least one real project;
Keep sending messages, even if most don’t reply.

Consistency matters more than perfection.

Afterword

I'm currently building and sharing my work publicly, including a Real-Time Chat Application and other ongoing projects.

I'm also open to freelance opportunities.

GitHub: https://github.com/ZeroaNinea/
Portfolio: https://heghine-app.netlify.app

I Built a Real-Time Chat App From Scratch — Then Realized That Wasn't Enough

Heghine — Mon, 30 Mar 2026 05:52:48 +0000

Source

GitHub: https://github.com/ZeroaNinea/Real-Time-Chat-App

Why I Built It

I started this project as a simple pet project to help me get a job.

I built a real-time chat application from scratch, solving problems step by step and turning it into something that actually worked.

But after finishing it, I didn't immediately start applying.

Instead, I thought:

"I need to learn more first."

So I spent the next seven months learning frameworks like React, Vue, Next.js, and Nest.js.

Only later did I realize something important:

I could have already started looking for a job.

After that, I spent two more months on LinkedIn and writing posts, but still didn't get results.

That's when it became clear:

Building projects is important.
Learning is important.
But knowing how to present yourself and reach people matters just as much.

The Biggest Challenge: WebSockets and Structure

One of the hardest parts of the project was working with WebSockets using Socket.io.

At the time:

I didn't fully understand how it worked.
I couldn't properly connect users to rooms.
all my Socket.io logic was in one huge file.

It quickly became difficult to manage.

The real issue wasn't just bugs — it was structure.

After refactoring:

I split the logic into smaller parts
separated responsibilities
made the system easier to understand

That was a turning point.

Mistakes I Made

A major mistake was not clearly separating real-time and non-real-time logic.

I relied heavily on WebSockets early on, which led to:

Mixing different types of functionality.
Unclear architecture.

If I were to rebuild it, I would:

Use REST APIs for standard operations.
Use WebSockets only where real-time updates are necessary.
Define clear boundaries from the beginning.

What I'd Improve

There's still a lot I want to improve:

Features

File uploads (images, videos, text files).
Highlighting the current channel.
Customizable themes (including dark mode variants).
Movable UI elements.

UX

Better message display and layout

Architecture

End-to-end encryption.
A separate service for encryption key rotation.

What I Learned

The biggest lesson wasn't technical.

It was this:

Building something real is necessary — but it's not enough on its own.

You also need to:

Show your work.
Communicate clearly.
Reach the right people.

Otherwise, even a solid project can go unnoticed.

Afterword

This project became more than just a chat app.

It taught me:

How to build real systems.
How to deal with complexity.
And how important visibility is.

If you're learning development, don't just build —
make sure people can actually see what you've built.

Build a Modern Stack with Vite, Tailwind, i18next, and TanStack Router

Heghine — Fri, 20 Mar 2026 13:43:58 +0000

Source: https://github.com/ZeroaNinea/React-Vite-i18next--tanstack-react-router-Tailwind-Example

Setting up a modern React project can quickly turn into dependency chaos — especially when combining routing, styling, and internationalization.

In this guide, you'll build a clean, production-ready setup using:

⚛️ React
⚡ Vite
🎨 Tailwind CSS
🌍 i18next
🧭 TanStack Router

⚠️ Warning (Version Compatibility)

Depending on your Vite version, some dependencies may not install cleanly.

If you run into issues:

npm i --force

Or consider using a slightly older version of Vite.

🚀 Step 1 — Create the Project

npm create vite@latest React-Vite-i18next-@tanstack/react-router-Tailwind-Example -- --template react-ts

🎨 Step 2 — Install Tailwind CSS

Install Talwind and its Vite plugin.

npm i tailwindcss @tailwindcss/vite

If installation fails:

npm i --force @tailwindcss/vite

Configure Vite

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Import Tailwind

@import 'tailwindcss';

🧭 Step 3 — Install TanStack Router

npm i @tanstack/react-router @tanstack/router-devtools

🔌 Step 4 — Integrate the Router

Create:

src/router.tsx

Then connect it in main.tsx:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import './index.css';
import { AppRouter } from './router.tsx';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <AppRouter />
  </StrictMode>,
);

🌍 Step 5 — Add Internationalization (i18next)

Install:

npm i i18next react-i18next

Setup i18n

Create:

src/utils/i18n/index.ts

Add your translation JSON files there.

Then import it once in your app:

import './utils/i18n';

Finally, integrate it inside your components (e.g. App.tsx).

Why This Stack?

This combination is surprisingly powerful:

Vite: instant dev server, fast builds.
Tailwind: no context switching for styling.
TanStack Router: type-safe, modern routing.
i18next: scalable internationalization.

Together, they form a minimal but production-ready architecture.

DEV Community: Heghine

Creating a Command Palette Component in Angular (Part 2)

Command Palette

Sources:

Command Model and Examples

Importing the CommandPalette Component

Command Filtering and Keyboard Navigation

ngOnChanges

ngAfterViewChecked

Afterword

Creating a Command Palette Component in Angular (Part 1)

Dynamic Palette Generation

Sources:

Palette Generation

Updating the Palettes Reactively

Afterword

I Applied to Dozens of Freelance Developer Jobs on LinkedIn — Here's what Happened

What I Actually Did

What I Learned

1. Most People Don't Reply

2. Timing Matters More Than I Expected

3. Messaging Matters

4. A Board Tech Stack Helps — But Not in the Way I Expected

Real Conversations Started to Happen

Advice If You're Starting

Afterword

I Built a Real-Time Chat App From Scratch — Then Realized That Wasn't Enough

Source

Why I Built It

The Biggest Challenge: WebSockets and Structure

Mistakes I Made

What I'd Improve

Features

UX

Architecture

What I Learned

Afterword

Build a Modern Stack with Vite, Tailwind, i18next, and TanStack Router

⚠️ Warning (Version Compatibility)

🚀 Step 1 — Create the Project

🎨 Step 2 — Install Tailwind CSS

Configure Vite

Import Tailwind

🧭 Step 3 — Install TanStack Router

🔌 Step 4 — Integrate the Router

🌍 Step 5 — Add Internationalization (i18next)

Setup i18n

Why This Stack?

Importing the `CommandPalette` Component

`ngOnChanges`

`ngAfterViewChecked`