More themes!

src-web/components/Overlay.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';
 import { motion } from 'framer-motion';
 import type { ReactNode } from 'react';
+import React from 'react';
 import { Portal } from './Portal';
 
 interface Props {
@@ -47,6 +48,12 @@ export function Overlay({
               )}
             />
             {children}
+
+            {/* Show draggable region at the top */}
+            {/* TODO: Figure out tauri drag region and also make clickable still */}
+            {variant === 'default' && (
+              <div data-tauri-drag-region className="absolute top-0 left-0 h-md right-0" />
+            )}
           </motion.div>
         </FocusTrap>
       )}

src-web/components/Settings/SettingsAppearance.tsx

@@ -1,3 +1,4 @@
+import { invoke } from '@tauri-apps/api/core';
 import React from 'react';
 import { useActiveWorkspace } from '../../hooks/useActiveWorkspace';
 import { useResolvedAppearance } from '../../hooks/useResolvedAppearance';
@@ -8,8 +9,10 @@ import { useUpdateSettings } from '../../hooks/useUpdateSettings';
 import { trackEvent } from '../../lib/analytics';
 import { isThemeDark } from '../../lib/theme/window';
 import type { ButtonProps } from '../core/Button';
+import { Button } from '../core/Button';
 import { Editor } from '../core/Editor';
 import type { IconProps } from '../core/Icon';
+import { Icon } from '../core/Icon';
 import { IconButton } from '../core/IconButton';
 import type { SelectOption } from '../core/Select';
 import { Select } from '../core/Select';
@@ -116,7 +119,7 @@ export function SettingsAppearance() {
       </div>
       <VStack
         space={3}
-        className="mt-3 w-full bg-background p-3 border border-dashed border-background-highlight rounded"
+        className="mt-3 w-full bg-background p-3 border border-dashed border-background-highlight rounded overflow-x-auto"
       >
         <div className="text-sm text-fg font-bold">
           Theme Preview <span className="text-fg-subtle">({appearance})</span>
@@ -157,6 +160,18 @@ export function SettingsAppearance() {
           contentType="application/javascript"
         />
       </VStack>
+      <Button
+        color="secondary"
+        variant="border"
+        size="sm"
+        className="mr-auto"
+        rightSlot={<Icon icon="externalLink" />}
+        onClick={async () => {
+          await invoke('cmd_new_window', { url: window.location.pathname });
+        }}
+      >
+        Open Preview Window
+      </Button>
     </VStack>
   );
 }

src-web/components/Workspace.tsx

@@ -209,10 +209,10 @@ export default function Workspace() {
 }
 
 interface HeaderSizeProps extends HTMLAttributes<HTMLDivElement> {
-  children: ReactNode;
+  children?: ReactNode;
 }
 
-function HeaderSize({ className, style, ...props }: HeaderSizeProps) {
+export function HeaderSize({ className, style, ...props }: HeaderSizeProps) {
   const platform = useOsInfo();
   const fullscreen = useIsFullscreen();
   const stoplightsVisible = platform?.osType === 'macos' && !fullscreen;