From 113533408d8a5b69a26f4d64863fe79d12fffcb1 Mon Sep 17 00:00:00 2001
From: lexx <alexlingris@gmail.com>
Date: Thu, 15 Aug 2024 18:52:53 +0300
Subject: [PATCH] content and edit record

---
 front/js/svelte/common/Checkbox.svelte        |  14 +++
 front/js/svelte/common/ErrorAlert.svelte      |   5 +-
 front/js/svelte/common/SpinnerButton.svelte   |   2 +-
 front/js/svelte/common/Switch.svelte          |   9 ++
 .../svelte/content/ActionsOnSelected.svelte   |  14 +--
 front/js/svelte/content/Table.svelte          |  90 +++++++--------
 .../svelte/content/pagination/NavItem.svelte  |   4 +-
 .../content/pagination/Pagination.svelte      |   4 +-
 front/js/svelte/content/tools/Tools.svelte    |   4 +-
 front/js/svelte/libs/Tinymce.svelte           |   6 +-
 front/js/svelte/libs/tinymce.css              |  37 +++++++
 front/js/svelte/records/Edit.svelte           |  58 +++++-----
 front/js/svelte/records/EditHeader.svelte     |  73 ------------
 front/js/svelte/records/FormField.svelte      |   4 +-
 front/js/svelte/records/InlineEdit.svelte     |   4 +-
 front/js/svelte/records/StatusSelect.svelte   |  57 ----------
 .../svelte/records/elements/Checkbox.svelte   |   2 +-
 .../records/elements/FieldHeader.svelte       |  12 +-
 .../records/{ => header}/ContentTabs.svelte   |   6 +-
 .../svelte/records/header/EditHeader.svelte   |  54 +++++++++
 .../svelte/records/header/StatusSelect.svelte |  26 +++++
 front/js/svelte/records/header/Title.svelte   |  27 +++++
 front/sass/_button.scss                       |   5 +-
 front/sass/_card.scss                         |   5 -
 front/sass/_checkbox.scss                     | 104 ++++++++++++++++++
 front/sass/_dropdown.scss                     |   1 +
 front/sass/_files.scss                        |   3 -
 front/sass/_form.scss                         |   9 +-
 front/sass/_pagination.scss                   |  27 +++++
 front/sass/_record-edit.scss                  |  68 ++++++++++++
 front/sass/_revisions.scss                    |   3 -
 front/sass/_sidebar.scss                      |   1 +
 front/sass/_switch.scss                       |  34 ++++++
 front/sass/_table.scss                        |  30 +++--
 front/sass/_tabs.scss                         |  11 ++
 front/sass/_toolbar.scss                      |  11 ++
 front/sass/_typography.scss                   |   2 +-
 front/sass/app.scss                           |  40 ++++---
 38 files changed, 577 insertions(+), 289 deletions(-)
 create mode 100644 front/js/svelte/common/Checkbox.svelte
 create mode 100644 front/js/svelte/common/Switch.svelte
 create mode 100644 front/js/svelte/libs/tinymce.css
 delete mode 100644 front/js/svelte/records/EditHeader.svelte
 delete mode 100644 front/js/svelte/records/StatusSelect.svelte
 rename front/js/svelte/records/{ => header}/ContentTabs.svelte (89%)
 create mode 100644 front/js/svelte/records/header/EditHeader.svelte
 create mode 100644 front/js/svelte/records/header/StatusSelect.svelte
 create mode 100644 front/js/svelte/records/header/Title.svelte
 delete mode 100644 front/sass/_card.scss
 create mode 100644 front/sass/_checkbox.scss
 delete mode 100644 front/sass/_files.scss
 create mode 100644 front/sass/_pagination.scss
 create mode 100644 front/sass/_record-edit.scss
 delete mode 100644 front/sass/_revisions.scss
 create mode 100644 front/sass/_switch.scss
 create mode 100644 front/sass/_tabs.scss

diff --git a/front/js/svelte/common/Checkbox.svelte b/front/js/svelte/common/Checkbox.svelte
new file mode 100644
index 0000000..da000e0
--- /dev/null
+++ b/front/js/svelte/common/Checkbox.svelte
@@ -0,0 +1,14 @@
+<script>
+
+    let checkboxEl = null;
+
+    export let indeterminate = false;
+
+    export let value;
+    export let checked = false;
+</script>
+
+<div class="checkbox-wrapper">
+    <input bind:this={checkboxEl} on:change id="c1-13" type="checkbox" {value} {indeterminate} checked={checked}/>
+</div>
+
diff --git a/front/js/svelte/common/ErrorAlert.svelte b/front/js/svelte/common/ErrorAlert.svelte
index 26a41dd..bdde2df 100644
--- a/front/js/svelte/common/ErrorAlert.svelte
+++ b/front/js/svelte/common/ErrorAlert.svelte
@@ -3,7 +3,8 @@
 </script>
 
 {#if message}
-    <div class="alert alert-danger" role="alert">
-        {message}
+    <div class="notice notice-error" role="alert">
+        <div class="title">Submission Errors</div>
+        <div class="content">  {message}</div>
     </div>
 {/if}
diff --git a/front/js/svelte/common/SpinnerButton.svelte b/front/js/svelte/common/SpinnerButton.svelte
index b8e2dd4..241b2c4 100644
--- a/front/js/svelte/common/SpinnerButton.svelte
+++ b/front/js/svelte/common/SpinnerButton.svelte
@@ -3,7 +3,7 @@
     export let disabled = false;
 </script>
 
-    <button type="submit" class="btn btn-primary btn-spinner" {disabled}>
+    <button type="submit" class="button btn-primary btn-spinner" {disabled}>
         <span
             class="spinner-border spinner-border-sm"
             role="status"
diff --git a/front/js/svelte/common/Switch.svelte b/front/js/svelte/common/Switch.svelte
new file mode 100644
index 0000000..662f67b
--- /dev/null
+++ b/front/js/svelte/common/Switch.svelte
@@ -0,0 +1,9 @@
+<script>
+
+
+    export let value;
+    export let checked = false;
+</script>
+
+<input type="checkbox" {value} on:change
+       class="switch"  {checked}/>
diff --git a/front/js/svelte/content/ActionsOnSelected.svelte b/front/js/svelte/content/ActionsOnSelected.svelte
index 2107050..24cbf87 100644
--- a/front/js/svelte/content/ActionsOnSelected.svelte
+++ b/front/js/svelte/content/ActionsOnSelected.svelte
@@ -35,47 +35,47 @@
     }
 </script>
 
-<div class="d-flex align-items-center mb-3">
+<div style="display: flex;align-items: center; gap: 8px">
     <span class="me-2">{selected.length} records selected</span>
     <div class="btn-group " role="group" aria-label="Basic example">
         <button
             on:click|preventDefault={(e) => changeStatus(e, "published")}
             type="button"
-            class="btn btn-sm btn-outline-primary">Publish
+            class="button">Publish
         </button
         >
         <button
             on:click|preventDefault={(e) => changeStatus(e, "draft")}
             type="button"
-            class="btn btn-sm btn-outline-primary">Make Draft
+            class="button">Make Draft
         </button
         >
         {#if filter["status_in"] === "trashed"}
             <button
                 on:click|preventDefault={(e) => changeStatus(e, "published")}
                 type="button"
-                class="btn btn-sm btn-outline-primary">Publish
+                class="button">Publish
             </button
             >
             {#if schema.hasDrafts}
                 <button
                     on:click|preventDefault={(e) => changeStatus(e, "draft")}
                     type="button"
-                    class="btn btn-sm btn-outline-primary">Make Draft
+                    class="button">Make Draft
                 </button
                 >
             {/if}
             <button
                 on:click|preventDefault={deleteRecords}
                 type="button"
-                class="btn btn-sm btn-outline-primary">Delete forever
+                class="button">Delete forever
             </button
             >
         {:else}
             <button
                 type="button"
                 on:click|preventDefault={(e) => changeStatus(e, "trashed")}
-                class="btn btn-sm btn-outline-primary">Move to trash
+                class="button">Move to trash
             </button
             >
         {/if}
diff --git a/front/js/svelte/content/Table.svelte b/front/js/svelte/content/Table.svelte
index 2d2c72a..9da614d 100644
--- a/front/js/svelte/content/Table.svelte
+++ b/front/js/svelte/content/Table.svelte
@@ -5,6 +5,7 @@
     import {getContext} from "svelte";
     import Avatar from "../account/Avatar.svelte";
     import {selectRecord, toggleAll} from "./functions/recordSelect.js";
+    import Checkbox from "../common/Checkbox.svelte";
 
     const channel = getContext("channel");
 
@@ -20,7 +21,7 @@
     export let selected = [];
 
     function eventToggleAll(e) {
-        selected = toggleAll(e,records,selected)
+        selected = toggleAll(e, records, selected)
     }
 
     function select(record) {
@@ -31,20 +32,18 @@
 
 </script>
 
-<div class="table">
-    <table class="">
-        <thead class="table-light">
+<div class="table mt-5 ">
+    <table>
+        <thead>
         <tr>
             {#if isWritable}
                 <th>
-                    <input
-                            on:change|preventDefault={eventToggleAll}
-                            indeterminate={selected.length > 0 &&
-                            selected.length < records.length}
-                            checked={selected.length == records.length}
-                            class="form-check-input"
-                            type="checkbox"
-                    />
+                    <Checkbox
+                            on:change={eventToggleAll}
+                            indeterminate={selected.length > 0 && selected.length < records.length}
+                            checked={selected.length === records.length}
+                    >
+                    </Checkbox>
                 </th>
             {/if}
 
@@ -54,13 +53,13 @@
                         class:is-sort={field.name === sortField.name}
                         scope="col"
                         title={field.help}
-                        data-bs-toggle="tooltip"
-                        data-bs-placement="top">{field.label}</th
+                       >{field.label}</th
                 >
             {/each}
             {#each systemFields.filter(c => schema.visible.includes(c.name)) as sysField}
-                <th>{sysField.label}</th>
+                <th class:is-sort={sysField.name === sortField.name}>{sysField.label}</th>
             {/each}
+            <th></th>
         </tr>
         </thead>
         <tbody>
@@ -68,44 +67,26 @@
             <tr>
                 <td class="title-td">
                     <div
-                            class="title-td-contents d-inline-flex justify-content-between w-100 align-items-center"
+                            class="title-td-contents"
                     >
-                        <div class="d-flex align-items-center ">
-                            {#if isWritable}
-                                <div class="form-check">
-                                    <input
-                                            on:change={() => select(record)}
-                                            class="form-check-input "
-                                            type="checkbox"
-                                            checked={selected.find(
-                                            (r) => r.id === record.id
-                                        )}
-                                            value={record}
-                                    />
-                                </div>
-                            {/if}
-
-                            <a
-
-                                    class="me-2 text-decoration-none text-dark fs-6"
-                                    href="{channel.lucentUrl}/records/{record.id}"
-                                    target={inModal ? "_blank" : "_self"}
-                                    title={previewTitle(channel.schemas, record, graph)}
-                                    data-bs-toggle="tooltip" data-bs-placement="left"
-
+                        {#if isWritable}
+                            <Checkbox
+                                    on:change={() => select(record)}
+                                    checked={selected.find((r) => r.id === record.id)}
+                                    value={record}
                             >
-                                {previewTitle(channel.schemas, record, graph)}
-                            </a>
-                        </div>
-                        <div>
-                            <Avatar
-                                    name={usernameById(
-                                        users,
-                                        record._sys.updatedBy
-                                    )}
-                                    side={24}
-                            />
-                        </div>
+                            </Checkbox>
+
+                        {/if}
+
+                        <a
+                                class="me-2 text-decoration-none text-dark fs-6"
+                                href="{channel.lucentUrl}/records/{record.id}"
+                                target={inModal ? "_blank" : "_self"}
+                        >
+                            {previewTitle(channel.schemas, record, graph)}
+                        </a>
+
                     </div>
                 </td>
                 <RecordRow
@@ -117,6 +98,13 @@
                         {sortField}
                         {users}
                 />
+                <td>  <Avatar
+                        name={usernameById(
+                                        users,
+                                        record._sys.updatedBy
+                                    )}
+                        side={24}
+                /></td>
             </tr>
         {/each}
         </tbody>
diff --git a/front/js/svelte/content/pagination/NavItem.svelte b/front/js/svelte/content/pagination/NavItem.svelte
index 0f87301..98fdfe3 100644
--- a/front/js/svelte/content/pagination/NavItem.svelte
+++ b/front/js/svelte/content/pagination/NavItem.svelte
@@ -28,8 +28,8 @@
 </script>
 
 {#each pages as i}
-    <li class="page-item">
-        {#if currentPage == i}
+    <li class="page-item" class:active={currentPage === i}>
+        {#if currentPage === i}
             <span class="page-link active">{i}</span>
         {:else}
             <a class="page-link" on:click={(e) => goto(e, i)} href={url(i)}
diff --git a/front/js/svelte/content/pagination/Pagination.svelte b/front/js/svelte/content/pagination/Pagination.svelte
index a6b7bf6..cdf01dc 100644
--- a/front/js/svelte/content/pagination/Pagination.svelte
+++ b/front/js/svelte/content/pagination/Pagination.svelte
@@ -43,7 +43,7 @@
 </script>
 
 <nav>
-    <ul class="pagination justify-content-center">
+    <ul class="pagination">
         {#if totalPages > 1}
             <li class="page-item disabled" class:disabled={currentPage === 1}>
                 <a on:click={first} href="/" class="page-link"> First </a>
@@ -69,7 +69,7 @@
         {/if}
     </ul>
 </nav>
-<p class="text-muted text-center">
+<p style="display: flex;justify-content: center; gap: 4px">
     Showing
     <span class="font-medium">{+skip + 1}</span>
     to
diff --git a/front/js/svelte/content/tools/Tools.svelte b/front/js/svelte/content/tools/Tools.svelte
index 8e77dea..d7113ca 100644
--- a/front/js/svelte/content/tools/Tools.svelte
+++ b/front/js/svelte/content/tools/Tools.svelte
@@ -74,13 +74,13 @@
 
         <form method="GET" on:submit={search}>
             <input type="search" name="filter[search_regex]" placeholder="Search"
-                   class="form-control" required>
+                   class="search" required>
         </form>
 
 
     </div>
 
-    <div style="display:flex;align-items: center">
+    <div style="display:flex;align-items: center;gap:4px">
         {#if schema.type === "collection"}
             {#if !inModal && isWritable}
                 <a
diff --git a/front/js/svelte/libs/Tinymce.svelte b/front/js/svelte/libs/Tinymce.svelte
index 2e9f82c..d600e5d 100644
--- a/front/js/svelte/libs/Tinymce.svelte
+++ b/front/js/svelte/libs/Tinymce.svelte
@@ -7,6 +7,7 @@
     import "tinymce/themes/silver";
     import "tinymce/skins/ui/oxide/skin.css";
     import contentUiSkinCss from "tinymce/skins/ui/oxide/content.css";
+    import customcss from "./tinymce.css";
 
     import "tinymce/plugins/link";
     import "tinymce/plugins/code";
@@ -52,7 +53,7 @@
             toolbar_sticky: true,
             skin: false,
             content_css: false,
-            content_style: contentUiSkinCss.toString(),
+            content_style: contentUiSkinCss.toString() + customcss.toString(),
             branding: false,
             inline: false,
             plugins: plugins,
@@ -67,8 +68,7 @@
             browser_spellcheck: true,
             max_height: 600,
             // media_poster: false,
-            content_style:
-                "img {max-width: 100%;height: auto;",
+
             setup: function (editor) {
                 activeEditor = editor;
 
diff --git a/front/js/svelte/libs/tinymce.css b/front/js/svelte/libs/tinymce.css
new file mode 100644
index 0000000..80cf3d0
--- /dev/null
+++ b/front/js/svelte/libs/tinymce.css
@@ -0,0 +1,37 @@
+.mce-content-body .img {
+    max-width: 100%;
+    height: auto;
+}
+
+.mce-content-body{
+    font-size: 16px;
+    line-height: 20px;
+}
+.mce-content-body p{
+
+    margin-bottom: 14px;
+    &:last-child{
+        margin-bottom: 0;
+    }
+}
+
+.mce-content-body ul {
+    padding: 0 0 0 16px;
+    list-style: none outside none;
+
+
+
+}
+
+.mce-content-body li::before {
+    content: "—";
+    opacity: .5;
+    font-size: 12px;
+    padding-right: 6px;
+    vertical-align: 10%;
+}
+
+.mce-content-body li {
+    list-style: none;
+    padding: 0;
+}
\ No newline at end of file
diff --git a/front/js/svelte/records/Edit.svelte b/front/js/svelte/records/Edit.svelte
index 0e4f64f..8e31c21 100644
--- a/front/js/svelte/records/Edit.svelte
+++ b/front/js/svelte/records/Edit.svelte
@@ -1,15 +1,15 @@
 <script>
     import {afterUpdate, getContext, onMount} from "svelte";
     import {isEqual} from "lodash";
-    import Manager from "./Manager.svelte";
-    import EditHeader from "./EditHeader.svelte"
-    import StatusSelect from "./StatusSelect.svelte"
+    import axios from "axios";
+    import EditHeader from "./header/EditHeader.svelte"
     import FilePreview from "./FilePreview.svelte"
-    import ContentTabs from "./ContentTabs.svelte"
+    import ContentTabs from "./header/ContentTabs.svelte"
     import FormField from "./FormField.svelte"
     import Graph from "./Graph.svelte"
     import Info from "./Info.svelte"
     import ErrorAlert from "../common/ErrorAlert.svelte"
+    import Title from "./header/Title.svelte";
 
     const channel = getContext("channel");
 
@@ -151,47 +151,39 @@
 
 <svelte:window on:beforeunload={beforeUnload}/>
 
-<div class="wrapper-normal transparent">
-    <Manager managerRecords={recordHistory} {graph}/>
-    <EditHeader {schema} {record} {isCreateMode} {graph} bind:activeContentTab/>
-
-    {#if !["_graph", "_info"].includes(activeContentTab) && isWritable}
-        <div class="shadow-lg "
-             style="position:fixed;bottom:0;left:0px;width:100%;background: rgb(206, 223, 210);z-index:1050"
+<div class="record-edit">
+    <div class="tools-header">
+    <!--    <Manager managerRecords={recordHistory} {graph}/>-->
+    {#if isCreateMode}
+        <button
+                class="button btn-spinner"
+                on:click={save}
         >
-            <div
-                    class="d-flex mt-3 mb-3  align-items-center justify-content-center"
-            >
-                <StatusSelect bind:status={record.status} {record} {schema}/>
-                {#if isCreateMode}
-                    <button
-                            class="ms-2 btn btn-primary btn-spinner"
-                            on:click={save}
-                    >
                             <span
                                     class="spinner-border spinner-border-sm"
                                     role="status"
                                     aria-hidden="true"
                             />
-                        Create
-                    </button>
-                {:else if hasUnsavedData}
-                    <button
-                            type="button"
-                            class="ms-2 btn btn-primary btn-spinner"
-                            on:click={save}
-                    >
+            Create
+        </button>
+    {:else if hasUnsavedData}
+        <button
+                type="button"
+                class="button ms-2 btn btn-primary btn-spinner"
+                on:click={save}
+        >
                             <span
                                     class="spinner-border spinner-border-sm"
                                     role="status"
                                     aria-hidden="true"
                             />
-                        Save
-                    </button>
-                {/if}
-            </div>
-        </div>
+            Save
+        </button>
     {/if}
+    <EditHeader {schema} bind:record {isCreateMode} {graph} bind:activeContentTab/>
+    </div>
+    <Title {schema} {record} {isCreateMode}/>
+
 
     <ErrorAlert message={errorMessage}/>
 
diff --git a/front/js/svelte/records/EditHeader.svelte b/front/js/svelte/records/EditHeader.svelte
deleted file mode 100644
index 04bd84a..0000000
--- a/front/js/svelte/records/EditHeader.svelte
+++ /dev/null
@@ -1,73 +0,0 @@
-<script>
-    import {getContext} from "svelte";
-    import Icon from "../common/Icon.svelte";
-    import {previewTitle} from "./Preview";
-
-    const channel = getContext("channel");
-    export let schema;
-    export let graph;
-    export let record;
-    export let isCreateMode;
-    export let activeContentTab;
-
-    function clone(e) {
-        e.preventDefault();
-        axios.post(channel.lucentUrl + "/records/clone/" + record.id).then(response => {
-            window.location = channel.lucentUrl + "/records/" + response.data.id;
-        }).catch(error => {
-
-        });
-    }
-</script>
-
-<h3 class="header-normal mt-5 mb-0">
-    <a
-        class="text-muted d-block text-decoration-none fs-6 mb-1"
-        href="{channel.lucentUrl}/content/{schema.name}"
-    >{schema.label.toUpperCase()}</a
-    >
-
-    <span class="text-dark d-block">
-        {#if !isCreateMode}
-            {previewTitle(channel.schemas, record, graph)}
-        {:else}
-            New Record
-        {/if}
-    </span>
-    {#if !isCreateMode}
-        <div class="dropdown d-inline-block">
-            <button
-                class="btn btn-link btn-sm"
-                type="button"
-                data-bs-toggle="dropdown"
-                aria-expanded="false"
-            >
-                <Icon icon="ellipsis"/>
-            </button>
-            <div class="dropdown-menu">
-
-                <h6 class="dropdown-header">Record Actions</h6>
-                <a
-                    class="dropdown-item"
-                    href="{channel.lucentUrl}/records/new?schema={schema.name}"
-                >Create new</a
-                >
-                {#if !isCreateMode}
-                    <a
-                        class="dropdown-item"
-                        on:click={clone}
-                        href={channel.lucentUrl}
-                    >
-                        Clone
-                    </a>
-                {/if}
-                <a
-                    on:click|preventDefault={(e) =>
-                        (activeContentTab = "_info")}
-                    class="dropdown-item"
-                    href="{channel.lucentUrl}">Revisions</a
-                >
-            </div>
-        </div>
-    {/if}
-</h3>
diff --git a/front/js/svelte/records/FormField.svelte b/front/js/svelte/records/FormField.svelte
index a43eb31..492203e 100644
--- a/front/js/svelte/records/FormField.svelte
+++ b/front/js/svelte/records/FormField.svelte
@@ -47,8 +47,8 @@
     const id = `field-${field.name}-${record.id}`;
 </script>
 
-<div class="card editor-field">
-    <FieldHeader {schema} {field} {id}/>
+<div class="editor-field">
+    <FieldHeader   {field} {id}/>
     {#if field.info.name === "reference" && field.layout === "inline"}
         <ReferenceInline
             bind:graph
diff --git a/front/js/svelte/records/InlineEdit.svelte b/front/js/svelte/records/InlineEdit.svelte
index b1c84bd..8cfd161 100644
--- a/front/js/svelte/records/InlineEdit.svelte
+++ b/front/js/svelte/records/InlineEdit.svelte
@@ -4,8 +4,8 @@
     import {isEqual} from "lodash";
     import FormField from "./FormField.svelte";
     import FilePreview from "./FilePreview.svelte";
-    import ContentTabs from "./ContentTabs.svelte";
-    import StatusSelect from "./StatusSelect.svelte";
+    import ContentTabs from "./header/ContentTabs.svelte";
+    import StatusSelect from "./header/StatusSelect.svelte";
     import ErrorAlert from "../common/ErrorAlert.svelte";
 
     const channel = getContext("channel");
diff --git a/front/js/svelte/records/StatusSelect.svelte b/front/js/svelte/records/StatusSelect.svelte
deleted file mode 100644
index 72bff6b..0000000
--- a/front/js/svelte/records/StatusSelect.svelte
+++ /dev/null
@@ -1,57 +0,0 @@
-<script>
-    import {getContext} from "svelte";
-    import {getStatus, getStatusList} from "./StatusText";
-
-    const channel = getContext("channel");
-    export let status = "draft";
-    export let record;
-    export let schema;
-    let dropdown;
-    $: currentStatus = getStatus(status);
-    const statusList = Object.values(getStatusList());
-
-    function updateStatus(e, statusValue) {
-        // e.preventDefault();
-        status = statusValue;
-        dropdown.click();
-    }
-</script>
-
-<!-- Example split danger button -->
-<div class="d-flex justify-content-between">
-    <div class="btn-group dropup">
-        <button type="button" class="btn btn-{currentStatus.bg}"
-        >{currentStatus.text}</button
-        >
-        <button
-                bind:this={dropdown}
-                type="button"
-                class="btn btn-{currentStatus.bg} dropdown-toggle dropdown-toggle-split"
-                data-bs-toggle="dropdown"
-                aria-expanded="false"
-        >
-            <span class="visually-hidden">Toggle Dropdown</span>
-        </button>
-        <div class="dropdown-menu">
-            <div class="dropdown-header">Change status to</div>
-            {#each statusList as astatus}
-                {#if astatus.value !== status}
-                    <button
-                            type="button"
-                            class="dropdown-item my-2 rounded w-100 bg-{astatus.bg} text-{astatus.color}"
-                            on:click={(e) => updateStatus(e, astatus.value)}
-                    >
-                        {astatus.text}
-                    </button>
-                {/if}
-            {/each}
-        </div>
-
-
-    </div>
-    {#if channel.previewTarget}
-        <a href="{channel.previewTargetUrl}?schema={schema.name}&id={record.id}" target="_blank" class="btn btn-info ms-3">
-            Preview
-        </a>
-    {/if}
-</div>
diff --git a/front/js/svelte/records/elements/Checkbox.svelte b/front/js/svelte/records/elements/Checkbox.svelte
index 28b3aa6..3712927 100644
--- a/front/js/svelte/records/elements/Checkbox.svelte
+++ b/front/js/svelte/records/elements/Checkbox.svelte
@@ -8,7 +8,7 @@
     $: errorMessage = getErrorMessage(validationErrors, field.name);
 </script>
 
-<div>
+<div class="field-checkbox">
     <div class="form-check form-check-inline">
         <input
             class="form-check-input"
diff --git a/front/js/svelte/records/elements/FieldHeader.svelte b/front/js/svelte/records/elements/FieldHeader.svelte
index 523b507..60d6f00 100644
--- a/front/js/svelte/records/elements/FieldHeader.svelte
+++ b/front/js/svelte/records/elements/FieldHeader.svelte
@@ -3,20 +3,20 @@
     export let id;
 </script>
 
-<div class="mb-1">
-    <div class="d-flex justify-content-between">
-        <div>
-            <label for={id} class="form-label"
+<div class="field-header">
+    <div class="labels">
+        <div class="label-and-help">
+            <label for={id}
             >{field.label}</label
             >
             {#if field.help}
-                <small class=" text-primary  opacity-50">{field.help}</small>
+                <small class="help-text">{field.help}</small>
             {/if}
         </div>
         <span
             tabindex="-1"
             class="text-decoration-none"
-        ><code class="text-primary opacity-50">{field.name}</code>
+        ><code class="field-id">{field.name}</code>
         </span>
     </div>
 </div>
diff --git a/front/js/svelte/records/ContentTabs.svelte b/front/js/svelte/records/header/ContentTabs.svelte
similarity index 89%
rename from front/js/svelte/records/ContentTabs.svelte
rename to front/js/svelte/records/header/ContentTabs.svelte
index 7197ae5..d8fcead 100644
--- a/front/js/svelte/records/ContentTabs.svelte
+++ b/front/js/svelte/records/header/ContentTabs.svelte
@@ -37,12 +37,12 @@
 </script>
 
 {#if tabs.length > 1}
-    <ul class="nav nav-pills mb-4 justify-content-center">
+    <ul class="tabs">
         {#each tabs as tab}
-            <li class="nav-item">
+            <li class="tab">
                 <button
                         on:click={(e) => changeTab(e, tab.name)}
-                        class="nav-link"
+                        class="button"
                         class:active={active === tab.name}
                         aria-current="page"
                 >
diff --git a/front/js/svelte/records/header/EditHeader.svelte b/front/js/svelte/records/header/EditHeader.svelte
new file mode 100644
index 0000000..de38999
--- /dev/null
+++ b/front/js/svelte/records/header/EditHeader.svelte
@@ -0,0 +1,54 @@
+<script>
+    import {getContext} from "svelte";
+    import Icon from "../../common/Icon.svelte";
+    import Dropdown from "../../common/Dropdown.svelte";
+    import StatusSelect from "./StatusSelect.svelte";
+
+    const channel = getContext("channel");
+    export let schema;
+    export let record;
+    export let isCreateMode;
+    export let activeContentTab;
+
+    function clone(e) {
+        e.preventDefault();
+        axios.post(channel.lucentUrl + "/records/clone/" + record.id).then(response => {
+            window.location = channel.lucentUrl + "/records/" + response.data.id;
+        }).catch(error => {
+
+        });
+    }
+</script>
+
+
+    <StatusSelect bind:status={record.status} {record}></StatusSelect>
+
+    {#if !isCreateMode}
+        <Dropdown orientation="right">
+            <div slot="button">
+                <Icon icon="ellipsis"/>
+            </div>
+            <h6 class="dropdown-header">Record Actions</h6>
+            <a
+                    class="dropdown-item"
+                    href="{channel.lucentUrl}/records/new?schema={schema.name}"
+            >Create new</a
+            >
+            {#if !isCreateMode}
+                <a
+                        class="dropdown-item"
+                        on:click={clone}
+                        href={channel.lucentUrl}
+                >
+                    Clone
+                </a>
+            {/if}
+            <a
+                    on:click|preventDefault={(e) =>
+                        (activeContentTab = "_info")}
+                    class="dropdown-item"
+                    href="{channel.lucentUrl}">Revisions</a
+            >
+        </Dropdown>
+    {/if}
+
diff --git a/front/js/svelte/records/header/StatusSelect.svelte b/front/js/svelte/records/header/StatusSelect.svelte
new file mode 100644
index 0000000..63b1010
--- /dev/null
+++ b/front/js/svelte/records/header/StatusSelect.svelte
@@ -0,0 +1,26 @@
+<script>
+    import Switch from "../../common/Switch.svelte";
+
+    export let status = "draft";
+    export let record;
+    function updateStatus(e) {
+
+        if(e.target.checked){
+            status = "published";
+        }else{
+            status = "draft";
+        }
+    }
+</script>
+
+
+{#if record.status !== "trashed"}
+    <Switch value="published" on:change={updateStatus} checked={record.status === "published"}></Switch>
+{/if}
+{#if record.status === "published"}
+    Published
+{:else if record.status === "draft"}
+    Draft
+{:else if record.status === "trashed"}
+    Trashed
+{/if}
\ No newline at end of file
diff --git a/front/js/svelte/records/header/Title.svelte b/front/js/svelte/records/header/Title.svelte
new file mode 100644
index 0000000..e075914
--- /dev/null
+++ b/front/js/svelte/records/header/Title.svelte
@@ -0,0 +1,27 @@
+<script>
+    import {getContext} from "svelte";
+    import {previewTitle} from "./../Preview";
+
+    const channel = getContext("channel");
+    export let schema;
+    export let record;
+    export let isCreateMode;
+
+</script>
+
+<div class="record-header">
+
+
+    <span class="record-title">
+        {#if !isCreateMode}
+            {previewTitle(channel.schemas, record)}
+        {:else}
+            New Record
+        {/if}
+    </span>
+    <a
+            class="schema-name"
+            href="{channel.lucentUrl}/content/{schema.name}"
+    >{schema.label.toUpperCase()}</a
+    >
+</div>
\ No newline at end of file
diff --git a/front/sass/_button.scss b/front/sass/_button.scss
index 84a9d35..54eabfa 100644
--- a/front/sass/_button.scss
+++ b/front/sass/_button.scss
@@ -6,7 +6,10 @@
   filter: brightness(97%);
   border: none;
   font-size: 14px;
-
+  min-height: 27px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
   &:focus {
     filter: brightness(94%);
   }
diff --git a/front/sass/_card.scss b/front/sass/_card.scss
deleted file mode 100644
index 0be66aa..0000000
--- a/front/sass/_card.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.lx-card {
-   padding: 44px;
-   background-color: #fff;
-   border-radius: 32px;
-}
diff --git a/front/sass/_checkbox.scss b/front/sass/_checkbox.scss
new file mode 100644
index 0000000..e7b20db
--- /dev/null
+++ b/front/sass/_checkbox.scss
@@ -0,0 +1,104 @@
+
+@supports (-webkit-appearance: none) or (-moz-appearance: none) {
+    .checkbox-wrapper input[type=checkbox] {
+        --active-inner: #fff;
+        --focus: 2px rgba(39, 94, 254, .3);
+        --border-hover: #275EFE;
+        --disabled: #F6F8FF;
+        --disabled-inner: #E1E6F9;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        height: 21px;
+        outline: none;
+        display: inline-block;
+        vertical-align: top;
+        position: relative;
+        margin: 0;
+        cursor: pointer;
+        border: 1px solid var(--bc, var(--border-color));
+        background: var(--b, var(--background));
+        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
+    }
+    .checkbox-wrapper input[type=checkbox]:after {
+        content: "";
+        display: block;
+        left: 0;
+        top: 0;
+        position: absolute;
+        transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
+    }
+    .checkbox-wrapper input[type=checkbox]:checked {
+        --b: var(--secondary);
+        --bc: var(--secondary);
+        --d-o: .3s;
+        --d-t: .6s;
+        --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
+    }
+    .checkbox-wrapper input[type=checkbox]:disabled {
+        --b: var(--disabled);
+        cursor: not-allowed;
+        opacity: 0.9;
+    }
+    .checkbox-wrapper input[type=checkbox]:disabled:checked {
+        --b: var(--disabled-inner);
+        --bc: var(--border-color);
+    }
+    .checkbox-wrapper input[type=checkbox]:disabled + label {
+        cursor: not-allowed;
+    }
+    .checkbox-wrapper input[type=checkbox]:hover:not(:checked):not(:disabled) {
+        --bc: var(--border-hover);
+    }
+    .checkbox-wrapper input[type=checkbox]:focus {
+        box-shadow: 0 0 0 var(--focus);
+    }
+    .checkbox-wrapper input[type=checkbox]:not(.switch) {
+        width: 21px;
+    }
+    .checkbox-wrapper input[type=checkbox]:not(.switch):after {
+        opacity: var(--o, 0);
+    }
+    .checkbox-wrapper input[type=checkbox]:not(.switch):checked {
+        --o: 1;
+    }
+    .checkbox-wrapper input[type=checkbox] + label {
+        display: inline-block;
+        vertical-align: middle;
+        cursor: pointer;
+        margin-left: 4px;
+    }
+
+    .checkbox-wrapper input[type=checkbox]:not(.switch) {
+        border-radius: 7px;
+    }
+    .checkbox-wrapper input[type=checkbox]:not(.switch):after {
+        width: 5px;
+        height: 9px;
+        border: 2px solid var(--active-inner);
+        border-top: 0;
+        border-left: 0;
+        left: 7px;
+        top: 4px;
+        transform: rotate(var(--r, 20deg));
+    }
+    .checkbox-wrapper input[type=checkbox]:not(.switch):checked {
+        --r: 43deg;
+    }
+}
+
+.checkbox-wrapper * {
+    box-sizing: inherit;
+}
+.checkbox-wrapper *:before,
+.checkbox-wrapper *:after {
+    box-sizing: inherit;
+}
+
+.checkbox-wrapper input[type=checkbox]:indeterminate {
+    --b: var(--secondary);
+    --bc: var(--secondary);
+    --d-o: .3s;
+    --d-t: .6s;
+    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
+}
+
diff --git a/front/sass/_dropdown.scss b/front/sass/_dropdown.scss
index f44ee02..0956ca3 100644
--- a/front/sass/_dropdown.scss
+++ b/front/sass/_dropdown.scss
@@ -20,6 +20,7 @@
   filter: brightness(97%);
   transition: 600ms;
   flex-grow: 1;
+  top: 35px;
 
   &.orientation-right {
     right: 0;
diff --git a/front/sass/_files.scss b/front/sass/_files.scss
deleted file mode 100644
index 0e30ab6..0000000
--- a/front/sass/_files.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.file-wrapper.selected {
-    box-shadow: inset 0px 0px 0px 2px $primary;
-}
\ No newline at end of file
diff --git a/front/sass/_form.scss b/front/sass/_form.scss
index 01801f2..3ca6913 100644
--- a/front/sass/_form.scss
+++ b/front/sass/_form.scss
@@ -5,12 +5,11 @@ label {
   margin-bottom: 4px;
 }
 
-input{
-
+input[type=text]{
   width: 100%;
-
 }
-input,textarea{
+
+input[type=text],textarea{
   background: var(--input-bg);
   border: 1px solid var(--border-color);
   border-radius: 5px;
@@ -18,7 +17,7 @@ input,textarea{
   font-size: 16px;
   filter: brightness(95%);
 }
-input:focus,textarea:focus{
+input[type=text]:focus,textarea:focus{
   filter: brightness(101%);
 }
 
diff --git a/front/sass/_pagination.scss b/front/sass/_pagination.scss
new file mode 100644
index 0000000..a61ebf6
--- /dev/null
+++ b/front/sass/_pagination.scss
@@ -0,0 +1,27 @@
+.pagination {
+  margin: 20px auto 10px ;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+
+  padding: 0;
+
+  li {
+    font-size: 14px;
+    border-radius: 12px;
+    padding: 4px 18px;
+    background: var(--background);
+    list-style: none;
+    filter: brightness(90%);
+
+    &.disabled {
+      pointer-events: none;
+      opacity: .7;
+    }
+
+    &.active {
+      background: var(--secondary);
+    }
+  }
+}
\ No newline at end of file
diff --git a/front/sass/_record-edit.scss b/front/sass/_record-edit.scss
new file mode 100644
index 0000000..8a67799
--- /dev/null
+++ b/front/sass/_record-edit.scss
@@ -0,0 +1,68 @@
+.record-edit {
+
+}
+
+.record-header {
+  margin: 10px 0 0;
+
+  .schema-name {
+    font-size: 14px;
+  }
+
+  .record-title {
+    font-size: 18px;
+    display: block;
+  }
+}
+
+.tools-header {
+  margin: 30px 0 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+}
+
+.editor-field {
+  background: var(--background);
+  filter: brightness(98%);
+  padding: 18px;
+  border-radius: 12px;
+  margin: 6px 0;
+  border-color: transparent;
+}
+
+.field-header{
+  margin-bottom: 4px;
+  .labels{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .label-and-help{
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  label{font-size: 14px;line-height: 14px;margin: 0;font-weight: 700;}
+  .help-text{font-size: 14px;opacity: .7;line-height: 14px}
+  code{}
+}
+
+.field-checkbox{
+  display: flex;
+  gap: 20px;
+  align-items: center;
+
+  .form-check-inline{
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .form-check-label{
+    font-size: 14px;
+    line-height: 14px;
+  }
+
+}
\ No newline at end of file
diff --git a/front/sass/_revisions.scss b/front/sass/_revisions.scss
deleted file mode 100644
index 1202416..0000000
--- a/front/sass/_revisions.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.text-danger.field-content  .preview-file-filename{
-    color: $danger;
-}
\ No newline at end of file
diff --git a/front/sass/_sidebar.scss b/front/sass/_sidebar.scss
index 553bd83..6d98f64 100644
--- a/front/sass/_sidebar.scss
+++ b/front/sass/_sidebar.scss
@@ -36,6 +36,7 @@
   filter: brightness(94%);
   border-bottom: 0px solid var(--border-color);
   border-radius: 12px;
+
   &:hover {
     background: var(--secondary);
   }
diff --git a/front/sass/_switch.scss b/front/sass/_switch.scss
new file mode 100644
index 0000000..dc27005
--- /dev/null
+++ b/front/sass/_switch.scss
@@ -0,0 +1,34 @@
+input.switch {
+  -webkit-appearance: none;
+  width: 34px;
+  height: 18px;
+  border: 2px solid var(--border-color);
+  position: relative;
+  border-radius: 50px;
+  box-sizing: content-box;
+  cursor: pointer;
+  transition: background 150ms ease-in-out;
+  background: white;
+}
+
+input.switch::after {
+  top: 2px;
+  left: 2px;
+  transition: left 150ms ease-in-out;
+  content: " ";
+  width: 14px;
+  height: 14px;
+  background: var(--border-color);
+  box-shadow: inset 0 0 0px 1px var(--border-color);
+  position: absolute;
+  border-radius: 50px;
+}
+
+input.switch:checked {
+  background: var(--secondary);
+}
+
+input.switch:checked::after {
+  left: calc(100% - 17px);
+  background: var(--background);
+}
diff --git a/front/sass/_table.scss b/front/sass/_table.scss
index ed5fee2..f6458e2 100644
--- a/front/sass/_table.scss
+++ b/front/sass/_table.scss
@@ -5,25 +5,26 @@
     padding: 20px;
     background: var(--background);
     filter: brightness(97%);
+    font-size: 14px;
     table {
         width: 100%;
 
     }
     th {
-        font-size: 15px;
+        font-size: 14px;
         font-weight: normal;
         white-space: nowrap;
         max-width: 400px;
-        // height: 34px;
+        text-align: left;
         padding: 8px 16px;
-        // border-bottom: 1px solid #ccc;
+        background: var(--background);
+        filter: brightness(90%);
         &.is-sort {
-            background-color: rgba($primary, 0.1);
+           font-weight: 700;
         }
     }
 
     td {
-        font-size: 15px;
         font-weight: normal;
         white-space: nowrap;
         max-width: 400px;
@@ -31,9 +32,7 @@
         padding: 4px 16px;
 
         overflow: hidden;
-        &.is-sort {
-            background-color: rgba($primary, 0.1);
-        }
+
 
         img{
             width: 48px;
@@ -48,8 +47,20 @@
             align-items: center;
             gap: 6px;
         }
+
+        .title-td-contents{
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            font-size: 14px;
+            line-height: 14px;
+        }
     }
     tr {
+        background: var(--background);
+        &:has(input:checked){
+            filter: brightness(90%);
+        }
         &:hover {
             box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0.1);
         }
@@ -64,8 +75,7 @@
         // border-right: 1px solid #e4e4e4;
     }
     th:nth-child(odd) {
-        border-left: 1px solid #e4e4e4;
-        border-right: 1px solid #e4e4e4;
+
     }
 
     .field-ui-number {
diff --git a/front/sass/_tabs.scss b/front/sass/_tabs.scss
new file mode 100644
index 0000000..b53339a
--- /dev/null
+++ b/front/sass/_tabs.scss
@@ -0,0 +1,11 @@
+.tabs{
+  padding: 0;
+  margin: 20px 0 20px;
+  display: flex;
+  gap: 4px;
+  .tab{
+    list-style: none;
+
+
+  }
+}
\ No newline at end of file
diff --git a/front/sass/_toolbar.scss b/front/sass/_toolbar.scss
index 5101d29..3a75b36 100644
--- a/front/sass/_toolbar.scss
+++ b/front/sass/_toolbar.scss
@@ -3,6 +3,17 @@
     align-items: center;
     gap: 5px;
     justify-content: space-between;
+
+    input.search{
+        border-radius: 12px;
+        background: var(--background);
+        padding: 3px 10px;
+        cursor: pointer;
+        filter: brightness(97%);
+        border: none;
+        font-size: 14px;
+    }
+
 }
 .toolbar-filters{ display: flex;
     align-items: center;
diff --git a/front/sass/_typography.scss b/front/sass/_typography.scss
index 519b0e6..26713fe 100644
--- a/front/sass/_typography.scss
+++ b/front/sass/_typography.scss
@@ -1,6 +1,6 @@
 
 
-.content{
+.content {
     font-size: 16px;
     line-height: 20px;
     p{
diff --git a/front/sass/app.scss b/front/sass/app.scss
index bb4c018..d7cd558 100644
--- a/front/sass/app.scss
+++ b/front/sass/app.scss
@@ -116,7 +116,7 @@ $themes: (
     --radialPrimarySecondary: radial-gradient(#5b86be, #d9cca1);
     --radialPrimaryAccent: radial-gradient(#5b86be, #80c671);
     --radialSecondaryAccent: radial-gradient(#d9cca1, #80c671);
-    --border-color: #000;
+    --border-color: #ccc;
     --main-font: ‘Open Sans‘, Arial, Helvetica, sans-serif;
     --main-font-color: #444;
     --input-bg: rgb(245,245,249);
@@ -143,16 +143,14 @@ $themes: (
 @import "./codemirror";
 @import "./layout";
 @import "./wrappers";
-@import "./card";
-@import "./files";
-@import "./revisions";
 @import "./toolbar";
 @import "./dropdown";
 @import "./button";
-
-
-
-
+@import "./checkbox";
+@import "./pagination";
+@import "./record-edit";
+@import "./tabs";
+@import "./switch";
 
 body {
     background-color: var(--background);
@@ -170,14 +168,28 @@ body {
     cursor: pointer;
 }
 
-.editor-field {
-    padding: 22px 44px;
-    margin: 6px 0;
-    border-color: transparent;
-}
-
 
 a{
     color: var(--text);
     text-decoration: none;
+}
+
+.spinner-border {
+    width: 9px;
+    height: 9px;
+    border: 2px solid #FFF;
+    border-bottom-color: #FF3D00;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
 }
\ No newline at end of file