disabled themes, replaced with styles

src/i18n/en_US.json

@@ -73,6 +73,7 @@
   "term.viewAs": "View As",
   "term.viewAs.coverArt": "Cover Art",
   "term.viewAs.list": "List",
+  "term.dynamic": "Dynamic",
   "term.size": "Size",
   "term.size.normal": "Normal",
   "term.size.compact": "Compact",
@@ -391,6 +392,11 @@
   "settings.header.visual.theme.github.page": "Themes from GitHub",
   "settings.option.visual.theme.github.install.confirm": "Are you sure you want to install {{ repo }}?",
   "settings.prompt.visual.theme.github.URL": "Enter the URL of the theme you want to install",
+  "settings.prompt.visual.theme.uninstallTheme": "Are you sure you want to uninstall {{ theme }}?",
+  "settings.option.visual.theme.checkForUpdates": "Check for updates",
+  "settings.option.visual.theme.manageStyles": "Manage Styles",
+  "settings.option.visual.theme.uninstall": "Uninstall",
+  "settings.option.visual.theme.viewInfo": "View Info",
   "settings.notyf.visual.theme.install.success": "Theme installed successfully",
   "settings.notyf.visual.theme.install.error": "Theme installation failed",
   "settings.header.visual.plugin": "Plugin",

src/i18n/source/en_US.json

@@ -392,6 +392,11 @@
   "settings.header.visual.theme.github.page": "Themes from GitHub",
   "settings.option.visual.theme.github.install.confirm": "Are you sure you want to install {{ repo }}?",
   "settings.prompt.visual.theme.github.URL": "Enter the URL of the theme you want to install",
+  "settings.prompt.visual.theme.uninstallTheme": "Are you sure you want to uninstall {{ theme }}?",
+  "settings.option.visual.theme.checkForUpdates": "Check for updates",
+  "settings.option.visual.theme.manageStyles": "Manage Styles",
+  "settings.option.visual.theme.uninstall": "Uninstall",
+  "settings.option.visual.theme.viewInfo": "View Info",
   "settings.notyf.visual.theme.install.success": "Theme installed successfully",
   "settings.notyf.visual.theme.install.error": "Theme installation failed",
   "settings.header.visual.plugin": "Plugin",

src/main/base/browserwindow.ts

@@ -715,6 +715,15 @@ export class BrowserWindow {
             // validate the path is in the themes directory
             try {
                 if (path.startsWith(themesDir)) {
+                    // get last dir in path, can be either / or \ and may have a trailing slash
+                    const themeName = path.split(/[\\\/]/).pop()
+                    if(themeName == "Themes" || themeName == "themes") {
+                        BrowserWindow.win.webContents.send("theme-uninstalled", {
+                            path: path,
+                            status: 3
+                        });
+                        return
+                    }
                     // if path is directory, delete it
                     if (lstatSync(path).isDirectory()) {
                         await rmdirSync(path, { recursive: true });

src/renderer/less/pages.less

@@ -1180,6 +1180,23 @@
       align-items: center;
     }
 
+    .handle {
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .list-group-item {
+
+      &:hover {
+        cursor: grab;
+      }
+      &:active {
+        cursor: grabbing;
+      }
+    }
+
     .removeItem {
       border     : 0px;
       background : transparent;

src/renderer/main/vueapp.js

@@ -596,9 +596,7 @@ const app = new Vue({
         },
         async init() {
             let self = this
-            if (this.cfg.visual.theme != "default.less" && this.cfg.visual.theme != "") {
+
-                this.setTheme(this.cfg.visual.theme)
-            }
             if (this.cfg.visual.styles.length != 0) {
                 await this.reloadStyles()
             }

src/renderer/views/pages/installed-themes.ejs

@@ -4,19 +4,25 @@
             <div class="row">
                 <div class="col nopadding">
                     <h1 class="header-text">
-                        Manage Styles    
+                        {{ $root.getLz("settings.option.visual.theme.manageStyles") }}    
                     </h1>
                 </div>
-                <div class="col-auto flex-center">
+                <div class="col-auto nopadding flex-center">
+                    <button class="md-btn md-btn-small md-btn-block" @click="$root.appRoute('themes-github')">
+                        {{$root.getLz('settings.option.visual.theme.github.explore')}}
+                    </button>
+                </div>
+                <div class="col-auto  flex-center">
+                    <button class="md-btn md-btn-small md-btn-block" @click="$root.checkForThemeUpdates()">
+                        {{ $root.getLz('settings.option.visual.theme.checkForUpdates') }}
+                    </button>
+                </div>
+                <div class="col-auto nopadding flex-center">
                     <button class="md-btn md-btn-small md-btn-block" @click="openThemesFolder()">
                         {{$root.getLz('settings.option.visual.theme.github.openfolder')}}
                     </button>
                 </div>
-                <div class="col-auto nopadding flex-center">
+
-                    <button class="md-btn md-btn-small md-btn-block" @click="installThemeURL()">
-                        {{$root.getLz('settings.option.visual.theme.github.download')}}
-                    </button>
-                </div>
             </div>
         </div>
         <div class="gh-content">
@@ -61,6 +67,9 @@
                 <draggable class="list-group" v-model="$root.cfg.visual.styles" @end="$root.reloadStyles()">
                     <b-list-group-item variant="dark" v-for="theme in $root.cfg.visual.styles" :key="theme">
                         <b-row>
+                            <b-col sm="auto">
+                                <div class="handle codicon codicon-grabber"></div>
+                            </b-col>
                             <b-col class="themeLabel">{{getThemeName(theme)}}</b-col>
                             <b-col sm="auto">
                                 <button class="removeItem codicon codicon-close" @click="remove(theme)"></button>
@@ -202,19 +211,27 @@
                 let menu = {
                     items: {
                         "uninstall": {
-                            name: "Uninstall",
+                            name: app.getLz("settings.option.visual.theme.uninstall"),
                             disabled: true,
                             action: () => {
-                                console.debug(theme)
+                                bootbox.confirm(app.stringTemplateParser(app.getLz("settings.prompt.visual.theme.uninstallTheme"), {
-                                ipcRenderer.once("theme-uninstalled", (event, args) => {
+                                    theme: theme.name ?? theme.file
-                                    console.debug(event, args)
+                                }), (res) => {
-                                    self.getThemesList()
+                                    if (res) {
+                                        console.debug(theme)
+                                        ipcRenderer.once("theme-uninstalled", (event, args) => {
+                                            console.debug(event, args)
+                                            self.getThemesList()
+                                        })
+                                        ipcRenderer.invoke("uninstall-theme", theme.path)
+                                    }
                                 })
-                                ipcRenderer.invoke("uninstall-theme", theme.path)
+
                             }
                         },
                         "viewInfo": {
-                            name: "View Info",
+                            name: app.getLz("settings.option.visual.theme.viewInfo"),
+                            disabled: true,
                             action: () => {
 
                             }

src/renderer/views/pages/settings.ejs

@@ -480,20 +480,8 @@
                                 {{$root.getLz('settings.header.visual.theme')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
-                                <label>
+                                <button class="md-btn md-btn-block" @click="$root.appRoute('installed-themes')">
-                                    <select class="md-select" @change="$root.setTheme($root.cfg.visual.theme)"
+                                    {{$root.getLz('settings.option.visual.theme.manageStyles')}}
-                                            v-model="$root.cfg.visual.theme">
-                                        <option value="default.less">
-                                            {{$root.getLz('settings.option.visual.theme.default')}}
-                                        </option>
-                                        <option value="dark.less">{{$root.getLz('settings.option.visual.theme.dark')}}
-                                        </option>
-                                        <option v-for="theme in themes" :value="theme.file">{{ theme.name }}</option>
-                                    </select>
-                                </label>
-                                <button class="md-btn md-btn-small md-btn-block" @click="gitHubExplore()"
-                                        style="margin-top: 8px">
-                                    {{$root.getLz('settings.option.visual.theme.github.explore')}}
                                 </button>
                             </div>
                         </div>
@@ -1216,19 +1204,6 @@
                                 </button>
                             </div>
                         </div>
-
-                        <div class="md-option-line">
-                            <!-- Do not translate -->
-                            <div class="md-option-segment">
-                                Style Editor<br>
-                                <small>Mix and match various theme components to get Cider looking exactly how you
-                                    want.</small>
-                            </div>
-                            <div class="md-option-segment md-option-segment_auto">
-                                <button class="md-btn" @click="app.appRoute('installed-themes')">Manage Styles</button>
-                            </div>
-                        </div>
-
                         <div class="md-option-line">
                             <div class="md-option-segment">
                                 {{$root.getLz('settings.option.experimental.unknownPlugin')}}

src/renderer/views/pages/themes-github.ejs

@@ -5,17 +5,14 @@
                 <div class="col nopadding">
                     <h1 class="header-text">{{$root.getLz('settings.header.visual.theme.github.page')}}</h1>
                 </div>
-                <div class="col-auto flex-center">
+                <div class="col-auto nopadding flex-center">
-                    <select class="md-select" @change="$root.setTheme($root.cfg.visual.theme)"
+                    <button class="md-btn md-btn-small md-btn-block" @click="$root.appRoute('installed-themes')">
-                            v-model="$root.cfg.visual.theme">
+                        {{$root.getLz('settings.option.visual.theme.manageStyles')}}
-                        <option value="default.less">{{$root.getLz('settings.option.visual.theme.default')}}</option>
+                    </button>
-                        <option value="dark.less">{{$root.getLz('settings.option.visual.theme.dark')}}</option>
-                        <option v-for="theme in themes" :value="theme.file">{{ theme.name }}</option>
-                    </select>
                 </div>
                 <div class="col-auto flex-center">
-                    <button class="md-btn md-btn-small md-btn-block" @click="openThemesFolder()">
+                    <button class="md-btn md-btn-small md-btn-block" @click="$root.checkForThemeUpdates()">
-                        {{$root.getLz('settings.option.visual.theme.github.openfolder')}}
+                        Check for updates
                     </button>
                 </div>
                 <div class="col-auto nopadding flex-center">
@@ -106,7 +103,6 @@
             this.themes = ipcRenderer.sendSync("get-themes")
             this.getRepos();
             this.getInstalledThemes();
-            app.checkForThemeUpdates()
         },
         methods: {
             openThemesFolder() {