Added size adjustment functionality for popup window

popup/App.tsx

@@ -53,6 +53,7 @@ import { getClipboardSnapshot, watchClipboardSnapshot } from "~storage/clipboard
 import { getEntryIdToTags, watchEntryIdToTags } from "~storage/entryIdToTags";
 import { getFavoriteEntryIds, watchFavoriteEntryIds } from "~storage/favoriteEntryIds";
 import { getSettings, watchSettings } from "~storage/settings";
+import { PopupSizeMap, type PopupSizeDimensions } from "~types/popupWindowSize";
 import { Tab } from "~types/tab";
 import { getEntries, watchEntries } from "~utils/storage";
 import { defaultBorderColor, lightOrDark } from "~utils/sx";
@@ -102,6 +103,8 @@ export const App = () => {
   const [settings, setSettings] = useAtom(settingsAtom);
   const setEntryIdToTags = useSetAtom(entryIdToTagsAtom);
   const [changelogViewedAt, setChangelogViewedAt] = useAtom(changelogViewedAtAtom);
+  const windowSize: PopupSizeDimensions = PopupSizeMap[settings.popupWindowSize];
+
   useEffect(() => {
     (async () => setEntries(await getEntries()))();
     watchEntries((entries) => {
@@ -152,7 +155,12 @@ export const App = () => {
   }
 
   return (
-    <Card h={isFloatingPopup ? "100%" : 600} w={isFloatingPopup ? "100%" : 700} miw={500} p="sm">
+    <Card
+      h={isFloatingPopup ? "100%" : windowSize.height}
+      w={isFloatingPopup ? "100%" : windowSize.width}
+      miw={500}
+      p="sm"
+    >
       <Stack h="100%" spacing="sm">
         <Group align="center" position="apart">
           <Group align="center" spacing="xs">

popup/components/modals/SettingsModalContent.tsx

@@ -38,6 +38,7 @@ import { z } from "zod";
 
 import { settingsAtom } from "~popup/states/atoms";
 import { setSettings } from "~storage/settings";
+import { PopupSize } from "~types/popupWindowSize";
 import { Tab } from "~types/tab";
 import { removeActionBadgeText, setActionBadgeText } from "~utils/actionBadge";
 import { getClipboardHistoryIOExport, importFile } from "~utils/importExport";
@@ -165,6 +166,27 @@ export const SettingsModalContent = () => {
               />
             </Group>
             <Divider sx={(theme) => ({ borderColor: defaultBorderColor(theme) })} />
+            <Group align="flex-start" spacing="md" position="apart" noWrap>
+              <Stack spacing={0}>
+                <Title order={6}>Window Size</Title>
+                <Text fz="xs">Select the size of the extension's window.</Text>
+              </Stack>
+              <Select
+                value={settings.popupWindowSize}
+                onChange={(newPopupWindowSize: PopupSize) =>
+                  newPopupWindowSize &&
+                  setSettings({ ...settings, popupWindowSize: newPopupWindowSize })
+                }
+                data={[
+                  { value: PopupSize.Enum.sm, label: "Small" },
+                  { value: PopupSize.Enum.md, label: "Medium" },
+                  { value: PopupSize.Enum.lg, label: "Large" },
+                ]}
+                size="xs"
+                withinPortal
+              />
+            </Group>
+            <Divider sx={(theme) => ({ borderColor: defaultBorderColor(theme) })} />
             <Group align="flex-start" spacing="md" position="apart" noWrap>
               <Stack spacing={0}>
                 <Title order={6}>Default Tab</Title>

popup/index.css

@@ -1,5 +1,5 @@
 html,
 body,
 #__plasmo {
-  height: 100%;
+  height: "auto";
 }

types/popupWindowSize.ts

@@ -0,0 +1,12 @@
+import { z } from "zod";
+
+export const PopupSize = z.enum(["sm", "md", "lg"]);
+export type PopupSize = z.infer<typeof PopupSize>;
+
+export const PopupSizeMap = {
+  sm: { height: 400, width: 300 },
+  md: { height: 500, width: 500 },
+  lg: { height: 600, width: 700 },
+} as const;
+
+export type PopupSizeDimensions = (typeof PopupSizeMap)[PopupSize];

types/settings.ts

@@ -1,5 +1,6 @@
 import { z } from "zod";
 
+import { PopupSize } from "./popupWindowSize";
 import { Tab } from "./tab";
 
 // DO NOT REUSE DEPRECATED FIELDS.
@@ -12,6 +13,7 @@ export const defaultSettings = {
   themeV2: "system",
   localItemLimit: null,
   localItemCharacterLimit: null,
+  popupWindowSize: PopupSize.Enum.md,
 };
 
 export const Settings = z
@@ -24,6 +26,7 @@ export const Settings = z
     themeV2: z.string().default(defaultSettings.themeV2),
     localItemLimit: z.number().nullable().default(defaultSettings.localItemLimit),
     localItemCharacterLimit: z.number().nullable().default(defaultSettings.localItemCharacterLimit),
+    popupWindowSize: PopupSize.default(defaultSettings.popupWindowSize),
   })
   .default(defaultSettings);
 export type Settings = z.infer<typeof Settings>;