From cd80acf63fc9297019e842b7c0d8c3482faab6e1 Mon Sep 17 00:00:00 2001 From: Maximilian Liebmann Date: Sun, 11 May 2025 16:35:22 +0200 Subject: [PATCH 1/4] feat: added tabs to settings window and created general settings window design --- src/app/settings/page.tsx | 511 ++++++++++++++++++++++++++++++++++---- 1 file changed, 459 insertions(+), 52 deletions(-) diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx index a0a1d37..d371912 100644 --- a/src/app/settings/page.tsx +++ b/src/app/settings/page.tsx @@ -11,6 +11,15 @@ import { import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; +import { ScrollableSettingsWrapper } from '@/components/wrappers/settings-scroll'; // Adjust path as needed +import { Switch } from '@/components/ui/switch'; // Assuming you have this or will create/import it +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; // Assuming you have this /*export default function Settings() { return ( @@ -21,59 +30,457 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; ); }*/ -export default function Settings() { +export default function SettingsPage() { return ( -
- - - General - Account - - - - - General - - Make changes to your account here. Click save when you are done. - - - -
- - -
-
- - -
- - - - - - - - - - Account Settings - - - -
- - -
-
- - -
- - - - - - - +
+
+ + + Account + Notifications + Calendar + Privacy + Appearance + + + + + + + Account Settings + + Manage your account details and preferences. + + + +
+ + +
+
+ + +

+ Email is managed by your SSO provider. +

+
+
+ + +

+ Upload a new profile picture. +

+
+
+ + +
+ +
+ + +
+
+ +

+ Permanently delete your account and all associated data. +

+
+ + + + + + + + + + + + + + Notification Preferences + + Choose how you want to be notified. + + + +
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + + + + + + + + + + + + Calendar & Availability + + Manage your calendar display, default availability, and iCal + integrations. + + + +
+ + Display + +
+ + +
+
+ + +
+
+ + +
+
+ +
+ + Availability + +
+ +

+ Define your typical available hours (e.g., + Monday-Friday, 9 AM - 5 PM). +

+ +
+
+ +

+ Min time before a booking can be made. +

+
+ +
+
+
+ +

+ Max time in advance a booking can be made. +

+ +
+
+ +
+ + iCalendar Integration + +
+ + + +
+
+ + + +
+
+ + + + + + + + + + + + + + Sharing & Privacy + + Control who can see your calendar and book time with you. + + + +
+ + +
+
+ +

+ (Override for Default Visibility) +
+ + This setting will override the default visibility for + your calendar. You can set specific friends or groups to + see your full calendar details. + +

+ +
+
+ + +
+
+ + +

+ Prevent specific users from seeing your calendar or + booking time. +

+
+ + + + + + + + + + + + + + Appearance + + Customize the look and feel of the application. + + + +
+ + +
+
+ + +
+
+ + +
+ + + + + + + + + +
); } From e9b31b45fb1fc5b1b70256adb818f645c102f519 Mon Sep 17 00:00:00 2001 From: Maximilian Liebmann Date: Sun, 11 May 2025 16:48:41 +0200 Subject: [PATCH 2/4] style: standardize quotes and formatting in Select, Separator, and Switch components --- src/components/ui/select.tsx | 92 ++++++++++++++++----------------- src/components/ui/separator.tsx | 20 +++---- src/components/ui/switch.tsx | 22 ++++---- 3 files changed, 67 insertions(+), 67 deletions(-) diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx index dcbbc0c..90f7ef0 100644 --- a/src/components/ui/select.tsx +++ b/src/components/ui/select.tsx @@ -1,70 +1,70 @@ -"use client" +'use client'; -import * as React from "react" -import * as SelectPrimitive from "@radix-ui/react-select" -import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react" +import * as React from 'react'; +import * as SelectPrimitive from '@radix-ui/react-select'; +import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'; -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils'; function Select({ ...props }: React.ComponentProps) { - return + return ; } function SelectGroup({ ...props }: React.ComponentProps) { - return + return ; } function SelectValue({ ...props }: React.ComponentProps) { - return + return ; } function SelectTrigger({ className, - size = "default", + size = 'default', children, ...props }: React.ComponentProps & { - size?: "sm" | "default" + size?: 'sm' | 'default'; }) { return ( {children} - + - ) + ); } function SelectContent({ className, children, - position = "popper", + position = 'popper', ...props }: React.ComponentProps) { return ( {children} @@ -82,7 +82,7 @@ function SelectContent({ - ) + ); } function SelectLabel({ @@ -91,11 +91,11 @@ function SelectLabel({ }: React.ComponentProps) { return ( - ) + ); } function SelectItem({ @@ -105,21 +105,21 @@ function SelectItem({ }: React.ComponentProps) { return ( - + - + {children} - ) + ); } function SelectSeparator({ @@ -128,11 +128,11 @@ function SelectSeparator({ }: React.ComponentProps) { return ( - ) + ); } function SelectScrollUpButton({ @@ -141,16 +141,16 @@ function SelectScrollUpButton({ }: React.ComponentProps) { return ( - + - ) + ); } function SelectScrollDownButton({ @@ -159,16 +159,16 @@ function SelectScrollDownButton({ }: React.ComponentProps) { return ( - + - ) + ); } export { @@ -182,4 +182,4 @@ export { SelectSeparator, SelectTrigger, SelectValue, -} +}; diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx index 67c73e5..39eb020 100644 --- a/src/components/ui/separator.tsx +++ b/src/components/ui/separator.tsx @@ -1,28 +1,28 @@ -"use client" +'use client'; -import * as React from "react" -import * as SeparatorPrimitive from "@radix-ui/react-separator" +import * as React from 'react'; +import * as SeparatorPrimitive from '@radix-ui/react-separator'; -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils'; function Separator({ className, - orientation = "horizontal", + orientation = 'horizontal', decorative = true, ...props }: React.ComponentProps) { return ( - ) + ); } -export { Separator } +export { Separator }; diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx index 6a2b524..39e25af 100644 --- a/src/components/ui/switch.tsx +++ b/src/components/ui/switch.tsx @@ -1,9 +1,9 @@ -"use client" +'use client'; -import * as React from "react" -import * as SwitchPrimitive from "@radix-ui/react-switch" +import * as React from 'react'; +import * as SwitchPrimitive from '@radix-ui/react-switch'; -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils'; function Switch({ className, @@ -11,21 +11,21 @@ function Switch({ }: React.ComponentProps) { return ( - ) + ); } -export { Switch } +export { Switch }; From d16cfbcb71fdd804cb5f6340a3683133c3b07771 Mon Sep 17 00:00:00 2001 From: Maximilian Liebmann Date: Sun, 11 May 2025 16:35:22 +0200 Subject: [PATCH 3/4] feat: added tabs to settings window and created general settings window design --- src/app/settings/page.tsx | 519 +++++++++++++++++++++++++++++++++----- 1 file changed, 458 insertions(+), 61 deletions(-) diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx index a0a1d37..45974fb 100644 --- a/src/app/settings/page.tsx +++ b/src/app/settings/page.tsx @@ -1,4 +1,3 @@ -//import { RedirectButton } from '@/components/user/redirect-button'; import { Button } from '@/components/ui/button'; import { Card, @@ -11,69 +10,467 @@ import { import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; +import { ScrollableSettingsWrapper } from '@/components/wrappers/settings-scroll'; +import { Switch } from '@/components/ui/switch'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; -/*export default function Settings() { +export default function SettingsPage() { return ( -
-

Settings

- -
- ); -}*/ +
+
+ + + Account + Notifications + Calendar + Privacy + Appearance + -export default function Settings() { - return ( -
- - - General - Account - - - - - General - - Make changes to your account here. Click save when you are done. - - - -
- - -
-
- - -
- - - - - - - - - - Account Settings - - - -
- - -
-
- - -
- - - - - - - + + + + + Account Settings + + Manage your account details and preferences. + + + +
+ + +
+
+ + +

+ Email is managed by your SSO provider. +

+
+
+ + +

+ Upload a new profile picture. +

+
+
+ + +
+ +
+ + +
+
+ +

+ Permanently delete your account and all associated data. +

+
+ + + + + + + + + + + + + + Notification Preferences + + Choose how you want to be notified. + + + +
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + + + + + + + + + + + + Calendar & Availability + + Manage your calendar display, default availability, and iCal + integrations. + + + +
+ + Display + +
+ + +
+
+ + +
+
+ + +
+
+ +
+ + Availability + +
+ +

+ Define your typical available hours (e.g., + Monday-Friday, 9 AM - 5 PM). +

+ +
+
+ +

+ Min time before a booking can be made. +

+
+ +
+
+
+ +

+ Max time in advance a booking can be made. +

+ +
+
+ +
+ + iCalendar Integration + +
+ + + +
+
+ + + +
+
+ + + + + + + + + + + + + + Sharing & Privacy + + Control who can see your calendar and book time with you. + + + +
+ + +
+
+ +

+ (Override for Default Visibility) +
+ + This setting will override the default visibility for + your calendar. You can set specific friends or groups to + see your full calendar details. + +

+ +
+
+ + +
+
+ + +

+ Prevent specific users from seeing your calendar or + booking time. +

+
+ + + + + + + + + + + + + + Appearance + + Customize the look and feel of the application. + + + +
+ + +
+
+ + +
+
+ + +
+ + + + + + + + + +
); } From 90a9c5d2333697e779eeb834bdba6202d5548aed Mon Sep 17 00:00:00 2001 From: Maximilian Liebmann Date: Sun, 11 May 2025 16:48:41 +0200 Subject: [PATCH 4/4] style: standardize quotes and formatting in Select, Separator, and Switch components --- src/components/ui/select.tsx | 92 ++++++++++++++++----------------- src/components/ui/separator.tsx | 20 +++---- src/components/ui/switch.tsx | 22 ++++---- 3 files changed, 67 insertions(+), 67 deletions(-) diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx index dcbbc0c..90f7ef0 100644 --- a/src/components/ui/select.tsx +++ b/src/components/ui/select.tsx @@ -1,70 +1,70 @@ -"use client" +'use client'; -import * as React from "react" -import * as SelectPrimitive from "@radix-ui/react-select" -import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react" +import * as React from 'react'; +import * as SelectPrimitive from '@radix-ui/react-select'; +import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'; -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils'; function Select({ ...props }: React.ComponentProps) { - return + return ; } function SelectGroup({ ...props }: React.ComponentProps) { - return + return ; } function SelectValue({ ...props }: React.ComponentProps) { - return + return ; } function SelectTrigger({ className, - size = "default", + size = 'default', children, ...props }: React.ComponentProps & { - size?: "sm" | "default" + size?: 'sm' | 'default'; }) { return ( {children} - + - ) + ); } function SelectContent({ className, children, - position = "popper", + position = 'popper', ...props }: React.ComponentProps) { return ( {children} @@ -82,7 +82,7 @@ function SelectContent({ - ) + ); } function SelectLabel({ @@ -91,11 +91,11 @@ function SelectLabel({ }: React.ComponentProps) { return ( - ) + ); } function SelectItem({ @@ -105,21 +105,21 @@ function SelectItem({ }: React.ComponentProps) { return ( - + - + {children} - ) + ); } function SelectSeparator({ @@ -128,11 +128,11 @@ function SelectSeparator({ }: React.ComponentProps) { return ( - ) + ); } function SelectScrollUpButton({ @@ -141,16 +141,16 @@ function SelectScrollUpButton({ }: React.ComponentProps) { return ( - + - ) + ); } function SelectScrollDownButton({ @@ -159,16 +159,16 @@ function SelectScrollDownButton({ }: React.ComponentProps) { return ( - + - ) + ); } export { @@ -182,4 +182,4 @@ export { SelectSeparator, SelectTrigger, SelectValue, -} +}; diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx index 67c73e5..39eb020 100644 --- a/src/components/ui/separator.tsx +++ b/src/components/ui/separator.tsx @@ -1,28 +1,28 @@ -"use client" +'use client'; -import * as React from "react" -import * as SeparatorPrimitive from "@radix-ui/react-separator" +import * as React from 'react'; +import * as SeparatorPrimitive from '@radix-ui/react-separator'; -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils'; function Separator({ className, - orientation = "horizontal", + orientation = 'horizontal', decorative = true, ...props }: React.ComponentProps) { return ( - ) + ); } -export { Separator } +export { Separator }; diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx index 6a2b524..39e25af 100644 --- a/src/components/ui/switch.tsx +++ b/src/components/ui/switch.tsx @@ -1,9 +1,9 @@ -"use client" +'use client'; -import * as React from "react" -import * as SwitchPrimitive from "@radix-ui/react-switch" +import * as React from 'react'; +import * as SwitchPrimitive from '@radix-ui/react-switch'; -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils'; function Switch({ className, @@ -11,21 +11,21 @@ function Switch({ }: React.ComponentProps) { return ( - ) + ); } -export { Switch } +export { Switch };