itube-specs 0.0.842 → 0.0.844

package/components/dev/theme-switch.vue

@@ -0,0 +1,38 @@
+<template>
+  <button
+    class="dev-theme-switch"
+    type="button"
+    @click="toggle"
+  >
+    {{ label }}
+  </button>
+</template>
+
+<script setup lang="ts">
+type ThemeName = 'dark' | 'light';
+
+const { data, refresh } = await useFetch<{ theme: ThemeName }>('/api/dev/theme', { server: false });
+
+const label = computed(() => (data.value?.theme === 'light' ? 'theme: light' : 'theme: dark'));
+
+const toggle = async () => {
+  const theme: ThemeName = data.value?.theme === 'light' ? 'dark' : 'light';
+
+  await $fetch('/api/dev/theme', { method: 'POST', body: { theme } });
+  await refresh();
+};
+</script>
+
+<style lang="scss">
+.dev-theme-switch {
+  justify-self: center;
+  padding: 6px 12px;
+  border: 1px solid #888;
+  border-radius: 6px;
+  background-color: #222;
+  color: #fff;
+  cursor: pointer;
+
+  @include font-xs;
+}
+</style>

package/components/layout/footer.vue

@@ -9,10 +9,14 @@
       <LayoutFooterLanguage />
       <p class="layout-footer__copyright">{{ copyrightText }}</p>
     </div>
+
+    <LazyDevThemeSwitch v-if="isDev" />
   </footer>
 </template>
 
 <script setup lang="ts">
+const isDev = import.meta.dev;
+
 const copyrightText = useAppConfig().copyrightText;
 
 const { t } = useI18n();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.842",
+  "version": "0.0.844",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {

package/runtime/utils/__tests__/normalize-url.test.ts

@@ -27,6 +27,19 @@ describe('normalizeUrl', () => {
     expect(result.query).toEqual({ c: 'ok' });
   });
 
+  it('сортирует категории — перестановка даёт один адрес', () => {
+    const direct = normalizeUrl({ path: '/', query: { categories: 'cat_teen,cat_bear' } });
+    const reversed = normalizeUrl({ path: '/', query: { categories: 'cat_bear,cat_teen' } });
+
+    expect(direct.query.categories).toBe('cat_bear,cat_teen');
+    expect(direct.query.categories).toBe(reversed.query.categories);
+  });
+
+  it('отсортированные категории идемпотентны — нет петли редиректов', () => {
+    const result = normalizeUrl({ path: '/', query: { categories: 'cat_bear,cat_teen' } });
+    expect(result.query.categories).toBe('cat_bear,cat_teen');
+  });
+
   it('lowercase путь', () => {
     const result = normalizeUrl({ path: '/Videos/BIG', query: {} });
     expect(result.path).toBe('/videos/big');

package/runtime/utils/normalize-url.ts

@@ -1,4 +1,4 @@
-/** Нормализует URL: убирает page=1, sort=trending, пустые query, приводит к нижнему регистру, заменяет пробелы на дефисы. */
+/** Нормализует URL: убирает page=1, sort=trending, пустые query, сортирует категории, приводит к нижнему регистру, заменяет пробелы на дефисы. */
 export function normalizeUrl(to: { path: string; query: Record<string, any> }) {
   let path = to.path;
   let query = { ...to.query };
@@ -28,6 +28,12 @@ export function normalizeUrl(to: { path: string; query: Record<string, any> }) {
   }
   query = loweredQuery;
 
+  // Сортируем категории: их порядок задаёт пользователь кликами, набор от перестановки
+  // не меняется — иначе одна и та же выборка живёт по нескольким адресам
+  if (typeof query.categories === 'string') {
+    query.categories = query.categories.split(',').sort().join(',');
+  }
+
   // 2) Декодируем путь перед lowercase: иначе .toLowerCase() опускает регистр
   //    у hex-цифр в %XX (напр. %D0%B6 → %d0%b6), роутер нормализует их обратно
   //    в верхний регистр, и редирект зацикливается на кириллице.

package/server/api/dev/theme.ts

@@ -0,0 +1,31 @@
+import { readFile, writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+
+type ThemeName = 'dark' | 'light';
+
+const THEME_FILE = resolve(process.cwd(), 'assets/scss/vars/_theme.scss');
+
+export default defineEventHandler(async (event) => {
+  if (!import.meta.dev) {
+    throw createError({ statusCode: 404, statusMessage: 'Not Found' });
+  }
+
+  if (event.method === 'GET') {
+    const content = await readFile(THEME_FILE, 'utf8');
+
+    return { theme: (content.includes('themes/light') ? 'light' : 'dark') as ThemeName };
+  }
+
+  const body = await readBody<{ theme?: ThemeName }>(event);
+  const theme: ThemeName = body?.theme === 'light' ? 'light' : 'dark';
+
+  await writeFile(
+    THEME_FILE,
+    '// Active theme. Switch by pointing the forward at another file in themes/.\n'
+    + '// The dev-only footer toggle rewrites exactly this line.\n'
+    + `@forward 'themes/${theme}';\n`,
+    'utf8',
+  );
+
+  return { theme };
+});