feat: font-family & update timer

- Added inter font family
- Reduced update poll timer to 1 hour

app/src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "scribe"
-version = "0.5.3"
+version = "0.5.4"
 description = "A note taking app with seamless user experience"
 authors = ["HoaX7"]
 license = ""
@@ -30,7 +30,7 @@ cocoa = "0.26.0"
 core-graphics = "0.24.0"
 
 [target.'cfg(windows)'.dependencies]
-winapi = { version = "0.3.9", features = ["winuser", "dwmapi"] }
+winapi = { version = "0.3.9", features = ["winuser", "dwmapi", "shellscalingapi"] }
 
 [features]
 # this feature is used for production builds or when `devPath` points to the filesystem and the built-in dev server is disabled.

app/src-tauri/src/main.rs

@@ -16,6 +16,10 @@ use tauri::{AppHandle, Manager};
 use window_shadows::set_shadow;
 
 fn main() {
+    #[cfg(target_os = "windows")]
+    unsafe {
+        winapi::um::shellscalingapi::SetProcessDpiAwareness(1);
+    }
     std::panic::set_hook(Box::new(|info| {
         let msg = match info.payload().downcast_ref::<&'static str>() {
             Some(s) => *s,

app/src-tauri/tauri.conf.json

@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "scribe",
-    "version": "0.5.3"
+    "version": "0.5.4"
   },
   "tauri": {
     "allowlist": {

app/src/app.css

@@ -33,7 +33,7 @@ html,
 body {
 	margin: 0;
 	height: 100%;
-	font-family: 'Nunito Regular';
+	font-family: 'Inter';
 }
 ul li {
 	list-style: disc;

app/src/fonts/font.css

@@ -1,167 +1,6 @@
-@font-face {
-    font-family: 'Helvetica';
-    font-style: normal;
-    font-weight: normal;
-    src: local('Helvetica'), url('Helvetica.woff') format('woff');
-    }
-
-
-    @font-face {
-    font-family: 'Helvetica Oblique';
-    font-style: normal;
-    font-weight: normal;
-    src: local('Helvetica Oblique'), url('Helvetica-Oblique.woff') format('woff');
-    }
-
-
-    @font-face {
-    font-family: 'Helvetica Compressed';
-    font-style: normal;
-    font-weight: normal;
-    src: local('Helvetica Compressed'), url('helvetica-compressed-5871d14b6903a.woff') format('woff');
-    }
-
-
-    @font-face {
-    font-family: 'Helvetica Rounded Bold';
-    font-style: normal;
-    font-weight: normal;
-    src: local('Helvetica Rounded Bold'), url('helvetica-rounded-bold-5871d05ead8de.woff') format('woff');
-    }
-
-
-    @font-face {
-    font-family: 'Helvetica';
-    font-style: normal;
-    font-weight: normal;
-    src: local('Helvetica'), url('Helvetica-Bold.woff') format('woff');
-    }
-
 
-    @font-face {
-    font-family: 'Helvetica Bold Oblique';
-    font-style: normal;
-    font-weight: normal;
-    src: local('Helvetica Bold Oblique'), url('Helvetica-BoldOblique.woff') format('woff');
-    }
-
-
-    @font-face {
-    font-family: 'Helvetica Light';
-    font-style: normal;
-    font-weight: normal;
-    src: local('Helvetica Light'), url('helvetica-light-587ebe5a59211.woff') format('woff');
-    }
-
-    /* #### Generated By: http://font.download #### */
-
-    @font-face {
-        font-family: 'Nunito Regular';
-        font-style: normal;
-        font-weight: normal;
-        src: local('Nunito Regular'), url('Nunito-Regular.woff') format('woff');
-        }
-
-
-        @font-face {
-        font-family: 'Nunito Italic';
-        font-style: normal;
-        font-weight: normal;
-        src: local('Nunito Italic'), url('Nunito-Italic.woff') format('woff');
-        }
-
-
-        @font-face {
-        font-family: 'Nunito ExtraLight';
-        font-style: normal;
-        font-weight: normal;
-        src: local('Nunito ExtraLight'), url('Nunito-ExtraLight.woff') format('woff');
-        }
-
-
-        @font-face {
-        font-family: 'Nunito ExtraLight Italic';
-        font-style: normal;
-        font-weight: normal;
-        src: local('Nunito ExtraLight Italic'), url('Nunito-ExtraLightItalic.woff') format('woff');
-        }
-
-
-        @font-face {
-        font-family: 'Nunito Light';
-        font-style: normal;
-        font-weight: normal;
-        src: local('Nunito Light'), url('Nunito-Light.woff') format('woff');
-        }
-
-
-        @font-face {
-        font-family: 'Nunito Light Italic';
-        font-style: normal;
-        font-weight: normal;
-        src: local('Nunito Light Italic'), url('Nunito-LightItalic.woff') format('woff');
-        }
-
-
-        @font-face {
-        font-family: 'Nunito SemiBold';
-        font-style: normal;
-        font-weight: normal;
-        src: local('Nunito SemiBold'), url('Nunito-SemiBold.woff') format('woff');
-        }
-
-
-        @font-face {
-        font-family: 'Nunito SemiBold Italic';
-        font-style: normal;
-        font-weight: normal;
-        src: local('Nunito SemiBold Italic'), url('Nunito-SemiBoldItalic.woff') format('woff');
-        }
-
-
-        @font-face {
-        font-family: 'Nunito Bold';
-        font-style: normal;
-        font-weight: normal;
-        src: local('Nunito Bold'), url('Nunito-Bold.woff') format('woff');
-        }
-
-
-        @font-face {
-        font-family: 'Nunito Bold Italic';
-        font-style: normal;
-        font-weight: normal;
-        src: local('Nunito Bold Italic'), url('Nunito-BoldItalic.woff') format('woff');
-        }
-
-
-        @font-face {
-        font-family: 'Nunito ExtraBold';
-        font-style: normal;
-        font-weight: normal;
-        src: local('Nunito ExtraBold'), url('Nunito-ExtraBold.woff') format('woff');
-        }
-
-
-        @font-face {
-        font-family: 'Nunito ExtraBold Italic';
-        font-style: normal;
-        font-weight: normal;
-        src: local('Nunito ExtraBold Italic'), url('Nunito-ExtraBoldItalic.woff') format('woff');
-        }
-
-
-        @font-face {
-        font-family: 'Nunito Black';
-        font-style: normal;
-        font-weight: normal;
-        src: local('Nunito Black'), url('Nunito-Black.woff') format('woff');
-        }
-
-
-        @font-face {
-        font-family: 'Nunito Black Italic';
-        font-style: normal;
-        font-weight: normal;
-        src: local('Nunito Black Italic'), url('Nunito-BlackItalic.woff') format('woff');
-        }
+@font-face {
+    font-family: 'Inter';
+    font-weight: 400 800;
+    src: url('./inter/inter-variable-font.ttf');
+}

app/src/lib/components/common/DropDown.svelte

@@ -1,18 +1,49 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte";
   import Typography from "./Typography.svelte";
+  import Icon from "./Icon.svelte";
+  import WindowEvent from "$lib/hooks/WindowEvent.svelte";
 
-    export let items: {
+    type IItem = {
         key: string;
         name: string;
-    }[] = [];
-    export let showDD = false;
-    export let selectedItem = "Options";
+    };
+    export let items: IItem[] = [];
+    export let selectedItem = {} as IItem;
     const dispatch = createEventDispatcher();
+
+    let showdd = false;
 </script>
 
-<div class="rounded bg-gray-200">
-    <Typography variant="div" weight="normal" fontSize="base">
-        {selectedItem}
+<!-- <WindowEvent event="mouseup" callback={() => showdd = false} /> -->
+<div class="rounded border" on:click|stopPropagation role="none">
+    <Typography variant="div" weight="normal" fontSize="base" classname="p-1 px-2 flex justify-between items-center cursor-pointer"
+        on:click={() => showdd = !showdd}
+    >
+        {selectedItem.name || "Select"} <Icon src="/assets/images/chevron.svg" width="18" alt="dd" class={showdd ? "rotate-180" : ""} />
     </Typography>
+    {#if showdd}
+        <hr class="mx-3" />
+        <div class="mt-2">
+            {#if items.length === 0}
+        <Typography variant="div" weight="normal" fontSize="sm" classname="p-1 px-2 text-gray-600">
+            No Items
+        </Typography>
+        {:else}
+        {#each items as item}
+        <button class="w-full text-start p-1 px-2 hover:bg-gray-100 disabled:text-gray-600"
+            on:click={() => {
+                selectedItem = item;
+                dispatch("select", item);
+            }}
+            disabled={selectedItem.key === item.key}
+        >
+            <Typography variant="div" weight="normal" fontSize="base">
+                {item.name}
+            </Typography>
+        </button>
+        {/each}
+        {/if}
+        </div>
+    {/if}
 </div>

app/src/lib/components/common/Typography.svelte

@@ -16,7 +16,7 @@
 </script>
 
 
-<svelte:element this={variant} class={clsx(classname, `text-${fontSize} font-${weight}`)}>
+<svelte:element this={variant} class={clsx(classname, `text-${fontSize} font-${weight}`)} on:click role="none">
   <slot />
 </svelte:element>
 
@@ -46,14 +46,11 @@
     }
     .font-medium {
         font-weight: 500;
-        font-family: 'Nunito SemiBold';
     }
     .font-semi-bold {
         font-weight: 600;
-        font-family: 'Nunito Bold';
     }
     .font-bold {
         font-weight: 700;
-        font-family: 'Nunito ExtraBold';
     }
 </style>

app/src/lib/components/editor/extensions/index.ts

@@ -23,7 +23,7 @@ export const StarterKitOptions = {
 	code: { HTMLAttributes: { class: "px-1 bg-gray-200 rounded" } },
 	horizontalRule: { HTMLAttributes: { class: "my-8" } },
 	codeBlock: false as const,
-	heading: { HTMLAttributes: { class: "mt-8" } },
+	heading: { HTMLAttributes: { class: "mt-6" } },
 };
 
 export default [

app/src/lib/components/settings/tabs/Home.svelte

@@ -8,6 +8,7 @@
   import { emit } from "@tauri-apps/api/event";
   import { TAURI_EVENTS } from "../../../../utils/constants";
   import SettingStore from "../../../../store/settings";
+  import DropDown from "$lib/components/common/DropDown.svelte";
 
   export let settings: SettingProps;
   let saving = false;
@@ -32,6 +33,29 @@
     }
     saving = false;
   };
+
+  const fonts = [{
+    name: "Default",
+    key: "default"
+  }, {
+    name: "Inter",
+    key: "inter"
+  }];
+
+  let selected = $ctx.defaultFont ? fonts[0] : fonts[1];
+
+  const handleSelect = (e: { detail: any; }) => {
+    const data = e.detail;
+    let isDefault = false;
+    if (data.key === fonts[0].key) {
+      isDefault = true;
+    }
+    document.body.style.fontFamily = isDefault ? "unset" : "Inter";
+    ctx.update((store) => {
+      store.defaultFont = isDefault;
+      return store;
+    });
+  }
 </script>
 
 <div class="relative">
@@ -76,4 +100,17 @@
     new one.
   </Typography>
   </div>
+  <div class="mt-3">
+    <Typography
+    variant="div"
+    weight="normal"
+    fontSize="sm"
+    classname="text-slate-400 flex gap-1"
+  >
+    Font
+  </Typography>
+  <div class="mt-1">
+    <DropDown items={fonts} selectedItem={selected} on:select={handleSelect} />
+  </div>
+  </div>
 </div>