webui: fix rss item page.

webui/src/components/ab-rss-item.vue

@@ -2,6 +2,7 @@
 
 withDefaults(
     defineProps<{
+      select: boolean;
       name: string;
       url: string;
       enable: boolean;
@@ -9,19 +10,54 @@ withDefaults(
       parser: string;
     }>(),
     {
+      select: false,
       enable: false,
     }
 );
 </script>
 
 <template>
-    <div flex>
+  <div class="rss-group">
+    <div class="left-side" flex space-x-40px>
       <ab-checkbox
           small
-          :model-value="enable"
+          :model-value="select"
+          @update:model-value="select = $event"
       />
-      <div text-h3 truncate>{{ name }}</div>
+      <div w-200px text-h3 truncate>{{ name }}</div>
       <div w-300px text-h3 truncate>{{ url }}</div>
-      <div>{{ parser }}</div>
     </div>
-</template>
+    <div class="right-side" space-x-8px>
+      <ab-tag
+          v-if="parser"
+          type="primary"
+          :title="parser"
+      />
+      <ab-tag
+          v-if="aggregate"
+          type="primary"
+          title="aggregate"
+      />
+      <ab-tag
+          v-if="enable"
+          type="active"
+          title="active"
+      />
+      <ab-tag
+          v-if="!enable"
+          type="inactive"
+          title="inactive"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.rss-group {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+}
+</style>

webui/src/i18n/en.json

@@ -62,7 +62,7 @@
   },
   "rss": {
     "title": "RSS Item",
-    "selectbox": "select",
+    "selectbox": "Select",
     "name": "Name",
     "url": "Url",
     "status": "Status",

webui/src/pages/index/rss.vue

@@ -12,23 +12,44 @@ definePage({
 
 <template>
   <ab-fold-panel :title="$t('rss.title')">
+    <div flex justify-between>
+      <div flex space-x-40px>
+        <div text-h3>{{ $t('rss.selectbox') }}</div>
+        <div class="spacer-1"></div>
+        <div text-h3>{{ $t('rss.name') }}</div>
+        <div class="spacer-2"></div>
+        <div text-h3>{{ $t('rss.url') }}</div>
+      </div>
+      <div>
+        <div text-h3>{{ $t('rss.status') }}</div>
+      </div>
+    </div>
+    <div v-show="!open" line my-12px></div>
     <div>
       <ab-rss-item
           v-for="i in rss"
           :key="i.id"
           :name="i.name"
           :url="i.url"
-          :enable="i.enable"
+          :enable="i.enabled"
           :parser="i.parser"
           :aggregate="i.aggregate">
       </ab-rss-item>
     </div>
     <div v-show="!open" line my-12px></div>
-    <div>
-      <ab-button-group flex>
-        <ab-button icon="edit">{{ $t('rss.delete') }}</ab-button>
-        <ab-button class="type-warn" text="delete">{{ $t('rss.disable') }}</ab-button>
-      </ab-button-group>
+    <div flex="~ justify-end" space-x-10px>
+      <ab-button icon="edit">{{ $t('rss.disable') }}</ab-button>
+      <ab-button class="type-warn" text="delete">{{ $t('rss.delete') }}</ab-button>
     </div>
   </ab-fold-panel>
 </template>
+
+<style lang="scss" scoped>
+.spacer-1 {
+  width: 32px;
+}
+.spacer-2 {
+  width: 200px;
+}
+
+</style>