Relocate lib components

package.json

@@ -38,6 +38,7 @@
 	"type": "module",
 	"dependencies": {
 		"@codemirror/commands": "^6.10.0",
+		"@codemirror/lang-javascript": "^6.2.4",
 		"@codemirror/lang-python": "^6.2.1",
 		"@codemirror/language": "^6.11.3",
 		"@codemirror/state": "^6.5.2",

src/lib/common/audio-player/AudioSpeaker.svelte

@@ -2,7 +2,7 @@
 	import { initSpeech, stopAll, clearSpeakerInstantce } from "$lib/common/audio-player/store";
 	import { onMount, onDestroy } from "svelte";
   import { v4 as uuidv4 } from 'uuid';
-	import Stretch from "../Stretch.svelte";
+	import Stretch from "../shared/Stretch.svelte";
 
   /** @type {string} */
   export let text;

src/lib/common/audio-player/MessageAudioPlayer.svelte

@@ -2,7 +2,7 @@
 	import { stopAll, initAudio, clearAudioInstantce } from "$lib/common/audio-player/store";
 	import { onMount, onDestroy, createEventDispatcher } from "svelte";
   import { v4 as uuidv4 } from 'uuid';
-	import Stretch from "../Stretch.svelte";
+	import Stretch from "../shared/Stretch.svelte";
 
   const svelteDispatch = createEventDispatcher();
 

src/lib/common/LanguageDropdown.svelte → src/lib/common/dropdowns/LanguageDropdown.svelte

@@ -5,16 +5,16 @@
 		DropdownMenu,
 		DropdownItem,
 	} from '@sveltestrap/sveltestrap';
-
 	import { setupI18n } from "$lib/helpers/i18n";
-
 	import languages from "$lib/common/data/languages";
 	import { onMount } from "svelte";
 
-	 let selectedLang;
+	/** @type {string} */
+	let selectedLang;
 
 	let isOpen = false;
 
+	/** @param {string} lang */
 	function handleLocaleChange(lang) {
 		setupI18n({ withLocale: lang });
 		selectedLang = lang

src/lib/common/errors/error-500.svelte

@@ -1,7 +1,7 @@
 <script>
 	import Link from 'svelte-link';
 	import { Col, Container, Row } from '@sveltestrap/sveltestrap';
-	import HeadTitle from '$lib/common/HeadTitle.svelte';
+	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
 </script>
 
 <HeadTitle title="500 Error Page" />

src/lib/common/AudioGallery.svelte → src/lib/common/files/AudioGallery.svelte

@@ -1,5 +1,5 @@
 <script>
-	import AudioPlayer from './audio-player/AudioPlayer.svelte';
+	import AudioPlayer from '../audio-player/AudioPlayer.svelte';
 
   /** @type {import('$fileTypes').AudioFileModel[]} */
   export let audios = [];

src/lib/common/MessageFileGallery.svelte → src/lib/common/files/MessageFileGallery.svelte

@@ -1,7 +1,7 @@
 <script>
     import { onMount } from 'svelte';
     import { PUBLIC_SERVICE_URL } from '$env/static/public';
-	import FileGallery from '$lib/common/FileGallery.svelte';
+	import FileGallery from '$lib/common/files/FileGallery.svelte';
 	import { userStore } from '$lib/helpers/store';
 	import { isAudio, AUDIO_ICON } from '$lib/helpers/utils/file';
 	import { isExternalUrl } from '$lib/helpers/utils/common';

src/lib/common/modals/PlainModal.svelte

@@ -0,0 +1,36 @@
+<script>
+    import { Modal, ModalBody, ModalHeader } from "@sveltestrap/sveltestrap";
+
+    /** @type {boolean} */
+    export let isOpen;
+
+    /** @type {string} */
+    export let size = 'lg';
+
+    /** @type {string | any} */
+    export let title;
+
+    /** @type {string} */
+    export let containerClasses = '';
+
+    /** @type {string} */
+    export let containerStyles = '';
+
+    /** @type {() => void} */
+    export let toggleModal;
+</script>
+
+<Modal
+    class={containerClasses}
+    style={containerStyles}
+    fade
+    size={size}
+    isOpen={isOpen}
+    header={title}
+    toggle={() => toggleModal()}
+    unmountOnClose
+>
+    <ModalBody>
+        <slot />
+    </ModalBody>
+</Modal>

src/lib/common/nav-bar/NavItem.svelte

@@ -1,5 +1,5 @@
 <script>
-	import InPlaceEdit from "../InPlaceEdit.svelte";
+	import InPlaceEdit from "../shared/InPlaceEdit.svelte";
 
 
     /** @type {string} */

src/lib/common/shared/CodeScript.svelte

@@ -0,0 +1,81 @@
+<script>
+    import { onMount, createEventDispatcher } from "svelte";
+    import CodeMirror from "svelte-codemirror-editor";
+    import { keymap } from "@codemirror/view";
+    import { indentUnit, indentOnInput, indentService } from "@codemirror/language";
+    import { defaultKeymap, history, indentWithTab, historyKeymap } from "@codemirror/commands";
+    import { EditorState } from "@codemirror/state";
+    import { python } from "@codemirror/lang-python";
+    import { javascript } from "@codemirror/lang-javascript";
+	import { oneDark } from "@codemirror/theme-one-dark";
+
+    const dispatch = createEventDispatcher();
+
+    /** @type {string} */
+    export let language = 'python';
+
+    /** @type {string} */
+    export let scriptText;
+
+    /** @type {string} */
+    export let containerClasses = '';
+
+
+    /** @type {import("@codemirror/state").Extension[]} */
+    const baseExtensions = [
+        indentUnit.of("    "),
+        EditorState.tabSize.of(4),
+        indentOnInput(),
+        history(),
+        keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab])
+    ];
+
+    /** @type {import("@codemirror/state").Extension[]} */
+    let extensions = [];
+
+    onMount(() => {
+        if (language === 'python') {
+            extensions = [
+                python(),
+                indentService.of((context, pos) => {
+                    const prevLine = pos > 0 ? context.state.doc.lineAt(pos - 1) : null;
+                    if (prevLine) {
+                        const prevText = prevLine.text;
+                        const match = prevText.match(/^(\s*)/);
+                        const baseIndent = match ? match[1].length : 0;
+
+                        // Check if previous line ends with : (control structure)
+                        if (prevText.trimEnd().endsWith(':')) {
+                            return baseIndent + 4;
+                        }
+                        return baseIndent;
+                    }
+                    return 0;
+                }),
+                ...baseExtensions
+            ];
+        } else if (language === 'javascript') {
+            extensions = [
+                javascript(),
+                ...baseExtensions
+            ];
+        }
+    });
+
+    /** @param {any} e */
+    function handleChange(e) {
+        dispatch('change', {
+            text: e.detail
+        });
+    }
+</script>
+
+
+<CodeMirror
+    class={`code-script-container ${containerClasses}`}
+    theme={oneDark}
+    lineWrapping
+    extensions={extensions}
+    value={scriptText}
+    on:change={e => handleChange(e)}
+/>

src/lib/common/CollapsibleCard.svelte → src/lib/common/shared/CollapsibleCard.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { createEventDispatcher } from 'svelte'
+    import { createEventDispatcher } from 'svelte';
     import collapse from 'svelte-collapse';
 
     /** @type {boolean} */
@@ -11,7 +11,7 @@
     /** @type {string} */
     export let easing = 'ease';
 
-    const dispatch = createEventDispatcher()
+    const dispatch = createEventDispatcher();
 
     function handleToggle () {
         open = !open;

src/lib/common/RightSidebar.svelte → src/lib/common/shared/RightSidebar.svelte

@@ -2,7 +2,6 @@
 	import Link from 'svelte-link';
 	import 'overlayscrollbars/overlayscrollbars.css';
 	import { OverlayScrollbars } from 'overlayscrollbars';
-
 	import { onMount } from 'svelte';
 
 	export let sidebarColor = 'dark';

src/lib/common/StateSearch.svelte → src/lib/common/shared/StateSearch.svelte

@@ -1,6 +1,6 @@
 <script>
     import { fly } from 'svelte/transition';
-	import RemoteSearchInput from "$lib/common/RemoteSearchInput.svelte";
+	import RemoteSearchInput from "$lib/common/shared/RemoteSearchInput.svelte";
 	import { Button, Input } from "@sveltestrap/sveltestrap";
 
     const limit = 5;

src/lib/scss/app.scss

@@ -46,6 +46,7 @@ File: Main Css File
 @import "custom/components/select";
 @import "custom/components/markdown";
 @import "custom/components/state";
+@import "custom/components/codeScript";
 
 // Plugins
 @import "custom/plugins/custom-scrollbar";

src/lib/scss/custom/components/_codeScript.scss

@@ -0,0 +1,6 @@
+.code-script-container {
+    min-height: 300px;
+    max-height: 500px;
+    overflow: auto;
+    scrollbar-width: thin;
+}

src/routes/(authentication)/login/+page.svelte

@@ -13,7 +13,7 @@
 		Button,
 		Alert
 	} from '@sveltestrap/sveltestrap';
-	import Headtitle from '$lib/common/HeadTitle.svelte';
+	import Headtitle from '$lib/common/shared/HeadTitle.svelte';
 	import { getToken, getTenantOptions } from '$lib/services/auth-service.js';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';

src/routes/(authentication)/recoverpw/+page.svelte

@@ -1,7 +1,7 @@
 <script>
 	import Link from 'svelte-link';
 	import { Row, Col, CardBody, Card, Container, Form, Label, Input, Button, Alert } from '@sveltestrap/sveltestrap';
-	import Headtitle from '$lib/common/HeadTitle.svelte';
+	import Headtitle from '$lib/common/shared/HeadTitle.svelte';
 	import { PUBLIC_LOGO_URL, PUBLIC_COMPANY_NAME } from '$env/static/public';
 </script>
 

src/routes/(authentication)/register/+page.svelte

@@ -1,7 +1,7 @@
 <script>
 	import Link from 'svelte-link';
 	import { Row, Col, CardBody, Card, Container, Form, Label, Input, Button, Alert } from '@sveltestrap/sveltestrap';
-	import Headtitle from '$lib/common/HeadTitle.svelte';
+	import Headtitle from '$lib/common/shared/HeadTitle.svelte';
 	import { goto } from '$app/navigation';
 	import { PUBLIC_LOGO_URL, PUBLIC_COMPANY_NAME } from '$env/static/public';
 

src/routes/(home)/+page.svelte

@@ -2,7 +2,7 @@
     import Link from "svelte-link";
     import { fade } from 'svelte/transition';
     import { Container, Row, Col } from '@sveltestrap/sveltestrap';
-    import HeadTitle from "$lib/common/HeadTitle.svelte";
+    import HeadTitle from "$lib/common/shared/HeadTitle.svelte";
     import { 
         PUBLIC_LOGO_URL, 
         PUBLIC_BRAND_NAME, 

src/routes/VerticalLayout/Header.svelte

@@ -3,10 +3,10 @@
 	import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import { Input } from '@sveltestrap/sveltestrap';
-	import LanguageDropdown from '$lib/common/LanguageDropdown.svelte';
-	import FullScreenDropdown from '$lib/common/FullScreenDropdown.svelte';
-	import NotificationDropdown from '$lib/common/NotificationDropdown.svelte';
-	import ProfileDropdown from '$lib/common/ProfileDropdown.svelte';
+	import LanguageDropdown from '$lib/common/dropdowns/LanguageDropdown.svelte';
+	import FullScreenDropdown from '$lib/common/dropdowns/FullScreenDropdown.svelte';
+	import NotificationDropdown from '$lib/common/dropdowns/NotificationDropdown.svelte';
+	import ProfileDropdown from '$lib/common/dropdowns/ProfileDropdown.svelte';
 	import { OverlayScrollbars } from 'overlayscrollbars';
 	import { PUBLIC_LOGO_URL } from '$env/static/public';
 	import { globalEventStore, getTenantName } from '$lib/helpers/store';

src/routes/VerticalLayout/Index.svelte

@@ -1,11 +1,11 @@
 <script>
 	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
-	import RightSidebar from '$lib/common/RightSidebar.svelte';
+	import RightSidebar from '$lib/common/shared/RightSidebar.svelte';
 	import { getPluginMenu } from '$lib/services/plugin-service';
 	import { myInfo } from '$lib/services/auth-service';
 	import { globalMenuStore } from '$lib/helpers/store';
-	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
 	import GlobalHeader from '$lib/common/shared/GlobalHeader.svelte';
 	import Header from './Header.svelte';
 	import Sidebar from './Sidebar.svelte';