Merge pull request #276 from Muhammed-Rahif/alpha

Updates from alpha

.github/workflows/greetings.yml

@@ -151,6 +151,26 @@ jobs:
               body: message
             });
 
+      - name: Assign User Guidance
+        if: ${{ github.event.action == 'assigned' && steps.check_contributions.outputs.totalContributions < 3 }}
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const assignee = context.payload.assignee.login;
+            const issueNumber = context.payload.issue.number;
+            const message = `🛠️ **Heads up, @${assignee}!**  
+            You've been assigned an issue in **Notpad** – ready to make your mark? 🚀  
+            Since you're relatively new here, we highly recommend checking out our [CONTRIBUTING.md](https://github.com/Muhammed-Rahif/Notpad/blob/main/CONTRIBUTING.md).  
+            It’s packed with helpful tips, guidelines, and best practices to ensure a smooth contribution experience.  
+            We’re excited to see what you’ll bring to the table – happy coding! 💻✨`;
+
+            await github.rest.issues.createComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: issueNumber,
+              body: message
+            });
+
       - name: Thank Contributor When PR is Merged
         if: ${{ github.event.action == 'closed' && github.event.pull_request.merged == true }}
         uses: actions/github-script@v7

eslint.config.js

@@ -33,7 +33,7 @@ export default [
   {
     files: ['src/lib/components/ui/**/*.{svelte,ts}'],
     rules: {
-      '@typescript-eslint/no-unused-vars': 'off'
+      '@typescript-eslint/no-unused-vars': 'warn'
     }
   }
 ];

package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "predeploy": "pnpm run build",
-    "deploy": "gh-pages -d www -m 'chore(gh-pages): updates' -f --nojekyll",
+    "deploy": "gh-pages -d www -m 'chore(gh-pages): updates' --nojekyll",
     "lint": "prettier --check . && eslint . && npx tsc --noEmit --project tsconfig.check.json",
     "format": "prettier --write .",
     "tauri": "tauri"
@@ -30,7 +30,7 @@
     "@types/wicg-file-system-access": "^2023.10.5",
     "@vite-pwa/assets-generator": "^0.2.6",
     "autoprefixer": "^10.4.20",
-    "bits-ui": "1.0.0-next.64",
+    "bits-ui": "1.0.0-next.72",
     "clsx": "^2.1.1",
     "eslint": "^9.16.0",
     "eslint-config-prettier": "^9.1.0",

src/App.svelte

@@ -14,19 +14,20 @@
   import FindDialog from '@/components/FindDialog.svelte';
   import Loading from '@/components/Loading.svelte';
   import ShortcutsDialog from '@/components/ShortcutsDialog.svelte';
+  import EditorCloseConfirmationDialog from '@/components/EditorCloseConfirmationDialog.svelte';
 </script>
 
 {#await Notpad.init()}
-  <!-- Loading Animation -->
   <Loading />
 {:then}
-  <!-- Actual UI -->
+  <!-- What user see on initially -->
   <div class="flex h-full flex-col">
     <MenuBar />
     <EditorTabs />
   </div>
 
-  <!-- Additional Components -->
+  <!-- Components that aren't appear on initial roll -->
+  <EditorCloseConfirmationDialog />
   <FontDialog />
   <LicenseDialog />
   <AboutDialog />
@@ -35,10 +36,8 @@
   <FindDialog />
   <Shortcuts />
 {/await}
-
 <Toaster />
 <ModeWatcher />
-
 <svelte:head>
   {#if $mode == 'dark'}
     <link rel="icon" href={favIconDark} />

src/assets/css/fonts.css

@@ -22,3 +22,13 @@
   font-family: 'Roboto Slab';
   src: url('../../assets/fonts/RobotoSlab-VariableFont.ttf');
 }
+
+@font-face {
+  font-family: 'Inconsolata';
+  src: url('../../assets/fonts/Inconsolata-VariableFont.ttf');
+}
+
+@font-face {
+  font-family: 'Parkinsans';
+  src: url('../../assets/fonts/Parkinsans-VariableFont.ttf');
+}

src/lib/components/Editor/Editor.svelte

@@ -155,13 +155,16 @@
     updateEditorData();
     settings.subscribe(updateEditorData);
     quill.on('editor-change', updateEditorData);
+
+    // Marks editor as not saved when text content changes.
+    quill.on('text-change', () => Notpad.editors.setIsSaved(editor.id, false));
   });
 </script>
 
 <div class="relative h-full overflow-hidden">
   <div
-    class="editor-container h-full w-full overflow-hidden
-    rounded-none bg-transparent text-sm caret-transparent"
+    class="editor-container overflow-hidden rounded-none
+    bg-transparent text-sm caret-transparent"
     bind:this={editorContainer}
     style="--editor-font-family: '{$settings.fontFamily}';
     --editor-font-size: {$settings.fontSize}px;
@@ -181,34 +184,33 @@
 
 <StatusBar {caretLineNo} {caretColumnNo} {characterCount} {wordCount} />
 
-<!-- {#if updateScheduled}
-  <style>
-    .fake-caret {
-      animation: none !important;
-    }
-  </style>
-{/if} -->
-
 {#if $settings.lineNumbers}
   <style>
     .ql-editor {
       counter-reset: line;
       @apply !pl-0;
     }
 
+    .ql-editor {
+      --line-no-font-size-factor: 0.8;
+    }
+
     .ql-editor > * {
-      margin-left: clamp(22px, calc(1.6ch * var(--line-no-digits-count)), 10vw) !important;
-      @apply relative border-l-2 border-muted !pl-2 duration-100;
+      margin-left: calc(
+        max(var(--line-no-digits-count), 3) * 1em * var(--line-no-font-size-factor)
+      ) !important;
+      padding-left: calc(var(--editor-font-size) * 0.5) !important;
+      @apply relative border-l-2 border-muted duration-100;
     }
 
     .ql-editor > *::before {
-      font-size: calc(var(--editor-font-size) * 0.7);
+      font-size: calc(var(--editor-font-size) * var(--line-no-font-size-factor));
       counter-increment: line;
       content: counter(line);
       transform: translateX(-100%);
-      width: clamp(20px, calc(2ch * var(--line-no-digits-count)), 10vw) !important;
-      padding-right: clamp(10px, calc(0.6ch * var(--line-no-digits-count)), 10vw) !important;
-      @apply absolute left-0 text-right text-primary duration-100;
+      width: calc(max(var(--line-no-digits-count), 3) * 1em) !important;
+      /* padding: 0 1em; */
+      @apply absolute left-0 text-center text-primary duration-100;
     }
   </style>
 {/if}

src/lib/components/EditorCloseConfirmationDialog.svelte

@@ -0,0 +1,68 @@
+<script module>
+  import { writable } from 'svelte/store';
+
+  export type Status = 'save' | 'dont-save' | 'cancel';
+
+  const open = writable(false);
+  const resolve = writable<(value: Status) => void>(() => {});
+  const fileName = writable('');
+
+  export function openEditorCloseConfirmationDialog({
+    fileName: fl
+  }: {
+    fileName: string;
+  }): Promise<Status> {
+    fileName.set(fl);
+    open.set(true);
+
+    return new Promise((res) => {
+      resolve.set(res);
+    });
+  }
+</script>
+
+<script lang="ts">
+  import * as AlertDialog from '@/components/ui/alert-dialog';
+  import Button from '@/components/ui/button/button.svelte';
+
+  function onSave() {
+    $resolve('save');
+    open.set(false);
+  }
+
+  function onDontSave(e: Event) {
+    e.preventDefault();
+    e.stopPropagation();
+    $resolve('dont-save');
+    open.set(false);
+  }
+
+  function onCancel() {
+    $resolve('cancel');
+    open.set(false);
+  }
+
+  function onOpenChange(op: boolean) {
+    open.set(op);
+    if (op == false) {
+      $resolve('cancel');
+    }
+  }
+</script>
+
+<AlertDialog.Root open={$open} {onOpenChange}>
+  <AlertDialog.Content>
+    <AlertDialog.Header>
+      <AlertDialog.Title>Unsaved Changes</AlertDialog.Title>
+      <AlertDialog.Description>
+        The contents from "{$fileName}" are not saved to local file. Do you want to save it to a
+        file before closing this editor? If you don't save, your changes will be lost.
+      </AlertDialog.Description>
+    </AlertDialog.Header>
+    <AlertDialog.Footer>
+      <AlertDialog.Cancel onclick={onCancel}>Cancel</AlertDialog.Cancel>
+      <Button variant="outline" onclick={onDontSave}>Don't Save</Button>
+      <AlertDialog.Action onclick={onSave}>Save</AlertDialog.Action>
+    </AlertDialog.Footer>
+  </AlertDialog.Content>
+</AlertDialog.Root>

src/lib/components/EditorTabs.svelte

@@ -52,11 +52,12 @@
   {/if}
 
   {#each $editors as editor (editor.id)}
-    <Tabs.Content value={editor.id} class="mt-0 h-full w-full">
+    <Tabs.Content value={editor.id} class="mt-0 h-full overflow-hidden">
       <ContextMenu.Root>
-        <ContextMenu.Trigger class="flex h-full w-full flex-col overflow-hidden">
+        <ContextMenu.Trigger class="flex h-full flex-col">
           <Editor {editor} />
         </ContextMenu.Trigger>
+
         <ContextMenu.Content class="w-48">
           <ContextMenu.Item onclick={() => Notpad.editOptions.undo()}>
             Undo<ContextMenu.Shortcut>Ctrl+Z</ContextMenu.Shortcut>

src/lib/components/EditorTitle.svelte

@@ -85,6 +85,11 @@
             {readonly}
           />
         </form>
+
+        {#if !editor.isSaved}
+          <span>^</span>
+        {/if}
+
         <Button
           onclick={onEditorClose(editor.id)}
           size="sm"
@@ -99,6 +104,7 @@
         </Button>
       </div>
     </Tooltip.Trigger>
+
     {#if editor.filePath}
       <Tooltip.Content>
         {editor.filePath}

src/lib/components/ui/alert-dialog/alert-dialog-action.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+  import { buttonVariants } from '@/components/ui/button/index.js';
+  import { cn } from '@/utils.js';
+
+  let {
+    class: className,
+    ref = $bindable(null),
+    ...restProps
+  }: AlertDialogPrimitive.ActionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Action bind:ref class={cn(buttonVariants(), className)} {...restProps} />

src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+  import { buttonVariants } from '@/components/ui/button/index.js';
+  import { cn } from '@/utils.js';
+
+  let {
+    class: className,
+    ref = $bindable(null),
+    ...restProps
+  }: AlertDialogPrimitive.CancelProps = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+  bind:ref
+  class={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
+  {...restProps}
+/>

src/lib/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive, type WithoutChild } from 'bits-ui';
+  import AlertDialogOverlay from './alert-dialog-overlay.svelte';
+  import { cn } from '@/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    portalProps,
+    ...restProps
+  }: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+    portalProps?: AlertDialogPrimitive.PortalProps;
+  } = $props();
+</script>
+
+<AlertDialogPrimitive.Portal {...portalProps}>
+  <AlertDialogOverlay />
+  <AlertDialogPrimitive.Content
+    bind:ref
+    class={cn(
+      'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+      className
+    )}
+    {...restProps}
+  />
+</AlertDialogPrimitive.Portal>