feat: new portal selection and favicons

frontend/components/base/Form.vue

@@ -332,7 +332,7 @@ const submit = () => {
                             <v-tab value="groups">{{ t('groups') }}</v-tab>
                             <v-tab value="exclude">{{ t('exclude') }}</v-tab>
                         </v-tabs>
-                        <v-card-text>
+                        <v-card-text class="px-0">
                             <v-tabs-window v-model="tab">
                                 <v-tabs-window-item class="pt-2" value="portals">
                                     <base-form-portals
@@ -470,6 +470,6 @@ const submit = () => {
 </template>
 <style lang="scss">
 .baseForm {
-    max-width: 580px;
+    max-width: 920px;
 }
 </style>

frontend/components/base/Select.vue

@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+const { t } = useI18n({
+    useScope: 'local',
+});
+const props = defineProps({
+    modelValue: {
+        type: Array,
+        required: true,
+    },
+    items: {
+        type: Array,
+        default() {
+            return [];
+        },
+    },
+});
+const panel = ref(props.items.map((_, i) => i));
+const emit = defineEmits(['update:modelValue']);
+const selected = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value);
+    },
+});
+const setSelect = (subItem: { label: string; value: string }): void => {
+    if (selected.value.includes(subItem as never)) {
+        selected.value.splice(selected.value.indexOf(subItem as never), 1);
+    } else {
+        selected.value.push(subItem);
+    }
+};
+const setSelectGroup = (item: { label: string; items: { label: string; value: string }[] }): void => {
+    if (item.items.every((subItem) => selected.value.includes(subItem as never))) {
+        item.items.forEach((subItem) => selected.value.splice(selected.value.indexOf(subItem as never), 1));
+    } else {
+        item.items.forEach((subItem: { label: string; value: string }) => {
+            if (!selected.value.includes(subItem as never)) {
+                selected.value.push(subItem);
+            }
+        });
+    }
+};
+</script>
+<i18n lang="json">
+{
+    "en": {
+        "cleanSelection": "Clear selection",
+        "collapseAll": "Collapse all",
+        "expandAll": "Expand all"
+    },
+    "ru": {
+        "cleanSelection": "Очистить выбор",
+        "collapseAll": "Свернуть всё",
+        "expandAll": "Развернуть всё"
+    },
+    "cn": {
+        "cleanSelection": "清除选择",
+        "collapseAll": "全部折叠",
+        "expandAll": "全部展开"
+    }
+}
+</i18n>
+<template>
+    <v-row class="px-2 mb-1" justify="end">
+        <v-col v-if="selected.length > 0" cols="auto">
+            <v-btn @click="selected.splice(0)">{{ t('cleanSelection') }}</v-btn>
+        </v-col>
+        <v-col v-if="panel.length > 0" cols="auto">
+            <v-btn @click="panel.splice(0)">{{ t('collapseAll') }}</v-btn>
+        </v-col>
+        <v-col v-else cols="auto">
+            <v-btn @click="panel = items.map((_, i) => i)">{{ t('expandAll') }}</v-btn>
+        </v-col>
+    </v-row>
+    <v-expansion-panels v-model="panel" class="select px-2" multiple>
+        <v-expansion-panel v-for="(group, index) in items" :key="index" class="select" elevation="10">
+            <v-expansion-panel-title class="select-title">
+                <v-checkbox
+                    class="select-checkbox"
+                    :model-value="group.items.every((item) => modelValue.includes(item))"
+                    :label="group.label"
+                    hide-details
+                    @click.stop="setSelectGroup(group)"
+                ></v-checkbox>
+            </v-expansion-panel-title>
+            <v-expansion-panel-text>
+                <v-btn
+                    v-for="(site, key) in group.items"
+                    :key="key"
+                    class="ma-1"
+                    elevation="5"
+                    border="5"
+                    height="30"
+                    :active="selected.includes(site)"
+                    active-color="primary"
+                    @click="setSelect(site)"
+                >
+                    <img :src="'/favicon?site=' + site.value" class="select-icon" />
+                    {{ site.label }}
+                </v-btn>
+            </v-expansion-panel-text>
+        </v-expansion-panel>
+    </v-expansion-panels>
+</template>
+<style lang="scss">
+.select {
+    &-title {
+        padding-top: 5px;
+        padding-bottom: 5px;
+        height: 35px !important;
+        min-height: 0 !important;
+        .v-expansion-panel--active > & {
+            height: 45px !important;
+            min-height: 0 !important;
+        }
+    }
+    &-icon {
+        margin-left: -6px;
+        margin-right: 5px;
+        max-width: 16px;
+    }
+    &-checkbox {
+        --v-input-control-height: 30px;
+    }
+}
+</style>

frontend/components/base/form/portals.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const { t } = useI18n({
+useI18n({
     useScope: 'local',
 });
 const props = defineProps({
@@ -32,7 +32,7 @@ const props = defineProps({
     hideDetails: {
         type: Boolean,
         default: false,
-    }
+    },
 });
 const emit = defineEmits(['update:modelValue']);
 const selected = computed({
@@ -43,24 +43,24 @@ const selected = computed({
         emit('update:modelValue', value);
     },
 });
-const setSelect = (subItem: { label: string; value: string }): void => {
-    if (selected.value.includes(subItem as never)) {
-        selected.value.splice(selected.value.indexOf(subItem as never), 1);
-    } else {
-        selected.value.push(subItem);
-    }
-};
-const setSelectGroup = (item: { label: string; items: { label: string; value: string }[] }): void => {
-    if (item.items.every((subItem) => selected.value.includes(subItem as never))) {
-        item.items.forEach((subItem) => selected.value.splice(selected.value.indexOf(subItem as never), 1));
-    } else {
-        item.items.forEach((subItem: { label: string; value: string }) => {
-            if (!selected.value.includes(subItem as never)) {
-                selected.value.push(subItem);
-            }
-        });
-    }
-};
+// const setSelect = (subItem: { label: string; value: string }): void => {
+//     if (selected.value.includes(subItem as never)) {
+//         selected.value.splice(selected.value.indexOf(subItem as never), 1);
+//     } else {
+//         selected.value.push(subItem);
+//     }
+// };
+// const setSelectGroup = (item: { label: string; items: { label: string; value: string }[] }): void => {
+//     if (item.items.every((subItem) => selected.value.includes(subItem as never))) {
+//         item.items.forEach((subItem) => selected.value.splice(selected.value.indexOf(subItem as never), 1));
+//     } else {
+//         item.items.forEach((subItem: { label: string; value: string }) => {
+//             if (!selected.value.includes(subItem as never)) {
+//                 selected.value.push(subItem);
+//             }
+//         });
+//     }
+// };
 </script>
 <i18n lang="json">
 {
@@ -79,43 +79,7 @@ const setSelectGroup = (item: { label: string; items: { label: string; value: st
 }
 </i18n>
 <template>
-    <v-autocomplete
-        v-model="selected"
-        :items="items"
-        :label="label"
-        item-title="label"
-        item-value="value"
-        item-children="items"
-        variant="outlined"
-        :placeholder="t('allPortals')"
-        :no-data-text="t('noData')"
-        :hint="hint"
-        :persistent-hint="persistentHint"
-        :loading="loading"
-        :hide-details="hideDetails"
-        multiple
-        chips
-        clearable
-    >
-        <template #item="{ item }">
-            <v-list lines="one" select-strategy="classic">
-                <v-list-item class="font-weight-bold" density="compact" @click="() => setSelectGroup(item.raw)">
-                    {{ item.raw.label }}
-                </v-list-item>
-                <v-list-item
-                    v-for="(subItem, index) in item.raw.items"
-                    :key="index"
-                    :tabindex="index"
-                    :value="`nestedList${index}`"
-                    :active="selected.includes(subItem)"
-                    density="compact"
-                    @click="() => setSelect(subItem)"
-                >
-                    <v-list-item-title>
-                        {{ subItem.label }}
-                    </v-list-item-title>
-                </v-list-item>
-            </v-list>
-        </template>
-    </v-autocomplete>
+    <base-select v-if="!loading" v-model="selected" :items="items"></base-select>
+    <v-skeleton-loader v-else type="article"></v-skeleton-loader>
+    <v-banner-text class="pt-4 px-4">{{ hint }}</v-banner-text>
 </template>

frontend/components/core/AppBar.vue

@@ -36,7 +36,7 @@
                         Star
                     </github-button>
                 </v-col>
-                <v-col>
+                <v-col cols="auto">
                     <v-select
                         v-model="locale"
                         :items="localesList"

frontend/nuxt.config.ts

@@ -84,6 +84,12 @@ export default defineNuxtConfig({
         },
     },
 
+    runtimeConfig: {
+        public: {
+            API_BASE_URL: process.env.API_BASE_URL ?? 'https://iplist.opencck.org/',
+        },
+    },
+
     nitro: {
         devProxy: {
             '/api': {
@@ -91,13 +97,18 @@ export default defineNuxtConfig({
                 hostRewrite: process.env.API_BASE_URL ?? 'https://iplist.opencck.org/',
                 changeOrigin: true,
             },
+            '/favicon': {
+                target: process.env.API_BASE_URL ?? 'https://iplist.opencck.org/',
+                hostRewrite: process.env.API_BASE_URL ?? 'https://iplist.opencck.org/',
+                changeOrigin: true,
+            },
         },
         output: {
             publicDir: path.join(__dirname, '../public/'),
         },
         prerender: {
             ignore: ['/index'],
-        }
+        },
     },
 
     compatibilityDate: '2025-06-28',