Skip to content

Commit 9bdbf77

Browse files
ryan-williamsclaude
andcommitted
feat: add mobile search button and allow Tailscale hosts
- Replace `MobileFAB` with `SearchTrigger` in floating controls - Show search button on touch devices (opens omnibar) - Allow `.ts.net` hosts via `VITE_ALLOWED_HOSTS` env var 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 0bf45d5 commit 9bdbf77

File tree

3 files changed

+24
-13
lines changed

3 files changed

+24
-13
lines changed

www/src/components/ThemeToggle.tsx

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useState, useEffect, useRef } from 'react'
2-
import { FaGithub, FaKeyboard } from 'react-icons/fa'
2+
import { FaGithub, FaKeyboard, FaSearch } from 'react-icons/fa'
33
import { MdBrightnessAuto, MdLightMode, MdDarkMode } from 'react-icons/md'
4+
import { SearchTrigger } from 'use-kbd'
45
import { useTheme } from '../contexts/ThemeContext'
56

67
interface ThemeToggleProps {
@@ -90,15 +91,21 @@ export function ThemeToggle({ onOpenShortcuts }: ThemeToggleProps) {
9091
>
9192
<FaGithub />
9293
</a>
93-
{canHover && onOpenShortcuts && (
94-
<button
95-
className="shortcuts-button"
96-
onClick={onOpenShortcuts}
97-
title="Keyboard shortcuts (?)"
98-
aria-label="Show keyboard shortcuts"
99-
>
100-
<FaKeyboard />
101-
</button>
94+
{canHover ? (
95+
onOpenShortcuts && (
96+
<button
97+
className="shortcuts-button"
98+
onClick={onOpenShortcuts}
99+
title="Keyboard shortcuts (?)"
100+
aria-label="Show keyboard shortcuts"
101+
>
102+
<FaKeyboard />
103+
</button>
104+
)
105+
) : (
106+
<SearchTrigger className="search-button" ariaLabel="Search actions">
107+
<FaSearch />
108+
</SearchTrigger>
102109
)}
103110
<button
104111
className="theme-toggle"

www/src/styles/_theme-toggle.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828

2929
.github-link,
3030
.shortcuts-button,
31+
.search-button,
3132
.theme-toggle {
3233
width: 3rem;
3334
height: 3rem;
@@ -49,7 +50,8 @@
4950
}
5051

5152
.github-link,
52-
.shortcuts-button {
53+
.shortcuts-button,
54+
.search-button {
5355
color: var(--text-primary);
5456
text-decoration: none;
5557

@@ -80,6 +82,7 @@
8082

8183
.github-link,
8284
.shortcuts-button,
85+
.search-button,
8386
.theme-toggle {
8487
width: 2.5rem;
8588
height: 2.5rem;

www/vite.config.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import react from '@vitejs/plugin-react'
22
import { defineConfig } from 'vite'
33

4+
const allowedHosts = process.env.VITE_ALLOWED_HOSTS?.split(',') ?? []
5+
46
// https://vite.dev/config/
57
export default defineConfig({
68
plugins: [react()],
79
server: {
810
port: 5150,
9-
// Allow Docker container to access dev server
10-
allowedHosts: ['host.docker.internal'],
11+
allowedHosts: ['host.docker.internal', ...allowedHosts],
1112
},
1213
resolve: {
1314
alias: {

0 commit comments

Comments
 (0)