format

Author: ddPn08

src/features/gallery/ipc.ts

@@ -5,6 +5,6 @@ export interface ServerToClientEvents {}
 export interface ClientToServerEvents {
     'dirs/update': (paths: string[]) => void
     'images/get': (dir: string, search?: ImageSearchOptions) => ImageData[]
-    'favorite/add': (dir: string,path: string) => void
-    'favorite/remove': (dir: string,path: string) => void
+    'favorite/add': (dir: string, path: string) => void
+    'favorite/remove': (dir: string, path: string) => void
 }

src/web/app.tsx

@@ -62,8 +62,8 @@ const Index = () => {
           return (
             <TabPanel
               class={css`
-                transition: 0.2s;
                 margin-left: ${isOpen() ? '0px' : '-150px'};
+                transition: 0.2s;
               `}
               show={isSelected()}
               unmount={label !== 'WebUI'}

src/web/components/modal.tsx

@@ -4,24 +4,24 @@ import { Component, createEffect, createSignal, JSX, on } from 'solid-js'
 import { useFloating } from '../hooks/use-floating'
 
 const Background = styled.div`
+  position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
-  position: fixed;
   background-color: rgba(0, 0, 0, 0.5);
 `
 
 const Container = styled.div`
+  position: fixed;
+  z-index: 100;
   top: 0;
   left: 0;
+  display: flex;
   width: 100vw;
   height: 100vh;
-  position: fixed;
-  display: flex;
-  justify-content: center;
   align-items: center;
-  z-index: 100;
+  justify-content: center;
 `
 export const ModalPanel = styled.div`
   overflow: hidden;

src/web/components/ui/tabs.tsx

@@ -36,6 +36,7 @@ export const TabList = styled.div<{ vertical?: boolean | undefined; close?: bool
   transition: 0.2s;
 
   ${(p) => (p.vertical ? 'height: 100%' : 'width: 100%')};
+
   flex-direction: ${(p) => (p.vertical ? 'column' : 'row')};
 `
 
@@ -50,7 +51,6 @@ export const Tab = styled.div<{ selected: boolean; vertical?: boolean | undefine
   user-select: none;
   align-items: center;
   text-align: right;
-
   justify-content: ${(p) => (p.vertical ? 'flex-end' : 'center')};
   ${(p) => (p.vertical ? 'width: 100%' : 'height: 100%')};
 
@@ -61,6 +61,7 @@ export const Tab = styled.div<{ selected: boolean; vertical?: boolean | undefine
     right: ${(p) => (p.vertical ? '0' : '50')}%;
     ${(p) => `${p.vertical ? 'height' : 'width'}:${p.selected ? '30%' : '0'}`};
     ${(p) => (p.vertical ? 'width' : 'height')}: 2px;
+
     transform: ${(p) => (p.vertical ? 'translateY(50%)' : 'translateX(50%)')};
     content: '';
     transition: 0.2s;
@@ -101,9 +102,9 @@ export const TabPanel: Component<
           !unmount()
             ? css`
                 position: ${local.show ? 'static' : 'fixed'};
-                transform: translateY(${local.show ? '0' : '100%'});
                 opacity: ${local.show ? '1' : '0'};
                 pointer-events: ${local.show ? 'auto' : 'none'};
+                transform: translateY(${local.show ? '0' : '100%'});
                 transition: none;
               `
             : '',

src/web/pages/general/index.tsx

@@ -91,13 +91,13 @@ export const General = () => {
           <div
             class={css`
               display: grid;
+              gap: 1rem;
               grid-template-columns: 64px 1fr;
               grid-template-rows: 100%;
-              gap: 1rem;
 
               svg {
-                height: 64px;
                 width: 64px;
+                height: 64px;
               }
             `}
           >