v1.0.0

Author: bennett-sh

README.md

@@ -1,7 +1,2 @@
-# Tauri + Svelte + Typescript
-
-This template should help get you started developing with Tauri, Svelte and TypeScript in Vite.
-
-## Recommended IDE Setup
-
-[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer).
+# Explorer Sidebar Manager
+#### A tool for adding custom items to explorer's sidebar.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "explorer-sidebar-manager",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev:vite": "vite",

src-tauri/src/main.rs

@@ -169,7 +169,7 @@ fn create_shortcut_in_clsid(
         Err(err) => return (false, err.to_string()),
     }
     if icon_path.len() > 0 {
-        let (default_icon, _default_icon_disp) = match shortcut.create_subkey("DefaultKey") {
+        let (default_icon, _default_icon_disp) = match shortcut.create_subkey("DefaultIcon") {
             Ok(k) => k,
             Err(err) => return (false, err.to_string()),
         };
@@ -202,12 +202,12 @@ fn create_shortcut_in_clsid(
         Ok(k) => k,
         Err(err) => return (false, err.to_string()),
     };
-    /*match instance.set_value("CLSID", &"") {
+    match instance.set_value("CLSID", &"{0E5AAE11-A475-4c5b-AB00-C66DE400274E}") {
         Ok(()) => (),
         Err(err) => {
             return (false, err.to_string())
         }
-    }*/
+    }
     let (init_prop_bag, _init_prop_bag_disp) = match instance.create_subkey("InitPropertyBag") {
         Ok(k) => k,
         Err(err) => return (false, err.to_string()),
@@ -305,7 +305,7 @@ fn get_shortcut_by_id(id: &str) -> (bool, String, Option<Shortcut>) {
         icon_index: 0,
         icon_path: "".to_string(),
     });
-    let default_icon_key = match shortcut.open_subkey("DefaultKey") {
+    let default_icon_key = match shortcut.open_subkey("DefaultIcon") {
         Ok(key) => key,
         Err(err) => match err.kind() {
             ErrorKind::NotFound => return (true, "".to_string(), no_icon_shortcut),

src-tauri/tauri.conf.json

@@ -7,8 +7,8 @@
     "withGlobalTauri": false
   },
   "package": {
-    "productName": "explorer-sidebar-manager",
-    "version": "0.0.0"
+    "productName": "Explorer Sidebar Manager",
+    "version": "1.0.0"
   },
   "tauri": {
     "allowlist": {

src/App.svelte

@@ -2,12 +2,23 @@
   import ToastSystem from './lib/ToastSystem.svelte'
   import { Router, Route } from 'svelte-routing'
   import Settings from './pages/Settings.svelte'
+  import { getSetting } from './utils/settings'
+  import Welcome from './pages/Welcome.svelte'
+  import { navigate } from 'svelte-routing'
   import Main from './pages/Main.svelte'
+  import { onMount } from 'svelte'
+
+  onMount(async () => {
+    if(!await getSetting('hasBeenWelcomed', false)) {
+      navigate('/welcome')
+    }
+  })
 </script>
 
 <Router url={window.location.pathname}>
   <Route path="/" component={Main} />
   <Route path="/settings" component={Settings} />
+  <Route path="/welcome" component={Welcome} />
 </Router>
 
 <ToastSystem />

src/input.css

@@ -76,7 +76,8 @@
   label:not(.select),
   input:disabled:not(.select),
   input.disabled:not(.select),
-  input[disabled]:not(.select) {
+  input[disabled]:not(.select),
+  button:not(.select) {
     @apply select-none;
   }
 

src/lib/AddShortcutModal.svelte

@@ -76,7 +76,7 @@
           type="text"
           name="path"
           autocomplete="off"
-          placeholder="%USERPROFILE%\my\folder"
+          placeholder="C:\my\folder"
           bind:value={path}
           required />
         <Button outline class="alternative" color="alternative" on:click={async () => {

src/lib/EditShortcutModal.svelte

@@ -67,7 +67,7 @@
           type="text"
           name="path"
           autocomplete="off"
-          placeholder="%USERPROFILE%\my\folder"
+          placeholder="C:\my\folder"
           bind:value={path}
           required />
         <Button outline class="alternative" color="alternative" on:click={async () => {

src/output.css

@@ -63,7 +63,8 @@ button.alternative {
 label:not(.select),
   input:disabled:not(.select),
   input.disabled:not(.select),
-  input[disabled]:not(.select) {
+  input[disabled]:not(.select),
+  button:not(.select) {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -924,6 +925,10 @@ a:hover {
   width: 100%;
 }
 
+.min-w-\[50vw\] {
+  min-width: 50vw;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -940,6 +945,10 @@ a:hover {
   max-width: 133px;
 }
 
+.max-w-\[20\%\] {
+  max-width: 20%;
+}
+
 .max-w-\[301px\] {
   max-width: 301px;
 }
@@ -1071,6 +1080,22 @@ a:hover {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+
+.animate-bounce {
+  animation: bounce 1s infinite;
+}
+
 @keyframes pulse {
   50% {
     opacity: .5;
@@ -1199,6 +1224,10 @@ a:hover {
   justify-content: space-between;
 }
 
+.justify-around {
+  justify-content: space-around;
+}
+
 .gap-1 {
   gap: 0.25rem;
 }
@@ -1215,6 +1244,18 @@ a:hover {
   gap: 2rem;
 }
 
+.gap-6 {
+  gap: 1.5rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.gap-16 {
+  gap: 4rem;
+}
+
 .gap-y-4 {
   row-gap: 1rem;
 }

src/pages/Main.svelte

@@ -50,7 +50,6 @@
     }
     // reassign to update UI
     shortcuts = shortcuts
-    console.log({ shortcuts, shortcutIDs })
 
     for(const id of invalidOrMissingShortcutIDs) {
       console.log(`cleaning ${id}`)
@@ -88,7 +87,7 @@
   {#if shortcuts && shortcuts?.length > 0}
     <Accordion>
       {#each shortcuts as { name, path, iconPath, iconIndex, guid: id, ...other }}
-        <AccordionItem transitionType='blur'>
+        <AccordionItem>
           <div slot="header" class="w-full mr-4 flex justify-between items-center">
             <span>{name}</span>
             <div class="flex flex-row gap-2 justify-center items-center">

src/pages/Welcome.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { Heading, Button, Card } from 'flowbite-svelte'
+  import { setSetting } from '../utils/settings'
+  import { PaintBrush } from 'svelte-heros-v2'
+  import { navigate } from 'svelte-routing'
+
+  async function exit() {
+    await setSetting('hasBeenWelcomed', true)
+    navigate('/')
+  }
+</script>
+
+<main class="flex flex-row justify-around items-center px-8 h-full">
+  <div class="flex flex-col justify-center gap-16 items-center">
+    <Heading class="text-center">Welcome to ESM</Heading>
+    <Button
+      class="
+        animate-bounce
+      "
+      on:click={exit}>
+      <div class="flex flex-row items-center gap-1">
+        <PaintBrush class="outline-none" size="1.25rem" />
+        Start Customizing
+      </div>
+    </Button>
+  </div>
+
+  <div class="flex flex-col h-full items-center justify-center min-w-[50vw] gap-6">
+    <Card>
+      <Heading tag="h3">Icons</Heading>
+      To add icons to your shortcuts you'll need to specify the path to an executable, a dll, an ico or an icl file and an icon index. You can use a tool like <a class="inline" href="http://www.angusj.com/resourcehacker/#download" rel="noreferrer noopener">ResourceHacker</a> or the built-in icon chooser to find the proper icon index.
+    </Card>
+    <Card>
+      <Heading tag="h3">Before Uninstalling</Heading>
+      If you decide to uninstall ESM it's recommended to go to settings and run the clean up function before to prevent left-over shortcuts.
+    </Card>
+  </div>
+</main>

src/utils/settings.ts

@@ -3,7 +3,7 @@ import { Store } from 'tauri-plugin-store-api'
 
 export const settingsStore = new Store('.settings.dat')
 
-export type SettingsKey = 'shortcuts'
+export type SettingsKey = 'shortcuts' | 'hasBeenWelcomed'
 
 export async function setSetting<T>(key: SettingsKey, value: T, save = false) {
   await settingsStore.set(key, value)