init

src/App.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import HomePage from './pages/HomePage'
+
+const App: React.FC = () => <HomePage />
+
+export default App

src/components/AppCard.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+export interface AppCardProps {
+  name: string
+  imageUrl: string
+  url: string
+  useProxy?: boolean
+}
+
+const AppCard: React.FC<AppCardProps> = ({ name, imageUrl, url, useProxy }) => {
+  const openApp = () => {
+    window.electron?.createView(name, url, imageUrl, 1.0, useProxy ?? false)
+  }
+
+  return (
+    <div className="app-card" onClick={openApp}>
+      {imageUrl ? (
+        <img src={imageUrl} alt={name} />
+      ) : (
+        <div className="app-card-icon-placeholder">{name.charAt(0).toUpperCase()}</div>
+      )}
+      <h3>{name}</h3>
+    </div>
+  )
+}
+
+export default AppCard

src/components/AppList.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import AppCard, { AppCardProps } from './AppCard'
+import BookmarksBar from './BookmarksBar'
+import { Bookmark } from './Settings'
+
+interface AppListProps {
+  apps: AppCardProps[]
+  bookmarks: Bookmark[]
+  onBookmarkOpen: (b: Bookmark) => void
+  onBookmarkRemove: (index: number) => void
+}
+
+const AppList: React.FC<AppListProps> = ({ apps, bookmarks, onBookmarkOpen, onBookmarkRemove }) => {
+  return (
+    <div className="app-list">
+      <BookmarksBar bookmarks={bookmarks} onOpen={onBookmarkOpen} onRemove={onBookmarkRemove} />
+      {apps.length === 0 ? (
+        <div className="app-list-empty">
+          <p>Нет приложений.</p>
+          <p>Откройте настройки (шестерёнка) и добавьте сайты.</p>
+        </div>
+      ) : (
+        apps.map((card, i) => (
+          <AppCard
+            key={i}
+            name={card.name}
+            imageUrl={card.imageUrl}
+            url={card.url}
+            useProxy={card.useProxy}
+          />
+        ))
+      )}
+    </div>
+  )
+}
+
+export default AppList

src/components/BookmarksBar.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react'
+import { Bookmark } from './Settings'
+
+interface BookmarksBarProps {
+  bookmarks: Bookmark[]
+  onOpen: (b: Bookmark) => void
+  onRemove: (index: number) => void
+}
+
+const BookmarksBar: React.FC<BookmarksBarProps> = ({ bookmarks, onOpen, onRemove }) => {
+  const [expanded, setExpanded] = useState(false)
+
+  if (!bookmarks.length) return null
+
+  return (
+    <div className="bookmarks-bar">
+      <div className="bookmarks-bar-header" onClick={() => setExpanded(e => !e)}>
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
+        </svg>
+        <span>Закладки ({bookmarks.length})</span>
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+          {expanded ? <polyline points="18 15 12 9 6 15" /> : <polyline points="6 9 12 15 18 9" />}
+        </svg>
+      </div>
+
+      <div className={`bookmarks-collapse${expanded ? ' open' : ''}`}>
+        <div className="bookmarks-collapse-inner">
+        <div className="bookmarks-list">
+          {bookmarks.map((b, i) => (
+            <div key={i} className="bookmark-card" onClick={() => onOpen(b)}>
+              <div className="bookmark-poster">
+                {b.poster
+                  ? <img src={b.poster} alt={b.title} />
+                  : <div className="bookmark-poster-placeholder">{b.title.charAt(0).toUpperCase()}</div>
+                }
+              </div>
+              <div className="bookmark-info">
+                <div className="bookmark-title">{b.title}</div>
+                {b.source && <div className="bookmark-source">{b.source}</div>}
+              </div>
+              <button
+                className="bookmark-remove"
+                onClick={e => { e.stopPropagation(); onRemove(i) }}
+                title="Удалить закладку"
+              >✕</button>
+            </div>
+          ))}
+        </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default BookmarksBar

src/components/Header.tsx

@@ -0,0 +1,243 @@
+import React, { useState, useEffect, useRef } from 'react'
+import Settings from './Settings'
+import { AppEntry } from './Settings'
+
+interface HeaderProps {
+  activeApp: string
+  setActiveApp: (name: string) => void
+  onAppsChange: (apps: AppEntry[]) => void
+  onMovieSearch: (query: string) => void
+  onBookmark: (title: string, url: string, poster: string, source: string) => void
+  onBookmarkRemove: (index: number) => void
+  bookmarks: import('./Settings').Bookmark[]
+}
+
+const Header: React.FC<HeaderProps> = ({ activeApp, setActiveApp, onAppsChange, onMovieSearch, onBookmark, onBookmarkRemove, bookmarks }) => {
+  const [isCollapsed, setIsCollapsed] = useState(false)
+  const [isHovered, setIsHovered] = useState(false)
+  const [leftDisabled, setLeftDisabled] = useState(true)
+  const [rightDisabled, setRightDisabled] = useState(true)
+  const [refreshDisabled, setRefreshDisabled] = useState(true)
+  const [showSettings, setShowSettings] = useState(false)
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const activeAppRef = useRef(activeApp)
+  useEffect(() => { activeAppRef.current = activeApp }, [activeApp])
+
+  useEffect(() => {
+    if (!window.electron) return
+    const offCloseApp = window.electron.on('closeApp', () => {
+      window.electron!.removeView(activeAppRef.current)
+      setIsCollapsed(false)
+      setActiveApp('home')
+    })
+    const offWebButtons = window.electron.on('updateWebButtons', (app: { historyPosition: number; history: string[] }) => {
+      setLeftDisabled(app.historyPosition === 0)
+      setRightDisabled(app.historyPosition === app.history.length - 1)
+      setRefreshDisabled(false)
+    })
+    return () => { offCloseApp(); offWebButtons() }
+  }, [setActiveApp])
+
+  const closeCurrentApp = () => {
+    window.electron?.confirm('Закрыть приложение?', 'closeApp')
+  }
+
+  const openSettings = () => {
+    if (appOpen) window.electron?.hideView()
+    setShowSettings(true)
+  }
+
+  const closeSettings = () => {
+    setShowSettings(false)
+    if (appOpen) window.electron?.showView(activeApp)
+  }
+
+  const toggleCollapse = () => {
+    if (isCollapsed) {
+      setIsCollapsed(false)
+      setIsHovered(false)
+      window.electron?.expandWithHeader()
+    } else {
+      setIsCollapsed(true)
+      window.electron?.collapseWithHeader()
+    }
+  }
+
+  const handleMouseEnter = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    timeoutRef.current = setTimeout(() => {
+      if (isCollapsed) {
+        setIsHovered(true)
+        window.electron?.expandWithHeader()
+      }
+    }, 150)
+  }
+
+  const handleMouseLeave = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    timeoutRef.current = setTimeout(() => {
+      if (isCollapsed) {
+        setIsHovered(false)
+        window.electron?.collapseWithHeader()
+      }
+    }, 150)
+  }
+
+  const backwardPage = () => {
+    setLeftDisabled(true)
+    setRightDisabled(true)
+    setRefreshDisabled(true)
+    window.electron?.backwardPage()
+  }
+
+  const forwardPage = () => {
+    setLeftDisabled(true)
+    setRightDisabled(true)
+    setRefreshDisabled(true)
+    window.electron?.forwardPage()
+  }
+
+  const refreshPage = () => {
+    setRefreshDisabled(true)
+    window.electron?.refreshPage()
+  }
+
+  const appOpen = activeApp !== 'home' && activeApp !== 'movie-search'
+  const showSearchIcon = activeApp === 'home' || activeApp === 'movie-search'
+
+  const [isBookmarked, setIsBookmarked] = useState(false)
+
+  const handleBookmark = () => {
+    window.electron?.getCurrentPage().then((page: any) => {
+      if (!page) return
+      let pageHost = ''
+      try { pageHost = new URL(page.url).hostname } catch (_) {}
+      const existingIdx = bookmarks.findIndex(b => {
+        try { return new URL(b.url).hostname === pageHost } catch (_) { return false }
+      })
+      if (existingIdx !== -1) {
+        onBookmarkRemove(existingIdx)
+        setIsBookmarked(false)
+      } else {
+        onBookmark(page.name, page.url, page.imageUrl || '', '')
+        setIsBookmarked(true)
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (!appOpen) { setIsBookmarked(false); return }
+    window.electron?.getCurrentPage().then((page: any) => {
+      if (!page) return
+      let pageHost = ''
+      try { pageHost = new URL(page.url).hostname } catch (_) {}
+      setIsBookmarked(bookmarks.some(b => {
+        try { return new URL(b.url).hostname === pageHost } catch (_) { return false }
+      }))
+    })
+  }, [activeApp, bookmarks, appOpen])
+
+  return (
+    <>
+      <div
+        className={`header ${isCollapsed && !isHovered ? 'collapsed' : 'expanded'}`}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        {(!isCollapsed || isHovered) && (
+          <>
+            <div className="header-left">
+              <div className="header-btn" onClick={openSettings} title="Настройки">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#aaa" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <circle cx="12" cy="12" r="3" />
+                  <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+                </svg>
+              </div>
+            </div>
+
+            <div className="header-center">
+              {appOpen && (
+                <>
+                  <button
+                    className={`header-btn nav-btn${leftDisabled ? ' disabled' : ''}`}
+                    onClick={leftDisabled ? undefined : backwardPage}
+                    title="Назад"
+                  >
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                      <polyline points="15 18 9 12 15 6" />
+                    </svg>
+                  </button>
+                  <button
+                    className={`header-btn nav-btn${rightDisabled ? ' disabled' : ''}`}
+                    onClick={rightDisabled ? undefined : forwardPage}
+                    title="Вперёд"
+                  >
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                      <polyline points="9 18 15 12 9 6" />
+                    </svg>
+                  </button>
+                  <button
+                    className={`header-btn nav-btn${refreshDisabled ? ' disabled' : ''}`}
+                    onClick={refreshDisabled ? undefined : refreshPage}
+                    title="Обновить"
+                  >
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                      <polyline points="23 4 23 10 17 10" />
+                      <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
+                    </svg>
+                  </button>
+                  <button className="header-btn nav-btn" onClick={handleBookmark} title={isBookmarked ? 'Удалить закладку' : 'В закладки'}>
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill={isBookmarked ? '#f5c518' : 'none'} stroke={isBookmarked ? '#f5c518' : 'currentColor'} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                      <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
+                    </svg>
+                  </button>
+                  <button
+                    className="header-btn nav-btn"
+                    onClick={toggleCollapse}
+                    title={isCollapsed ? 'Развернуть шапку' : 'Свернуть шапку'}
+                  >
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                      {isCollapsed
+                        ? <polyline points="6 9 12 15 18 9" />
+                        : <polyline points="18 15 12 9 6 15" />
+                      }
+                    </svg>
+                  </button>
+                </>
+              )}
+            </div>
+
+            <div className="header-right">
+              {showSearchIcon && (
+                <button
+                  className={`header-btn nav-btn${activeApp === 'movie-search' ? ' active' : ''}`}
+                  onClick={() => onMovieSearch('')}
+                  title="Поиск фильмов"
+                >
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                    <circle cx="11" cy="11" r="7" />
+                    <line x1="21" y1="21" x2="16.65" y2="16.65" />
+                  </svg>
+                </button>
+              )}
+              {appOpen && (
+                <button className="header-btn header-close-btn" onClick={closeCurrentApp} title="Закрыть приложение">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+                    <line x1="18" y1="6" x2="6" y2="18" />
+                    <line x1="6" y1="6" x2="18" y2="18" />
+                  </svg>
+                </button>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+
+      {showSettings && (
+        <Settings onClose={closeSettings} onAppsChange={onAppsChange} />
+      )}
+    </>
+  )
+}
+
+export default Header

src/components/MovieSearch.tsx

@@ -0,0 +1,535 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react'
+import { MovieSite } from './Settings'
+
+const Select: React.FC<{
+  value: string
+  onChange: (v: string) => void
+  options: { value: string; label: string }[]
+  placeholder?: string
+}> = ({ value, onChange, options, placeholder }) => {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  const selected = options.find(o => o.value === value)
+
+  useEffect(() => {
+    if (!open) return
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  return (
+    <div ref={ref} className={`ms-select${open ? ' open' : ''}`} onClick={() => setOpen(o => !o)}>
+      <div className="ms-select-trigger">
+        <span className={selected && selected.value ? 'ms-select-active' : 'ms-select-placeholder'}>
+          {selected ? selected.label : (placeholder ?? '')}
+        </span>
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </div>
+      {open && (
+        <div className="ms-select-dropdown" onClick={e => e.stopPropagation()}>
+          {options.map(o => (
+            <div
+              key={o.value}
+              className={`ms-select-opt${o.value === value ? ' active' : ''}`}
+              onClick={() => { onChange(o.value); setOpen(false) }}
+            >{o.label}</div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface TmdbMovie {
+  id: number
+  mediaType: 'movie' | 'tv'
+  title: string
+  originalTitle: string
+  year: string
+  poster: string
+  overview: string
+  rating: string
+}
+
+interface SiteResult {
+  title: string
+  url: string
+  poster?: string
+  year?: string
+  source: string
+}
+
+interface MovieSearchProps {
+  onOpenUrl: (name: string, url: string) => void
+  onBookmark?: (title: string, url: string, poster: string, source: string) => void
+  initialQuery?: string
+}
+
+const MOVIE_GENRES = [
+  { id: 28, name: 'Боевик' }, { id: 12, name: 'Приключения' }, { id: 16, name: 'Мультфильм' },
+  { id: 35, name: 'Комедия' }, { id: 80, name: 'Криминал' }, { id: 99, name: 'Документальный' },
+  { id: 18, name: 'Драма' }, { id: 10751, name: 'Семейный' }, { id: 14, name: 'Фэнтези' },
+  { id: 36, name: 'История' }, { id: 27, name: 'Ужасы' }, { id: 9648, name: 'Детектив' },
+  { id: 10749, name: 'Мелодрама' }, { id: 878, name: 'Фантастика' }, { id: 53, name: 'Триллер' },
+  { id: 10752, name: 'Военный' }, { id: 37, name: 'Вестерн' },
+]
+
+const TV_GENRES = [
+  { id: 10759, name: 'Боевик' }, { id: 16, name: 'Мультфильм' }, { id: 35, name: 'Комедия' },
+  { id: 80, name: 'Криминал' }, { id: 99, name: 'Документальный' }, { id: 18, name: 'Драма' },
+  { id: 10751, name: 'Семейный' }, { id: 10762, name: 'Детское' }, { id: 9648, name: 'Детектив' },
+  { id: 10765, name: 'Фантастика' }, { id: 10768, name: 'Политика' }, { id: 37, name: 'Вестерн' },
+]
+
+const SORTS = [
+  { value: 'popularity.desc', label: 'Популярные' },
+  { value: 'vote_average.desc', label: 'По рейтингу' },
+  { value: 'release_date.desc', label: 'Новые' },
+  { value: 'revenue.desc', label: 'По сборам' },
+]
+
+const RATINGS = [
+  { value: '', label: 'Любой' },
+  { value: '5', label: '5+' },
+  { value: '6', label: '6+' },
+  { value: '7', label: '7+' },
+  { value: '8', label: '8+' },
+  { value: '9', label: '9+' },
+]
+
+const COUNTRIES = [
+  { value: '', label: 'Страна' },
+  { value: 'US', label: 'США' },
+  { value: 'RU', label: 'Россия' },
+  { value: 'GB', label: 'Великобритания' },
+  { value: 'FR', label: 'Франция' },
+  { value: 'DE', label: 'Германия' },
+  { value: 'IT', label: 'Италия' },
+  { value: 'ES', label: 'Испания' },
+  { value: 'JP', label: 'Япония' },
+  { value: 'KR', label: 'Южная Корея' },
+  { value: 'CN', label: 'Китай' },
+  { value: 'IN', label: 'Индия' },
+  { value: 'SE', label: 'Швеция' },
+  { value: 'DK', label: 'Дания' },
+  { value: 'TR', label: 'Турция' },
+]
+
+const CURRENT_YEAR = new Date().getFullYear()
+const YEARS = Array.from({ length: CURRENT_YEAR - 1899 }, (_, i) => CURRENT_YEAR + 1 - i)
+
+const StarIcon = () => (
+  <svg width="11" height="11" viewBox="0 0 24 24" fill="#f5c518" stroke="none">
+    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+  </svg>
+)
+
+const MovieSearch: React.FC<MovieSearchProps> = ({ onOpenUrl, onBookmark, initialQuery = '' }) => {
+  const [query, setQuery] = useState(initialQuery)
+  const [mediaType, setMediaType] = useState<'movie' | 'tv'>('movie')
+  const [sortBy, setSortBy] = useState('popularity.desc')
+  const [genreId, setGenreId] = useState<number | null>(null)
+  const [year, setYear] = useState('')
+  const [minRating, setMinRating] = useState('')
+  const [country, setCountry] = useState('')
+  const [page, setPage] = useState(1)
+  const [totalPages, setTotalPages] = useState(1)
+
+  const [activeQuery, setActiveQuery] = useState(initialQuery) // committed query (on Enter)
+  const [tmdbResults, setTmdbResults] = useState<TmdbMovie[]>([])
+  const [selected, setSelected] = useState<TmdbMovie | null>(null)
+  const [siteResults, setSiteResults] = useState<SiteResult[]>([])
+  const [tmdbLoading, setTmdbLoading] = useState(false)
+  const [sitesLoading, setSitesLoading] = useState(false)
+  const [loadingMore, setLoadingMore] = useState(false)
+  const [message, setMessage] = useState('')
+  const [apiKey, setApiKey] = useState('')
+  const [sites, setSites] = useState<MovieSite[]>([])
+  const [configLoaded, setConfigLoaded] = useState(false)
+
+  const isSearchMode = activeQuery.trim().length > 0
+  const genres = mediaType === 'tv' ? TV_GENRES : MOVIE_GENRES
+
+  useEffect(() => {
+    window.electron?.readConfig().then((cfg: any) => {
+      let enabled: MovieSite[] = (cfg?.movieSites ?? []).filter((s: MovieSite) => s.enabled !== false)
+      const NON_MOVIE = /youtube|rutube|vk\.com|ok\.ru|google|yandex|mail\.ru|twitch|tiktok|instagram|facebook|twitter|telegram/i
+      if (!enabled.length && cfg?.apps?.length) {
+        enabled = cfg.apps
+          .filter((app: any) => { try { return !NON_MOVIE.test(new URL(app.url).hostname) } catch { return false } })
+          .map((app: any) => {
+            let domain = app.url
+            try { domain = new URL(app.url).hostname } catch (_) {}
+            const type: MovieSite['type'] = /rezka/.test(domain) ? 'hdrezka' : /filmix/.test(domain) ? 'filmix' : 'dle'
+            return { domain, type, enabled: true }
+          })
+      }
+      const key: string = cfg?.tmdbApiKey ?? ''
+      setSites(enabled)
+      setApiKey(key)
+      setConfigLoaded(true)
+      if (initialQuery) {
+        if (key) doTmdbSearch(initialQuery, key)
+        else doSiteSearch(initialQuery, enabled, undefined, undefined)
+      }
+    })
+  }, [])
+
+  // Auto-load discover when config ready or filters change (discover mode only)
+  const discoverRef = useRef(0)
+  const doDiscover = useCallback(async (key: string, pg: number, append: boolean) => {
+    const token = ++discoverRef.current
+    if (append) setLoadingMore(true)
+    else { setTmdbLoading(true); setMessage('') }
+    try {
+      const res = await window.electron!.discoverTmdb({ apiKey: key, mediaType, sortBy, genreId, year, minRating, country, page: pg })
+      if (token !== discoverRef.current) return
+      if (res.error) { setMessage(`Ошибка: ${res.error}`); return }
+      setTmdbResults(prev => append ? [...prev, ...res.results] : res.results)
+      setTotalPages(res.totalPages)
+      if (!res.results.length && !append) setMessage('Ничего не найдено')
+    } catch {
+      if (token === discoverRef.current) setMessage('Ошибка загрузки')
+    } finally {
+      if (token === discoverRef.current) { setTmdbLoading(false); setLoadingMore(false) }
+    }
+  }, [mediaType, sortBy, genreId, year, minRating, country])
+
+  useEffect(() => {
+    if (!configLoaded || !apiKey || isSearchMode) return
+    setPage(1)
+    setTmdbResults([])
+    doDiscover(apiKey, 1, false)
+  }, [configLoaded, apiKey, mediaType, sortBy, genreId, year, minRating, country, isSearchMode])
+
+  const searchRef = useRef(0)
+  const doTmdbSearch = async (q: string, key: string) => {
+    const token = ++searchRef.current
+    setTmdbLoading(true)
+    setMessage('')
+    setTmdbResults([])
+    setSelected(null)
+    setSiteResults([])
+    try {
+      const res = await window.electron!.searchTmdb(q, key)
+      if (token !== searchRef.current) return
+      if (res.error) { setMessage(`Ошибка TMDB: ${res.error}`); return }
+      setTmdbResults(res.results)
+      setTotalPages(1)
+      if (!res.results.length) setMessage('Ничего не найдено')
+    } catch {
+      if (token === searchRef.current) setMessage('Ошибка TMDB')
+    } finally {
+      if (token === searchRef.current) setTmdbLoading(false)
+    }
+  }
+
+  const doSiteSearch = async (q: string, sitesToSearch: MovieSite[], yearHint?: string, mt?: string) => {
+    if (!sitesToSearch.length) { setMessage('Нет активных сайтов. Добавьте в Настройки → Поиск фильмов.'); return }
+    setSitesLoading(true)
+    setMessage('')
+    setSiteResults([])
+    try {
+      const data = await window.electron!.searchMovies(q, sitesToSearch)
+      let filtered = data
+      if (yearHint) {
+        const y = parseInt(yearHint)
+        const isTv = mt === 'tv'
+        const yearDist = (r: SiteResult) => r.year ? Math.abs(parseInt(r.year) - y) : 0.5
+        const normalizeTitle = (t: string) => t.toLowerCase().replace(/[^а-яёa-z0-9]/gi, ' ').replace(/\s+/g, ' ').trim()
+        const groups = new Map<string, SiteResult[]>()
+        for (const r of data) {
+          const key = normalizeTitle(r.title)
+          if (!groups.has(key)) groups.set(key, [])
+          groups.get(key)!.push(r)
+        }
+        const deduped: SiteResult[] = []
+        for (const group of groups.values()) {
+          const minDist = Math.min(...group.map(yearDist))
+          deduped.push(...group.filter(r => yearDist(r) === minDist))
+        }
+        filtered = isTv
+          ? deduped.sort((a, b) => yearDist(a) - yearDist(b))
+          : deduped.filter(r => !r.year || yearDist(r) <= 1).sort((a, b) => yearDist(a) - yearDist(b))
+      }
+      setSiteResults(filtered)
+      if (!filtered.length) setMessage('Не найдено ни на одном сайте')
+    } catch {
+      setMessage('Ошибка поиска по сайтам')
+    } finally {
+      setSitesLoading(false)
+    }
+  }
+
+  const handleSearch = () => {
+    const q = query.trim()
+    if (!q) return
+    setActiveQuery(q)
+    if (apiKey) doTmdbSearch(q, apiKey)
+    else doSiteSearch(q, sites, undefined, undefined)
+  }
+
+  const handleSelectMovie = (movie: TmdbMovie) => {
+    setSelected(movie)
+    setSiteResults([])
+    setMessage('')
+    const searchTitle = movie.title || movie.originalTitle
+    doSiteSearch(searchTitle, sites, movie.year, movie.mediaType)
+    if (movie.originalTitle && movie.originalTitle !== movie.title) {
+      window.electron!.searchMovies(movie.originalTitle, sites).then(extra => {
+        setSiteResults(prev => {
+          const existing = new Set(prev.map(r => r.url))
+          return [...prev, ...extra.filter(r => !existing.has(r.url))]
+        })
+      }).catch(() => {})
+    }
+  }
+
+  const handleBack = () => { setSelected(null); setSiteResults([]); setMessage('') }
+
+  const handleLoadMore = () => {
+    const nextPage = page + 1
+    setPage(nextPage)
+    doDiscover(apiKey, nextPage, true)
+  }
+
+  const handleFilterChange = (fn: () => void) => {
+    setSelected(null)
+    setSiteResults([])
+    fn()
+  }
+
+  const clearQuery = () => {
+    setQuery('')
+    setActiveQuery('')
+    setTmdbResults([])
+    setMessage('')
+  }
+
+  const loading = tmdbLoading || sitesLoading
+
+  const MovieCard = ({ movie, idx }: { movie: TmdbMovie; idx: number }) => (
+    <div
+      className="movie-result-card"
+      style={{ animationDelay: `${idx * 30}ms` }}
+      onClick={() => handleSelectMovie(movie)}
+    >
+      <div className="movie-result-poster">
+        {movie.poster
+          ? <img src={movie.poster} alt={movie.title} onError={e => { (e.target as HTMLImageElement).style.display = 'none'; (e.target as HTMLImageElement).nextElementSibling?.removeAttribute('style') }} />
+          : null
+        }
+        <div className="movie-result-poster-placeholder" style={movie.poster ? { display: 'none' } : undefined}>
+          {movie.title.charAt(0).toUpperCase()}
+        </div>
+      </div>
+      <div className="movie-result-info">
+        <span className="movie-result-title">{movie.title}</span>
+        <div className="ms-card-meta">
+          {movie.year && <span className="movie-result-year">{movie.year}</span>}
+          {movie.rating && <span className="ms-card-rating"><StarIcon /> {movie.rating}</span>}
+        </div>
+        {movie.mediaType === 'tv' && <span className="ms-card-type">Сериал</span>}
+      </div>
+    </div>
+  )
+
+  return (
+    <div className="movie-search">
+
+      {/* Search bar */}
+      <div className="movie-search-bar">
+        <input
+          className="header-search-input movie-search-input"
+          placeholder="Название фильма или сериала..."
+          value={query}
+          onChange={e => setQuery(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && !loading && handleSearch()}
+          autoFocus
+        />
+        {query && (
+          <button className="ms-clear-btn" onClick={clearQuery} title="Очистить">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        )}
+        <button className="header-search-btn movie-search-btn" onClick={handleSearch} disabled={loading}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="11" cy="11" r="7" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Filters (only in discover mode with TMDB key) */}
+      {apiKey && !selected && (
+        <div className="ms-filters">
+          <div className="ms-filter-row">
+            {/* Type toggle */}
+            <div className="ms-type-toggle">
+              <button
+                className={`ms-type-btn${mediaType === 'movie' ? ' active' : ''}`}
+                onClick={() => handleFilterChange(() => { setMediaType('movie'); setGenreId(null) })}
+              >Фильмы</button>
+              <button
+                className={`ms-type-btn${mediaType === 'tv' ? ' active' : ''}`}
+                onClick={() => handleFilterChange(() => { setMediaType('tv'); setGenreId(null) })}
+              >Сериалы</button>
+            </div>
+
+            {/* Sort */}
+            {!isSearchMode && (
+              <Select value={sortBy} onChange={v => handleFilterChange(() => setSortBy(v))} options={SORTS} />
+            )}
+
+            {/* Min rating */}
+            {!isSearchMode && (
+              <Select
+                value={minRating}
+                onChange={v => handleFilterChange(() => setMinRating(v))}
+                options={RATINGS.map(r => ({ value: r.value, label: r.label === 'Любой' ? 'Рейтинг' : r.label }))}
+                placeholder="Рейтинг"
+              />
+            )}
+
+            {/* Year */}
+            <Select
+              value={year}
+              onChange={v => handleFilterChange(() => setYear(v))}
+              options={[{ value: '', label: 'Год' }, ...YEARS.map(y => ({ value: String(y), label: String(y) }))]}
+              placeholder="Год"
+            />
+
+            {/* Country */}
+            {!isSearchMode && (
+              <Select value={country} onChange={v => handleFilterChange(() => setCountry(v))} options={COUNTRIES} placeholder="Страна" />
+            )}
+          </div>
+
+          {/* Genres */}
+          {!isSearchMode && (
+            <div className="ms-genres">
+              <button
+                className={`ms-genre-chip${genreId === null ? ' active' : ''}`}
+                onClick={() => handleFilterChange(() => setGenreId(null))}
+              >Все</button>
+              {genres.map(g => (
+                <button
+                  key={g.id}
+                  className={`ms-genre-chip${genreId === g.id ? ' active' : ''}`}
+                  onClick={() => handleFilterChange(() => setGenreId(g.id))}
+                >{g.name}</button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {message && <p className="movie-search-message">{message}</p>}
+
+      {/* Detail view */}
+      {selected ? (
+        <div className="ms-detail">
+          {selected.poster && (
+            <div className="ms-detail-bg">
+              <img className="ms-detail-bg-img" src={selected.poster} alt="" />
+              <div className="ms-detail-bg-gradient" />
+            </div>
+          )}
+          <div className="ms-detail-content">
+            <button className="ms-back-btn" onClick={handleBack}>← Назад</button>
+            <div className="ms-detail-card">
+              {selected.poster
+                ? <img className="ms-detail-poster" src={selected.poster} alt={selected.title} />
+                : <div className="ms-poster-placeholder">{selected.title.charAt(0)}</div>
+              }
+              <div className="ms-detail-info">
+                <h2 className="ms-detail-title">{selected.title}</h2>
+                {selected.originalTitle !== selected.title && (
+                  <p className="ms-detail-orig">{selected.originalTitle}</p>
+                )}
+                <div className="ms-detail-meta">
+                  {selected.year && <span>{selected.year}</span>}
+                  {selected.mediaType === 'tv' && <span>Сериал</span>}
+                  {selected.rating && <span><StarIcon /> {selected.rating}</span>}
+                </div>
+                {selected.overview && <p className="ms-detail-overview">{selected.overview}</p>}
+              </div>
+            </div>
+
+            <div className="ms-site-results">
+              {sitesLoading && <p className="movie-search-message">Ищем на {sites.length} сайтах...</p>}
+              {!sitesLoading && !siteResults.length && !message && <p className="movie-search-message">Поиск...</p>}
+              {siteResults.length > 0 && <div className="ms-sites-label">Найдено на сайтах</div>}
+              {siteResults.map((r, i) => (
+                <div key={i} className="ms-site-row" onClick={() => onOpenUrl(r.title, r.url)}>
+                  <span className="ms-site-source">{r.source}</span>
+                  <span className="ms-site-title">{r.title}</span>
+                  <div className="ms-site-actions">
+                    {onBookmark && (
+                      <button className="ms-bookmark-btn" title="В закладки" onClick={e => {
+                        e.stopPropagation()
+                        onBookmark(selected?.title || r.title, r.url, selected?.poster || '', r.source)
+                      }}>
+                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                          <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
+                        </svg>
+                      </button>
+                    )}
+                    <span className="ms-site-open">Открыть →</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      ) : (
+        <>
+          {tmdbLoading && <p className="movie-search-message">{isSearchMode ? 'Поиск...' : 'Загрузка...'}</p>}
+
+          {tmdbResults.length > 0 && (
+            <>
+              <div className="movie-results">
+                {tmdbResults.map((movie, i) => <MovieCard key={`${movie.id}-${i}`} movie={movie} idx={i} />)}
+              </div>
+              {!isSearchMode && page < totalPages && (
+                <button className="ms-load-more" onClick={handleLoadMore} disabled={loadingMore}>
+                  {loadingMore ? 'Загрузка...' : 'Загрузить ещё'}
+                </button>
+              )}
+            </>
+          )}
+
+          {/* Direct site results (no TMDB key) */}
+          {siteResults.length > 0 && (
+            <div className="movie-results">
+              {siteResults.map((r, i) => (
+                <div key={i} className="movie-result-card" onClick={() => onOpenUrl(r.title, r.url)}>
+                  <div className="movie-result-poster">
+                    {r.poster
+                      ? <img src={r.poster} alt={r.title} onError={e => { (e.target as HTMLImageElement).style.display = 'none'; (e.target as HTMLImageElement).nextElementSibling?.removeAttribute('style') }} />
+                      : null
+                    }
+                    <div className="movie-result-poster-placeholder" style={r.poster ? { display: 'none' } : undefined}>{r.title.charAt(0).toUpperCase()}</div>
+                  </div>
+                  <div className="movie-result-info">
+                    <span className="movie-result-title">{r.title}</span>
+                    {r.year && <span className="movie-result-year">{r.year}</span>}
+                    <span className="movie-result-source">{r.source}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
+export default MovieSearch

src/components/Settings.tsx

@@ -0,0 +1,292 @@
+import React, { useState, useEffect } from 'react'
+
+export interface AppEntry {
+  name: string
+  imageUrl: string
+  url: string
+  useProxy: boolean
+}
+
+export interface Bookmark {
+  title: string
+  url: string
+  poster?: string
+  source?: string
+}
+
+export interface MovieSite {
+  domain: string
+  type: 'dle' | 'hdrezka' | 'filmix'
+  enabled: boolean
+}
+
+interface ProxyConfig {
+  host: string
+  port: string
+}
+
+interface SettingsData {
+  apps: AppEntry[]
+  proxy: ProxyConfig
+  movieSites: MovieSite[]
+  tmdbApiKey: string
+  bookmarks: Bookmark[]
+}
+
+interface SettingsProps {
+  onClose: () => void
+  onAppsChange: (apps: AppEntry[]) => void
+}
+
+const DEFAULT_SETTINGS: SettingsData = { apps: [], proxy: { host: '127.0.0.1', port: '7890' }, movieSites: [], tmdbApiKey: '', bookmarks: [] }
+
+function guessMovieSiteType(domain: string): MovieSite['type'] {
+  if (/rezka/.test(domain)) return 'hdrezka'
+  if (/filmix/.test(domain)) return 'filmix'
+  return 'dle'
+}
+
+function saveSettings(data: SettingsData) {
+  window.electron?.writeConfig(data)
+}
+
+const Settings: React.FC<SettingsProps> = ({ onClose, onAppsChange }) => {
+  const [settings, setSettings] = useState<SettingsData>(DEFAULT_SETTINGS)
+  const [newApp, setNewApp] = useState<AppEntry>({ name: '', imageUrl: '', url: '', useProxy: false })
+
+  useEffect(() => {
+    window.electron?.readConfig().then((cfg: SettingsData | null) => {
+      if (cfg?.apps) setSettings(cfg)
+    })
+  }, [])
+
+  const updateProxy = (field: keyof ProxyConfig, value: string) => {
+    const updated = { ...settings, proxy: { ...settings.proxy, [field]: value } }
+    setSettings(updated)
+    saveSettings(updated)
+    window.electron?.setProxy(updated.proxy.host, updated.proxy.port)
+  }
+
+  const toggleAppProxy = (index: number) => {
+    const apps = settings.apps.map((app, i) =>
+      i === index ? { ...app, useProxy: !app.useProxy } : app
+    )
+    const updated = { ...settings, apps }
+    setSettings(updated)
+    saveSettings(updated)
+    onAppsChange(apps)
+  }
+
+  const addApp = () => {
+    if (!newApp.name || !newApp.url) return
+    const apps = [...settings.apps, newApp]
+    const updated = { ...settings, apps }
+    setSettings(updated)
+    saveSettings(updated)
+    onAppsChange(apps)
+    setNewApp({ name: '', imageUrl: '', url: '', useProxy: false })
+  }
+
+  const removeApp = (index: number) => {
+    const apps = settings.apps.filter((_, i) => i !== index)
+    const updated = { ...settings, apps }
+    setSettings(updated)
+    saveSettings(updated)
+    onAppsChange(apps)
+  }
+
+  const [newSite, setNewSite] = useState<MovieSite>({ domain: '', type: 'dle', enabled: true })
+
+  const addMovieSite = () => {
+    if (!newSite.domain.trim()) return
+    let domain = newSite.domain.trim()
+    if (domain.startsWith('https://')) domain = domain.slice(8)
+    else if (domain.startsWith('http://')) domain = domain.slice(7)
+    if (domain.endsWith('/')) domain = domain.slice(0, -1)
+    const movieSites = [...(settings.movieSites ?? []), { ...newSite, domain }]
+    const updated = { ...settings, movieSites }
+    setSettings(updated)
+    saveSettings(updated)
+    setNewSite({ domain: '', type: 'dle', enabled: true })
+  }
+
+  const removeMovieSite = (index: number) => {
+    const movieSites = (settings.movieSites ?? []).filter((_, i) => i !== index)
+    const updated = { ...settings, movieSites }
+    setSettings(updated)
+    saveSettings(updated)
+  }
+
+  const toggleMovieSite = (index: number) => {
+    const movieSites = (settings.movieSites ?? []).map((s, i) =>
+      i === index ? { ...s, enabled: !s.enabled } : s
+    )
+    const updated = { ...settings, movieSites }
+    setSettings(updated)
+    saveSettings(updated)
+  }
+
+  return (
+    <div className="settings-overlay" onClick={onClose}>
+      <div className="settings-panel" onClick={e => e.stopPropagation()}>
+        <div className="settings-header">
+          <h2>Настройки</h2>
+          <button className="settings-close" onClick={onClose}>✕</button>
+        </div>
+
+        <div className="settings-section">
+          <h3>Прокси</h3>
+          <div className="proxy-row">
+            <input
+              className="settings-input"
+              placeholder="Хост"
+              value={settings.proxy.host}
+              onChange={e => updateProxy('host', e.target.value)}
+            />
+            <span className="proxy-colon">:</span>
+            <input
+              className="settings-input proxy-port"
+              placeholder="Порт"
+              value={settings.proxy.port}
+              onChange={e => updateProxy('port', e.target.value)}
+            />
+          </div>
+          <div className="proxy-info">
+            <code>http_proxy=http://{settings.proxy.host}:{settings.proxy.port}</code>
+            <code>https_proxy=http://{settings.proxy.host}:{settings.proxy.port}</code>
+            <code>socks5://{settings.proxy.host}:{settings.proxy.port}</code>
+          </div>
+          <p className="proxy-hint">
+            Прокси применяется к каждому сайту индивидуально — переключатель рядом с каждым приложением.
+          </p>
+        </div>
+
+        <div className="settings-section">
+          <h3>Приложения</h3>
+          <div className="settings-apps-list">
+            {settings.apps.map((app, i) => (
+              <div key={i} className="settings-app-row">
+                <div className="settings-app-info">
+                  {app.imageUrl && (
+                    <img src={app.imageUrl} alt={app.name} className="settings-app-icon" />
+                  )}
+                  <div className="settings-app-text">
+                    <span className="settings-app-name">{app.name}</span>
+                    <span className="settings-app-url">{app.url}</span>
+                  </div>
+                </div>
+                <div className="settings-app-actions">
+                  <label className="proxy-switch-label">
+                    <span>Прокси</span>
+                    <div
+                      className={`proxy-switch ${app.useProxy ? 'on' : 'off'}`}
+                      onClick={() => toggleAppProxy(i)}
+                    />
+                  </label>
+                  <button className="settings-remove-btn" onClick={() => removeApp(i)}>✕</button>
+                </div>
+              </div>
+            ))}
+            {settings.apps.length === 0 && (
+              <p className="settings-empty">Нет приложений. Добавьте ниже.</p>
+            )}
+          </div>
+
+          <div className="add-app-form">
+            <h4>Добавить приложение</h4>
+            <input
+              className="settings-input"
+              placeholder="Название"
+              value={newApp.name}
+              onChange={e => setNewApp({ ...newApp, name: e.target.value })}
+            />
+            <input
+              className="settings-input"
+              placeholder="URL сайта"
+              value={newApp.url}
+              onChange={e => setNewApp({ ...newApp, url: e.target.value })}
+            />
+            <input
+              className="settings-input"
+              placeholder="URL иконки (необязательно)"
+              value={newApp.imageUrl}
+              onChange={e => setNewApp({ ...newApp, imageUrl: e.target.value })}
+            />
+            <label className="proxy-switch-label add-proxy-label">
+              <span>Использовать прокси</span>
+              <div
+                className={`proxy-switch ${newApp.useProxy ? 'on' : 'off'}`}
+                onClick={() => setNewApp({ ...newApp, useProxy: !newApp.useProxy })}
+              />
+            </label>
+            <button className="settings-add-btn" onClick={addApp}>Добавить</button>
+          </div>
+        </div>
+
+        <div className="settings-section">
+          <h3>Поиск фильмов</h3>
+          <h4>TMDB API ключ</h4>
+          <input
+            className="settings-input"
+            placeholder="Получить бесплатно на themoviedb.org"
+            value={settings.tmdbApiKey ?? ''}
+            onChange={e => {
+              const updated = { ...settings, tmdbApiKey: e.target.value }
+              setSettings(updated)
+              saveSettings(updated)
+            }}
+          />
+          <p className="proxy-hint">Нужен для постеров и метаданных. Без ключа поиск работает напрямую по сайтам.</p>
+          <h4>Сайты</h4>
+          <p className="proxy-hint">Тип определяется автоматически. Поддерживаются: kinogo, lordfilm, gidonline, hdrezka, filmix и их зеркала. Домен без https://</p>
+          <div className="settings-apps-list">
+            {(settings.movieSites ?? []).map((site, i) => (
+              <div key={i} className="settings-app-row">
+                <div className="settings-app-info">
+                  <div className="settings-app-text">
+                    <span className="settings-app-name">{site.domain}</span>
+                    <span className="settings-app-url">{site.type}</span>
+                  </div>
+                </div>
+                <div className="settings-app-actions">
+                  <label className="proxy-switch-label">
+                    <span>Вкл</span>
+                    <div className={`proxy-switch ${site.enabled ? 'on' : 'off'}`} onClick={() => toggleMovieSite(i)} />
+                  </label>
+                  <button className="settings-remove-btn" onClick={() => removeMovieSite(i)}>✕</button>
+                </div>
+              </div>
+            ))}
+            {!(settings.movieSites ?? []).length && (
+              <p className="settings-empty">Нет сайтов. Добавьте ниже.</p>
+            )}
+          </div>
+          <div className="add-app-form">
+            <h4>Добавить сайт</h4>
+            <input
+              className="settings-input"
+              placeholder="Домен (например: kinogo.cc)"
+              value={newSite.domain}
+              onChange={e => {
+                const domain = e.target.value
+                setNewSite({ ...newSite, domain, type: guessMovieSiteType(domain) })
+              }}
+            />
+            <select
+              className="settings-select"
+              value={newSite.type}
+              onChange={e => setNewSite({ ...newSite, type: e.target.value as MovieSite['type'] })}
+            >
+              <option value="dle">DLE (kinogo, lordfilm и зеркала)</option>
+              <option value="hdrezka">HDRezka</option>
+              <option value="filmix">Filmix</option>
+            </select>
+            <button className="settings-add-btn" onClick={addMovieSite}>Добавить</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Settings

src/components/Sidebar.tsx

@@ -0,0 +1,72 @@
+import React, { useState, useRef, useEffect } from 'react'
+import SidebarElement, { SidebarElementProps } from './SidebarElement'
+
+interface SidebarProps {
+  openedApps: SidebarElementProps[]
+  activeApp: string
+  setActiveApp: (name: string) => void
+}
+
+const Sidebar: React.FC<SidebarProps> = ({ openedApps, activeApp, setActiveApp }) => {
+  const [expanded, setExpanded] = useState(false)
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const openedAppsCount = openedApps.length
+  useEffect(() => {
+    if (openedAppsCount === 0 && activeApp !== 'movie-search') setActiveApp('home')
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [openedAppsCount, setActiveApp])
+
+  const handleMouseEnter = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    timeoutRef.current = setTimeout(() => {
+      setExpanded(true)
+      window.electron?.adjustView(true)
+    }, 150)
+  }
+
+  const handleMouseLeave = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    timeoutRef.current = setTimeout(() => {
+      setExpanded(false)
+      window.electron?.adjustView(false)
+    }, 150)
+  }
+
+  const goHome = () => {
+    window.electron?.hideView()
+    setActiveApp('home')
+  }
+
+  return (
+    <div
+      className={`sidebar ${expanded ? 'expanded' : 'collapsed'}`}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div
+        className={`sidebar-item ${activeApp === 'home' ? 'active' : ''}`}
+        onClick={goHome}
+      >
+        <svg className="sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+          <polyline points="9 22 9 12 15 12 15 22" />
+        </svg>
+        <span>Домой</span>
+      </div>
+
+      {openedApps.map(app => (
+        <SidebarElement
+          key={app.name}
+          name={app.name}
+          imageUrl={app.imageUrl}
+          url={app.url}
+          isActive={app.isActive}
+          onClick={app.onClick}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default Sidebar

src/components/SidebarElement.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+export interface SidebarElementProps {
+  name: string
+  imageUrl: string
+  url: string
+  isActive: boolean
+  onClick: () => void
+}
+
+const SidebarElement: React.FC<SidebarElementProps> = ({ name, imageUrl, isActive, onClick }) => {
+  return (
+    <div className={`sidebar-item ${isActive ? 'active' : ''}`} onClick={onClick}>
+      {imageUrl ? (
+        <img src={imageUrl} alt={name} className="sidebar-app-icon" />
+      ) : (
+        <div className="sidebar-app-icon sidebar-app-icon-placeholder">
+          {name.charAt(0).toUpperCase()}
+        </div>
+      )}
+      <span>{name}</span>
+    </div>
+  )
+}
+
+export default SidebarElement

src/main.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+
+declare global {
+  interface Window {
+    electron?: {
+      createView: (name: string, url: string, imageUrl: string, zoom: number, useProxy: boolean) => void
+      confirm: (text: string, funcName: string) => void
+      removeView: (name?: string) => void
+      hideView: () => void
+      showView: (name: string) => void
+      adjustView: (expanded: boolean) => void
+      on: (channel: string, func: (...args: any[]) => void) => () => void
+      getCurrentPage: () => Promise<{ name: string; url: string; imageUrl: string } | null>
+      handleAction: (action: string) => void
+      setProxy: (host: string, port: string) => void
+      expandWithHeader: () => void
+      collapseWithHeader: () => void
+      backwardPage: () => void
+      forwardPage: () => void
+      refreshPage: () => void
+      readConfig: () => Promise<any>
+      writeConfig: (data: any) => void
+      searchMovies: (query: string, sites: any[]) => Promise<any[]>
+      searchTmdb: (query: string, apiKey: string) => Promise<{ results: any[]; error?: string }>
+      discoverTmdb: (params: any) => Promise<{ results: any[]; totalPages: number; error?: string }>
+    }
+  }
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)

src/pages/HomePage.tsx

@@ -0,0 +1,102 @@
+import React, { useState, useEffect, useRef } from 'react'
+import Header from '../components/Header'
+import Sidebar from '../components/Sidebar'
+import AppList from '../components/AppList'
+import MovieSearch from '../components/MovieSearch'
+import '../styles/main.css'
+import { AppEntry, Bookmark } from '../components/Settings'
+
+interface OpenedApp {
+  name: string
+  imageUrl: string
+  url: string
+}
+
+const HomePage: React.FC = () => {
+  const [openedApps, setOpenedApps] = useState<OpenedApp[]>([])
+  const [activeApp, setActiveApp] = useState<string>('home')
+  const [appCardList, setAppCardList] = useState<AppEntry[]>([])
+  const [movieQuery, setMovieQuery] = useState<string | null>(null)
+  const [bookmarks, setBookmarks] = useState<Bookmark[]>([])
+  const configRef = useRef<any>({})
+
+  useEffect(() => {
+    if (!window.electron) return
+    window.electron.readConfig().then((cfg: any) => {
+      configRef.current = cfg ?? {}
+      if (cfg?.apps) setAppCardList(cfg.apps)
+      if (cfg?.bookmarks) setBookmarks(cfg.bookmarks)
+      if (cfg?.proxy?.host && cfg?.proxy?.port) {
+        window.electron!.setProxy(cfg.proxy.host, cfg.proxy.port)
+      }
+    })
+    const offOpenedApps = window.electron.on('update-opened-apps', (apps: OpenedApp[], activeName: string) => {
+      setOpenedApps(apps)
+      setActiveApp(activeName ?? 'home')
+    })
+    const offAlert = window.electron.on('alert', (text: string) => alert(text))
+    return () => { offOpenedApps(); offAlert() }
+  }, [])
+
+  const handleSidebarAppClick = (name: string) => {
+    setActiveApp(name)
+    window.electron?.showView(name)
+  }
+
+  const handleMovieSearch = (query: string) => {
+    window.electron?.hideView()
+    setMovieQuery(query)
+    setActiveApp('movie-search')
+  }
+
+  const handleMovieSearchOpen = (name: string, url: string) => {
+    window.electron?.createView(name, url, '', 1.0, resolveUseProxy(url))
+    setActiveApp(name)
+  }
+
+  const handleBookmarkAdd = (title: string, url: string, poster: string, source: string) => {
+    const updated = [...bookmarks, { title, url, poster, source }]
+    setBookmarks(updated)
+    configRef.current = { ...configRef.current, bookmarks: updated }
+    window.electron?.writeConfig(configRef.current)
+  }
+
+  const handleBookmarkRemove = (index: number) => {
+    const updated = bookmarks.filter((_, i) => i !== index)
+    setBookmarks(updated)
+    configRef.current = { ...configRef.current, bookmarks: updated }
+    window.electron?.writeConfig(configRef.current)
+  }
+
+  const resolveUseProxy = (url: string) => {
+    try {
+      const host = new URL(url).hostname
+      const match = appCardList.find(a => { try { return new URL(a.url).hostname === host } catch { return false } })
+      return match ? match.useProxy : true
+    } catch { return true }
+  }
+
+  const handleBookmarkOpen = (b: Bookmark) => {
+    window.electron?.createView(b.title, b.url, b.poster || '', 1.0, resolveUseProxy(b.url))
+    setActiveApp(b.title)
+  }
+
+  const sidebarApps = openedApps.map(app => ({
+    ...app,
+    isActive: activeApp === app.name,
+    onClick: () => handleSidebarAppClick(app.name),
+  }))
+
+  return (
+    <>
+      <Header activeApp={activeApp} setActiveApp={setActiveApp} onAppsChange={setAppCardList} onMovieSearch={handleMovieSearch} onBookmark={handleBookmarkAdd} onBookmarkRemove={handleBookmarkRemove} bookmarks={bookmarks} />
+      <Sidebar openedApps={sidebarApps} activeApp={activeApp} setActiveApp={setActiveApp} />
+      {activeApp === 'movie-search'
+        ? <MovieSearch initialQuery={movieQuery ?? ''} onOpenUrl={handleMovieSearchOpen} onBookmark={handleBookmarkAdd} />
+        : <AppList apps={appCardList} bookmarks={bookmarks} onBookmarkOpen={handleBookmarkOpen} onBookmarkRemove={handleBookmarkRemove} />
+      }
+    </>
+  )
+}
+
+export default HomePage