UI improvements (#70)

nicholasodonnell · Feb 5, 2025 · 25551a9 · 25551a9
1 parent 3d4e5b8
commit 25551a9
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 22 deletions.
diff --git a/apps/client/src/components/movies.tsx b/apps/client/src/components/movies.tsx
@@ -53,7 +53,7 @@ export function Movie({
         )}
         {movie.daysUntilDeletion !== null &&
           movie.daysUntilDeletion !== undefined && (
-            <span className="font-small absolute left-2 top-2 z-30 rounded-lg border-[1px] border-app-background-accent bg-red p-1 text-sm uppercase text-white shadow-lg">
+            <span className="font-small absolute left-2 top-2 z-30 rounded-lg border-[1px] border-app-background-accent bg-red p-1 text-sm uppercase text-white opacity-90 shadow-lg">
               {movie.daysUntilDeletion > 0 ? (
                 <>
                   {movie.daysUntilDeletion} day
@@ -95,7 +95,7 @@ export default function Movies({
   loading = false,
 }: MoviesProps): JSX.Element {
   return (
-    <div className="grid grid-cols-4 gap-4 md:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-10">
+    <div className="grid grid-cols-3 gap-4 sm:grid-cols-4 md:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-10">
       {loading && <MoviesSkeleton />}
       {!loading && children}
     </div>

diff --git a/apps/client/src/components/rule.tsx b/apps/client/src/components/rule.tsx
@@ -17,6 +17,7 @@ import {
 export type RuleProps = {
   availableTags: Tag[]
   loading?: boolean
+  onCancel?: () => void
   onDelete?: (rule: RuleModel) => Promise<void>
   onSubmit: (rule: RuleModel) => Promise<void>
   values?: RuleModel
@@ -30,6 +31,7 @@ const defaultRule: Partial<RuleModel> = {
 
 export function RuleForm({
   availableTags = [],
+  onCancel,
   onDelete,
   onSubmit,
   values,
@@ -45,6 +47,10 @@ export function RuleForm({
     })
   }
 
+  const handleCancel = async () => {
+    onCancel?.()
+  }
+
   const handleSubmit = async () => {
     await onSubmit(rule)
   }
@@ -178,6 +184,11 @@ export function RuleForm({
         />
       </Field>
       <Actions>
+        {onCancel && (
+          <Button onClick={handleCancel} secondary>
+            Cancel
+          </Button>
+        )}
         {onDelete && (
           <Button onClick={handleDelete} warning>
             Delete
@@ -192,6 +203,7 @@ export function RuleForm({
 export default function Rule({
   availableTags = [],
   loading,
+  onCancel,
   onDelete,
   onSubmit,
   values,
@@ -203,6 +215,7 @@ export default function Rule({
   return (
     <RuleForm
       availableTags={availableTags}
+      onCancel={onCancel}
       onDelete={onDelete}
       onSubmit={onSubmit}
       values={values}

diff --git a/apps/client/src/views/rules/[id].tsx b/apps/client/src/views/rules/[id].tsx
@@ -30,6 +30,10 @@ export default function EditRule(): JSX.Element {
     },
   })
 
+  const handleCancel = () => {
+    navigate('/rules')
+  }
+
   const handleEdit = async (rule: RuleModel) => {
     await update(rule)
     toast.success('Rule saved')
@@ -48,6 +52,7 @@ export default function EditRule(): JSX.Element {
       <Rule
         availableTags={tags}
         loading={loading || tagsLoading}
+        onCancel={handleCancel}
         onDelete={handleDelete}
         onSubmit={handleEdit}
         values={rule}

diff --git a/apps/client/src/views/rules/new.tsx b/apps/client/src/views/rules/new.tsx
@@ -13,6 +13,10 @@ export default function CreateRule(): JSX.Element {
   const { data: tags, isLoading: tagsLoading } = useQuery('tags', getTags)
   const navigate = useNavigate()
 
+  const handleCancel = () => {
+    navigate('/rules')
+  }
+
   const handleCreate = async (rule: RuleModel) => {
     await create(rule)
     toast.success('Rule created')
@@ -25,6 +29,7 @@ export default function CreateRule(): JSX.Element {
       <Rule
         availableTags={tags}
         loading={tagsLoading}
+        onCancel={handleCancel}
         onSubmit={handleCreate}
       />
     </Section>

diff --git a/apps/client/src/views/settings/general.tsx b/apps/client/src/views/settings/general.tsx
@@ -47,18 +47,20 @@ export default function General(): JSX.Element {
       <Title>Settings &#8212; General</Title>
       <Form disabled={isLoading} onSubmit={handleSubmit}>
         <Field>
-          <Label className="col-span-1">Enabled</Label>
+          <Label className="col-span-2 md:col-span-1">Enabled</Label>
           <Checkbox
-            className="col-span-3"
+            className="col-span-2 md:col-span-3"
             disabled={isLoading}
             onChange={setProperty('enabled')}
             value={settings?.enabled}
           />
         </Field>
         <Field>
-          <Label className="col-span-1">Sync frequency (Days)</Label>
+          <Label className="col-span-2 md:col-span-1">
+            Sync frequency (Days)
+          </Label>
           <NumberInput
-            className="col-span-3"
+            className="col-span-2 md:col-span-3"
             disabled={isLoading}
             max={365}
             min={1}
@@ -68,9 +70,9 @@ export default function General(): JSX.Element {
           />
         </Field>
         <Field>
-          <Label className="col-span-1">Sync Time</Label>
+          <Label className="col-span-2 md:col-span-1">Sync Time</Label>
           <Select<number>
-            className="col-span-3"
+            className="col-span-2 md:col-span-3"
             disabled={isLoading}
             onChange={setProperty('syncHour')}
             options={[
@@ -104,16 +106,16 @@ export default function General(): JSX.Element {
           />
         </Field>
         <Field>
-          <Label className="col-span-1">
-            Treat soft matches as unmonitored
+          <Label className="col-span-2 md:col-span-1">
+            Treat soft matches as unmonitored?
             <Hint className="mt-2">
               Soft matches are movies that match a rule but cannot be given a
               deletion date because of dynamic conditions such as watch status,
-              rating, etc.?
+              rating, etc.
             </Hint>
           </Label>
           <Checkbox
-            className="col-span-3"
+            className="col-span-2 md:col-span-3"
             disabled={isLoading}
             onChange={setProperty('treatSoftMatchAsUnmonitored')}
             value={settings?.treatSoftMatchAsUnmonitored}

diff --git a/apps/client/src/views/settings/radarr.tsx b/apps/client/src/views/settings/radarr.tsx
@@ -97,11 +97,11 @@ export default function Radarr(): JSX.Element {
           </Alert>
         )}
         <Field>
-          <Label className="col-span-1" required>
+          <Label className="col-span-2 md:col-span-1" required>
             Url
           </Label>
           <Input
-            className="col-span-3"
+            className="col-span-2 md:col-span-3"
             disabled={settingsLoading || pingLoading}
             onChange={setProperty('radarrUrl')}
             placeholder="http://localhost:7878"
@@ -110,11 +110,11 @@ export default function Radarr(): JSX.Element {
           />
         </Field>
         <Field>
-          <Label className="col-span-1" required>
+          <Label className="col-span-2 md:col-span-1" required>
             API Key
           </Label>
           <Input
-            className="col-span-3"
+            className="col-span-2 md:col-span-3"
             disabled={settingsLoading || pingLoading}
             onChange={setProperty('radarrApiKey')}
             required
@@ -123,11 +123,11 @@ export default function Radarr(): JSX.Element {
           />
         </Field>
         <Field>
-          <Label className="col-span-1">
+          <Label className="col-span-2 md:col-span-1">
             Exclude deleted movies from Radarr lists?
           </Label>
           <Checkbox
-            className="col-span-3"
+            className="col-span-2 md:col-span-3"
             disabled={settingsLoading || pingLoading}
             onChange={setProperty('radarrAddImportListExclusion')}
             value={settings?.radarrAddImportListExclusion}

diff --git a/apps/client/src/views/settings/tautulli.tsx b/apps/client/src/views/settings/tautulli.tsx
@@ -77,11 +77,11 @@ export default function Tautulli(): JSX.Element {
           </Alert>
         )}
         <Field>
-          <Label className="col-span-1" required>
+          <Label className="col-span-2 md:col-span-1" required>
             Url
           </Label>
           <Input
-            className="col-span-3"
+            className="col-span-2 md:col-span-3"
             disabled={settingsLoading || pingLoading}
             onChange={setProperty('tautulliUrl')}
             placeholder="http://localhost:8181"
@@ -90,11 +90,11 @@ export default function Tautulli(): JSX.Element {
           />
         </Field>
         <Field>
-          <Label className="col-span-1" required>
+          <Label className="col-span-2 md:col-span-1" required>
             API Key
           </Label>
           <Input
-            className="col-span-3"
+            className="col-span-2 md:col-span-3"
             disabled={settingsLoading || pingLoading}
             onChange={setProperty('tautulliApiKey')}
             required