fix: connection ctrl style

src/assets/main.css

@@ -56,7 +56,7 @@
 }
 
 .tippy-box {
-  @apply bg-neutral text-neutral-content shadow-md;
+  @apply z-[9999] bg-neutral text-neutral-content shadow-md;
 }
 .tippy-box[data-placement^='top'] > .tippy-arrow:before {
   @apply border-t-neutral;

src/components/common/DialogWrapper.vue

@@ -13,7 +13,7 @@
           <XMarkIcon class="h-4 w-4" />
         </button>
       </form>
-      <div class="max-h-[90vh] overflow-y-auto p-4 max-md:max-h-[70vh]">
+      <div class="max-h-[90vh] min-h-32 overflow-y-auto p-4 max-md:max-h-[70vh]">
         <slot></slot>
       </div>
     </div>

src/components/settings/ZashboardSettings.vue

@@ -57,7 +57,7 @@
             <span class="shrink-0"> {{ $t('customBackgroundURL') }}: </span>
             <div class="join">
               <TextInput
-                class="join-item"
+                class="join-item flex-1"
                 v-model="customBackgroundURL"
                 @update:modelValue="handlerBackgroundURLChange"
               />

src/components/sidebar/ConnectionCtrl.tsx

@@ -0,0 +1,215 @@
+import { disconnectByIdAPI } from '@/api'
+import { SORT_DIRECTION, SORT_TYPE } from '@/config'
+import { useTooltip } from '@/helper/tooltip'
+import { isMiddleScreen } from '@/helper/utils'
+import {
+  connectionFilter,
+  connectionSortDirection,
+  connectionSortType,
+  isPaused,
+  quickFilterEnabled,
+  quickFilterRegex,
+  renderConnections,
+} from '@/store/connections'
+import { useConnectionCard } from '@/store/settings'
+import {
+  ArrowDownCircleIcon,
+  ArrowUpCircleIcon,
+  PauseIcon,
+  PlayIcon,
+  QuestionMarkCircleIcon,
+  WrenchScrewdriverIcon,
+  XMarkIcon,
+} from '@heroicons/vue/24/outline'
+import { twMerge } from 'tailwind-merge'
+import { defineComponent, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import DialogWrapper from '../common/DialogWrapper.vue'
+import TextInput from '../common/TextInput.vue'
+import ConnectionTabs from './ConnectionTabs.vue'
+import SourceIPFilter from './SourceIPFilter.vue'
+
+const handlerClickCloseAll = () => {
+  renderConnections.value.forEach((conn) => {
+    disconnectByIdAPI(conn.id)
+  })
+}
+
+export default defineComponent({
+  name: 'ConnectionCtrl',
+  components: {
+    TextInput,
+    ConnectionTabs,
+    SourceIPFilter,
+  },
+  props: {
+    horizontal: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const { t } = useI18n()
+    const settingsModel = ref(false)
+    const { showTip } = useTooltip()
+
+    return () => {
+      const sortForCards = (
+        <div class={['flex w-full items-center gap-1 text-sm', props.horizontal && 'md:w-auto']}>
+          <span class="shrink-0">{t('sortBy')}</span>
+          <div class="join flex-1">
+            <select
+              class="join-item select select-bordered select-sm flex-1"
+              v-model={connectionSortType.value}
+            >
+              {(Object.values(SORT_TYPE) as string[]).map((opt) => (
+                <option
+                  key={opt}
+                  value={opt}
+                >
+                  {t(opt) || opt}
+                </option>
+              ))}
+            </select>
+            <button
+              class="btn join-item btn-sm"
+              onClick={() => {
+                connectionSortDirection.value =
+                  connectionSortDirection.value === SORT_DIRECTION.ASC
+                    ? SORT_DIRECTION.DESC
+                    : SORT_DIRECTION.ASC
+              }}
+            >
+              {connectionSortDirection.value === SORT_DIRECTION.ASC ? (
+                <ArrowUpCircleIcon class="h-4 w-4" />
+              ) : (
+                <ArrowDownCircleIcon class="h-4 w-4" />
+              )}
+            </button>
+          </div>
+        </div>
+      )
+
+      const settingsModal = (
+        <>
+          <button
+            class={twMerge('btn btn-circle btn-sm')}
+            onClick={() => (settingsModel.value = true)}
+          >
+            <WrenchScrewdriverIcon class="h-4 w-4" />
+          </button>
+          <DialogWrapper v-model={settingsModel.value}>
+            <div class="flex flex-col gap-4 p-2 text-sm">
+              <div class="flex items-center gap-2">
+                <span class="shrink-0">{t('quickFilterRegex')}</span>
+                <input
+                  type="text"
+                  class="input input-sm input-bordered w-32 max-w-64 flex-1"
+                  v-model={quickFilterRegex.value}
+                />
+              </div>
+              <div class="flex items-center gap-2">
+                {t('quickFilter')}
+                <input
+                  type="checkbox"
+                  class="toggle"
+                  v-model={quickFilterEnabled.value}
+                />
+                <div
+                  onMouseenter={(e) =>
+                    showTip(e, t('quickFilterTip'), {
+                      appendTo: 'parent',
+                    })
+                  }
+                >
+                  <QuestionMarkCircleIcon class="h-4 w-4" />
+                </div>
+              </div>
+            </div>
+          </DialogWrapper>
+        </>
+      )
+
+      const searchInput = (
+        <TextInput
+          v-model={connectionFilter.value}
+          placeholder={t('search')}
+          before-close={true}
+          class="flex-1"
+        />
+      )
+
+      const buttons = (
+        <>
+          <button
+            class="btn btn-circle btn-sm"
+            onClick={() => {
+              isPaused.value = !isPaused.value
+            }}
+          >
+            {isPaused.value ? <PlayIcon class="h-4 w-4" /> : <PauseIcon class="h-4 w-4" />}
+          </button>
+          <button
+            class="btn btn-circle btn-sm"
+            onClick={handlerClickCloseAll}
+          >
+            <XMarkIcon class="h-4 w-4" />
+          </button>
+        </>
+      )
+
+      if (props.horizontal) {
+        if (isMiddleScreen.value) {
+          return (
+            <div class="flex flex-wrap items-center gap-2 p-2">
+              <div class="flex w-full items-center justify-between gap-2">
+                <ConnectionTabs />
+                {!useConnectionCard.value && (
+                  <div class="flex items-center gap-1">
+                    {settingsModal}
+                    {buttons}
+                  </div>
+                )}
+              </div>
+              {useConnectionCard.value && (
+                <div class="flex w-full items-center gap-2">
+                  {sortForCards}
+                  {settingsModal}
+                  {buttons}
+                </div>
+              )}
+              <div class="join w-full">
+                <SourceIPFilter class="min-w-40" />
+                {searchInput}
+              </div>
+            </div>
+          )
+        }
+        return (
+          <div class="flex flex-wrap items-center gap-2 p-2">
+            <ConnectionTabs />
+            {useConnectionCard.value && sortForCards}
+            <SourceIPFilter class="min-w-40" />
+            {searchInput}
+            <div class="flex-1"></div>
+            {settingsModal}
+            {buttons}
+          </div>
+        )
+      }
+
+      return (
+        <div class="flex flex-wrap items-center gap-2 p-2">
+          <ConnectionTabs class="w-full" />
+          <div class="flex w-full items-center gap-2">
+            <SourceIPFilter class="minw-40 flex-1" />
+            {settingsModal}
+            {buttons}
+          </div>
+          {searchInput}
+          {useConnectionCard.value && sortForCards}
+        </div>
+      )
+    }
+  },
+})

src/components/sidebar/LogsCtrl.vue

@@ -18,6 +18,7 @@
         type="text"
         v-model="logFilter"
         :placeholder="$t('search')"
+        class="flex-1"
       />
       <button
         class="btn-bordered btn join-item btn-sm"

src/components/sidebar/ProxiesCtrl.tsx

@@ -124,7 +124,7 @@ export default defineComponent({
         <select
           class={[
             'select select-bordered select-sm min-w-24',
-            props.horizontal ? 'inline-block max-md:flex-1' : 'w-0 flex-1',
+            props.horizontal ? 'inline-block max-md:flex-1 md:min-w-40' : 'w-0 flex-1',
           ]}
           v-model={configs.value.mode}
           onChange={handlerModeChange}