fix: move the theme button to settings

There're several other things
1. remove help button because there's one in the right bottom corner.
2. remove config/mobile? check for right sidebar
3. add open collective link
4. adjust left bar width

src/main/frontend/components/header.cljs

@@ -116,6 +116,10 @@
                     :title (t :discord-title)
                     :target "_blank"}
           :icon svg/discord}
+         {:title [:div.flex-row.flex.justify-between.items-center
+                  [:span (t :sponsor-us)]]
+          :options {:href "https://opencollective.com/logseq"
+                    :target "_blank"}}
          (when logged?
            {:title (t :sign-out)
             :options {:on-click user-handler/sign-out!}

src/main/frontend/components/right_sidebar.cljs

@@ -224,7 +224,6 @@
         repo (state/sub :git/current-repo)
         match (state/sub :route-match)
         theme (state/sub :ui/theme)
-        dark? (= "dark" theme)
         t (i18n/use-tongue)]
     (rum/with-context [[t] i18n/*tongue-context*]
       [:div#right-sidebar.cp__right-sidebar
@@ -255,20 +254,7 @@
                                                      (str "page-graph-" page)
                                                      :page-graph
                                                      page)))}
-             (t :right-side-bar/page)]]
-
-           [:div.ml-4.text-sm
-            (let [theme (if dark? "white" "dark")]
-              [:a.cp__right-sidebar-settings-btn {:title (t :right-side-bar/switch-theme theme)
-                                        :on-click (fn []
-                                                    (state/set-theme! theme))}
-               (t :right-side-bar/theme (t (keyword theme)))])]
-
-           (when-not config/publishing?
-             [:div.ml-4.text-sm
-              [:a.cp__right-sidebar-settings-btn {:on-click (fn [_e]
-                                                    (state/sidebar-add-block! repo "help" :help nil))}
-               (t :right-side-bar/help)]])]
+             (t :right-side-bar/page)]]]
 
           (for [[idx [repo db-id block-type block-data]] (medley/indexed blocks)]
             (rum/with-key

src/main/frontend/components/settings.cljs

@@ -71,11 +71,24 @@
         cors-proxy (state/sub [:me :cors_proxy])
         logged? (state/logged?)
         current-repo (state/get-current-repo)
-        developer-mode? (state/sub [:ui/developer-mode?])]
+        developer-mode? (state/sub [:ui/developer-mode?])
+        theme (state/sub :ui/theme)
+        dark? (= "dark" theme)
+        switch-theme (if dark? "white" "dark")]
     (rum/with-context [[t] i18n/*tongue-context*]
       [:div#settings
        [:h1.title (t :settings)]
 
+       [:div.mb-1.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start.sm:pt-5.pl-1
+        [:label.block.text-sm.font-medium.leading-5.sm:mt-px.sm:pt-2.opacity-70
+         {:for "toggle_theme"}
+         (t :right-side-bar/switch-theme (string/capitalize switch-theme))]
+        [:div.mt-1.sm:mt-0.sm:col-span-2
+         [:div.max-w-lg.rounded-md.sm:max-w-xs.pt-2
+          (ui/toggle dark?
+                     (fn []
+                       (state/set-theme! switch-theme)))]]]
+
        [:div.mb-6.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start.sm:pt-5.pl-1
         [:label.block.text-sm.font-medium.leading-5.sm:mt-px.sm:pt-2.opacity-70
          {:for "preferred_language"}

src/main/frontend/components/sidebar.cljs

@@ -81,11 +81,12 @@
               "opacity-75 pointer-events-auto"
               "opacity-0 pointer-events-none")
      :on-click close-fn}]
-   [:div#left-bar.fixed.inset-y-0.left-0.flex.flex-col.z-40.max-w-xs.w-full.transform.ease-in-out.duration-300
+   [:div#left-bar.fixed.inset-y-0.left-0.flex.flex-col.z-40.w-full.transform.ease-in-out.duration-300
     {:class (if @open?
               "translate-x-0"
               "-translate-x-full")
-     :style {:background-color "#002b36"}}
+     :style {:background-color "#002b36"
+             :max-width "15rem"}}
     (if @open?
       [:div.absolute.top-0.right-0.p-1
        [:button#close-left-bar.flex.items-center.justify-center.h-12.w-12.rounded-full.focus:outline-none.focus:bg-gray-600
@@ -106,15 +107,14 @@
   [{:keys [route-match global-graph-pages? logged? home? route-name indexeddb-support? white? db-restoring? main-content]}]
   (rum/with-context [[t] i18n/*tongue-context*]
     [:div#main-content.cp__sidebar-main-layout
-     (when-not config/mobile?
-       [:div#sidebar-nav-wrapper.flex-col.pt-4.hidden.sm:block
-        {:style {:flex (if (state/get-left-sidebar-open?)
-                         "0 1 20%"
-                         "0 0 0px")
-                 :border-right (str "1px solid "
-                                    (if white? "#f0f8ff" "#073642"))}}
-        (when (state/sub :ui/left-sidebar-open?)
-          (sidebar-nav route-match nil))])
+     [:div#sidebar-nav-wrapper.flex-col.pt-4.hidden.sm:block
+      {:style {:flex (if (state/get-left-sidebar-open?)
+                       "0 1 20%"
+                       "0 0 0px")
+               :border-right (str "1px solid "
+                                  (if white? "#f0f8ff" "#073642"))}}
+      (when (state/sub :ui/left-sidebar-open?)
+        (sidebar-nav route-match nil))]
      [:div#main-content-container.cp__sidebar-main-content-container
       [:div.cp__sidebar-main-content
        {:data-is-global-graph-pages global-graph-pages?
@@ -132,8 +132,7 @@
          :else
          [:div {:style {:margin-bottom (if global-graph-pages? 0 120)}}
           main-content])]]
-     (when-not config/mobile?
-       (right-sidebar/sidebar))]))
+     (right-sidebar/sidebar)]))
 
 (defn get-default-home-if-valid
   []

src/main/frontend/dicts.cljs

@@ -320,6 +320,7 @@ title: How to take dummy notes?
         :settings "Settings"
         :import "Import"
         :join-community "Join the community"
+        :sponsor-us "Sponsor Us"
         :discord-title "Our discord group!"
         :sign-out "Sign out"
         :help-shortcut-title "Click to check shortcuts and other tips"
@@ -791,6 +792,7 @@ title: How to take dummy notes?
            :settings "设置"
            :import "导入"
            :join-community "加入社区"
+           :sponsor-us "赞助我们!"
            :discord-title "我们的 Discord 社群!"
            :sign-out "登出"
            :help-shortcut-title "点此查看快捷方式和更多游泳帮助"