#798 - snippet slide-over

src/dashboardWebView/components/Media/MediaSnippetForm.tsx

@@ -6,7 +6,7 @@ import { ViewDataSelector } from '../../state';
 import SnippetForm, { SnippetFormHandle } from '../SnippetsView/SnippetForm';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
-import { SnippetSlideOver } from './SnippetSlideOver';
+import { SlideOver } from '../Modals/SlideOver';
 
 export interface IMediaSnippetFormProps {
   media: MediaInfo;
@@ -32,7 +32,7 @@ export const MediaSnippetForm: React.FunctionComponent<IMediaSnippetFormProps> =
   };
 
   return (
-    <SnippetSlideOver
+    <SlideOver
       title={l10n.t(LocalizationKey.dashboardMediaMediaSnippetFormFormDialogTitle, media.metadata.title || media.filename)}
       description={l10n.t(LocalizationKey.dashboardMediaMediaSnippetFormFormDialogDescription, media.metadata.title || media.filename)}
       isSaveDisabled={false}
@@ -48,6 +48,6 @@ export const MediaSnippetForm: React.FunctionComponent<IMediaSnippetFormProps> =
         selection={viewData?.data?.selection}
         onInsert={onInsert}
       />
-    </SnippetSlideOver>
+    </SlideOver>
   );
 };

src/dashboardWebView/components/Modals/SlideOver.tsx

@@ -5,7 +5,7 @@ import { Fragment, useRef } from 'react';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 
-export interface ISnippetSlideOverProps {
+export interface ISlideOverProps {
   title: string;
   description: string;
   okBtnText: string;
@@ -16,7 +16,7 @@ export interface ISnippetSlideOverProps {
   trigger: () => void;
 }
 
-export const SnippetSlideOver: React.FunctionComponent<ISnippetSlideOverProps> = ({
+export const SlideOver: React.FunctionComponent<ISlideOverProps> = ({
   title,
   description,
   okBtnText,
@@ -25,7 +25,7 @@ export const SnippetSlideOver: React.FunctionComponent<ISnippetSlideOverProps> =
   dismiss,
   trigger,
   children
-}: React.PropsWithChildren<ISnippetSlideOverProps>) => {
+}: React.PropsWithChildren<ISlideOverProps>) => {
   const cancelButtonRef = useRef(null);
 
   return (
@@ -46,11 +46,12 @@ export const SnippetSlideOver: React.FunctionComponent<ISnippetSlideOverProps> =
             >
               <div className="pointer-events-auto w-screen max-w-md">
                 <div className={`flex h-full flex-col overflow-y-scroll border-l pb-6 shadow-xl bg-[var(--vscode-sideBar-background)] border-[var(--frontmatter-border)]`}>
-                  <div className="py-6 sticky top-0 z-10 px-4 sm:px-6 bg-[var(--vscode-sideBar-background)]">
+                  <div className="py-6 sticky top-0 z-10 px-4 sm:px-6 bg-[var(--vscode-sideBar-background)] text-[var(--vscode-sideBarTitle-foreground)]">
                     <div className="flex items-start justify-between">
-                      <Dialog.Title className={`text-lg font-medium text-[var(--vscode-editor-foreground)]`}>
+                      <Dialog.Title className={`text-lg font-medium`}>
                         {title}
                       </Dialog.Title>
+
                       <div className="ml-3 flex h-7 items-center">
                         <button
                           type="button"
@@ -62,12 +63,14 @@ export const SnippetSlideOver: React.FunctionComponent<ISnippetSlideOverProps> =
                         </button>
                       </div>
                     </div>
+
+                    <div className="mt-1">
+                      <p className="text-sm">{description}</p>
+                    </div>
                   </div>
 
                   <div className="relative flex-1 px-4 sm:px-6">
                     <div className="space-y-4">
-                      <p className="text-sm">{description}</p>
-
                       <div>
                         {children}
                       </div>

src/dashboardWebView/components/SnippetsView/Item.tsx

@@ -13,12 +13,12 @@ import { Snippet, Snippets } from '../../../models';
 import { DashboardMessage } from '../../DashboardMessage';
 import { ModeAtom, SettingsSelector, ViewDataSelector } from '../../state';
 import { Alert } from '../Modals/Alert';
-import { FormDialog } from '../Modals/FormDialog';
 import { NewForm } from './NewForm';
 import SnippetForm, { SnippetFormHandle } from './SnippetForm';
 import { LocalizationKey } from '../../../localization';
 import { FooterActions } from './FooterActions';
 import { ItemMenu } from './ItemMenu';
+import { SlideOver } from '../Modals/SlideOver';
 
 export interface IItemProps {
   snippetKey: string;
@@ -209,9 +209,9 @@ export const Item: React.FunctionComponent<IItemProps> = ({
       </li>
 
       {showInsertDialog && (
-        <FormDialog
+        <SlideOver
           title={l10n.t(LocalizationKey.dashboardSnippetsViewItemInsertFormDialogTitle, snippet.title || snippetKey)}
-          description={l10n.t(LocalizationKey.dashboardSnippetsViewItemInsertFormDialogDescription, (snippet.title || snippetKey).toLowerCase())}
+          description={snippet.description || l10n.t(LocalizationKey.dashboardSnippetsViewItemInsertFormDialogDescription, (snippet.title || snippetKey).toLowerCase())}
           isSaveDisabled={!insertToContent}
           trigger={insertToArticle}
           dismiss={() => setShowInsertDialog(false)}
@@ -225,11 +225,11 @@ export const Item: React.FunctionComponent<IItemProps> = ({
             filePath={viewData?.data?.filePath}
             fieldInfo={viewData?.data?.snippetInfo?.fields}
             selection={viewData?.data?.selection} />
-        </FormDialog>
+        </SlideOver>
       )}
 
       {showEditDialog && (
-        <FormDialog
+        <SlideOver
           title={l10n.t(LocalizationKey.dashboardSnippetsViewItemEditFormDialogTitle, snippet.title || snippetKey)}
           description={l10n.t(LocalizationKey.dashboardSnippetsViewItemEditFormDialogDescription, (snippet.title || snippetKey).toLowerCase())}
           isSaveDisabled={!snippetTitle || !snippetOriginalBody}
@@ -248,7 +248,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
             onDescriptionUpdate={(value: string) => setSnippetDescription(value)}
             onBodyUpdate={(value: string) => setSnippetOriginalBody(value)}
           />
-        </FormDialog>
+        </SlideOver>
       )}
 
       {showAlert && (

src/dashboardWebView/components/SnippetsView/Snippets.tsx

@@ -11,13 +11,13 @@ import { DashboardMessage } from '../../DashboardMessage';
 import { ModeAtom, SettingsSelector, ViewDataSelector } from '../../state';
 import { FilterInput } from '../Header/FilterInput';
 import { PageLayout } from '../Layout/PageLayout';
-import { FormDialog } from '../Modals/FormDialog';
 import { SponsorMsg } from '../Layout/SponsorMsg';
 import { Item } from './Item';
 import { NewForm } from './NewForm';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { List } from '../Media/List';
+import { SlideOver } from '../Modals/SlideOver';
 
 export interface ISnippetsProps { }
 
@@ -162,7 +162,7 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
         )}
 
         {showCreateDialog && (
-          <FormDialog
+          <SlideOver
             title={l10n.t(LocalizationKey.dashboardSnippetsViewSnippetsFormDialogTitle)}
             description={``}
             isSaveDisabled={!snippetTitle || !snippetBody}
@@ -181,7 +181,7 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
               onDescriptionUpdate={(value: string) => setSnippetDescription(value)}
               onBodyUpdate={(value: string) => setSnippetBody(value)}
             />
-          </FormDialog>
+          </SlideOver>
         )}
       </div>