Replace web search lable with model-view; Add first selection; Change web search icon;

frontend/control/list-labels/list-labels.pri

@@ -3,9 +3,7 @@ INCLUDEPATH += $$PWD
 HEADERS += \
         $$PWD/show-more-label.h \
         $$PWD/title-label.h \
-        $$PWD/web-search-label.h \
 
 SOURCES += \
         $$PWD/show-more-label.cpp \
         $$PWD/title-label.cpp \
-        $$PWD/web-search-label.cpp \

frontend/control/list-labels/web-search-label.cpp

@@ -1,88 +0,0 @@
-#include "web-search-label.h"
-#include <QIcon>
-#include <QDesktopServices>
-#include "global-settings.h"
-using namespace Zeeker;
-WebSearchLabel::WebSearchLabel(QWidget *parent) : QLabel(parent)
-{
-    initUi();
-    this->installEventFilter(this);
-}
-
-void WebSearchLabel::initUi()
-{
-    this->setFixedHeight(30);
-    this->setContentsMargins(8, 0, 0, 0);
-    this->setFixedWidth(656);
-
-    m_WebSearchIconlabel = new QLabel(this);
-    m_WebSearchIconlabel->setFixedHeight(30);
-    m_WebSearchIconlabel->setPixmap(QIcon::fromTheme("edit-find-symbolic").pixmap(QSize(16, 16)));
-
-    m_WebSearchLabel = new QLabel(this);
-    m_WebSearchLabel->setFixedHeight(30);
-
-    m_webSearchLyt = new QHBoxLayout(this);
-    m_webSearchLyt->setContentsMargins(0, 0, 0, 0);
-    m_webSearchLyt->addWidget(m_WebSearchIconlabel);
-    m_webSearchLyt->addWidget(m_WebSearchLabel);
-    m_webSearchLyt->addStretch();
-    this->setLayout(m_webSearchLyt);
-    m_defultStyleSheet = this->styleSheet();
-}
-
-void WebSearchLabel::startSearch()
-{
-    //新打开网页搜索或关键词发生变化，重新load
-    QString keyword = m_WebSearchLabel->text();//目前网页搜索的关键词，记录此词来判断网页是否需要刷新
-    QString address;
-    QString engine = GlobalSettings::getInstance()->getValue("web_engine").toString();
-    if(!engine.isEmpty()) {
-        if(engine == "360") {
-            address = "https://so.com/s?q=" + keyword; //360
-        } else if(engine == "sougou") {
-            address = "https://www.sogou.com/web?query=" + keyword; //搜狗
-        } else {
-            address = "http://baidu.com/s?word=" + keyword; //百度
-        }
-    } else { //默认值
-        address = "http://baidu.com/s?word=" + keyword; //百度
-    }
-    QDesktopServices::openUrl(address);
-
-}
-
-QString WebSearchLabel::getDefultStyleSheet()
-{
-    return m_defultStyleSheet;
-}
-
-bool WebSearchLabel::eventFilter(QObject *watched, QEvent *event)
-{
-    if (watched == this) {
-        if (event->type() == QEvent::MouseButtonPress) {
-            this->setStyleSheet("color: white; background-color: #3790FA");//#3790FA选中颜色，
-            return true;
-        } else if (event->type() == QEvent::MouseButtonRelease) {
-            startSearch();
-            return true;
-        } else if (event->type() == QEvent::Enter) {
-            this->setStyleSheet("background-color: #97bbe7");//TODO鼠标悬浮颜色
-            return true;
-        } else if (event->type() == QEvent::Leave) {
-            this->setStyleSheet(m_defultStyleSheet);//默认颜色
-            return true;
-        }
-    }
-    return QObject::eventFilter(watched, event);
-}
-
-void WebSearchLabel::initConnections()
-{
-
-}
-
-void WebSearchLabel::webSearch(const QString &key)
-{
-    m_WebSearchLabel->setText(key);
-}

frontend/control/list-labels/web-search-label.h

@@ -1,34 +0,0 @@
-#ifndef WEBSEARCHLABEL_H
-#define WEBSEARCHLABEL_H
-#include <QLabel>
-#include "title-label.h"
-#include <QHBoxLayout>
-#include <QVBoxLayout>
-
-namespace Zeeker {
-class WebSearchLabel : public QLabel
-{
-    Q_OBJECT
-public:
-    WebSearchLabel(QWidget * parent = nullptr);
-    ~WebSearchLabel() = default;
-
-    void startSearch();
-    QString getDefultStyleSheet();
-
-protected:
-    bool eventFilter(QObject *watched, QEvent *event);
-private:
-    void initUi();
-    void initConnections();
-
-    QHBoxLayout * m_webSearchLyt = nullptr;
-    QLabel * m_WebSearchIconlabel = nullptr;
-    QLabel * m_WebSearchLabel = nullptr;
-    QString m_defultStyleSheet;
-
-public Q_SLOTS:
-    void webSearch(const QString &key);
-};
-}
-#endif // WEBSEARCHLABEL_H

frontend/control/stack-pages/search-page-section.cpp

@@ -49,16 +49,14 @@ ResultArea::ResultArea(QWidget *parent) : QScrollArea(parent)
 void ResultArea::appendWidet(ResultWidget *widget)
 {
     //NEW_TODO
-    m_mainLyt->removeWidget(m_WebTitleLabel);
+    m_mainLyt->removeWidget(m_webSearchWidget);
-    m_mainLyt->removeWidget(m_webSearchLable);
     m_mainLyt->addWidget(widget);
     setupConnectionsForWidget(widget);
     widget->clearResult();
     m_widget_list.append(widget);
     int spacing_height = m_widget_list.length() > 1 ? m_mainLyt->spacing() : 0;
     m_widget->setFixedHeight(m_widget->height() + widget->height() + spacing_height);
-    m_mainLyt->addWidget(m_WebTitleLabel);
+    m_mainLyt->addWidget(m_webSearchWidget);
-    m_mainLyt->addWidget(m_webSearchLable);
 }
 
 /**
@@ -81,8 +79,9 @@ void ResultArea::pressEnter()
     if (false == m_is_selected) {//未选中时默认选取bestlist第一项
         int resultNum = m_bestListWidget->getResultNum();
         if (0 == resultNum) {//搜索结果为空则选中网页搜索项
-            m_webSearchLable->setStyleSheet("color: white; background-color: #3790FA");//#3790FA选中颜色;
+            QModelIndex index = m_webSearchWidget->getModlIndex(0, 0);
-            m_selectedPluginID = m_WebTitleLabel->text();
+            m_webSearchWidget->setResultSelection(index);
+            m_selectedPluginID = m_webSearchWidget->getWidgetName();
             m_is_selected = true;
         } else {//选取bestlist第一项
             QModelIndex index = m_bestListWidget->getModlIndex(0, 0);
@@ -91,8 +90,8 @@ void ResultArea::pressEnter()
             m_is_selected = true;
         }
     } else {//选中状态时默认启动action首项
-        if (m_selectedPluginID == m_WebTitleLabel->text()) {//选中网页搜索则启动搜索
+        if (m_selectedPluginID == m_webSearchWidget->getWidgetName()) {//选中网页搜索则启动搜索
-            m_webSearchLable->startSearch();
+            m_webSearchWidget->LaunchBrowser();
         } else {
             //先判断详情页是否打开
             if (m_detail_open_state) {
@@ -116,7 +115,7 @@ void ResultArea::pressEnter()
 
 void ResultArea::pressDown()
 {
-    if (m_selectedPluginID == m_WebTitleLabel->text()) {//当前为web search，暂不处理
+    if (m_selectedPluginID == m_webSearchWidget->getWidgetName()) {//当前为web search，暂不处理
         return;
     } else if (m_selectedPluginID == m_bestListWidget->getWidgetName()) {
         QModelIndex index = m_bestListWidget->getCurrentSelection();
@@ -170,10 +169,11 @@ void ResultArea::pressDown()
                         }
                     }
                     if (indexNum >= m_widget_list.size()) {//下一项是web search
-                        m_webSearchLable->setStyleSheet("color: white; background-color: #3790FA");//#3790FA选中颜色;
+                        QModelIndex index = m_webSearchWidget->getModlIndex(0, 0);
-                        m_selectedPluginID = m_WebTitleLabel->text();
+                        m_webSearchWidget->setResultSelection(index);
+                        m_selectedPluginID = m_webSearchWidget->getWidgetName();
                         m_is_selected = true;
-                        this->ensureWidgetVisible(m_webSearchLable);
+                        this->ensureWidgetVisible(m_webSearchWidget);
                     }
                     if (findNextWidget){
                         break;
@@ -191,11 +191,11 @@ void ResultArea::pressUp()
     if (!m_is_selected) {
         return;
     }
-    if (m_selectedPluginID == m_WebTitleLabel->text()) {//当前为web search
+    if (m_selectedPluginID == m_webSearchWidget->getWidgetName()) {//当前为web search
         if (m_bestListWidget->getResultNum() == 0) {
             return;
         }
-        m_webSearchLable->setStyleSheet(m_webSearchLable->getDefultStyleSheet());
+        m_webSearchWidget->clearResultSelection();
         for (int i = 0; i < m_widget_list.size(); i++) {
             ResultWidget * plugin = m_widget_list[m_widget_list.size() - (i + 1)];
             bool findNextWidget = false;
@@ -329,8 +329,7 @@ void ResultArea::onWidgetSizeChanged()
     }
     whole_height += m_bestListWidget->height();
     //TODO 网页高度
-    whole_height += m_WebTitleLabel->height();
+    whole_height += m_webSearchWidget->height();
-    whole_height += m_webSearchLable->height();
 
     int spacing_height = m_widget_list.length() > 1 ? m_mainLyt->spacing() : 0;
     m_widget->setFixedHeight(whole_height + spacing_height * (m_widget_list.length() - 1));
@@ -345,8 +344,8 @@ void ResultArea::setSelectionInfo(QString &pluginID)
     if (m_selectedPluginID != m_bestListWidget->getWidgetName()) {
         m_bestListWidget->clearResultSelection();
     }
-    if (m_selectedPluginID != m_WebTitleLabel->text()) {
+    if (m_selectedPluginID != m_webSearchWidget->getWidgetName()) {
-        m_webSearchLable->setStyleSheet(m_webSearchLable->getDefultStyleSheet());
+        m_webSearchWidget->clearResultSelection();
     }
 }
 
@@ -373,14 +372,8 @@ void ResultArea::initUi()
     m_bestListWidget->clearResult();
     m_mainLyt->addWidget(m_bestListWidget);
 
-    m_WebTitleLabel = new TitleLabel(this);
+    m_webSearchWidget = new WebSearchWidget(this);
-    m_WebTitleLabel->setFixedWidth(656);
+    m_mainLyt->addWidget(m_webSearchWidget);
-    m_WebTitleLabel->setText(tr("Web Page"));
-    m_WebTitleLabel->setFixedHeight(30);
-    m_mainLyt->addWidget(m_WebTitleLabel);
-    m_webSearchLable = new WebSearchLabel(this);
-    m_webSearchLable->setFixedHeight(30);
-    m_mainLyt->addWidget(m_webSearchLable);
     m_mainLyt->setContentsMargins(RESULT_LAYOUT_MARGINS);
     this->widget()->setContentsMargins(0,0,0,0);
     m_mainLyt->setSpacing(0);
@@ -389,29 +382,35 @@ void ResultArea::initUi()
 void ResultArea::initConnections()
 {
     connect(this, &ResultArea::startSearch, m_bestListWidget, &BestListWidget::startSearch);
-    connect(this, &ResultArea::startSearch, m_webSearchLable, &WebSearchLabel::webSearch);
+    connect(this, &ResultArea::startSearch, m_webSearchWidget, &WebSearchWidget::startSearch);
     connect(this, &ResultArea::startSearch, this, [=] () {
         m_detail_open_state = false;
         m_is_selected = false;
-        if (m_selectedPluginID == m_WebTitleLabel->text()) {
+        if (m_selectedPluginID == m_webSearchWidget->getWidgetName()) {
-            m_webSearchLable->setStyleSheet(m_webSearchLable->getDefultStyleSheet());
+            m_webSearchWidget->clearResultSelection();
         }
     });
     connect(m_bestListWidget, &BestListWidget::sizeChanged, this, &ResultArea::onWidgetSizeChanged);
+    connect(m_bestListWidget, &BestListWidget::sizeChanged, this, [=] () {
+        if (!m_is_selected) {
+            QModelIndex index = m_bestListWidget->getModlIndex(0, 0);
+            m_bestListWidget->setResultSelection(index);
+            m_selectedPluginID = m_bestListWidget->getWidgetName();
+            m_is_selected = true;
+        }
+    });
+
     connect(m_bestListWidget, &BestListWidget::currentRowChanged, this, &ResultArea::currentRowChanged);
     connect(m_bestListWidget, &BestListWidget::currentRowChanged, this, [=] () {
         m_detail_open_state = true;
         m_is_selected = true;
         m_selectedPluginID = m_bestListWidget->getWidgetName();
-        if (m_selectedPluginID != m_WebTitleLabel->text()) {
+        m_webSearchWidget->clearResultSelection();
-            m_webSearchLable->setStyleSheet(m_webSearchLable->getDefultStyleSheet());
-        }
     });
     connect(this, &ResultArea::clearSelectedRow, m_bestListWidget, &BestListWidget::clearSelectedRow);
     connect(this, &ResultArea::resizeWidth, this, [=] (const int &size) {
         m_bestListWidget->setFixedWidth(size);
-        m_WebTitleLabel->setFixedWidth(size);
+        m_webSearchWidget->setFixedWidth(size);
-        m_webSearchLable->setFixedWidth(size);
     });
     connect(m_bestListWidget, &BestListWidget::rowClicked, this, &ResultArea::rowClicked);
 }

frontend/control/stack-pages/search-page-section.h

@@ -27,7 +27,7 @@
 #include "result-view.h"
 #include "search-plugin-iface.h"
 #include "best-list-view.h"
-#include "web-search-label.h"
+#include "web-search-view.h"
 
 namespace Zeeker {
 class ResultArea : public QScrollArea
@@ -60,8 +60,7 @@ private:
     QVBoxLayout * m_mainLyt = nullptr;
     BestListWidget * m_bestListWidget = nullptr;
     QList<ResultWidget *> m_widget_list;
-    TitleLabel * m_WebTitleLabel = nullptr;
+    WebSearchWidget * m_webSearchWidget = nullptr;
-    WebSearchLabel * m_webSearchLable = nullptr;
 
     bool m_detail_open_state = false;
     bool m_is_selected = false;

frontend/model/best-list-model.cpp

@@ -1,6 +1,6 @@
 /*
  *
- * Copyright (C) 2020, KylinSoft Co., Ltd.
+ * Copyright (C) 2021, KylinSoft Co., Ltd.
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by

frontend/model/model.pri

@@ -4,8 +4,10 @@ HEADERS += \
     $$PWD/best-list-model.h \
     $$PWD/search-result-manager.h \
     $$PWD/search-result-model.h \
+    $$PWD/web-search-model.h
 
 SOURCES += \
     $$PWD/best-list-model.cpp \
     $$PWD/search-result-manager.cpp \
     $$PWD/search-result-model.cpp \
+    $$PWD/web-search-model.cpp

frontend/model/search-result-model.h

@@ -30,6 +30,7 @@ namespace Zeeker {
 class SearchResultItem : public QObject {
     friend class SearchResultModel;
     friend class BestListModel;
+    friend class WebSearchModel;
     Q_OBJECT
 public:
     explicit SearchResultItem(QObject *parent = nullptr);

frontend/model/web-search-model.cpp

@@ -0,0 +1,81 @@
+/*
+ *
+ * Copyright (C) 2021, KylinSoft Co., Ltd.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * Authors: jixiaoxu <jixiaoxu@kylinos.cn>
+ *
+ */
+#include "web-search-model.h"
+#include <QDebug>
+
+using namespace Zeeker;
+WebSearchModel::WebSearchModel(QObject *parent)
+    : QAbstractItemModel(parent)
+{
+    m_item = new SearchResultItem;
+}
+
+QModelIndex WebSearchModel::index(int row, int column, const QModelIndex &parent) const
+{
+    if(row < 0 || row > m_item->m_result_info_list.length() - 1)
+        return QModelIndex();
+    return createIndex(row, column, m_item);
+}
+
+QModelIndex WebSearchModel::parent(const QModelIndex &index) const
+{
+    return QModelIndex();
+}
+
+int WebSearchModel::rowCount(const QModelIndex &parent) const
+{
+    if (parent.isValid()) {
+        return 0;
+    }
+    else
+        return 1;
+}
+
+int WebSearchModel::columnCount(const QModelIndex &parent) const
+{
+    return parent.isValid() ? 0 : 1;
+}
+
+QVariant WebSearchModel::data(const QModelIndex &index, int role) const
+{
+    switch(role) {
+    case Qt::DecorationRole: {
+        return m_item->m_result_info_list.at(index.row()).icon;
+    }
+    case Qt::DisplayRole: {
+        return m_item->m_result_info_list.at(index.row()).name;
+    }
+    default:
+        return QVariant();
+    }
+    return QVariant();
+}
+
+void WebSearchModel::startSearch(const QString &keyword)
+{
+    this->beginResetModel();
+    m_item->m_result_info_list.clear();
+    SearchPluginIface::ResultInfo info;
+    info.icon =  QIcon(":/res/icons/edit-find-symbolic.svg");
+    info.name = keyword;
+    m_item->m_result_info_list.append(info);
+    this->endResetModel();
+}

frontend/model/web-search-model.h

@@ -0,0 +1,31 @@
+#ifndef WEBSEARCHMODEL_H
+#define WEBSEARCHMODEL_H
+
+#include <QAbstractItemModel>
+#include <QIcon>
+#include <QLabel>
+#include "search-result-model.h"
+
+namespace Zeeker {
+class WebSearchModel : public QAbstractItemModel
+{
+    Q_OBJECT
+
+public:
+    explicit WebSearchModel(QObject *parent = nullptr);
+
+    QModelIndex index(int row, int column, const QModelIndex &parent = QModelIndex()) const override;
+    QModelIndex parent(const QModelIndex &index) const override;
+
+    int rowCount(const QModelIndex &parent = QModelIndex()) const override;
+    int columnCount(const QModelIndex &parent = QModelIndex()) const override;
+
+    QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override;
+public Q_SLOTS:
+    void startSearch(const QString &);
+
+private:
+    SearchResultItem * m_item = nullptr;
+};
+}
+#endif // WEBSEARCHMODEL_H

frontend/view/best-list-view.cpp

@@ -29,7 +29,7 @@ bool BestListView::isSelected()
 int BestListView::showHeight()
 {
     int height;
-    int rowheight = this->rowHeight(this->model()->index(0, 0, QModelIndex())) + 1;
+    int rowheight = this->rowHeight(this->model()->index(0, 0, QModelIndex()));
     if (this->isExpanded()) {
         height = m_count * rowheight;
     } else {
@@ -209,7 +209,6 @@ int BestListWidget::getResultNum()
 
 void BestListWidget::setResultSelection(const QModelIndex &index)
 {
-    //this->m_bestListView->selectionModel()->clearSelection();
     this->m_bestListView->setCurrentIndex(index);
 }
 

frontend/view/view.pri

@@ -4,8 +4,10 @@ HEADERS += \
     $$PWD/best-list-view.h \
     $$PWD/result-view-delegate.h \
     $$PWD/result-view.h \
+    $$PWD/web-search-view.h
 
 SOURCES += \
     $$PWD/best-list-view.cpp \
     $$PWD/result-view-delegate.cpp \
     $$PWD/result-view.cpp \
+    $$PWD/web-search-view.cpp

frontend/view/web-search-view.cpp

@@ -0,0 +1,162 @@
+/*
+ *
+ * Copyright (C) 2021, KylinSoft Co., Ltd.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * Authors: jixiaoxu <jixiaoxu@kylinos.cn>
+ *
+ */
+#include "web-search-view.h"
+#define MAIN_MARGINS 0,0,0,0
+#define MAIN_SPACING 0
+#define TITLE_HEIGHT 30
+
+using namespace Zeeker;
+WebSearchView::WebSearchView(QWidget *parent) : QTreeView(parent)
+{
+    this->setFrameShape(QFrame::NoFrame);
+    this->viewport()->setAutoFillBackground(false);
+    this->setRootIsDecorated(false);
+    this->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
+    this->setSelectionBehavior(QAbstractItemView::SelectRows);
+    this->setSelectionMode(QAbstractItemView::SingleSelection);
+    this->setHeaderHidden(true);
+    m_model = new WebSearchModel(this);
+    this->setModel(m_model);
+    m_style_delegate = new ResultViewDelegate(this);
+    this->setItemDelegate(m_style_delegate);
+}
+
+bool WebSearchView::isSelected()
+{
+    return m_is_selected;
+}
+
+int WebSearchView::showHeight()
+{
+    return this->rowHeight(this->model()->index(0, 0, QModelIndex()));
+}
+
+QModelIndex WebSearchView::getModlIndex(int row, int column)
+{
+    return this->m_model->index(row, column);
+}
+
+void WebSearchView::clearSelectedRow()
+{
+    if (!m_is_selected) {
+        this->blockSignals(true);
+        this->clearSelection();
+        this->blockSignals(false);
+    }
+}
+
+void WebSearchView::startSearch(const QString & keyword)
+{
+    this->m_style_delegate->setSearchKeyword(keyword);
+    this->m_model->startSearch(keyword);
+    m_keyWord = keyword;
+}
+
+void WebSearchView::mousePressEvent(QMouseEvent *event)
+{
+    return QTreeView::mousePressEvent(event);
+}
+
+void WebSearchView::LaunchBrowser()
+{
+    QString address;
+    QString engine = GlobalSettings::getInstance()->getValue("web_engine").toString();
+    if(!engine.isEmpty()) {
+        if(engine == "360") {
+            address = "https://so.com/s?q=" + m_keyWord; //360
+        } else if(engine == "sougou") {
+            address = "https://www.sogou.com/web?query=" + m_keyWord; //搜狗
+        } else {
+            address = "http://baidu.com/s?word=" + m_keyWord; //百度
+        }
+    } else { //默认值
+        address = "http://baidu.com/s?word=" + m_keyWord ; //百度
+    }
+    QDesktopServices::openUrl(address);
+}
+
+void WebSearchView::initConnections()
+{
+
+}
+
+WebSearchWidget::WebSearchWidget(QWidget *parent) : QWidget(parent)
+{
+    this->initUi();
+    initConnections();
+}
+
+QString WebSearchWidget::getWidgetName()
+{
+    return m_titleLabel->text();
+}
+
+void WebSearchWidget::setEnabled(const bool &enabled)
+{
+    m_enabled = enabled;
+}
+
+void WebSearchWidget::clearResultSelection()
+{
+    this->m_webSearchView->setCurrentIndex(QModelIndex());
+}
+
+QModelIndex WebSearchWidget::getModlIndex(int row, int column)
+{
+    return this->m_webSearchView->getModlIndex(row, column);
+}
+
+void WebSearchWidget::setResultSelection(const QModelIndex &index)
+{
+    this->m_webSearchView->setCurrentIndex(index);
+}
+
+void WebSearchWidget::LaunchBrowser()
+{
+    this->m_webSearchView->LaunchBrowser();
+}
+
+void WebSearchWidget::initUi()
+{
+    m_mainLyt = new QVBoxLayout(this);
+    this->setLayout(m_mainLyt);
+    m_mainLyt->setContentsMargins(MAIN_MARGINS);
+    m_mainLyt->setSpacing(MAIN_SPACING);
+
+    m_titleLabel = new TitleLabel(this);
+    m_titleLabel->setText(tr("Web Page"));
+    m_titleLabel->setFixedHeight(TITLE_HEIGHT);
+
+    m_webSearchView = new WebSearchView(this);
+
+    m_mainLyt->addWidget(m_titleLabel);
+    m_mainLyt->addWidget(m_webSearchView);
+    this->setFixedHeight(m_webSearchView->height() + TITLE_HEIGHT);
+    this->setFixedWidth(656);
+}
+
+void WebSearchWidget::initConnections()
+{
+    connect(this, &WebSearchWidget::startSearch, m_webSearchView, &WebSearchView::startSearch);
+    connect(m_webSearchView, &WebSearchView::clicked, this, [=] () {
+        this->LaunchBrowser();
+    });
+}

frontend/view/web-search-view.h

@@ -0,0 +1,71 @@
+#ifndef WEBSEARCHVIEW_H
+#define WEBSEARCHVIEW_H
+#include <QTreeView>
+#include <QListView>
+#include <QMouseEvent>
+#include "web-search-model.h"
+#include "result-view-delegate.h"
+#include "title-label.h"
+
+namespace Zeeker {
+class WebSearchView : public QTreeView
+{
+    Q_OBJECT
+public:
+    WebSearchView(QWidget *parent = nullptr);
+    ~WebSearchView() = default;
+
+    bool isSelected();
+    int showHeight();
+    QModelIndex getModlIndex(int row, int column);
+    void LaunchBrowser();
+
+public Q_SLOTS:
+    void clearSelectedRow();
+    void startSearch(const QString &);
+protected:
+    void mousePressEvent(QMouseEvent *event);
+
+private:
+    void initConnections();
+
+    WebSearchModel * m_model = nullptr;
+    bool m_is_selected = false;
+    ResultViewDelegate * m_style_delegate = nullptr;
+    QString m_keyWord;
+};
+
+class WebSearchWidget : public QWidget
+{
+    Q_OBJECT
+public:
+    WebSearchWidget(QWidget *parent = nullptr);
+    ~WebSearchWidget() = default;
+
+    QString getWidgetName();
+    void setEnabled(const bool&);
+    void clearResultSelection();
+    QModelIndex getModlIndex(int row, int column);
+    void setResultSelection(const QModelIndex &index);
+    void LaunchBrowser();
+
+private:
+    void initUi();
+    void initConnections();
+
+    bool m_enabled = true;
+    QVBoxLayout * m_mainLyt = nullptr;
+    QHBoxLayout * m_resultLyt = nullptr;
+    TitleLabel * m_titleLabel = nullptr;
+    WebSearchView * m_webSearchView = nullptr;
+    QLabel * m_queryIcon = nullptr;
+
+Q_SIGNALS:
+    void startSearch(const QString &);
+    void clearSelectedRow();
+    void rowClicked();
+
+};
+
+}
+#endif // WEBSEARCHVIEW_H