Made the collapsing and expanding transitions

smoother for the semester and transfer bank tiles

src/components/planner/Tiles/SemesterTile.tsx

@@ -93,11 +93,43 @@ export const MemoizedSemesterTile = React.memo(
       );
     };
 
+    const outerRef = useRef(null);
+    function toggleHeight() {
+      if (open) {
+        collapseSection(outerRef.current!);
+      } 
+      else {
+        expandSection(outerRef.current!);
+      }
+    }
+
+    function collapseSection(element: HTMLElement) {
+      var sectionHeight = element.scrollHeight;
+      setTimeout(() => {
+        element.style.height = sectionHeight + 'px';
+        requestAnimationFrame(function() {
+          element.style.height = ((outerRef.current! as HTMLElement).childNodes[1].lastChild?.textContent === 'Drag courses here') ? '140px' : '170px';
+        }); 
+      }, 100);
+    }
+
+    function expandSection(element: HTMLElement) {
+      let zero = performance.now();
+      requestAnimationFrame(animate);
+      function animate() {
+        const value = (performance.now() - zero) / 700;
+        if (value < 1) {
+          element.style.height = (element.scrollHeight + 8) + 'px';
+          requestAnimationFrame(animate);
+        }
+      }
+    }
+
     // QUESTION: isValid color?
     return (
       <div
-        ref={ref}
-        className={`tutorial-editor-3 flex h-fit select-none flex-col gap-y-2 overflow-hidden rounded-2xl border border-neutral-300 ${
+        ref={outerRef}
+        className={`tutorial-editor-3 flex h-fit select-none flex-col gap-y-2 overflow-hidden rounded-2xl border border-neutral-300 transition-all duration-700 ease-in-out ${
           semester.locked ? 'bg-neutral-200' : 'bg-white'
         }`}
       >
@@ -110,7 +142,10 @@ export const MemoizedSemesterTile = React.memo(
                   open ? '-rotate-90' : 'rotate-90'
                 } ml-auto h-3 w-3 transform cursor-pointer text-neutral-500 transition-all duration-500`}
                 fontSize="inherit"
-                onClick={() => setOpen(!open)}
+                onClick={(MouseEvent) => {
+                  toggleHeight();
+                  setOpen(!open);
+                }}
               />
             </div>
           </article>
@@ -153,8 +188,8 @@ export const MemoizedSemesterTile = React.memo(
             />
           )}
           <article
-            className={`mb-5 flex flex-col gap-y-4 overflow-hidden transition-all duration-700 ${
-              open ? 'max-h-[999px]' : 'max-h-0'
+            className={`mb-5 flex flex-col gap-y-4 overflow-hidden transition-all duration-700 ease-in-out ${
+              open ? 'h-full' : 'h-0'
             }`}
           >
             {semester.courses.map((course) => (

src/components/planner/TransferBank.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { FC, useState, useRef } from 'react';
 
 import ChevronIcon from '@/icons/ChevronIcon';
 
@@ -9,22 +9,55 @@ interface TransferBankProps {
 const TransferBank: FC<TransferBankProps> = ({ transferCredits }) => {
   const [open, setOpen] = useState(true);
 
+  const bankRef = useRef(null);
+  function toggleHeight() {
+    if (open) {
+      collapseSection(bankRef.current!);
+    } 
+    else {
+      expandSection(bankRef.current!);
+    }
+  }
+
+  function collapseSection(element: HTMLElement) {
+    var sectionHeight = element.scrollHeight;
+    setTimeout(() => {
+      element.style.height = sectionHeight + 'px';
+      requestAnimationFrame(function() {
+        element.style.height = '50px';
+      }); 
+    }, 100);
+  }
+
+  function expandSection(element: HTMLElement) {
+    let zero = performance.now();
+    requestAnimationFrame(animate);
+    function animate() {
+      const value = (performance.now() - zero) / 1000;
+      if (value < 1) {
+        element.style.height = element.scrollHeight + 'px';
+        requestAnimationFrame(animate);
+      }
+    }
+  }
+
   return (
-    <section className="w-full rounded-2xl border border-neutral-200 bg-generic-white px-5 py-3 shadow-sm">
+    <section ref={bankRef} className="w-full rounded-2xl border border-neutral-200 bg-generic-white px-5 py-3 shadow-sm flex-shrink-0 overflow-hidden transition-all duration-1000 ease-in-out">
       <article className="flex items-center justify-between">
         <h5 className="text-xl font-semibold text-primary-900">Transfer Credits</h5>
         <ChevronIcon
           className={`${
             open ? '-rotate-90' : 'rotate-90'
           } h-3 w-3 transform cursor-pointer text-neutral-500 transition-all duration-500`}
           fontSize="inherit"
-          onClick={() => setOpen(!open)}
+          onClick={() => {
+            toggleHeight();
+            setOpen(!open);
+          }}
         />
       </article>
       <ol
-        className={`mt-4 flex flex-wrap gap-x-10 gap-y-3 overflow-hidden transition-all duration-1000 ${
-          open ? 'max-h-[999px]' : 'max-h-0'
-        }`}
+        className={`mt-4 flex flex-wrap gap-x-10 gap-y-3 transition-all duration-1000 ease-in-out`}
       >
         {transferCredits.map((credit, i) => (
           <li

venv/bin/Activate.ps1

@@ -0,0 +1,247 @@
+<#
+.Synopsis
+Activate a Python virtual environment for the current PowerShell session.
+
+.Description
+Pushes the python executable for a virtual environment to the front of the
+$Env:PATH environment variable and sets the prompt to signify that you are
+in a Python virtual environment. Makes use of the command line switches as
+well as the `pyvenv.cfg` file values present in the virtual environment.
+
+.Parameter VenvDir
+Path to the directory that contains the virtual environment to activate. The
+default value for this is the parent of the directory that the Activate.ps1
+script is located within.
+
+.Parameter Prompt
+The prompt prefix to display when this virtual environment is activated. By
+default, this prompt is the name of the virtual environment folder (VenvDir)
+surrounded by parentheses and followed by a single space (ie. '(.venv) ').
+
+.Example
+Activate.ps1
+Activates the Python virtual environment that contains the Activate.ps1 script.
+
+.Example
+Activate.ps1 -Verbose
+Activates the Python virtual environment that contains the Activate.ps1 script,
+and shows extra information about the activation as it executes.
+
+.Example
+Activate.ps1 -VenvDir C:\Users\MyUser\Common\.venv
+Activates the Python virtual environment located in the specified location.
+
+.Example
+Activate.ps1 -Prompt "MyPython"
+Activates the Python virtual environment that contains the Activate.ps1 script,
+and prefixes the current prompt with the specified string (surrounded in
+parentheses) while the virtual environment is active.
+
+.Notes
+On Windows, it may be required to enable this Activate.ps1 script by setting the
+execution policy for the user. You can do this by issuing the following PowerShell
+command:
+
+PS C:\> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
+
+For more information on Execution Policies: 
+https://go.microsoft.com/fwlink/?LinkID=135170
+
+#>
+Param(
+    [Parameter(Mandatory = $false)]
+    [String]
+    $VenvDir,
+    [Parameter(Mandatory = $false)]
+    [String]
+    $Prompt
+)
+
+<# Function declarations --------------------------------------------------- #>
+
+<#
+.Synopsis
+Remove all shell session elements added by the Activate script, including the
+addition of the virtual environment's Python executable from the beginning of
+the PATH variable.
+
+.Parameter NonDestructive
+If present, do not remove this function from the global namespace for the
+session.
+
+#>
+function global:deactivate ([switch]$NonDestructive) {
+    # Revert to original values
+
+    # The prior prompt:
+    if (Test-Path -Path Function:_OLD_VIRTUAL_PROMPT) {
+        Copy-Item -Path Function:_OLD_VIRTUAL_PROMPT -Destination Function:prompt
+        Remove-Item -Path Function:_OLD_VIRTUAL_PROMPT
+    }
+
+    # The prior PYTHONHOME:
+    if (Test-Path -Path Env:_OLD_VIRTUAL_PYTHONHOME) {
+        Copy-Item -Path Env:_OLD_VIRTUAL_PYTHONHOME -Destination Env:PYTHONHOME
+        Remove-Item -Path Env:_OLD_VIRTUAL_PYTHONHOME
+    }
+
+    # The prior PATH:
+    if (Test-Path -Path Env:_OLD_VIRTUAL_PATH) {
+        Copy-Item -Path Env:_OLD_VIRTUAL_PATH -Destination Env:PATH
+        Remove-Item -Path Env:_OLD_VIRTUAL_PATH
+    }
+
+    # Just remove the VIRTUAL_ENV altogether:
+    if (Test-Path -Path Env:VIRTUAL_ENV) {
+        Remove-Item -Path env:VIRTUAL_ENV
+    }
+
+    # Just remove VIRTUAL_ENV_PROMPT altogether.
+    if (Test-Path -Path Env:VIRTUAL_ENV_PROMPT) {
+        Remove-Item -Path env:VIRTUAL_ENV_PROMPT
+    }
+
+    # Just remove the _PYTHON_VENV_PROMPT_PREFIX altogether:
+    if (Get-Variable -Name "_PYTHON_VENV_PROMPT_PREFIX" -ErrorAction SilentlyContinue) {
+        Remove-Variable -Name _PYTHON_VENV_PROMPT_PREFIX -Scope Global -Force
+    }
+
+    # Leave deactivate function in the global namespace if requested:
+    if (-not $NonDestructive) {
+        Remove-Item -Path function:deactivate
+    }
+}
+
+<#
+.Description
+Get-PyVenvConfig parses the values from the pyvenv.cfg file located in the
+given folder, and returns them in a map.
+
+For each line in the pyvenv.cfg file, if that line can be parsed into exactly
+two strings separated by `=` (with any amount of whitespace surrounding the =)
+then it is considered a `key = value` line. The left hand string is the key,
+the right hand is the value.
+
+If the value starts with a `'` or a `"` then the first and last character is
+stripped from the value before being captured.
+
+.Parameter ConfigDir
+Path to the directory that contains the `pyvenv.cfg` file.
+#>
+function Get-PyVenvConfig(
+    [String]
+    $ConfigDir
+) {
+    Write-Verbose "Given ConfigDir=$ConfigDir, obtain values in pyvenv.cfg"
+
+    # Ensure the file exists, and issue a warning if it doesn't (but still allow the function to continue).
+    $pyvenvConfigPath = Join-Path -Resolve -Path $ConfigDir -ChildPath 'pyvenv.cfg' -ErrorAction Continue
+
+    # An empty map will be returned if no config file is found.
+    $pyvenvConfig = @{ }
+
+    if ($pyvenvConfigPath) {
+
+        Write-Verbose "File exists, parse `key = value` lines"
+        $pyvenvConfigContent = Get-Content -Path $pyvenvConfigPath
+
+        $pyvenvConfigContent | ForEach-Object {
+            $keyval = $PSItem -split "\s*=\s*", 2
+            if ($keyval[0] -and $keyval[1]) {
+                $val = $keyval[1]
+
+                # Remove extraneous quotations around a string value.
+                if ("'""".Contains($val.Substring(0, 1))) {
+                    $val = $val.Substring(1, $val.Length - 2)
+                }
+
+                $pyvenvConfig[$keyval[0]] = $val
+                Write-Verbose "Adding Key: '$($keyval[0])'='$val'"
+            }
+        }
+    }
+    return $pyvenvConfig
+}
+
+
+<# Begin Activate script --------------------------------------------------- #>
+
+# Determine the containing directory of this script
+$VenvExecPath = Split-Path -Parent $MyInvocation.MyCommand.Definition
+$VenvExecDir = Get-Item -Path $VenvExecPath
+
+Write-Verbose "Activation script is located in path: '$VenvExecPath'"
+Write-Verbose "VenvExecDir Fullname: '$($VenvExecDir.FullName)"
+Write-Verbose "VenvExecDir Name: '$($VenvExecDir.Name)"
+
+# Set values required in priority: CmdLine, ConfigFile, Default
+# First, get the location of the virtual environment, it might not be
+# VenvExecDir if specified on the command line.
+if ($VenvDir) {
+    Write-Verbose "VenvDir given as parameter, using '$VenvDir' to determine values"
+}
+else {
+    Write-Verbose "VenvDir not given as a parameter, using parent directory name as VenvDir."
+    $VenvDir = $VenvExecDir.Parent.FullName.TrimEnd("\\/")
+    Write-Verbose "VenvDir=$VenvDir"
+}
+
+# Next, read the `pyvenv.cfg` file to determine any required value such
+# as `prompt`.
+$pyvenvCfg = Get-PyVenvConfig -ConfigDir $VenvDir
+
+# Next, set the prompt from the command line, or the config file, or
+# just use the name of the virtual environment folder.
+if ($Prompt) {
+    Write-Verbose "Prompt specified as argument, using '$Prompt'"
+}
+else {
+    Write-Verbose "Prompt not specified as argument to script, checking pyvenv.cfg value"
+    if ($pyvenvCfg -and $pyvenvCfg['prompt']) {
+        Write-Verbose "  Setting based on value in pyvenv.cfg='$($pyvenvCfg['prompt'])'"
+        $Prompt = $pyvenvCfg['prompt'];
+    }
+    else {
+        Write-Verbose "  Setting prompt based on parent's directory's name. (Is the directory name passed to venv module when creating the virtual environment)"
+        Write-Verbose "  Got leaf-name of $VenvDir='$(Split-Path -Path $venvDir -Leaf)'"
+        $Prompt = Split-Path -Path $venvDir -Leaf
+    }
+}
+
+Write-Verbose "Prompt = '$Prompt'"
+Write-Verbose "VenvDir='$VenvDir'"
+
+# Deactivate any currently active virtual environment, but leave the
+# deactivate function in place.
+deactivate -nondestructive
+
+# Now set the environment variable VIRTUAL_ENV, used by many tools to determine
+# that there is an activated venv.
+$env:VIRTUAL_ENV = $VenvDir
+
+if (-not $Env:VIRTUAL_ENV_DISABLE_PROMPT) {
+
+    Write-Verbose "Setting prompt to '$Prompt'"
+
+    # Set the prompt to include the env name
+    # Make sure _OLD_VIRTUAL_PROMPT is global
+    function global:_OLD_VIRTUAL_PROMPT { "" }
+    Copy-Item -Path function:prompt -Destination function:_OLD_VIRTUAL_PROMPT
+    New-Variable -Name _PYTHON_VENV_PROMPT_PREFIX -Description "Python virtual environment prompt prefix" -Scope Global -Option ReadOnly -Visibility Public -Value $Prompt
+
+    function global:prompt {
+        Write-Host -NoNewline -ForegroundColor Green "($_PYTHON_VENV_PROMPT_PREFIX) "
+        _OLD_VIRTUAL_PROMPT
+    }
+    $env:VIRTUAL_ENV_PROMPT = $Prompt
+}
+
+# Clear PYTHONHOME
+if (Test-Path -Path Env:PYTHONHOME) {
+    Copy-Item -Path Env:PYTHONHOME -Destination Env:_OLD_VIRTUAL_PYTHONHOME
+    Remove-Item -Path Env:PYTHONHOME
+}
+
+# Add the venv to the PATH
+Copy-Item -Path Env:PATH -Destination Env:_OLD_VIRTUAL_PATH
+$Env:PATH = "$VenvExecDir$([System.IO.Path]::PathSeparator)$Env:PATH"