feat(web): choose where the search sits, and controls no longer select text

- settings get a search position (left, center by default, right); the top bar
  is three zones and the suggestions open towards the free space
- buttons, chips, tabs, menu items and the home screen controls are not
  text-selectable, so clicks and double clicks no longer highlight labels

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/pages/SettingsPage.tsx

@@ -126,6 +126,19 @@ function AppearanceSection() {
           ]}
         />
       </div>
+      <div className={s.settingRow}>
+        <span>{t('settings.search_position')}</span>
+        <Segmented<'left' | 'center' | 'right'>
+          label={t('settings.search_position')}
+          value={user.ui_prefs.search_position ?? 'center'}
+          onChange={(v) => void setPrefs({ search_position: v })}
+          options={[
+            { value: 'left', label: t('settings.search_left') },
+            { value: 'center', label: t('settings.search_center') },
+            { value: 'right', label: t('settings.search_right') },
+          ]}
+        />
+      </div>
       <div className={s.settingRow}>
         <span>{t('settings.ambient')}</span>
         <Segmented<'on' | 'off'>

apps/web/src/pages/home.module.css

@@ -7,6 +7,7 @@
   gap: 28px;
   padding: 24px 0;
   text-align: center;
+  user-select: none; /* главная — только элементы управления волной */
 }
 
 .orbLabel {

apps/web/src/styles.css

@@ -41,6 +41,19 @@ button {
   cursor: pointer;
 }
 
+/* Элементы управления не выделяются при кликах и двойных кликах — текст остаётся выделяемым на страницах. */
+button,
+[role='button'],
+[role='tab'],
+[role='option'],
+[role='menuitem'],
+[role='listitem'],
+nav a,
+label {
+  user-select: none;
+  -webkit-user-select: none;
+}
+
 :focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;

apps/web/src/widgets/AppShell.module.css

@@ -31,10 +31,11 @@
 .top {
   grid-area: top;
   z-index: 30;
-  display: flex;
+  /* Три зоны: логотип, середина, профиль; поиск — в одной из них (настройка «Расположение поиска»). */
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
-  gap: 24px;
-  justify-content: space-between;
+  gap: 16px;
   padding: 0 20px;
   border-bottom: 1px solid var(--line);
   background: var(--bar-a);
@@ -53,9 +54,22 @@
   }
 }
 
+.topLeft {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.topCenter {
+  display: flex;
+  justify-content: center;
+}
+
 .topRight {
   display: flex;
   align-items: center;
+  justify-content: flex-end;
   gap: 12px;
 }
 

apps/web/src/widgets/AppShell.tsx

@@ -93,6 +93,8 @@ function Shell() {
   const name = user.display_name ?? user.username;
   const staff = user.role !== 'user';
   const island = user.ui_prefs.web_player === 'island';
+  const searchAt = user.ui_prefs.search_position ?? 'center';
+  const search = <SearchBox align={searchAt} />;
   const counts = useCollectionCounts();
   const pending = usePendingUploads(user.role === 'admin');
 
@@ -100,11 +102,15 @@ function Shell() {
     <div className={cx(s.shell, island && s.island)}>
       {user.ui_prefs.ambient !== false && <ShellAmbient />}
       <header className={s.top}>
-        <Link to="/" className={s.logoLink}>
-          <Logo />
-        </Link>
+        <div className={s.topLeft}>
+          <Link to="/" className={s.logoLink}>
+            <Logo />
+          </Link>
+          {searchAt === 'left' && search}
+        </div>
+        <div className={s.topCenter}>{searchAt === 'center' && search}</div>
         <div className={s.topRight}>
-          <SearchBox />
+          {searchAt === 'right' && search}
           <Menu
             label={t('profile.menu')}
             triggerClassName={s.profileButton}

apps/web/src/widgets/SearchBox.module.css

@@ -84,7 +84,6 @@
 
 .popover {
   position: absolute;
-  right: 0;
   width: min(520px, calc(100vw - 32px));
   top: calc(100% + 8px);
   z-index: 45;
@@ -98,6 +97,20 @@
   animation: pipuIn 0.15s ease-out;
 }
 
+/* Подсказки раскрываются в сторону свободного места: слева — вправо, справа — влево, по центру — от середины. */
+.left .popover {
+  left: 0;
+}
+
+.right .popover {
+  right: 0;
+}
+
+.center .popover {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
 .corrected {
   margin: 4px 10px 8px;
   font-size: 13px;

apps/web/src/widgets/SearchBox.tsx

@@ -27,7 +27,7 @@ type Item = {
  * Поиск в топбаре: подсказки по мере ввода, Enter — страница поиска или выбранный элемент.
  * Без фокуса и текста свёрнут в кнопку с лупой; поле раскрывается влево с анимацией.
  */
-export function SearchBox() {
+export function SearchBox({ align = 'center' }: { align?: 'left' | 'center' | 'right' }) {
   const { t } = useTranslation();
   const session = useSession();
   const navigate = useNavigate();
@@ -147,7 +147,7 @@ export function SearchBox() {
   const optionId = (i: number) => `${listId}-${i}`;
 
   return (
-    <div className={cx(s.box, expanded && s.expanded)}>
+    <div className={cx(s.box, expanded && s.expanded, s[align])}>
       <Icon src={searchIcon} size={18} className={s.icon} />
       <input
         ref={inputRef}