feat: add /gif slash command for inline GIF search

[eugene-bert]

Summary

#56

• Type /gif in any comment box to browse trending GIFs
• Type /gif cats to search directly
• Selecting a GIF replaces the slash command text with the image tag
• Opt-in via extension options (disabled by default), as requested in Idea - show .gif selector on writing /giphy - similar to slack approach #56

Changes

• New: src/lib/slash-command.js — slash command handler
• Updated: src/main.js — conditional initialization
• Updated: src/lib/settings.js — added enableSlashCommand setting
• Updated: src/options.html / src/options.js — toggle checkbox
• Updated: src/style.css — floating popup styles

Test plan

• /gif shows trending GIFs popup
• /gif cats searches and shows results
• /gif cat running refines search with debounce
• Clicking a GIF replaces command text with <img> tag
• Escape dismisses popup
• Click outside dismisses popup
• Feature disabled by default, toggle works in options

[N1ck]

Thanks for putting this together! I’m really happy you’ve contributed this, and I’d love to get slash commands in.

I’ve left some comments on cases where comment text could get overwritten or searches could show the wrong results. I’d like to get those sorted before merging so it’s reliable for existing users.

[N1ck]

A's GIF is inserted into comment B using A's offsets if A's selection is dismissed and a command starts in B while the settings read is delayed. Could we capture the original editor and match and recheck both after the await?

[eugene-bert]

Fixed here: a4f28ed ☺️

[N1ck]

A queued search survives Escape and can replace the results for a command opened in another comment box within the 400 ms delay. Could we cancel the pending debounce when hiding the popup or changing editors?

[eugene-bert]

Fixed here: a4f28ed ☺️

[eugene-bert]

Thanks for the thorough review! All great catches — addressed everything ☺️ Let me know if anything else needs tweaking! 🤔

󰄛 ❯ npm test

> github-gifs@1.2.11 test
> run-s lint build


> github-gifs@1.2.11 lint
> run-p lint:* --continue-on-error


> github-gifs@1.2.11 lint:js
> eslint .


> github-gifs@1.2.11 lint:css
> stylelint src/**/*.css


> github-gifs@1.2.11 build
> webpack

assets by path images/*.png 16.4 KiB
  asset images/powered-by-giphy.png 9.06 KiB [compared for emit] [from: src/images/powered-by-giphy.png] [copied]
  asset images/icon128.png 4.98 KiB [compared for emit] [from: src/images/icon128.png] [copied]
  asset images/icon48.png 1.77 KiB [compared for emit] [from: src/images/icon48.png] [copied]
  asset images/icon16.png 571 bytes [compared for emit] [from: src/images/icon16.png] [copied]
assets by path *.js 358 KiB
  asset main.js 192 KiB [compared for emit] (name: main) 1 related asset
  asset background.js 125 KiB [compared for emit] (name: background) 1 related asset
  asset options.js 41 KiB [compared for emit] (name: options) 1 related asset
asset style.css 3.26 KiB [compared for emit] [from: src/style.css] [copied]
asset options.html 3.21 KiB [compared for emit] [from: src/options.html] [copied]
asset manifest.json 1.34 KiB [compared for emit] [from: src/manifest.json] [copied]
runtime modules 1.66 KiB 9 modules
modules by path ./node_modules/ 173 KiB 49 modules
modules by path ./src/ 48.6 KiB
  modules by path ./src/lib/*.js 18.3 KiB 8 modules
  modules by path ./src/*.js 19.3 KiB 3 modules
  modules by path ./src/components/*.js 1.88 KiB
    ./src/components/gif-toolbar-item.js 1.06 KiB [built] [code generated]
    ./src/components/loading-indicator.js 837 bytes [built] [code generated]
  modules by path ./src/*.css 9.15 KiB
    ./src/style.css 1.1 KiB [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./src/style.css 8.05 KiB [built] [code generated]
webpack 5.111.1 compiled successfully in 475 ms