fix: sidebar collapse btn & input clear btn

src/components/common/TextInput.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="relative w-full flex-1">
+    <input
+      v-model="inputValue"
+      type="text"
+      class="input input-sm join-item input-bordered w-full"
+    />
+    <XMarkIcon
+      class="absolute right-2 top-1/2 h-3 w-3 -translate-y-1/2 cursor-pointer"
+      @click="clearInput"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { XMarkIcon } from '@heroicons/vue/24/outline'
+import { defineProps, ref, watch } from 'vue'
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: false,
+  },
+  modelValue: {
+    type: String,
+    required: true,
+  },
+})
+
+const inputValue = ref(props.modelValue)
+
+const emit = defineEmits(['update:modelValue'])
+
+watch(inputValue, (newValue) => {
+  emit('update:modelValue', newValue)
+})
+
+const clearInput = () => {
+  inputValue.value = ''
+}
+</script>

src/components/sidebar/CommonCtrl.vue

@@ -11,13 +11,14 @@
     </div>
 
     <div class="flex">
-      <BackendSwitch class="flex-1" />
       <button
         class="btn btn-circle btn-ghost btn-xs"
         @click="isSiderbarCollapsed = true"
       >
         <ArrowLeftCircleIcon class="h-5 w-5" />
       </button>
+      <div class="flex-1"></div>
+      <BackendSwitch />
     </div>
   </div>
 </template>

src/components/sidebar/ConnectionCtrl.vue

@@ -60,10 +60,9 @@
     <SourceIPFilter v-if="!horizontal" />
     <div class="join w-full flex-1">
       <SourceIPFilter v-if="horizontal" />
-      <input
-        type="text"
-        class="input input-sm join-item input-bordered w-32 flex-1"
+      <TextInput
         v-model="connectionFilter"
+        class="join-item"
       />
       <button
         class="btn-bordered btn join-item btn-sm"
@@ -99,6 +98,7 @@ import {
 import { useConnectionCard } from '@/store/settings'
 import { PauseIcon, PlayIcon, QuestionMarkCircleIcon, XMarkIcon } from '@heroicons/vue/24/outline'
 import { twMerge } from 'tailwind-merge'
+import TextInput from '../common/TextInput.vue'
 import SourceIPFilter from './SourceIPFilter.vue'
 defineProps<{
   horizontal?: boolean

src/components/sidebar/LogsCtrl.vue

@@ -13,9 +13,8 @@
         {{ opt }}
       </option>
     </select>
-    <input
+    <TextInput
       type="text"
-      class="input input-sm join-item input-bordered w-0 flex-1"
       v-model="logFilter"
     />
     <button
@@ -35,6 +34,7 @@ import { LOG_LEVEL } from '@/config'
 import { initLogs, isPaused, logFilter, logLevel } from '@/store/logs'
 import { PauseIcon, PlayIcon } from '@heroicons/vue/24/outline'
 import { twMerge } from 'tailwind-merge'
+import TextInput from '../common/TextInput.vue'
 
 defineProps<{
   horizontal?: boolean

src/components/sidebar/SideBar.vue

@@ -36,19 +36,19 @@
         <VerticalInfos />
       </template>
       <template v-else>
+        <div
+          class="card"
+          v-if="route.name !== ROUTE_NAME.settings"
+        >
+          <SpeedCharts />
+        </div>
         <div class="card">
           <component
             v-if="sidebarComp"
             :is="sidebarComp"
           />
           <CommonSidebar />
         </div>
-        <div
-          class="card"
-          v-if="route.name !== ROUTE_NAME.settings"
-        >
-          <SpeedCharts />
-        </div>
       </template>
     </div>
   </div>